Feat/improve UI (#878)

* feat(ui): improve colors in header and responsiveness

* feat(ui): improve sidebar tags

* feat(ui): add back github icon

* chore(ui): load svg with mock-server

springwolf-ui/angular.json

@@ -30,8 +30,6 @@
             "tsConfig": "tsconfig.app.json",
             "inlineStyleLanguage": "scss",
             "assets": [
-              "src/_redirects",
-              "src/favicon.ico",
               "src/assets"
             ],
             "styles": [

springwolf-ui/src/app/app.component.ts

@@ -1,6 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
 import { UiService } from "./service/ui.service";
+import { DomSanitizer } from "@angular/platform-browser";
+import { MatIconRegistry } from "@angular/material/icon";
 
 @Component({
   selector: "app-root",
@@ -10,7 +12,16 @@ import { UiService } from "./service/ui.service";
 export class AppComponent implements OnInit {
   isNewUi: boolean = true;
 
-  constructor(private uiService: UiService) {}
+  constructor(
+    private iconRegistry: MatIconRegistry,
+    private sanitizer: DomSanitizer,
+    private uiService: UiService
+  ) {
+    this.iconRegistry.addSvgIcon(
+      "github",
+      this.sanitizer.bypassSecurityTrustResourceUrl("assets/github.svg")
+    );
+  }
 
   ngOnInit() {
     this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value));

springwolf-ui/src/app/components/header/header.component.css

@@ -5,13 +5,21 @@
   display: block;
 }
 
-h1,
 :host ::ng-deep label,
 a {
-  text-decoration: none;
-  color: white;
+  color: var(--mat-toolbar-container-text-color);
 }
 
+a {
+  text-decoration: none;
+}
 a:hover {
   color: lightgray;
 }
+
+:host ::ng-deep mat-icon {
+  height: 3em;
+  width: 3em;
+  transform: scale(0.75);
+  filter: invert(100%);
+}

springwolf-ui/src/app/components/header/header.component.html

@@ -1,5 +1,5 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
-<mat-toolbar class="flex-column space-between items-center">
+<mat-toolbar class="row space-between">
   <span>
     <a
       href="https://www.springwolf.dev"
@@ -16,16 +16,16 @@
       Springwolf
     </a>
   </span>
-  <h1>{{ title }}</h1>
-  <div>
+  <h1 class="width-s-hide">{{ title }}</h1>
+  <div class="flex flex-column items-center">
     <mat-slide-toggle
       [(ngModel)]="isNewUi"
       (change)="toggleIsNewUi($event.checked)"
       >New UI</mat-slide-toggle
     >
     &nbsp;
     <a href="https://github.com/springwolf/springwolf-core" target="_blank">
-      GitHub
+      <mat-icon [svgIcon]="'github'" />
     </a>
   </div>
 </mat-toolbar>

springwolf-ui/src/app/components/new/sidenav/sidenav.component.css

@@ -11,6 +11,7 @@ a {
 
 .sidenav .entry.selected > span > a {
   font-weight: bold;
+  color: var(--mat-app-text-color);
 }
 .sidenav .entry.collapsed {
   display: none;
@@ -24,10 +25,10 @@ a {
 .sidenav .badge {
   text-transform: uppercase;
   font-size: smaller;
-  word-break: break-all;
 
   border-radius: 0.3em;
   padding: 0 0.1em;
+  margin: 0 0 auto 0;
 }
 .sidenav .badge.send-badge {
   color: var(--springwolf-badge-color-send);

springwolf-ui/src/app/service/mock/mock-server.ts

@@ -26,7 +26,7 @@ export class MockServer implements InMemoryDbService {
       });
     }
 
-    return undefined;
+    return reqInfo.utils.getPassThruBackend().handle(reqInfo.req);
   }
 
   post(reqInfo: RequestInfo) {
@@ -38,7 +38,7 @@ export class MockServer implements InMemoryDbService {
       });
     }
 
-    return undefined;
+    return reqInfo.utils.getPassThruBackend().handle(reqInfo.req);
   }
 
   private selectMockData() {

springwolf-ui/src/styles.scss

@@ -10,11 +10,12 @@ $theme: mat.define-theme((
     tertiary: mat.$blue-palette,
   ),
 ));
-// @include mat.color-variants-backwards-compatibility($theme);
 
 @mixin theme($theme) {
+    --mat-toolbar-container-text-color: #EEE;
     mat-toolbar {
       background: mat.get-theme-color($theme, primary, 40);
+      color: var(--mat-toolbar-container-text-color);
     }
 }