Merge pull request #424 from Senyoret1/theme

Update the UI theme

Former-commit-id: c16ab22

static/skywire-manager-src/src/app/app.module.ts

@@ -93,17 +93,15 @@ import { InitialSetupComponent } from './components/pages/login/initial-setup/in
 import { SelectLanguageComponent } from './components/layout/select-language/select-language.component';
 import { LangButtonComponent } from './components/layout/lang-button/lang-button.component';
 import { TruncatedTextComponent } from './components/layout/truncated-text/truncated-text.component';
-import { SelectTabComponent } from './components/layout/tab-bar/select-tab/select-tab.component';
 import { NodeInfoContentComponent } from './components/pages/node/node-info/node-info-content/node-info-content.component';
 import { NodeInfoComponent } from './components/pages/node/node-info/node-info.component';
-import { SelectColumnComponent } from './components/layout/select-column/select-column.component';
 import { SelectOptionComponent } from './components/layout/select-option/select-option.component';
-import { SelectPageComponent } from './components/layout/paginator/select-page/select-page.component';
 import { TerminalComponent } from './components/pages/node/actions/terminal/terminal.component';
 import { SkysocksSettingsComponent } from './components/pages/node/apps/node-apps/skysocks-settings/skysocks-settings.component';
 import {
   SkysocksClientSettingsComponent
 } from './components/pages/node/apps/node-apps/skysocks-client-settings/skysocks-client-settings.component';
