Display game code with more contrast

frontend/prebuild/src/app/game/game.component.html

@@ -1,9 +1,8 @@
 <div id="titlebar" class="navbar">
   <h1>Liberty Bikes</h1>
-  <button id="gameIdDisplay" class='d-none btn btn-primary btn-lg' disabled>
-    Round ID
-    <span id="gameIDHolder" style="font-family:'Monaco',monospace;border:1px solid #dae1e9;letter-spacing:2px;padding:3px 8px;border-radius:4px;background-color:#f4f7fa;color:#007bff"></span>
-  </button>
+  <div id="game-code-display">
+    <h2>code: <span id="game-code"></span></h2>
+  </div>
 </div>
 <div id="game-container">
   <div id="game-board">

frontend/prebuild/src/app/game/game.component.scss

@@ -26,17 +26,37 @@ body {
   padding: 0px 5px;
 }
 
+.navbar h1 {
+  flex: 1;
+  margin: 0px;
+}
+
+.navbar h2 {
+  margin: 0px;
+}
+
 #titlebar {
   grid-area: 1 / 2 / span 1 / -1;
 
   border-bottom: $navbar-border;
 }
 
-.navbar h1 {
-  flex: 1;
+#titlebar h1 {
   margin-left: 10px;
 }
 
+#titlebar h2 {
+  margin-right: 10px;
+}
+
+#game-code-display {
+  font-weight: bolder;
+}
+
+#game-code {
+  font-size: 1.5em;
+}
+
 .navbar .btn {
   font-size: 1.5em;
   margin: 5px;

frontend/prebuild/src/app/game/game.component.ts

@@ -101,8 +101,8 @@ export class GameComponent implements OnInit {
     if (isSpectator === 'true') {
       console.log('is a spectator... showing game id');
       // Set the Round ID and make visible
-      $('#gameIDHolder').html(this.roundId);
-      const gameId = $('#gameIdDisplay');
+      $('#game-code').html(this.roundId);
+      const gameId = $('#game-code-display');
       gameId.removeClass('d-none');
       gameId.addClass('d-inline-block');
       this.gameSocket.sendText(JSON.stringify({'spectatorjoined': true}));