some polish

ui/src/App.js

@@ -25,15 +25,27 @@ const App = () => {
 
     return (
         <div className="zrok">
-            <header className="zrok-header">
-                <h1>zrok</h1>
-                <Version/>
-                <Identities user={user}/>
-                <Logout user={user} logout={() => {
-                    setUser(null);
-                    localStorage.clear();
-                }}/>
-            </header>
+            <div className="container">
+                <div className="header">
+                    <img src="ziggy.png" width="100px"/>
+                    <p className="title">zrok</p>
+                    <div class="header-left">
+                        <div>
+                            <Logout user={user} logout={() => {
+                                setUser(null);
+                                localStorage.clear();
+                            }}/>
+                        </div>
+                        <div>
+                            <Version/>
+                        </div>
+                    </div>
+                </div>
+                <div className="main">
+
+                    <Identities user={user}/>
+                </div>
+            </div>
         </div>
     );
 }

ui/src/Logout.js

@@ -4,7 +4,7 @@ const Logout = (props) => {
     }
 
     return (
-        <button onClick={onClick}>Log Out {props.user.email}</button>
+        <a onClick={onClick}>[x] {props.user.email}</a>
     );
 }
 

ui/src/index.css

@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'JetBrains Mono', Consolas, 'Courier New', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
@@ -15,3 +13,36 @@ code {
 h1, h2, h3, h4, h5, h6 {
   font-family: 'Russo One', sans-serif;
 }
+
+.title {
+  font-family: 'Russo One', sans-serif;
+  font-size: 3em;
+}
+
+.container {
+  display: grid;
+  margin-left: 10%;
+  margin-right: 10%;
+}
+
+.header {
+  background-color: #3c2693;
+  color: white;
+  padding-left: 2em;
+  padding-right: 2em;
+  display: flex;
+}
+
+.header-left {
+  width: 100%;
+  display: grid;
+  align-items: center;
+  justify-content: right;
+}
+.header-left div {
+  text-align: right;
+}
+
+.main {
+  padding: 2em;
+}