button madness

client/assets/styles/controls.less

@@ -26,6 +26,12 @@ aside {
         grid-gap: 0.5em 0;
     }
 
+    &.play-ctrl {
+        .controls {
+            grid-template-rows: 4fr 4fr 1fr;
+        }
+    }
+
     // fix chrome being inconsistent
     table {
         height: 100%;

client/assets/styles/menu.less

@@ -64,10 +64,18 @@
     .options {
         grid-area: hdr;
 
+        display: flex;
+
+        .logo {
+            flex: 0 1 10%;
+            margin-right: 1em;
+            border: none;
+        }
+
         button {
-            width: 25%;
+            flex: 1;
             border-top: 0;
-            border: 1px solid #222;
+            border: 2px solid #222;
             &:not(:last-child) {
                 border-right: 0;
             }
@@ -81,7 +89,6 @@
     .login {
         display: flex;
         flex-flow: column;
-        margin-bottom: 2em;
     }
 }
 

client/assets/styles/styles.less

@@ -236,12 +236,13 @@ figure.gray {
 
 header {
     .options {
-        font-size: 250%;
+        font-size: 200%;
     }
 
     button {
         height: 2em;
         // border-radius: 0.1em;
+        border: none;
         border-radius: 0;
     }
 }
@@ -254,8 +255,7 @@ header {
             border: 0;
         }
 
-        border: 1px solid #444;
-        flex: 1;
+        border: none;
     }
 }
 
@@ -273,9 +273,16 @@ li {
 }
 
 .logo {
+    height: 2em;
     background-image: url("../../src/components/svgs/mnml.2.svg");
     background-size: contain;
     background-repeat: no-repeat;
+    background-position: left;
+}
+
+.discord-btn {
+    background-image: url("./../discord.white.svg");
+    background-size: contain;
+    background-repeat: no-repeat;
     background-position: center;
 }
-