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;
-        text-transform: uppercase;
-
-        figure {
-            width: 75%;
-            display: flex;
-            flex-flow: column;
-            margin-bottom: 1em;
-
-            button {
-                width: 100%;
-            }
-        }
+        grid-template-columns: 1fr;
     }
 }
 

client/assets/styles/menu.less

@@ -61,35 +61,6 @@
         }
     }
 
-    .inventory {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-
-        h1 {
-            margin-bottom: 0.5em;
-        }
-
-        .news {
-            padding-right: 1em;
-        }
-
-        .list {
-            letter-spacing: 0.25em;
-            text-transform: uppercase;
-            display: grid;
-            grid-template-columns: repeat(4, 1fr);
-            grid-gap: 1em;
-            flex-flow: row wrap;
-            align-items: flex-end;
-        }
-
-        figure {
-            font-size: 125%;
-            display: flex;
-            flex-flow: column;
-        }
-    }
-
     .options {
         grid-area: hdr;
 
@@ -107,3 +78,34 @@
         }
     }
 }
+
+section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+
+    h1 {
+        margin-bottom: 0.5em;
+    }
+
+    .news {
+        padding-right: 1em;
+    }
+
+    .list {
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 1em;
+        flex-flow: row wrap;
+        align-items: flex-end;
+    }
+
+    figure {
+        letter-spacing: 0.25em;
+        text-transform: uppercase;
+        font-size: 125%;
+        display: flex;
+        flex-flow: column;
+    }
+}

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>
+                    <figure>
+                        <figcaption>spawn new construct</figcaption>
+                        <button onClick={() => sendConstructSpawn()} type="submit">
+                            ¤50
+                        </button>
+                    </figure>
                     <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>
     );
 }