feat(angular): updated design and branding (#13)

angular/src/app/components/navigation-bar/game-info/game-info.component.html

@@ -2,7 +2,7 @@
   <ng-container *ngIf="currentGameInfo">
     <span class="text-muted" *transloco="let n; read 'deckNames'">{{ n(currentGameInfo.deck) }}</span>
   </ng-container>
-  <button class="btn btn-light btn-sm mx-2"
+  <button class="btn btn-outline-light btn-sm mx-2"
           [attr.aria-label]="t('edit')"
           [ngbTooltip]="t('edit')"
           placement="bottom"

angular/src/app/components/navigation-bar/game-name/game-name.component.html

@@ -5,7 +5,7 @@
   <ng-container *ngIf="currentGameInfo; else brandingContent">
     <div class="fs-4">
       {{ currentGameInfo.name }}
-      <button class="btn btn-light btn-sm"
+      <button class="btn btn-outline-light btn-sm"
               *transloco="let t"
               [attr.aria-label]="t('buttons.link')"
               [ngbTooltip]="t('buttons.link')"

angular/src/app/components/navigation-bar/navigation-bar.component.html

@@ -1,4 +1,4 @@
-<nav class="bg-light">
+<nav class="bg-primary">
   <div class="container-fluid d-flex flex-row align-items-center p-2 ps-3 pe-3">
     <div>
       <img class="me-3" src="assets/icon.svg" alt="Icon" height="48px" />

angular/src/app/components/navigation-bar/navigation-bar.component.scss

@@ -0,0 +1,7 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
+nav {
+  border-bottom: 1px solid $gray-400;
+  box-shadow: 0 0 10px 0 $gray-400;
+}

angular/src/app/components/navigation-bar/navigation-bar.component.ts

@@ -2,7 +2,8 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'shpp-navigation-bar',
-  templateUrl: './navigation-bar.component.html'
+  templateUrl: './navigation-bar.component.html',
+  styleUrls: ['./navigation-bar.component.scss']
 })
 export class NavigationBarComponent {
 

angular/src/app/components/navigation-bar/player-info/player-info.component.html

@@ -12,7 +12,7 @@ <h4 class="offcanvas-title" id="offcanvas-basic-title">{{ t('actions.editPlayerN
   <div>
     {{ userInformation.getName() }}
     <div class="btn-group mx-2" *transloco="let t">
-      <button class="btn btn-light btn-sm"
+      <button class="btn btn-outline-light btn-sm"
               [attr.aria-label]="t('buttons.edit')"
               [ngbTooltip]="t('navbar.playerInfo.actions.editPlayerName')"
               placement="bottom"
@@ -24,8 +24,8 @@ <h4 class="offcanvas-title" id="offcanvas-basic-title">{{ t('actions.editPlayerN
     </div>
   </div>
 
-  <div class="form-check form-switch form-check-reverse" *transloco="let t">
-    <input class="form-check-input" type="checkbox" id="spectator-checkbox"
+  <div class="form-check form-switch form-check-reverse mt-1" *transloco="let t">
+    <input class="form-check-input" type="checkbox" role="switch" id="spectator-checkbox"
            [checked]="userInformation.isSpectator()"
            (change)="toggleSpectator()">
     <label class="form-check-label text-muted" for="spectator-checkbox">

angular/src/app/pages/ongoing-game-page/card-table/player-hand/player-hand.component.scss

@@ -1,5 +1,5 @@
 .face-down {
-  background-color: cornflowerblue;
+  background-color: var(--card-color);
   outline-offset: -5px;
   outline-color: white;
 }

angular/src/app/pages/ongoing-game-page/ongoing-game-page.component.scss

@@ -1,5 +1,13 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
 :host {
   flex-grow: 1;
   display: flex;
   flex-direction: column;
 }
+
+.bg-light {
+  border-top: 1px solid $gray-100;
+  box-shadow: 0 0 10px 0 $gray-300;
+}

angular/src/app/pages/ongoing-game-page/turn-summary/turn-summary.component.scss

@@ -1,7 +1,10 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+
 .card-border {
   height: 75px;
   &.muted {
-    outline-color: gray;
+    outline-color: $gray-600;
     outline-width: 2px;
   }
 }

angular/src/assets/favicon/browserconfig.xml

@@ -3,7 +3,7 @@
     <msapplication>
         <tile>
             <square150x150logo src="/assets/favicon/mstile-150x150.png"/>
-            <TileColor>#2d89ef</TileColor>
+            <TileColor>#00a300</TileColor>
         </tile>
     </msapplication>
 </browserconfig>