+import { MenuButtonComponent } from './components/layout/sidenav/menu-button/menu-button.component';
 
 const globalRippleConfig: RippleGlobalOptions = {
   disabled: true,
@@ -176,15 +174,13 @@ const globalRippleConfig: RippleGlobalOptions = {
     SelectLanguageComponent,
     LangButtonComponent,
     TruncatedTextComponent,
-    SelectTabComponent,
     NodeInfoContentComponent,
     NodeInfoComponent,
-    SelectColumnComponent,
     SelectOptionComponent,
-    SelectPageComponent,
     TerminalComponent,
     SkysocksSettingsComponent,
     SkysocksClientSettingsComponent,
+    MenuButtonComponent,
   ],
   entryComponents: [
     ConfigurationComponent,
@@ -208,10 +204,7 @@ const globalRippleConfig: RippleGlobalOptions = {
     SnackbarComponent,
     InitialSetupComponent,
     SelectLanguageComponent,
-    SelectTabComponent,
-    SelectColumnComponent,
     SelectOptionComponent,
-    SelectPageComponent,
     TerminalComponent,
     SkysocksSettingsComponent,
     SkysocksClientSettingsComponent,

static/skywire-manager-src/src/app/components/layout/button/button.component.html

@@ -2,7 +2,6 @@
   <mat-spinner *ngIf="state === buttonStates.Loading" [diameter]="loadingSize"></mat-spinner>
   <mat-icon *ngIf="state === buttonStates.Success">done</mat-icon>
   <mat-icon *ngIf="state === buttonStates.Error">error_outline</mat-icon>
-  <mat-icon *ngIf="state === buttonStates.Normal && icon">{{ icon }}</mat-icon>
   <ng-content></ng-content>
   <i *ngIf="notification" class="dot-red sm"></i>
 </ng-template>

static/skywire-manager-src/src/app/components/layout/button/button.component.scss

@@ -15,6 +15,12 @@ button {
   }
 }
 
+::ng-deep .mat-raised-button[disabled] {
+  background-color: $blue-medium !important;
+  color: $white !important;
+  opacity: 0.5;
+}
+
 mat-icon, mat-spinner {
   display: inline-block;
   margin-right: 20px;

static/skywire-manager-src/src/app/components/layout/button/button.component.ts

@@ -20,7 +20,6 @@ export class ButtonComponent implements OnDestroy {
   // Should be be 'mat-button' or 'mat-raised-button'.
   @Input() type = 'mat-button';
   @Input() disabled = false;
-  @Input() icon: string;
   // Must be one of the colors defined on the default theme.
   @Input() color = '';
   @Input() loadingSize = 24;

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html

@@ -2,6 +2,14 @@
   <div class="text-container">
     {{ (state !== confirmationStates.Done ? data.text : doneText) | translate }}
   </div>
+  <div *ngIf="(data.list && state !== confirmationStates.Done) || (doneList && state === confirmationStates.Done)" class="list-container">
+    <div *ngFor="let element of (state !== confirmationStates.Done ? data.list : doneList)">
+      - {{ element | translate }}
+    </div>
+  </div>
+  <div *ngIf="data.lowerText && state !== confirmationStates.Done" class="text-container">
+    {{ data.lowerText | translate }}
+  </div>
 
   <div class="buttons">
     <app-button

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.scss

@@ -1,5 +1,13 @@
+@import 'variables';
+
 .text-container {
-  margin-top: 5px;
+  word-break: break-word;
+}
+
+.list-container {
+  font-size: 14px;
+  margin: 10px;
+  color: $blue-medium;
   word-break: break-word;
 }
 

static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts

@@ -11,6 +11,14 @@ export interface ConfirmationData {
    * Confirmation text to show.
    */
   text: string;
+  /**
+   * Optional list with elements to show after the text.
+   */
+  list?: string[];
+  /**
+   * Optional text to show below the main text and the list.
+   */
+  lowerText?: string;
   /**
    * Title of the modal window.
    */
@@ -65,6 +73,7 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy {
   // Texts for the Done state.
   doneTitle: string;
   doneText: string;
+  doneList: string[];
 
   // Event for when the user confirms.
   @Output() operationAccepted = new EventEmitter();
@@ -130,14 +139,16 @@ export class ConfirmationComponent implements AfterViewInit, OnDestroy {
    * Use only after the operation is done or receiving an error.
    * @param newTitle New title for the modal window.
    * @param newText New main text for the modal window.
+   * @param newList New optional list to show below the main text.
    */
-  showDone(newTitle: string | null, newText: string) {
+  showDone(newTitle: string | null, newText: string, newList: string[] = null) {
     if (newTitle) {
       this.doneTitle = newTitle;
     } else {
       this.doneTitle = this.data.headerText;
     }
     this.doneText = newText;
+    this.doneList = newList;
 
     this.confirmButton.reset();
     setTimeout(() => this.confirmButton.focus());

static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html

@@ -5,10 +5,12 @@
   </button>
 </div>
 
-<mat-dialog-content *ngIf="includeScrollableArea">
+<div class="header-separator"></div>
+
+<mat-dialog-content [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="includeScrollableArea">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </mat-dialog-content>
-<ng-container *ngIf="!includeScrollableArea">
+<div [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="!includeScrollableArea">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
-</ng-container>
+</div>
 <ng-template #contentTemplate><ng-content></ng-content></ng-template>

static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss

@@ -3,15 +3,20 @@
 @import 'utilities/utilities';
 @import 'text';
 
+:host {
+  color: $black;
+}
+
 .header {
   margin-top: -$mat-dialog-padding;
   margin-left: -$mat-dialog-padding;
   margin-right: -$mat-dialog-padding;
   margin-bottom: 0;
-  color: $blue-dark;
+  color: $blue-medium;
   padding: 0px ($mat-dialog-padding - 10) 0px $mat-dialog-padding;
   font-size: $font-size-base;
   text-transform: uppercase;
+  font-weight: bold;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -29,7 +34,7 @@
   span {
     @extend .reactivate-mouse;
     line-height: $font-size-base;
-    margin: 17px 0;
+    margin: 18px 0;
   }
 
   .mat-icon-button {
@@ -48,3 +53,15 @@
     }
   }
 }
+
+.header-separator {
+  height: 1px;
+  background-color: $modal-separator;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+
+.content-margin {
+  padding-top: 18px;
+  padding-bottom: $mat-dialog-padding !important;
+}

static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts

@@ -19,4 +19,8 @@ export class DialogComponent {
    * If false, the contents must include its own scrollable container.
    */
   @Input() includeScrollableArea = true;
+  /**
+   * If true, vertical margins will be added to the content.
+   */
+  @Input() includeVerticalMargins = true;
 }

static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.html

@@ -1,6 +1,6 @@
 <button
   mat-button
-  class="lang-button grey-button-background"
+  class="lang-button subtle-transparent-button"
   (click)="openLanguageWindow()"
   [matTooltip]="'language.title' | translate"
 >

static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss

@@ -3,6 +3,10 @@
 .lang-button {
   height: $header-buttons-height;
   border-radius: $mat-dialog-radius;
+  background-color: $white;
+  border-radius: 100%;
+  padding: 0;
+  line-height: normal;
 
   .flag {
     width: 20px;

static/skywire-manager-src/src/app/components/layout/line-chart/line-chart.component.ts

@@ -32,8 +32,8 @@ export class LineChartComponent implements AfterViewInit, DoCheck {
         labels: Array.from(Array(this.data.length).keys()),
         datasets: [{
           data: this.data,
-          backgroundColor: ['#0B6DB0'],
-          borderColor: ['#0B6DB0'],
+          backgroundColor: ['rgba(10, 15, 22, 0.4)'],
+          borderColor: ['rgba(10, 15, 22, 0.4)'],
           borderWidth: 1,
         }],
       },

static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.html

@@ -1,5 +1,5 @@
 <div class="main-container">
-  <div class="d-inline-block container-elevated-translucid p-0 mt-3">
+  <div class="d-inline-block small-rounded-elevated-box mt-3">
     <div class="d-flex">
       <!-- Invisible element that makes the paginator to be tall on small window sizes. -->
       <div class="responsive-height d-md-none">&nbsp;<br/>&nbsp;</div>

static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.scss

@@ -18,7 +18,7 @@
     border-left: $separator solid 1px;
     min-width: 40px;
     text-align: center;
-    color: $white;
+    color: scale-color($white, $alpha: -50%);
     text-decoration: none;
     display: flex;
     align-items: center;
@@ -39,14 +39,13 @@
   }
 
   .selected {
-    color: $black;
-    background: theme-color(translucid-hover);
-    font-weight: bold;
+    color: $white;
+    background: scale-color(theme-color(translucid-hover), $alpha: 20%);
     padding: $elements-padding ($elements-padding * 2);
     cursor: pointer;
 
     &:hover {
-      background: adjust-color(theme-color(translucid-hover), $alpha: 0.2);
+      background: scale-color(theme-color(translucid-hover), $alpha: 50%);
     }
   }
 

static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts

@@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 
-import { SelectPageComponent } from './select-page/select-page.component';
+import { SelectableOption, SelectOptionComponent } from '../select-option/select-option.component';
 
 /**
  * Generic paginator for the long lists of the app.
@@ -31,9 +31,16 @@ export class PaginatorComponent {
   ) { }
 
   openSelectionDialog() {
-    SelectPageComponent.openDialog(this.dialog, this.numberOfPages).afterClosed().subscribe((selectedPage: number) => {
-      if (selectedPage) {
-        this.router.navigate(this.linkParts.concat([selectedPage.toString()]));
+    // Create an option for every page.
+    const options: SelectableOption[] = [];
+    for (let i = 1; i <= this.numberOfPages; i++) {
+      options.push({ label: i.toString() });
+    }
+
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'paginator.select-page-title').afterClosed().subscribe((result: number) => {
+      if (result) {
+        this.router.navigate(this.linkParts.concat([result.toString()]));
       }
     });
   }