Add logo to background

Author: code-asher

src/browser/app.css

@@ -21,3 +21,21 @@ body {
 button {
   font-family: inherit;
 }
+
+.coder-splash {
+  align-items: center;
+  box-sizing: border-box;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  z-index: 5;
+}
+
+.coder-splash > .logo {
+  color: rgba(255, 255, 255, 0.03);
+  width: 100%;
+}

src/browser/app.tsx

@@ -3,6 +3,7 @@ import * as React from "react"
 import { Application, isExecutableApplication } from "../common/api"
 import { HttpError } from "../common/http"
 import { normalize, Options } from "../common/util"
+import { Logo } from "./components/logo"
 import { Modal } from "./components/modal"
 
 export interface AppProps {
@@ -31,10 +32,19 @@ const App: React.FunctionComponent<AppProps> = (props) => {
 
   return (
     <>
+      {!app || !app.loaded ? (
+        <div className="coder-splash">
+          <Logo />
+        </div>
+      ) : (
+        undefined
+      )}
       <Modal app={app} setApp={setApp} authed={authed} error={error} setError={setError} />
       {authed && app && app.embedPath ? (
         <iframe id="iframe" src={normalize(`${getBasepath()}/${app.embedPath}/`, true)}></iframe>
-      ) : null}
+      ) : (
+        undefined
+      )}
     </>
   )
 }

src/browser/components/logo.tsx

@@ -0,0 +1,61 @@
+import * as React from "react"
+
+export const Logo = (props: React.SVGProps<SVGSVGElement>): JSX.Element => (
+  <svg
+    className="logo"
+    version="1.1"
+    id="Layer_1"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlnsXlink="http://www.w3.org/1999/xlink"
+    x="0px"
+    y="0px"
+    viewBox="0 0 172 117"
+    xmlSpace="preserve"
+    fill="currentcolor"
+    {...props}
+  >
+    <g>
+      <g>
+        <path
+          className="st0"
+          d="M164.8,50.9c-3.3,0-5.5-1.9-5.5-5.8V22.7c0-14.3-6-22.2-21.5-22.2h-7.2v15.1h2.2c6.1,0,9,3.3,9,9.2v19.8
+c0,8.6,2.6,12.1,8.3,13.9c-5.7,1.7-8.3,5.3-8.3,13.9c0,4.9,0,9.8,0,14.7c0,4.1,0,8.1-1.1,12.2c-1.1,3.8-2.9,7.4-5.4,10.5
+c-1.4,1.8-3,3.3-4.8,4.7v2h7.2c15.5,0,21.5-7.9,21.5-22.2V71.9c0-4,2.1-5.8,5.5-5.8h4.1V51h-4V50.9L164.8,50.9z"
+        />
+        <path
+          className="st0"
+          d="M115.8,23.3H93.6c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h22.3c0.5,0,0.9,0.4,0.9,0.9v1.7
+C116.8,22.9,116.3,23.3,115.8,23.3z"
+        />
+        <path
+          className="st0"
+          d="M119.6,44.9h-16.2c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h16.2c0.5,0,0.9,0.4,0.9,0.9V44
+C120.5,44.4,120.1,44.9,119.6,44.9z"
+        />
+        <path
+          className="st0"
+          d="M126,34.1H93.6c-0.5,0-0.9-0.4-0.9-0.9v-1.7c0-0.5,0.4-0.9,0.9-0.9h32.3c0.5,0,0.9,0.4,0.9,0.9v1.7
+C126.8,33.6,126.5,34.1,126,34.1z"
+        />
+        <g>
+          <path
+            className="st0"
+            d="M67.9,28.2c2.2,0,4.4,0.2,6.5,0.7v-4.1c0-5.8,3-9.2,9-9.2h2.2V0.5h-7.2c-15.5,0-21.5,7.9-21.5,22.2v7.4
+C60.4,28.9,64.1,28.2,67.9,28.2z"
+          />
+        </g>
+        <path
+          className="st0"
+          d="M132.8,82.6c-1.6-12.7-11.4-23.3-24-25.7c-3.5-0.7-7-0.8-10.4-0.2c-0.1,0-0.1-0.1-0.2-0.1
+c-5.5-11.5-17.3-19.1-30.1-19.1S43.6,44.9,38,56.4c-0.1,0-0.1,0.1-0.2,0.1c-3.6-0.4-7.2-0.2-10.8,0.7c-12.4,3-21.8,13.4-23.5,26
+c-0.2,1.3-0.3,2.6-0.3,3.8c0,3.8,2.6,7.3,6.4,7.8c4.7,0.7,8.8-2.9,8.7-7.5c0-0.7,0-1.5,0.1-2.2c0.8-6.4,5.7-11.8,12.1-13.3
+c2-0.5,4-0.6,5.9-0.3c6.1,0.8,12.1-2.3,14.7-7.7c1.9-4,4.9-7.5,8.9-9.4c4.4-2.1,9.4-2.4,14-0.8c4.8,1.7,8.4,5.3,10.6,9.8
+c2.3,4.4,3.4,7.5,8.3,8.1c2,0.3,7.6,0.2,9.7,0.1c4.1,0,8.2,1.4,11.1,4.3c1.9,2,3.3,4.5,3.9,7.3c0.9,4.5-0.2,9-2.9,12.4
+c-1.9,2.4-4.5,4.2-7.4,5c-1.4,0.4-2.8,0.5-4.2,0.5c-0.8,0-1.9,0-3.2,0c-4,0-12.5,0-18.9,0c-4.4,0-7.9-3.5-7.9-7.9V78.4V63.9
+c0-1.2-1-2.2-2.2-2.2h-3.1c-6.1,0.1-11,6.9-11,14.1s0,26.3,0,26.3c0,7.8,6.3,14.1,14.1,14.1c0,0,34.7-0.1,35.2-0.1
+c8-0.8,15.4-4.9,20.4-11.2C131.5,98.8,133.8,90.8,132.8,82.6z"
+        />
+      </g>
+    </g>
+  </svg>
+)