Make lobby pretty

src/views/Lobby.vue

@@ -85,8 +85,9 @@
           ><a :href="inviteLink">{{ inviteLink }}</a></span
         >
       </section>
+      <section class="chat"></section>
       <section class="players">
-        Players:
+        <header>Players</header>
         <ul>
           <li class="selectable" v-for="player in players" :key="player">
             {{ player }}
@@ -94,12 +95,18 @@
         </ul>
       </section>
       <section class="player-options">
-        <b-field label="Change name">
+        <b-field>
           <b-input :disabled="busy" v-model="wantedName"></b-input>
+          <p class="control">
+            <b-button
+              @click="changeName"
+              type="is-primary"
+              :disabled="!nameAvailable"
+              >Change name</b-button
+            >
+          </p>
         </b-field>
-        <b-button @click="changeName" :disabled="!nameAvailable"
-          >Change name</b-button
-        >
+        <b-button type="is-danger">Leave room</b-button>
       </section>
     </section>
   </section>
@@ -184,6 +191,32 @@
   margin: 10px;
   border: 1px solid rgba($white, 20%);
   border-radius: 10px;
+  display: grid;
+  grid-template: 50px 1fr / 200px 1fr 300px;
+
+  .info {
+    grid-column: 1 / max;
+    grid-row: 1;
+  }
+
+  .players {
+    header {
+      font-weight: bold;
+      margin-bottom: 5px;
+    }
+    grid-row: 2 / max;
+    grid-column: 1;
+  }
+
+  .chat {
+    grid-row: 2 / max;
+    grid-column: 2;
+  }
+
+  .player-options {
+    grid-row: 2 / max;
+    grid-column: 3;
+  }
 }
 
 .only-mobile {
@@ -211,6 +244,14 @@
       }
     }
   }
+
+  .room {
+    display: flex;
+    flex-flow: column;
+    & > * {
+      padding: 10px;
+    }
+  }
 }
 </style>