Merge branch 'spencer/pwa' into 'master'

Add progressive web app support.

See merge request grassrootseconomics/cic-staff-client!8

.husky/_/husky.sh

@@ -0,0 +1,30 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    [ "$HUSKY_DEBUG" = "1" ] && echo "husky (debug) - $1"
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+    exit $exitCode
+  fi
+
+  exit 0
+fi

angular.json

@@ -26,7 +26,8 @@
             "aot": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
@@ -68,7 +69,9 @@
                   "maximumWarning": "6kb",
                   "maximumError": "10kb"
                 }
-              ]
+              ],
+              "serviceWorker": true,
+              "ngswConfigPath": "ngsw-config.json"
             },
             "dev": {
               "fileReplacements": [
@@ -110,7 +113,8 @@
             "codeCoverage": true,
             "assets": [
               "src/favicon.ico",
-              "src/assets"
+              "src/assets",
+              "src/manifest.webmanifest"
             ],
             "styles": [
               "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",

ngsw-config.json

@@ -0,0 +1,31 @@
+{
+  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
+  "index": "/index.html",
+  "assetGroups": [
+    {
+      "name": "app",
+      "installMode": "prefetch",
+      "resources": {
+        "files": [
+          "/favicon.ico",
+          "/index.html",
+          "/manifest.webmanifest",
+          "/*.css",
+          "/*.js",
+          "/assets/*.png"
+        ]
+      }
+    },
+    {
+      "name": "assets",
+      "installMode": "lazy",
+      "updateMode": "prefetch",
+      "resources": {
+        "files": [
+          "/assets/**",
+          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
+        ]
+      }
+    }
+  ]
+}

package.json

@@ -8,6 +8,7 @@
     "start:prod": "ng serve --prod",
     "build:dev": "ng build  -c dev",
     "build:prod": "ng build --prod",
+    "start:pwa": "npm run build:prod && http-server -p 4200 dist/cic-staff-client",
     "test:dev": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
@@ -25,6 +26,7 @@
     "@angular/platform-browser": "~10.2.0",
     "@angular/platform-browser-dynamic": "~10.2.0",
     "@angular/router": "~10.2.0",
+    "@angular/service-worker": "~10.2.0",
     "@popperjs/core": "^2.5.4",
     "angular-datatables": "^9.0.2",
     "block-syncer": "^0.2.4",
@@ -36,6 +38,7 @@
     "datatables.net": "^1.10.22",
     "datatables.net-dt": "^1.10.22",
     "ethers": "^5.0.31",
+    "http-server": "^0.12.3",
     "jquery": "^3.5.1",
     "mocha": "^8.2.1",
     "moolb": "^0.1.0",

src/app/app.component.html

@@ -1 +1,2 @@
+<app-network-status></app-network-status>
 <router-outlet (activate)="onResize(mediaQuery)"></router-outlet>

src/app/app.component.ts

@@ -1,6 +1,7 @@
-import {ChangeDetectionStrategy, Component, HostListener} from '@angular/core';
+import {ChangeDetectionStrategy, Component, HostListener, OnInit} from '@angular/core';
 import {AuthService, ErrorDialogService, LoggingService, TransactionService} from '@app/_services';
 import {catchError} from 'rxjs/operators';
+import {SwUpdate} from '@angular/service-worker';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,7 @@ import {catchError} from 'rxjs/operators';
   styleUrls: ['./app.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'CICADA';
   readyStateTarget: number = 3;
   readyState: number = 0;
@@ -18,7 +19,8 @@ export class AppComponent {
     private authService: AuthService,
     private transactionService: TransactionService,
     private loggingService: LoggingService,
-    private errorDialogService: ErrorDialogService
+    private errorDialogService: ErrorDialogService,
+    private swUpdate: SwUpdate
   ) {
     (async () => {
       try {
@@ -39,6 +41,16 @@ export class AppComponent {
     this.onResize(this.mediaQuery);
   }
 
+  ngOnInit(): void {
+    if (!this.swUpdate.isEnabled) {
+      this.swUpdate.available.subscribe(() => {
+        if (confirm('New Version available. Load New Version?')) {
+          window.location.reload();
+        }
+      });
+    }
+  }
+
   // Load resize
   onResize(e): void {
     const sidebar: HTMLElement = document.getElementById('sidebar');

src/app/app.module.ts

@@ -17,6 +17,7 @@ import {LoggerModule} from 'ngx-logger';
 import {environment} from '@src/environments/environment';
 import {ErrorInterceptor, HttpConfigInterceptor, LoggingInterceptor} from '@app/_interceptors';
 import {MutablePgpKeyStore} from '@app/_pgp';
+import { ServiceWorkerModule } from '@angular/service-worker';
 
 @NgModule({
   declarations: [
@@ -35,7 +36,8 @@ import {MutablePgpKeyStore} from '@app/_pgp';
       serverLogLevel: environment.serverLogLevel,
       serverLoggingUrl: `${environment.loggingUrl}/api/logs/`,
       disableConsoleLogging: false
-    })
+    }),
+    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
   ],
   providers: [
     AuthGuard,

src/app/shared/network-status/network-status.component.html

@@ -0,0 +1,13 @@
+<nav class="navbar navbar-dark bg-dark">
+  <h1 class="navbar-brand">
+    <div *ngIf="noInternetConnection; then offlineBlock else onlineBlock"></div>
+    <ng-template #offlineBlock>
+      <strong style="color: red;">OFFLINE </strong>
+      <img width="20rem" src="assets/images/no-wifi.svg" alt="Internet Disconnected">
+    </ng-template>
+    <ng-template #onlineBlock>
+      <strong style="color: lawngreen;">ONLINE </strong>
+      <img width="20rem" src="assets/images/wifi.svg" alt="Internet Connected">
+    </ng-template>
+  </h1>
+</nav>

src/app/shared/network-status/network-status.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NetworkStatusComponent } from './network-status.component';
+
+describe('NetworkStatusComponent', () => {
+  let component: NetworkStatusComponent;
+  let fixture: ComponentFixture<NetworkStatusComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ NetworkStatusComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NetworkStatusComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/shared/network-status/network-status.component.ts

@@ -0,0 +1,30 @@
+import {Component, OnInit, ChangeDetectionStrategy, ChangeDetectorRef} from '@angular/core';
+
+@Component({
+  selector: 'app-network-status',
+  templateUrl: './network-status.component.html',
+  styleUrls: ['./network-status.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class NetworkStatusComponent implements OnInit {
+  noInternetConnection: boolean = !navigator.onLine;
+
+  constructor(
+    private cdr: ChangeDetectorRef,
+  ) {
+    this.handleNetworkChange();
+  }
+
+  ngOnInit(): void {
+  }
+
+  handleNetworkChange(): void {
+    setTimeout(() => {
+      if (!navigator.onLine !== this.noInternetConnection) {
+        this.noInternetConnection = !navigator.onLine;
+        this.cdr.detectChanges();
+      }
+      this.handleNetworkChange();
+    }, 5000);
+  }
+}

src/app/shared/shared.module.ts

@@ -11,6 +11,7 @@ import {TokenRatioPipe} from '@app/shared/_pipes/token-ratio.pipe';
 import { ErrorDialogComponent } from '@app/shared/error-dialog/error-dialog.component';
 import {MatDialogModule} from '@angular/material/dialog';
 import { SafePipe } from '@app/shared/_pipes/safe.pipe';
+import { NetworkStatusComponent } from './network-status/network-status.component';
 
 
 
@@ -23,7 +24,8 @@ import { SafePipe } from '@app/shared/_pipes/safe.pipe';
     MenuToggleDirective,
     TokenRatioPipe,
     ErrorDialogComponent,
-    SafePipe
+    SafePipe,
+    NetworkStatusComponent
   ],
   exports: [
     TopbarComponent,
@@ -31,7 +33,8 @@ import { SafePipe } from '@app/shared/_pipes/safe.pipe';
     SidebarComponent,
     MenuSelectionDirective,
     TokenRatioPipe,
-    SafePipe
+    SafePipe,
+    NetworkStatusComponent
   ],
   imports: [
     CommonModule,

src/assets/images/no-wifi.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512.115 512.115" style="enable-background:new 0 0 512.115 512.115;" xml:space="preserve" width="512" height="512">
+<g>
+	<g>
+		<circle style="fill:#29B6F6;" cx="255.998" cy="374.496" r="32.133"/>
+	</g>
+	<g>
+		<path style="fill:#0288D1;" d="M259.46,342.551c20.068,21.447,2.961,57.089-26.924,53.889    c19.876,21.242,55.595,7.028,55.595-21.944C288.131,357.92,275.578,344.279,259.46,342.551z"/>
+	</g>
+	<g>
+		<path style="fill:#29B6F6;" d="M346.922,272.908c-14.694-11.793-31.719-20.793-50.261-26.198l28.056-28.056    c16.135,6.633,31.112,15.523,44.53,26.284c8.351,6.698,9.121,19.122,1.552,26.692C364.338,278.09,354.061,278.637,346.922,272.908    z M142.75,244.938c-8.351,6.698-9.122,19.122-1.552,26.692c6.109,6.254,16.525,7.178,23.876,1.278    c20.705-16.617,46.037-27.689,73.723-30.964l35.859-35.859C226.255,201.114,179.36,215.576,142.75,244.938z M300.683,180.058    l29.253-29.253c-79.639-25.044-168.342-8.412-234.2,47.892c-7.97,6.814-8.541,18.928-1.127,26.343    c6.568,6.568,17.121,7.079,24.173,1.035C169.978,182.203,237.359,166.36,300.683,180.058z M417.388,225.04L417.388,225.04    c7.415-7.415,6.844-19.529-1.127-26.343c-13.028-11.138-27.232-20.936-42.385-29.203l-26.573,26.573    c16.623,8.005,32.044,18.125,45.912,30.008C400.267,232.119,410.82,231.608,417.388,225.04z M301.029,320.497    c6.604,4.525,15.912,4.623,22.908-2.005c7.88-7.88,6.751-21.016-2.422-27.343c-14.592-10.065-31.606-16.847-49.967-19.326    l-37.95,37.95C255.78,303.279,280.628,306.519,301.029,320.497z"/>
+	</g>
+	<g>
+		<path style="fill:#0288D1;" d="M416.261,198.697c-13.028-11.138-27.232-20.936-42.385-29.203l-7.388,7.388    c10.471,6.54,20.429,13.825,29.774,21.814c9.055,7.741,8.317,21.88-1.529,28.533c6.982,4.781,16.543,3.922,22.655-2.19v0    C424.802,217.626,424.231,205.511,416.261,198.697z"/>
+	</g>
+	<g>
+		<path style="fill:#0288D1;" d="M369.247,244.938c-13.418-10.761-28.395-19.651-44.53-26.284l-6.327,6.327    c10.973,5.621,21.316,12.306,30.857,19.957c9.462,7.589,8.937,22.091-1.089,28.871c7.054,4.744,16.544,3.917,22.64-2.178    C378.368,264.06,377.598,251.635,369.247,244.938z"/>
+	</g>
+	<g>
+		<path style="fill:#0288D1;" d="M321.515,291.148c-14.592-10.065-31.606-16.847-49.967-19.326l-3.48,3.48    c12.072,3.483,23.341,8.875,33.447,15.846c10.331,7.126,10.2,22.482-0.221,29.513c6.595,4.357,15.745,4.365,22.643-2.17    C331.817,310.612,330.688,297.475,321.515,291.148z"/>
+	</g>
+	<path style="fill:#FF7043;" d="M437.077,75.038c-100.046-100.044-261.982-100.057-362.039,0   c-100.044,100.042-100.058,261.98,0,362.039c100.046,100.044,261.981,100.057,362.04,0   C537.121,337.031,537.135,175.096,437.077,75.038z M411.392,142.645c1.856-1.856,4.94-1.582,6.444,0.568   c54.271,77.582,45.249,184.719-22.326,252.297c-67.579,67.576-174.715,76.599-252.298,22.326c-2.15-1.504-2.423-4.589-0.568-6.444   L411.392,142.645z M94.274,368.912C5.205,241.953,93.085,58.843,256.057,58.843c40.925,0,79.777,12.225,112.855,35.431   c2.147,1.506,2.42,4.588,0.565,6.443L100.717,369.478C98.862,371.332,95.78,371.059,94.274,368.912z"/>
+	<path style="fill:#E64A19;" d="M349.926,17.756c141.317,87.019,164.005,282.465,47.152,399.321   c-74.64,74.638-183.463,93.269-274.888,57.282c97.36,59.953,228.457,49.147,314.888-37.282   C568.531,305.621,519.601,84.544,349.926,17.756z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>

src/assets/images/wifi.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve">
+<g>
+	<path style="fill:#1DE8F1;" d="M492.177,102.686C424.371,55.882,342.761,30.98,256.657,30.98h-1.501
+		c-85.808,0.3-167.516,25.203-235.324,71.707c-10.497,7.501-17.701,18.902-19.499,31.503c-1.501,12.3,2.098,24.903,10.2,34.504
+		c15.301,18.001,42.305,21.601,61.504,8.1c52.505-36.302,116.214-55.504,183.119-55.805h1.501
+		c67.206,0,130.808,19.202,183.313,55.805c19.506,13.501,46.505,9.902,61.507-8.1C518.58,148.59,514.379,117.988,492.177,102.686z"
+		/>
+	<path style="fill:#1DE8F1;" d="M402.169,195.994c-42.906-29.402-93.609-45.004-147.014-45.004s-105.109,15.602-147.714,45.004
+		C85.84,210.695,82.24,241.298,98.142,261.4c14.1,18.003,39.302,21.901,58.203,9.001c28.201-19.201,64.009-28.802,98.809-28.802
+		s69.608,9.601,97.809,28.802c19.202,12.901,44.103,9.002,58.504-9.001C427.37,240.998,423.169,210.395,402.169,195.994z"/>
+	<path style="fill:#1DE8F1;" d="M325.66,286.903c-21.301-10.502-45.901-15.602-70.505-15.602s-50.205,5.099-71.506,15.602
+		c-15.902,7.501-24.901,23.701-24.901,40.203c0,9.902,3.296,20.101,10.196,28.503c13.203,16.201,36.705,21.303,54.706,12.3
+		c9.303-4.499,20.404-6.9,31.504-6.9c11.101,0,22.202,2.401,31.504,6.9c18.001,9.002,40.503,3.9,53.706-12.3
+		C358.663,333.108,351.463,299.203,325.66,286.903z"/>
+	<path style="fill:#1DE8F1;" d="M255.155,391.012c-24.904,0-46.004,20.101-46.004,45.004s21.1,45.004,46.004,45.004
+		s45.004-20.101,45.004-45.004S280.06,391.012,255.155,391.012z"/>
+</g>
+<g>
+	<path style="fill:#1BD9DE;" d="M300.159,436.016c0,24.903-20.1,45.004-45.004,45.004v-90.008
+		C280.06,391.012,300.159,411.114,300.159,436.016z"/>
+	<path style="fill:#1BD9DE;" d="M340.365,355.61c-13.203,16.201-35.705,21.303-53.706,12.3c-9.303-4.499-20.404-6.9-31.504-6.9
+		v-89.708c24.604,0,49.205,5.099,70.505,15.602C351.463,299.203,358.663,333.108,340.365,355.61z"/>
+	<path style="fill:#1BD9DE;" d="M411.468,261.4c-14.4,18.003-39.302,21.901-58.504,9.001
+		c-28.201-19.201-63.009-28.802-97.809-28.802V150.99c53.406,0,104.109,15.602,147.014,45.004
+		C423.169,210.395,427.37,240.998,411.468,261.4z"/>
+	<path style="fill:#1BD9DE;" d="M501.476,168.693c-15.001,18.001-42.001,21.601-61.507,8.1
+		c-52.505-36.602-116.107-55.805-183.313-55.805h-1.501V30.979h1.501c86.104,0,167.714,24.903,235.521,71.707
+		C514.379,117.988,518.58,148.59,501.476,168.693z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/index.html

@@ -5,13 +5,43 @@
   <title>CICADA</title>
   <base href="/">
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description" />
-  <meta content="Spencer Ofwiti" name="author" />
-  <link rel="icon" type="image/x-icon" href="assets/images/CIC-Logo-white.png">
+  <meta content="A fully featured admin client for managing users and transactions in the CIC network." name="description"/>
+  <meta content="Spencer Ofwiti" name="author"/>
+  <link rel="icon" type="image/x-icon" href="assets/icons/manifest-icon-512.png">
+  <link rel="apple-touch-icon" href="src/assets/icons/apple-icon-180.png">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2048-2732.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2732-2048.jpg" media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1668-2388.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2388-1668.jpg" media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1536-2048.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2048-1536.jpg" media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1668-2224.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2224-1668.jpg" media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1620-2160.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2160-1620.jpg" media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1284-2778.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2778-1284.jpg" media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1170-2532.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2532-1170.jpg" media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1125-2436.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2436-1125.jpg" media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1242-2688.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2688-1242.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-828-1792.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1792-828.jpg" media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1242-2208.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-2208-1242.jpg" media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-750-1334.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1334-750.jpg" media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-640-1136.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
+  <link rel="apple-touch-startup-image" href="src/assets/icons/apple-splash-1136-640.jpg" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
   <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500&amp;display=swap" rel="stylesheet">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+  <link rel="manifest" href="manifest.webmanifest">
+  <meta name="theme-color" content="#313a46">
 </head>
 <body class="mat-typography">
   <app-root></app-root>

src/manifest.webmanifest

@@ -0,0 +1,34 @@
+{
+  "lang": "en",
+  "name": "CICADA",
+  "short_name": "CICADA",
+  "description": "A fully featured admin client for managing users and transactions in the CIC network.",
+  "theme_color": "#313a46",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "orientation": "any",
+  "scope": "/",
+  "start_url": ".",
+  "shortcuts": [
+    {
+      "name": "Authentication",
+      "short_name": "auth",
+      "description": "Authentication using private keys",
+      "url": "/auth"
+    }
+  ],
+  "icons": [
+    {
+      "src": "src/assets/icons/manifest-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable any"
+    },
+    {
+      "src": "src/assets/icons/manifest-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable any"
+    }
+  ]
+}

src/styles.scss

@@ -18,6 +18,10 @@ body {
   background: #fafafa;
 }
 
+.bg-dark {
+  background: #313a46;
+}
+
 p {
   font-family: 'Roboto', sans-serif;
   font-size: 1.1em;
@@ -39,7 +43,9 @@ a:focus {
   align-items: stretch;
   display: flex;
   width: 100%;
-  height: 100vh;
+  align-items: stretch;
+  height: inherit;
+  perspective: 1500px;
 }
 
 ul ul a {