Restyle

src/app/1. features/game/game.component.html

@@ -1,11 +1,41 @@
-<header class="flex-center">
-  <h1 class="w-100">Palabritas</h1>
+<header>
+  <mat-toolbar>
+    <button
+      mat-icon-button
+      [matMenuTriggerFor]="menu"
+      class="example-icon"
+      aria-label="Example icon-button with menu icon"
+    >
+      <mat-icon>menu</mat-icon>
+    </button>
+    <mat-menu #menu="matMenu">
+      <button mat-menu-item (click)="clickNewGame()">New Game</button>
+    </mat-menu>
+
+    <span class="flex-grow-1 text-align-center">Palabs</span>
+
+    <a
+      class="github-logo d-flex align-items-center"
+      target="_blank"
+      href="https://github.com/tarrball/palabritas"
+    >
+      <img
+        src="../../../assets/github-mark-white.png"
+        alt="GitHub logo"
+        aria-label="View on GitHub"
+      />
+    </a>
+  </mat-toolbar>
 </header>
 
 <main class="flex-grow-1">
   <div class="flex-center-between">
-    <div>Points: {{ earnedPoints$ | async }}</div>
-    <div>Total Points: {{ potentialPoints$ | async }}</div>
+    <div>
+      Points: <span class="points">{{ earnedPoints$ | async }}</span>
+    </div>
+    <div>
+      Total Points: <span class="points">{{ potentialPoints$ | async }}</span>
+    </div>
   </div>
 
   <div class="flex-center hori-scroll answers-container">
@@ -40,15 +70,7 @@ <h1 class="w-100">Palabritas</h1>
     </button>
   </div>
 
-  <div class="flex-center-between">
-    <button mat-raised-button (click)="clickNewGame()">New Game</button>
+  <div class="flex-center-end">
     <button mat-raised-button (click)="clickEnter()">Enter</button>
   </div>
 </main>
-
-<footer class="flex-center-between">
-  <span>andrew@tarrball.com</span>
-  <a href="https://github.com/tarrball/palabritas" target="_blank"
-    >View on GitHub</a
-  >
-</footer>

src/app/1. features/game/game.component.sass

@@ -1,24 +1,20 @@
 :host
-  display: flex
-  flex-direction: column
   font-variant: small-caps
-  max-width: 496px
 
-header
-  h1
-    flex-grow: 1
-    text-align: center
+.github-logo
+  cursor: pointer
+  padding: 12px
 
-main
-  .letter-buttons
-    button
-      margin: 0 4px
+  img
+    height: 24px
 
-footer
-  margin-top: 64px
+main
+  margin: 0 auto
+  padding: 16px
+  max-width: 600px
 
-  span
-    text-transform: uppercase
+.points
+  font-weight: bold
 
 .answers-container
   height: 160px
@@ -27,11 +23,15 @@ footer
   min-height: 96px
 
   button
-    margin: 0 6px
+    margin: 0 4px
+
+  @media screen and (max-width: 375px)
+    button
+      min-width: 14.5%
 
 .word
   font-size: 24px
   padding: 0 8px
 
 .letter
-  padding: 0 8px
+  padding: 0 4px

src/app/app.module.ts

@@ -11,6 +11,9 @@ import { EffectsModule } from '@ngrx/effects';
 import { GameEffects } from './2. store/game/game.effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 @NgModule({
   declarations: [AppComponent, GameComponent],
@@ -19,6 +22,9 @@ import { MatButtonModule } from '@angular/material/button';
     AppRoutingModule,
     BrowserAnimationsModule,
     MatButtonModule,
+    MatIconModule,
+    MatMenuModule,
+    MatToolbarModule,
     StoreModule.forRoot(reducers, {
       metaReducers,
       runtimeChecks: {

src/styles.sass

@@ -1,3 +1,8 @@
+/* Base */
+
+body
+  margin: 0
+
 /* Utilities */
 
 .d-flex
@@ -15,6 +20,9 @@
 .justify-content-between
   justify-content: space-between !important
 
+.justify-content-end
+  justify-content: flex-end !important
+
 .h-100
   height: 100% !important
 
@@ -33,9 +41,19 @@
   @extend .flex-center
   @extend .justify-content-between
 
+.flex-center-end
+  @extend .flex-center
+  @extend .justify-content-end
+
 .hori-scroll
   overflow-x: auto
 
+.spacer
+  flex: 1 1 auto
+
+.text-align-center
+  text-align: center
+
 /* Material Overrides */
 
 app-game