little style changes to lobby (#1433)

* little style changes to lobby

* fix branding

Co-authored-by: tooomm <[email protected]>

Author: mixmix

frontend/src/config.js

@@ -12,14 +12,23 @@ export const STRINGS = {
     MOTD: null, // TODO: handle overwrite of this message of the day; can be a React element
 
     FOOTER:
-      <div>
-        <strong>dr4ft</strong> is a fork of
-        the <code>drafts.ninja</code> arxanas fork of
-        the <code >draft</code> project by aeosynth.
-        Contributions welcome! &nbsp;
-        <a href='https://github.com/dr4fters/dr4ft'>
-          <img src='https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg' alt='GitHub' title='GitHub Repository' align='top' height='18' />
-        dr4fters/dr4ft</a>
+      <div style={{ padding: 10 }}>
+        <div style={{ marginBottom: 5 }}>
+          <strong>dr4ft</strong> is a fork of
+          the <code>drafts.ninja</code> arxanas fork of
+          the <code>draft</code> project by aeosynth.
+        </div>
+        <div>
+          Contributions welcome! &nbsp;
+          <a href='https://github.com/dr4fters/dr4ft'>
+            <img
+              src='https://upload.wikimedia.org/wikipedia/commons/9/91/Octicons-mark-github.svg'
+              alt='GitHub' title='GitHub Repository' align='top' height='18'
+              style={{ marginRight: 5}}
+            />
+            dr4fters/dr4ft
+          </a>
+        </div>
       </div>
   }
 };

frontend/src/lobby/Version.jsx

@@ -1,6 +1,7 @@
 /*global BUILD_DATE*/
 import React from "react";
 import PropTypes from "prop-types";
+import "./Version.scss"
 
 const getLink = (version) => (
   (/^v\d+\.\d+\.\d+$/.test(version)) ?
@@ -10,17 +11,29 @@ const getLink = (version) => (
 
 const Version = ({version, MTGJSONVersion, boosterRulesVersion}) => {
   return (
-    <p>Running Version: {" "}
-      <a href={`https://github.com/dr4fters/dr4ft/${getLink(version)}`}>
-        {version}
-      </a> (build {BUILD_DATE}) - Using <a href="https://www.mtgjson.com">MTGJSON</a> {" "}
-      card data {" "}
-      <a href={`https://mtgjson.com/changelog/version-5/#_${MTGJSONVersion.version.replace(/\./g, "-")}`}>
-        v{MTGJSONVersion.version}
-      </a> ({MTGJSONVersion.date}) and <a href={"https://github.com/taw/magic-sealed-data"}>Magic Sealed Data</a> {" "}
-        booster rules{" "}
-      commit <a href={`https://github.com/taw/magic-sealed-data/commit/${boosterRulesVersion}`}>{boosterRulesVersion.substring(0,7)}</a>
-    </p>
+    <div className="Version">
+      <div>
+        dr4ft version: {" "}
+        <a href={`https://github.com/dr4fters/dr4ft/${getLink(version)}`} className='code'>
+          <code>{version}</code>
+        </a> <span className='date'>({BUILD_DATE})</span>
+      </div>
+
+      <div>
+        Card data: <a href="https://www.mtgjson.com">MTGJSON</a> {" "}
+        <a href={`https://mtgjson.com/changelog/version-5/#_${MTGJSONVersion.version.replace(/\./g, "-")}`} className='code'>
+          <code>v{MTGJSONVersion.version}</code>
+        </a> <span className='date'>({MTGJSONVersion.date})</span>
+      </div>
+
+      <div>
+        Booster rules: {" "}
+        <a href={"https://github.com/taw/magic-sealed-data"}>Magic Sealed Data</a> {" "}
+        <a href={`https://github.com/taw/magic-sealed-data/commit/${boosterRulesVersion}`} className='code'>
+          <code>{boosterRulesVersion.substring(0, 7)}</code>
+        </a>
+      </div>
+    </div>
   );
 };
 

frontend/src/lobby/Version.scss

@@ -0,0 +1,34 @@
+.Version {
+  flex-grow: 1;
+  color: #333;
+
+  display: grid;
+  grid-auto-flow: column;
+  grid-gap: 20px;
+  align-content: end;
+
+  a {
+    color: #333;
+
+    &.code {
+      text-decoration: none;
+    }
+  }
+
+  code {
+    font-size: 14px;
+    padding: 2px 4px;
+    border: 1px solid gainsboro;
+
+    &:hover {
+      color: #fff;
+      background: #089dff;
+      border: 1px solid #089dff;
+    }
+  }
+
+  span.date {
+    font-size: 14px;
+    color: #555;
+  }
+}

frontend/src/router.js

@@ -12,6 +12,14 @@ export default function router(_App) {
   window.addEventListener("hashchange", route);
 }
 
+const Loading = () => {
+  // return null
+  return (
+    <div style={{ padding: 30 }}>
+      Loading...
+    </div>
+  )
+}
 function route() {
   let path = location.hash.slice(1);
   let [route, id] = path.split("/");
@@ -25,14 +33,14 @@ function route() {
     App.send("join", id);
     App.once("gameInfos", App.updateGameInfos);
     component = (
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={Loading()}>
         <Game id={ id } />
       </Suspense>
     );
     break;
   case "":
     component = (
-      <Suspense fallback={<div>Loading...</div>}>
+      <Suspense fallback={Loading()}>
         <Lobby />
       </Suspense>
     );

frontend/style.css

@@ -1,3 +1,7 @@
+#root {
+  height: 100%;
+}
+
 .outer {
   display: table;
   position: absolute;
@@ -272,6 +276,9 @@ input[type="checkbox"], input[type="radio"] {
   flex-grow: 1;
   margin: 0 auto;
   padding-right: 30px;
+
+  display: flex;
+  flex-direction: column;
 }
 
 .lobby-header {