menu styles

client/assets/styles/account.less

@@ -1,18 +1,19 @@
 @import 'colours.less';
 
 .account {
-    display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    grid-gap: 0 1em;
+
+    div {
+        padding-right: 2em;
+    }
 
     button {
+        width: 100%;
         display: block;
-        // height: 3em;
-        width: 75%;
     }
 
     input {
-        width: 75%;
+        width: 100%;
         height: 3em;
         display: block;
     }
@@ -31,19 +32,7 @@
     }
 
     .list {
-        letter-spacing: 0.25em;
+        grid-template-columns: 1fr;
-        text-transform: uppercase;
-
-        figure {
-            width: 75%;
-            display: flex;
-            flex-flow: column;
-            margin-bottom: 1em;
-
-            button {
-                width: 100%;
-            }
-        }
     }
 }
 

client/assets/styles/menu.less

@@ -61,7 +61,25 @@
         }
     }
 
-    .inventory {
+    .options {
+        grid-area: hdr;
+
+        button {
+            width: 25%;
+            border-top: 0;
+            border: 1px solid #222;
+            &:not(:last-child) {
+                border-right: 0;
+            }
+
+            &:last-child {
+                float: right;
+            }
+        }
+    }
+}
+
+section {
     display: grid;
     grid-template-columns: 1fr 1fr;
 
@@ -84,26 +102,10 @@
     }
 
     figure {
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
         font-size: 125%;
         display: flex;
         flex-flow: column;
     }
-    }
-
-    .options {
-        grid-area: hdr;
-
-        button {
-            width: 25%;
-            border-top: 0;
-            border: 1px solid #222;
-            &:not(:last-child) {
-                border-right: 0;
-            }
-
-            &:last-child {
-                float: right;
-            }
-        }
-    }
 }

client/src/components/account.top.jsx

@@ -206,14 +206,12 @@ class AccountStatus extends Component {
                     </button>
                 </div>
                 <div>
-                    <div class="list">
                     <figure>
                         <figcaption>spawn new construct</figcaption>
                         <button onClick={() => sendConstructSpawn()} type="submit">
                             ¤50
                         </button>
                     </figure>
-                    </div>
                     <button onClick={() => logout()}>Logout</button>
                     <button><a href={`mailto:humans@mnml.gg?subject=Account%20Support:%20${account.name}`}>✉ support</a></button>
                 </div>

client/src/components/play.jsx

@@ -89,7 +89,7 @@ function Play(args) {
 
 
     return (
-        <div class="inventory top">
+        <section class="top">
             <div class="news">
                 <h1>mnml v{VERSION}</h1>
                 <p>use the buttons on the right to join an instance.</p>
@@ -122,7 +122,7 @@ function Play(args) {
                     {shop.available.map(availableMtx)}
                 </div>
             </div>
-        </div>
+        </section>
     );
 }
 

client/src/components/shop.jsx

@@ -25,7 +25,7 @@ function Shop(args) {
     } = args;
 
     return (
-        <div class="inventory top">
+        <section class="top">
             <div class="news">
                 <h1>support the game</h1>
                 <p>
@@ -51,7 +51,7 @@ function Shop(args) {
                     <StripeBtns account={account} />
                 </Elements>
             </div>
-        </div>
+        </section>
     );
 }