From 08672ba0f0927fa7e43577e3f94aca8a2762ffd9 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sat, 27 Jun 2020 16:26:09 -0400
Subject: [PATCH 1/8] Initial changes for the dark theme

---
 .../skywire-manager-src/src/app/app.module.ts |   2 +
 .../layout/button/button.component.html       |   1 -
 .../layout/button/button.component.ts         |   1 -
 .../menu-button/menu-button.component.html    |  11 ++++
 .../menu-button/menu-button.component.scss    |  47 ++++++++++++++++++
 .../menu-button/menu-button.component.spec.ts |  25 ++++++++++
 .../menu-button/menu-button.component.ts      |  38 ++++++++++++++
 .../layout/sidenav/sidenav.component.html     |  14 ++++--
 .../layout/sidenav/sidenav.component.scss     |  29 ++++-------
 .../layout/tab-bar/tab-bar.component.scss     |   1 +
 .../node-app-button.component.scss            |   2 +-
 .../components/pages/node/node.component.html |  24 ++++-----
 .../components/pages/node/node.component.scss |  24 +++++++++
 .../src/assets/img/background-pattern.png     | Bin 0 -> 960 bytes
 .../src/assets/img/icon-separator.png         | Bin 0 -> 1072 bytes
 .../src/assets/scss/_backgrounds.scss         |  15 ++++--
 .../src/assets/scss/_variables.scss           |   9 +++-
 static/skywire-manager-src/src/index.html     |  23 +++++----
 static/skywire-manager-src/src/styles.scss    |   8 +++
 19 files changed, 217 insertions(+), 57 deletions(-)
 create mode 100644 static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.html
 create mode 100644 static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
 create mode 100644 static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.spec.ts
 create mode 100644 static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.ts
 create mode 100644 static/skywire-manager-src/src/assets/img/background-pattern.png
 create mode 100644 static/skywire-manager-src/src/assets/img/icon-separator.png

diff --git a/static/skywire-manager-src/src/app/app.module.ts b/static/skywire-manager-src/src/app/app.module.ts
index 43958695a5..6139a6c12a 100644
--- a/static/skywire-manager-src/src/app/app.module.ts
+++ b/static/skywire-manager-src/src/app/app.module.ts
@@ -104,6 +104,7 @@ import { SkysocksSettingsComponent } from './components/pages/node/apps/node-app
 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,
@@ -185,6 +186,7 @@ const globalRippleConfig: RippleGlobalOptions = {
     TerminalComponent,
     SkysocksSettingsComponent,
     SkysocksClientSettingsComponent,
+    MenuButtonComponent,
   ],
   entryComponents: [
     ConfigurationComponent,
diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.html b/static/skywire-manager-src/src/app/components/layout/button/button.component.html
index d41767f041..634aaa995b 100644
--- a/static/skywire-manager-src/src/app/components/layout/button/button.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.ts b/static/skywire-manager-src/src/app/components/layout/button/button.component.ts
index 5bf8869131..5f1979c81a 100644
--- a/static/skywire-manager-src/src/app/components/layout/button/button.component.ts
+++ b/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;
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.html b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.html
new file mode 100644
index 0000000000..c45f264bb0
--- /dev/null
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.html
@@ -0,0 +1,11 @@
+<div *ngIf="showUpperSeparator" class="external-border"></div>
+<button
+  (click)="click()"
+  [disabled]="disabled"
+  [ngClass]="{'enabled': !disabled}"
+>
+  <mat-icon>{{ icon }}</mat-icon>
+  <img class="separator" src="/assets/img/icon-separator.png">
+  <span class="single-line">{{ text | translate }}</span>
+</button>
+<div *ngIf="!showUpperSeparator" class="external-border"></div>
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
new file mode 100644
index 0000000000..16b29d5d51
--- /dev/null
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
@@ -0,0 +1,47 @@
+@import 'variables';
+@import 'utilities/utilities';
+@import 'text';
+
+:host {
+  width: 100%;
+  display: block;
+}
+
+.external-border {
+  height: 1px;
+  background-color: $separator;
+  margin: 0 15px;
+}
+
+.enabled {
+  opacity: 1;
+  @extend .cursor-pointer;
+
+  &:hover {
+    background-color: rgba(255, 255, 255, 0.01) !important;
+    box-shadow: inset 0 0 55px 0 rgba(75, 101, 137, 0.20);
+  }
+}
+
+button {
+  width: 100%;
+  color: $white;
+  background-color: transparent !important;
+  border: 0;
+  text-align: left;
+  height: 55px;
+  font-size: $font-size-sm;
+  display: flex;
+  align-items: center;
+  opacity: 0.35;
+
+  .separator {
+    margin: 0 10px;
+  }
+
+  mat-icon {
+    display: inline-block;
+    margin-left: 25px;
+    opacity: 0.75;
+  }
+}
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.spec.ts b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.spec.ts
new file mode 100644
index 0000000000..f1d563dee7
--- /dev/null
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuButtonComponent } from './menu-button.component';
+
+describe('MenuButtonComponent', () => {
+  let component: MenuButtonComponent;
+  let fixture: ComponentFixture<MenuButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ MenuButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MenuButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.ts b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.ts
new file mode 100644
index 0000000000..65bb6d45fb
--- /dev/null
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.ts
@@ -0,0 +1,38 @@
+import { Component, EventEmitter, Input, Output, OnDestroy } from '@angular/core';
+
+/**
+ * Buttons shown in the left menu.
+ */
+@Component({
+  selector: 'app-menu-button',
+  templateUrl: './menu-button.component.html',
+  styleUrls: ['./menu-button.component.scss']
+})
+export class MenuButtonComponent implements OnDestroy {
+  @Input() disabled = false;
+  @Input() icon: string;
+  @Input() text: string;
+  // If true, only the separator at the top will be shown. If false, only the separator at
+  // the bottom will be shown.
+  @Input() showUpperSeparator = false;
+  // Click event.
+  @Output() action = new EventEmitter();
+
+  ngOnDestroy() {
+    this.action.complete();
+  }
+
+  click() {
+    if (!this.disabled) {
+      this.action.emit();
+    }
+  }
+
+  showEnabled() {
+    this.disabled = false;
+  }
+
+  showDisabled() {
+    this.disabled = true;
+  }
+}
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
index 243e399361..0133934465 100644
--- a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
@@ -8,6 +8,7 @@
     <button
       mat-icon-button
       [matMenuTriggerFor]="menu"
+      class="transparent-button"
     >
       <mat-icon>menu</mat-icon>
     </button>
@@ -48,7 +49,7 @@
   <!-- Left options bar shown on big screens. -->
   <div class="left-bar-container d-none d-lg-block">
     <div class="left-bar-internal-container">
-      <nav>
+      <nav class="elevated-box">
         <div class="header">
           <img src="/assets/img/logo-h.png" />
         </div>
@@ -59,11 +60,12 @@
             <div class="button-group">
               <ng-container *ngIf="sidenavService.upperContents">
                 <ng-container *ngFor="let content of sidenavService.upperContents">
-                  <app-button
+                  <app-menu-button
                     (action)="requestAction(content.actionName)"
                     [icon]="content.icon"
                     [disabled]="content.disabled"
-                  >{{ content.name | translate }}</app-button>
+                    [text]="content.name"
+                  ></app-menu-button>
                 </ng-container>
               </ng-container>
             </div>
@@ -73,11 +75,13 @@
           <div>
             <ng-container *ngIf="sidenavService.lowerContents">
               <ng-container *ngFor="let content of sidenavService.lowerContents">
-                <app-button
+                <app-menu-button
                   (action)="requestAction(content.actionName)"
                   [icon]="content.icon"
                   [disabled]="content.disabled"
-                >{{ content.name | translate }}</app-button>
+                  [text]="content.name"
+                  [showUpperSeparator]="true"
+                ></app-menu-button>
               </ng-container>
             </ng-container>
           </div>
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.scss b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.scss
index 075640975b..5bf3a0686c 100644
--- a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.scss
@@ -22,7 +22,6 @@ $left-bar-width: 250px;
   right: 0;
   color: $black;
   display: flex;
-  box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1), 1px 1px 5px 1px rgba(0, 0, 0, 0.1);
 
   .logo-container {
     flex-grow: 1;
@@ -49,7 +48,7 @@ $left-bar-width: 250px;
 .menu-separator {
   width: 100%;
   height: 1px;
-  background-color: $separator;
+  background-color: $grey-separator;
 }
 
 .flag {
@@ -73,42 +72,34 @@ $left-bar-width: 250px;
     display: flex;
 
     nav {
+      overflow: auto;
       width: $left-bar-width;
       flex-grow: 1;
       display: flex;
       flex-direction: column;
-      padding: 15px;
-      background: $nav-bg;
 
       .header {
         display: flex;
         align-items: center;
-        height: $header-height + 5px;
-        border-bottom: 1px solid $white-separator;
+        height: $header-height + 20px - 1px;
+        min-height: $header-height + 20px - 1px;
+        border-bottom: 1px solid $separator;
+        background-color: rgba(255, 255, 255, 0.05);
+        box-shadow: inset 0 0 55px 0 rgba(75, 101, 137, 0.25);
+        justify-content: center;
 
         img {
           width: 170px;
+          position: relative;
+          left: -5px;
         }
       }
 
       .menu-container {
         flex: 1;
-        margin-top: 30px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        width: 100%;
-        height: 100%;
-
-        ::ng-deep app-button {
-          width: 100%;
-
-          ::ng-deep button {
-            width: 100%;
-            text-align: left;
-            margin-bottom: 6px;
-          }
-        }
 
         .upper-actions {
           .button-group {
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
index 9fe19dc5c5..c8e397925a 100644
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
@@ -7,6 +7,7 @@
   padding-bottom: 10px;
   margin-bottom: -5px;
   height: $header-height;
+  padding: 0 $additional-margin;
 
   .title {
     font-size: $font-size-mini;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-app-button/node-app-button.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-app-button/node-app-button.component.scss
index 1e41fcb5c2..47be8d5a16 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-app-button/node-app-button.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-app-button/node-app-button.component.scss
@@ -32,7 +32,7 @@
     margin-top: 10px;
 
     ::ng-deep button {
-      background-color: $blue-panel;
+      background-color: $blue-dark;
       text-transform: uppercase;
       padding: 0 40px;
       border-radius: 6px;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.html b/static/skywire-manager-src/src/app/components/pages/node/node.component.html
index 89e303b7d6..1f5bca4bb7 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.html
@@ -35,20 +35,16 @@
       (refreshRequested)="refresh(0, true)"
     ></app-tab-bar>
   </div>
-  <div
-    class="col-12"
-    [ngClass]="{'col-lg-8': !showingInfo && !showingFullList}"
-  >
-    <div class="d-flex flex-column h-100">
-      <!-- Content of the subpage. -->
-      <router-outlet></router-outlet>
+  <div class="col-12">
+    <div class="main-area">
+      <div class="d-flex flex-column h-100">
+        <!-- Content of the subpage. -->
+        <router-outlet></router-outlet>
+      </div>
+    </div>
+    <!-- Right bar. -->
+    <div class="right-bar">
+      <app-node-info-content *ngIf="!showingInfo && !showingFullList" [nodeInfo]="node"></app-node-info-content>
     </div>
-  </div>
-  <!-- Right bar. -->
-  <div
-    class="d-none"
-    [ngClass]="{'col-4 d-lg-block': !showingInfo && !showingFullList}"
-  >
-    <app-node-info-content *ngIf="!showingInfo && !showingFullList" [nodeInfo]="node"></app-node-info-content>
   </div>
 </div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.scss b/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
index 3ac52dce1f..223b7be7da 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
@@ -1,4 +1,5 @@
 @import "variables";
+@import "bootstrap_overrides";
 
 .not-found-label {
   align-items: center;
@@ -13,3 +14,26 @@
     margin-right: 3px;
   }
 }
+
+.main-area {
+  width: 100%;
+  padding: 0 $additional-margin;
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    width: 71%;
+    float: left;
+  }
+}
+
+.right-bar {
+  width: 27%;
+  float: right;
+  padding-right: $additional-margin;
+  display: none;
+
+  @media (min-width: map-get($grid-breakpoints, lg)) {
+    display: block;
+    width: 27%;
+    float: right;
+  }
+}
diff --git a/static/skywire-manager-src/src/assets/img/background-pattern.png b/static/skywire-manager-src/src/assets/img/background-pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..15f8183323a17ec8b1c655eac6fe8992bb66d096
GIT binary patch
literal 960
zcmaJ=%a77P9IjcT8<LG4eZ<YAn;3T^owk5|gi3(IE{P?CC0UO2F+jt%Q`<obM{h>`
zAG~<=A26<$y_o31tMTN?n^!ePoU)YlAU2uKBj5M^9`ntUR&#$Vb0fnr%vR$-Z_{}*
z8Jm~r|MbeqQ#xHIwJtfteKIja#FQOuA<*#50cs=DnLd1niVU-H+wF8o*La}X*yGFu
z!^K`e*$h)G#er#$5CIk%xW2}Id;OLLuA{L>1%o$&DjK>6vk)E5njL#KvK5Cd-3P^3
zr2-xzCWyUbKT>0jUFfQGog70JEFfg0v1dtjjTWfl5P<?$$lAOp07>D5LP3(myFlcH
zJmdu^<g$XI=JP7ggXPE4Xra?r+j@N&i|#abNJyYUIGIeiNshze01AqtKwgBRn5Bqp
zH1&xYXZ>g=RnSpnhi*Vz?1MznwD6c{EY0++1TR?0`q8pYv|%td11NBOQc?;ujQ>MD
zZ-tIX8=dF-PvNLD4G?Uj2#-UXUR-}C2^FZ-5Savr9gL6DF1Ci4;An^gP^~Vy2JRfW
zzJn*x?t)_&YQv9+>D#EGYb;gaT-Q-`MbRZWCs$;d7lc~5B1@ty*UM5(<aJrEq+A`_
zV-NWx<vQnFWi2<cgBQ@qIttxK$f<|e1B<d%cYQAR*6J;}&iY)WwOmM(fyw3mb=m0=
zbx^WgS(k2B=0`qtd`PYR<EQw6J`28~mpkz%>(_i<DsAk2fBxRI0JFK*yYOW`w4Qy<
n{C=_9dwFv6+Q-w@=ZjZ+%>J9p+uN;MmE=t|YEAuBrT6#`N{A|0

literal 0
HcmV?d00001

diff --git a/static/skywire-manager-src/src/assets/img/icon-separator.png b/static/skywire-manager-src/src/assets/img/icon-separator.png
new file mode 100644
index 0000000000000000000000000000000000000000..ae65938b82114e68ad87bcdead6925b941a4b02c
GIT binary patch
literal 1072
zcmaJ=TSyd97@q8+nLcC$WjzeDVH)mSb{*FpTxEA>S2r5dbxY|%9A}R1U^8c$Ikw{k
zAFPOwAoMM|fsnm)Au<Sw#0NnNp@&|ghYG3(i!KlubUU-T)<fICnRDU$zW;K*bEdVW
zskFGfm>`JKM6;O0a}gffi#Fl^aMR5tJnclWPSg&2QAV}^5msRjAQQUW2a-Tm2ahd+
zdV*MAp`|)er*uG2piav!hIVulvk9WU(J^JEA0V;^^l3(jdO!PsA~iKcb?_1^nNg6|
znujdVKGc#@hWeGDN;Ni+^^SlAbbw^i(T^Io;Do5Gu7KC>F+-7A2<i_}zmw{eTFEH1
z0Ljz5S7Ch|83@uG&j$j&YSPDYH4Mu!oZrg@g_;_HWy#f#!qF_XS4fKS)mV5JqS6SN
z0>fl789L*qq1DH5!C;VKeT>iN#R#uGXdv0~8n!2=AOc&lG!tpiAYDbd2M(YRg){wK
zf^M$K8un_NaKji!HW`j)-I8)ZN%}uj*VoWCN`gQ6{!`da4Vr*S0virk3ck2rj~mJq
zq85-5v{Dcr&2_Og4H2}{&?KYLY}d%j4$V+u#;(e8BuPjZHj)hmB*YMfRcK99g*X?k
zi^Rh<k-EAl$Hl_o051k>BM~-U8{p%7B*zt@GN1zk<+$n}E}xg{+CevQWD!`}aiGR6
zsFT^U1ucIrzPx&?Ts40#{=8fUC&Rdx``2aXj<AE=<(hTzX3hM-z>c@DwJ*+eyYKBv
zLJX&zry~=Oi|5&rm_A*!{<QGD?B~z%w^vu#9m4YcbMvn!HY^n^Yv<`L!8d2O@;mM>
zyj=He&Qm@g`_#R;W3j5dZ!+M-r$-8J@7>ez<5Va;w_!-CoV~a5`DCi=(Z<m`o?Vlh
zItns{U8N({a@#1)Uao&pvhPE|RK>Md<8uo~4nBW!eE0QRW&6L*)_$p+I`q&#_HA<J
c@THI2x{0=Tp45p8E5q&^PQ+To8<Fm@UsIxBBme*a

literal 0
HcmV?d00001

diff --git a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
index 091413f3f7..f8f1c05cee 100644
--- a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
+++ b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
@@ -1,10 +1,19 @@
 @import "variables";
 @import "~bootstrap/scss/functions";
-@import '~@angular/material/theming';
 
 // Main app background.
-.mat-app-background {
-  background: linear-gradient($blue, $blue-light) no-repeat fixed !important;
+.app-background {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  background: linear-gradient($blue-dark-Background1, $blue-dark-Background2) no-repeat fixed !important;
+  box-shadow: inset 0 0 200px 0 rgba(96, 141, 205, 0.25);
+}
+
+.elevated-box {
+  background-image: url('/assets/img/background-pattern.png');
+  box-shadow: inset 0 0 55px 0 rgba(75, 101, 137, 0.25), 5px 5px 7px 0 rgba(0, 0, 0, 0.35);
+  border: $box-border solid 1px;
 }
 
 // Backgrounds for the rounded boxes used as containers in the app.
diff --git a/static/skywire-manager-src/src/assets/scss/_variables.scss b/static/skywire-manager-src/src/assets/scss/_variables.scss
index f12450d4d5..17def06d8e 100644
--- a/static/skywire-manager-src/src/assets/scss/_variables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_variables.scss
@@ -8,7 +8,8 @@ $black: #202226;
 $blue-light: #00C3FF;
 $blue: #0072FF;
 $blue-dark: #154B6C;
-$blue-panel: rgba(32, 34, 38, .44);
+$blue-dark-Background1: #0e192a;
+$blue-dark-Background2: #101f34;
 
 $red: #DA3439;
 $green: #2ECC54;
@@ -17,7 +18,9 @@ $lighter-gray: #999;
 
 $nav-bg: rgba(255, 255, 255, 0.1);
 
-$separator: rgba(0, 0, 0, 0.12);
+$box-border: rgba(156, 197, 255, 0.33);
+$separator: rgba(255, 255, 255, 0.15);
+$grey-separator: rgba(0, 0, 0, 0.12);
 $white-separator: rgba(255, 255, 255, 0.44);
 
 $theme-colors: (
@@ -74,3 +77,5 @@ $containers-padding: 20px;
 //
 $header-height: 82px;
 $header-buttons-height: 40px;
+
+$additional-margin: 5px;
diff --git a/static/skywire-manager-src/src/index.html b/static/skywire-manager-src/src/index.html
index aae66f39b1..1cb2d32d81 100644
--- a/static/skywire-manager-src/src/index.html
+++ b/static/skywire-manager-src/src/index.html
@@ -1,14 +1,15 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Skywire Manager</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta name="theme-color" content="#0072FF">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body class="mat-app-background">
-<app-root></app-root>
-</body>
+  <head>
+    <meta charset="utf-8">
+    <title>Skywire Manager</title>
+    <base href="/">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#0072FF">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+  </head>
+  <body>
+    <div class="app-background"></div>
+    <app-root></app-root>
+  </body>
 </html>
diff --git a/static/skywire-manager-src/src/styles.scss b/static/skywire-manager-src/src/styles.scss
index cd199ca92d..2196341659 100644
--- a/static/skywire-manager-src/src/styles.scss
+++ b/static/skywire-manager-src/src/styles.scss
@@ -81,3 +81,11 @@ button:focus {
 .mat-snack-bar-container {
   max-width: 90vw !important;
 }
+
+.transparent-button {
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+}

From 4959e773d338fcfac265ff47dc75f6b0fa65e0de Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Tue, 30 Jun 2020 14:55:10 -0400
Subject: [PATCH 2/8] Additional changes for the main parts of the dark theme

---
 .../lang-button/lang-button.component.html    |  2 +-
 .../layout/line-chart/line-chart.component.ts |  4 +-
 .../layout/paginator/paginator.component.html |  2 +-
 .../layout/paginator/paginator.component.scss |  9 ++-
 .../refresh-button.component.html             |  2 +-
 .../refresh-button.component.scss             |  2 +-
 .../menu-button/menu-button.component.scss    |  4 +-
 .../layout/tab-bar/tab-bar.component.html     |  2 +-
 .../layout/tab-bar/tab-bar.component.scss     | 23 +++++---
 .../view-all-link.component.scss              |  5 +-
 .../pages/node-list/node-list.component.html  | 32 ++++++-----
 .../pages/node-list/node-list.component.scss  | 56 ++-----------------
 .../node-apps-list.component.html             | 29 +++++-----
 .../node-apps-list.component.scss             | 12 ----
 .../pages/node/charts/charts.component.html   |  4 +-
 .../node-info-content.component.html          |  2 +-
 .../node-info-content.component.scss          |  5 +-
 .../components/pages/node/node.component.html |  4 +-
 .../components/pages/node/node.component.scss |  9 ++-
 .../route-list/route-list.component.html      | 21 +++----
 .../route-list/route-list.component.scss      | 12 ----
 .../transport-list.component.html             | 25 +++++----
 .../transport-list.component.scss             | 12 ----
 .../src/assets/scss/_backgrounds.scss         | 24 +++++++-
 .../src/assets/scss/_responsive_tables.scss   | 46 +++++++++------
 .../src/assets/scss/_variables.scss           |  6 +-
 .../src/assets/scss/utilities/_utilities.scss | 16 ++++++
 static/skywire-manager-src/src/styles.scss    |  8 ---
 28 files changed, 175 insertions(+), 203 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.html b/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.html
index a940411ffe..ae4adbf909 100644
--- a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.html
+++ b/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"
 >
diff --git a/static/skywire-manager-src/src/app/components/layout/line-chart/line-chart.component.ts b/static/skywire-manager-src/src/app/components/layout/line-chart/line-chart.component.ts
index aa379db3f1..38e8e35347 100644
--- a/static/skywire-manager-src/src/app/components/layout/line-chart/line-chart.component.ts
+++ b/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,
         }],
       },
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.html b/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.html
index 699cd3397b..a3c93422ba 100644
--- a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.html
+++ b/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>
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.scss b/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.scss
index 10e5ee5469..06dcbe27df 100644
--- a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.scss
+++ b/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%);
     }
   }
 
diff --git a/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html b/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html
index 6cfaabb3a3..3bc4c9ac92 100644
--- a/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.html
@@ -1,6 +1,6 @@
 <button
   mat-button
-  class="time-button white-theme"
+  class="time-button subtle-transparent-button white-theme"
   [disabled]="showLoading"
   [ngClass]="{'grey-button-background' : !showLoading}"
   [matTooltip]="showAlert ? ('refresh-button.error-tooltip' | translate:{time: refeshRate}) : ''"
diff --git a/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss b/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss
index 8a63f63807..dd9d423af0 100644
--- a/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/refresh-button/refresh-button.component.scss
@@ -7,7 +7,7 @@
   height: $header-buttons-height;
 
   &[disabled] {
-    opacity: 0.7;
+    opacity: 0.7 !important;
     color: $white;
 
     span {
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
index 16b29d5d51..731d92d9f8 100644
--- a/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/menu-button/menu-button.component.scss
@@ -1,6 +1,7 @@
 @import 'variables';
 @import 'utilities/utilities';
 @import 'text';
+@import "~bootstrap/scss/functions";
 
 :host {
   width: 100%;
@@ -18,8 +19,7 @@
   @extend .cursor-pointer;
 
   &:hover {
-    background-color: rgba(255, 255, 255, 0.01) !important;
-    box-shadow: inset 0 0 55px 0 rgba(75, 101, 137, 0.20);
+    background-color: theme-color(translucid-hover) !important;
   }
 }
 
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.html b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.html
index 45f058a645..96b04a6f71 100644
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.html
@@ -29,7 +29,7 @@
     <div class="d-md-none" [ngClass]="{'d-none': tabsData.length === 1}" *ngIf="tabsData && tabsData[selectedTabIndex]">
       <button
         mat-button
-        class="tab-button full-opacity white-theme"
+        class="tab-button select-tab-button white-theme"
         [ngClass]="{'mouse-disabled' : disableMouse, 'grey-button-background' : !disableMouse}"
         (click)="openTabSelector()"
       >
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
index c8e397925a..3fc2e7cac9 100644
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.scss
@@ -2,12 +2,10 @@
 @import "~bootstrap/scss/functions";
 
 .main-container {
-  margin-bottom: 5px;
-  border-bottom: 1px solid $white-separator;
+  border-bottom: 1px solid $separator;
   padding-bottom: 10px;
   margin-bottom: -5px;
   height: $header-height;
-  padding: 0 $additional-margin;
 
   .title {
     font-size: $font-size-mini;
@@ -41,11 +39,16 @@
       height: $header-buttons-height;
       display: flex;
       align-items: center;
-    
+
+      &:hover {
+        opacity: 0.75;
+      }
+
       &[disabled] {
-        opacity: 1;
+        opacity: 1 !important;
         color: $white;
-        background-color: theme-color(translucid);
+        background: rgba(0, 0, 0, 0.7) !important;
+        border-color: rgba(0, 0, 0, 0.1);
       }
     
       .mat-icon {
@@ -61,8 +64,12 @@
       }
     }
 
-    .full-opacity {
-      opacity: 1 !important;
+    .select-tab-button {
+      opacity: 0.75 !important;
+
+      &:hover {
+        opacity: 1 !important;
+      }
     }
 
     app-refresh-button {
diff --git a/static/skywire-manager-src/src/app/components/layout/view-all-link/view-all-link.component.scss b/static/skywire-manager-src/src/app/components/layout/view-all-link/view-all-link.component.scss
index 273174e0f0..c16b84f31e 100644
--- a/static/skywire-manager-src/src/app/components/layout/view-all-link/view-all-link.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/view-all-link/view-all-link.component.scss
@@ -2,9 +2,8 @@
 @import "bootstrap_overrides";
 
 .main-container {
-  padding-top: 10px;
-  margin-bottom: -6px;
-  border-top: $separator solid 1px;
+  padding-top: 20px;
+  margin-bottom: 4px;
   text-align: right;
   font-size: $font-size-sm;
 
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
index f581f016ee..e9c05cd127 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
@@ -26,17 +26,17 @@
     ></app-tab-bar>
   </div>
   <div class="col-12">
-    <div class="node-list-container mt-4.5">
+    <div class="rounded-elevated-box mt-4.5" *ngIf="dataSource.length !== 0"><div class="box-internal-container overflow full-node-list-margins">
       <!-- Table for large screens. -->
       <table
-        class="responsive-table-white container-elevated-white d-none d-md-table"
+        class="responsive-table-translucid d-none d-md-table"
         *ngIf="dataSource.length > 0"
         cellspacing="0" cellpadding="0"
       >
         <!-- Column names. -->
         <tr>
-          <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
-            <span class="dot-outline-gray" [matTooltip]="'nodes.state-tooltip' | translate"></span>
+          <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)" [matTooltip]="'nodes.state-tooltip' | translate">
+            <span class="dot-outline-gray"></span>
             <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
           </th>
           <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Label)">
@@ -67,26 +67,26 @@
               (copyEvent)="onCopyToClipboardClicked()"
               mat-icon-button
               [matTooltip]="'nodes.copy-key' | translate"
-              class="grey-button-background"
+              class="big-action-button transparent-button"
             >
-              <mat-icon class="small-icon">filter_none</mat-icon>
+              <mat-icon [inline]="true">filter_none</mat-icon>
             </button>
             <button
               (click)="showEditLabelDialog(node)"
               mat-icon-button
               [matTooltip]="'edit-label.title' | translate"
-              class="grey-button-background"
+              class="big-action-button transparent-button"
             >
-              <mat-icon>short_text</mat-icon>
+              <mat-icon [inline]="true">short_text</mat-icon>
             </button>
             <button
               *ngIf="node.online"
               (click)="open(node)"
               mat-icon-button
               [matTooltip]="'nodes.view-node' | translate"
-              class="grey-button-background"
+              class="big-action-button transparent-button"
             >
-              <mat-icon>chevron_right</mat-icon>
+              <mat-icon [inline]="true">chevron_right</mat-icon>
             </button>
             <button
               *ngIf="!node.online"
@@ -103,7 +103,7 @@
 
       <!-- List for small screens. -->
       <table
-        class="responsive-table-white container-elevated-white d-md-none nowrap"
+        class="responsive-table-translucid d-md-none nowrap"
         *ngIf="dataSource.length > 0"
         cellspacing="0" cellpadding="0"
       >
@@ -144,7 +144,7 @@
                 (click)="$event.stopPropagation(); showOptionsDialog(node)"
                 mat-icon-button
                 [matTooltip]="'common.options' | translate"
-                class="grey-button-background"
+                class="transparent-button"
               >
                 <mat-icon>{{ 'add' }}</mat-icon>
               </button>
@@ -152,10 +152,12 @@
           </div>
         </td></tr>
       </table>
+    </div></div>
 
-      <!-- Msg shown if the list is empty. -->
-      <div class="nodes-empty container-elevated-white" *ngIf="dataSource.length === 0">
-        <i class="material-icons">warning</i>
+    <!-- Msg shown if the list is empty. -->
+    <div class="rounded-elevated-box mt-3" *ngIf="dataSource.length === 0">
+      <div class="box-internal-container font-sm">
+        <mat-icon [inline]="true" class="alert-icon">warning</mat-icon>
         <span>{{ 'nodes.empty' | translate }}</span>
       </div>
     </div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
index fd18e9798a..3df08e97dd 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.scss
@@ -1,53 +1,9 @@
-@import "variables";
-@import "text";
-@import "~bootstrap/scss/functions";
-@import "bootstrap_overrides";
-
-.node-list-container {
-  width: 100%;
-  overflow-x: auto;
-
-  table, .nodes-empty {
-    box-shadow: none !important;
-  }
-
-  .nodes-empty {
-    color: theme-color(light-gray);
-    font-size: $font-size-sm;
-
-    i {
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 10px;
-    }
-
-    span {
-      position: relative;
-      top: 2px;
-    }
-  }
+.actions {
+  text-align: right;
+  width: 120px;
 }
 
-.responsive-table-white {
-  @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
-    & {
-      padding: 0;
-    }
-  }
-
-  .actions {
-    text-align: right;
-    width: 150px;
-  
-    button {
-      width: 32px;
-      height: 32px;
-      line-height: 24px;
-      margin-left: 5px;
-
-      .small-icon {
-        font-size: 15px;
-      }
-    }
-  }
+.alert-icon {
+  vertical-align: middle;
+  margin-right: 10px;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html
index 898701b7ff..e557083cba 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.html
@@ -1,5 +1,5 @@
 <!-- Header. -->
-<div class="generic-title-container mt-4.5 d-flex">
+<div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
   <div class="title uppercase ml-3.5">
     <span *ngIf="showShortList_">{{ 'apps.apps-list.title' | translate }}</span>
   </div>
@@ -38,10 +38,9 @@
 </app-paginator>
 
 <div
-  class="container-elevated-translucid mt-3"
-  [ngClass]="{'table-container': showShortList_, 'full-list-table-container': !showShortList_}"
+  class="rounded-elevated-box mt-3"
   *ngIf="dataSource && dataSource.length > 0"
->
+><div class="box-internal-container overflow" [ngClass]="{'small-node-list-margins': showShortList_, 'full-node-list-margins': !showShortList_}">
   <!-- Table for large screens. -->
   <table
     class="responsive-table-translucid d-none d-md-table"
@@ -51,8 +50,8 @@
     <!-- Column names. -->
     <tr>
       <th></th>
-      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
-        <span class="dot-outline-white" [matTooltip]="'apps.apps-list.state-tooltip' | translate"></span>
+      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)" [matTooltip]="'apps.apps-list.state-tooltip' | translate">
+        <span class="dot-outline-white"></span>
         <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
       </th>
       <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Name)">
@@ -94,7 +93,7 @@
           (click)="changeAppAutostart(app)"
           mat-icon-button
           [matTooltip]="(app.autostart ? 'apps.apps-list.disable-autostart' : 'apps.apps-list.enable-autostart') | translate"
-          class="big-action-button hard-grey-button-background"
+          class="big-action-button transparent-button"
         >
           <mat-icon [inline]="true">{{ app.autostart ? 'done' : 'close' }}</mat-icon>
         </button>
@@ -104,7 +103,7 @@
           (click)="config(app)"
           mat-icon-button
           [matTooltip]="'apps.settings' | translate"
-          class="big-action-button hard-grey-button-background"
+          class="big-action-button transparent-button"
           *ngIf="appsWithConfig.has(app.name)"
         >
           <mat-icon [inline]="true">settings</mat-icon>
@@ -113,7 +112,7 @@
           (click)="viewLogs(app)"
           mat-icon-button
           [matTooltip]="'apps.view-logs' | translate"
-          class="big-action-button hard-grey-button-background"
+          class="big-action-button transparent-button"
         >
           <mat-icon [inline]="true">list</mat-icon>
         </button>
@@ -121,7 +120,7 @@
           (click)="changeAppState(app)"
           mat-icon-button
           [matTooltip]="('apps.' + (app.status === 1 ? 'stop-app' : 'start-app')) | translate"
-          class="big-action-button hard-grey-button-background"
+          class="big-action-button transparent-button"
         >
           <mat-icon [inline]="true">{{ app.status === 1 ? 'stop' : 'play_arrow' }}</mat-icon>
         </button>
@@ -186,7 +185,7 @@
             (click)="$event.stopPropagation(); showOptionsDialog(app)"
             mat-icon-button
             [matTooltip]="'common.options' | translate"
-            class="grey-button-background"
+            class="transparent-button"
           >
             <mat-icon>{{ 'add' }}</mat-icon>
           </button>
@@ -201,11 +200,13 @@
     [linkParts]="['/nodes', nodePK, 'apps-list']"
     *ngIf="showShortList_ && numberOfPages > 1"
   ></app-view-all-link>
-</div>
+</div></div>
 
 <!-- Msg shown if the list is empty. -->
-<div class="container-elevated-translucid mt-3" *ngIf="!dataSource || dataSource.length === 0">
-  <span class="font-sm">{{ 'apps.apps-list.empty' | translate }}</span>
+<div class="rounded-elevated-box mt-3" *ngIf="!dataSource || dataSource.length === 0">
+  <div class="box-internal-container">
+      <span class="font-sm">{{ 'apps.apps-list.empty' | translate }}</span>
+  </div>
 </div>
 
 <!-- Link for accessing the full list. -->
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.scss
index 6078145dfc..b8cba412cf 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.scss
@@ -4,15 +4,3 @@
   text-align: right;
   width: 120px;
 }
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
-  .table-container {
-    padding: 0;
-  }
-}
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
-  .full-list-table-container {
-    padding: 0;
-  }
-}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html b/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html
index 4fb0256034..c622356334 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/charts/charts.component.html
@@ -1,4 +1,4 @@
-<div class="chart">
+<div class="small-rounded-elevated-box chart">
   <app-line-chart [data]="sendingHistory"></app-line-chart>
   <div class="info">
     <span class="text">{{ 'common.uploaded' | translate }}</span>
@@ -9,7 +9,7 @@
   </div>
 </div>
 
-<div class="chart">
+<div class="small-rounded-elevated-box chart">
   <app-line-chart [data]="receivingHistory"></app-line-chart>
   <div class="info">
     <span class="text">{{ 'common.downloaded' | translate }}</span>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
index 7246ddca83..a06101a722 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.html
@@ -72,7 +72,7 @@
   <div class="d-flex flex-column">
     <span class="section-title">{{ 'node.details.node-traffic-data' | translate }}</span>
     <app-charts
-      class="d-flex flex-column justify-content-end"
+      class="d-flex flex-column justify-content-end mt-3"
       [transports]="node.transports"
     ></app-charts>
   </div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.scss b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.scss
index 2ca1fd2073..4d0939c50a 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/node-info/node-info-content/node-info-content.component.scss
@@ -1,7 +1,8 @@
 @import 'variables';
 
 .section-title {
-  font-weight: $font-weight-bold;
+  font-size: $font-size-base;
+  font-weight: bold;
   text-transform: uppercase;
 }
 
@@ -28,5 +29,5 @@
   width: 100%;
   height: 0px;
   margin: 1rem 0;
-  border-top: 1px solid $white-separator;
+  border-top: 1px solid $separator;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.html b/static/skywire-manager-src/src/app/components/pages/node/node.component.html
index 1f5bca4bb7..6edaa86919 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.html
@@ -36,14 +36,14 @@
     ></app-tab-bar>
   </div>
   <div class="col-12">
-    <div class="main-area">
+    <div [ngClass]="{'main-area': !showingInfo && !showingFullList, 'full-size-main-area': showingInfo || showingFullList}">
       <div class="d-flex flex-column h-100">
         <!-- Content of the subpage. -->
         <router-outlet></router-outlet>
       </div>
     </div>
     <!-- Right bar. -->
-    <div class="right-bar">
+    <div class="right-bar" [ngClass]="{'d-none': showingInfo || showingFullList}">
       <app-node-info-content *ngIf="!showingInfo && !showingFullList" [nodeInfo]="node"></app-node-info-content>
     </div>
   </div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.scss b/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
index 223b7be7da..bbb5c51a99 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.scss
@@ -15,12 +15,16 @@
   }
 }
 
+.full-size-main-area {
+  width: 100%;
+}
+
 .main-area {
   width: 100%;
-  padding: 0 $additional-margin;
 
   @media (min-width: map-get($grid-breakpoints, lg)) {
-    width: 71%;
+    width: 73%;
+    padding-right: 20px;
     float: left;
   }
 }
@@ -28,7 +32,6 @@
 .right-bar {
   width: 27%;
   float: right;
-  padding-right: $additional-margin;
   display: none;
 
   @media (min-width: map-get($grid-breakpoints, lg)) {
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.html
index 2d698f72ec..cece481eb9 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.html
@@ -1,5 +1,5 @@
 <!-- Header. -->
-<div class="generic-title-container mt-4.5 d-flex">
+<div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
   <div class="title uppercase ml-3.5">
     <span *ngIf="showShortList_">{{ 'routes.title' | translate }}</span>
   </div>
@@ -29,10 +29,9 @@
 </app-paginator>
 
 <div
-  class="container-elevated-translucid mt-3"
-  [ngClass]="{'table-container': showShortList_, 'full-list-table-container': !showShortList_}"
+  class="rounded-elevated-box mt-3"
   *ngIf="dataSource && dataSource.length > 0"
->
+><div class="box-internal-container overflow" [ngClass]="{'small-node-list-margins': showShortList_, 'full-node-list-margins': !showShortList_}">
   <!-- Table for large screens. -->
   <table
     class="responsive-table-translucid d-none d-md-table"
@@ -71,7 +70,7 @@
           (click)="details(route.key)"
           mat-icon-button
           [matTooltip]="'routes.details.title' | translate"
-          class="action-button hard-grey-button-background"
+          class="action-button transparent-button"
         >
           <mat-icon [inline]="true">visibility</mat-icon>
         </button>
@@ -79,7 +78,7 @@
           (click)="delete(route.key)"
           mat-icon-button
           [matTooltip]="'routes.delete' | translate"
-          class="action-button hard-grey-button-background"
+          class="action-button transparent-button"
         >
           <mat-icon [inline]="true">close</mat-icon>
         </button>
@@ -132,7 +131,7 @@
             (click)="$event.stopPropagation(); showOptionsDialog(route)"
             mat-icon-button
             [matTooltip]="'common.options' | translate"
-            class="grey-button-background"
+            class="transparent-button"
           >
             <mat-icon>{{ 'add' }}</mat-icon>
           </button>
@@ -147,11 +146,13 @@
     [linkParts]="['/nodes', nodePK, 'routes']"
     *ngIf="showShortList_ && numberOfPages > 1"
   ></app-view-all-link>
-</div>
+</div></div>
 
 <!-- Msg shown if the list is empty. -->
-<div class="container-elevated-translucid mt-3" *ngIf="!dataSource || dataSource.length === 0">
-    <span class="font-sm">{{ 'routes.empty' | translate }}</span>
+<div class="rounded-elevated-box mt-3" *ngIf="!dataSource || dataSource.length === 0">
+  <div class="box-internal-container">
+    <span class="font-sm">{{ 'transports.empty' | translate }}</span>
+  </div>
 </div>
 
 <!-- Link for accessing the full list. -->
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.scss
index 9cb0fd551a..c035a44569 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.scss
@@ -4,15 +4,3 @@
   text-align: right;
   width: 90px;
 }
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
-  .table-container {
-    padding: 0;
-  }
-}
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
-  .full-list-table-container {
-    padding: 0;
-  }
-}
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
index ab3fcad3b2..43193e563a 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.html
@@ -1,5 +1,5 @@
 <!-- Header. -->
-<div class="generic-title-container mt-4.5 d-flex">
+<div class="generic-title-container mt-4.5 d-flex" [ngClass]="{'paginator-icons-fixer': !showShortList_ && numberOfPages > 1 && dataSource}">
   <div class="title uppercase ml-3.5">
     <span *ngIf="showShortList_">{{ 'transports.title' | translate }}</span>
   </div>
@@ -33,10 +33,9 @@
 </app-paginator>
 
 <div
-  class="container-elevated-translucid mt-3 overflow"
-  [ngClass]="{'table-container': showShortList_, 'full-list-table-container': !showShortList_}"
+  class="rounded-elevated-box mt-3"
   *ngIf="dataSource && dataSource.length > 0"
->
+><div class="box-internal-container overflow" [ngClass]="{'small-node-list-margins': showShortList_, 'full-node-list-margins': !showShortList_}">
   <!-- Table for large screens. -->
   <table
     class="responsive-table-translucid d-none d-md-table"
@@ -46,8 +45,8 @@
     <!-- Column names. -->
     <tr>
       <th></th>
-      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)">
-        <span class="dot-outline-white" [matTooltip]="'transports.state-tooltip' | translate"></span>
+      <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.State)" [matTooltip]="'transports.state-tooltip' | translate">
+        <span class="dot-outline-white"></span>
         <mat-icon *ngIf="sortBy === sortableColumns.State" [inline]="true">{{ sortingArrow }}</mat-icon>
       </th>
       <th class="sortable-column" (click)="changeSortingOrder(sortableColumns.Id)">
@@ -103,7 +102,7 @@
           (click)="details(transport)"
           mat-icon-button
           [matTooltip]="'transports.details.title' | translate"
-          class="action-button hard-grey-button-background"
+          class="action-button transparent-button"
         >
           <mat-icon [inline]="true">visibility</mat-icon>
         </button>
@@ -111,7 +110,7 @@
           (click)="delete(transport.id)"
           mat-icon-button
           [matTooltip]="'transports.delete' | translate"
-          class="action-button hard-grey-button-background"
+          class="action-button transparent-button"
         >
           <mat-icon [inline]="true">close</mat-icon>
         </button>
@@ -180,7 +179,7 @@
             (click)="$event.stopPropagation(); showOptionsDialog(transport)"
             mat-icon-button
             [matTooltip]="'common.options' | translate"
-            class="grey-button-background"
+            class="transparent-button"
           >
             <mat-icon>{{ 'add' }}</mat-icon>
           </button>
@@ -195,11 +194,13 @@
     [linkParts]="['/nodes', nodePK, 'transports']"
     *ngIf="showShortList_ && numberOfPages > 1"
   ></app-view-all-link>
-</div>
+</div></div>
 
 <!-- Msg shown if the list is empty. -->
-<div class="container-elevated-translucid mt-3" *ngIf="!dataSource || dataSource.length === 0">
-  <span class="font-sm">{{ 'transports.empty' | translate }}</span>
+<div class="rounded-elevated-box mt-3" *ngIf="!dataSource || dataSource.length === 0">
+  <div class="box-internal-container">
+    <span class="font-sm">{{ 'transports.empty' | translate }}</span>
+  </div>
 </div>
 
 <!-- Link for accessing the full list. -->
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
index b9bbcc5b75..8460bc3e4d 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.scss
@@ -14,15 +14,3 @@
   text-align: right;
   width: 90px;
 }
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
-  .table-container {
-    padding: 0;
-  }
-}
-
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
-  .full-list-table-container {
-    padding: 0;
-  }
-}
diff --git a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
index f8f1c05cee..3ae0db6899 100644
--- a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
+++ b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
@@ -12,10 +12,32 @@
 
 .elevated-box {
   background-image: url('/assets/img/background-pattern.png');
-  box-shadow: inset 0 0 55px 0 rgba(75, 101, 137, 0.25), 5px 5px 7px 0 rgba(0, 0, 0, 0.35);
+  box-shadow: inset 0 0 55px 0 rgba(53, 87, 134, 0.4), 5px 5px 7px 0 rgba(0, 0, 0, 0.35);
   border: $box-border solid 1px;
 }
 
+.rounded-elevated-box {
+  width: 100%;
+  @extend .elevated-box;
+  border-radius: $mat-dialog-radius;
+  overflow: hidden;
+  padding: 3px;
+
+  .box-internal-container {
+    border-radius: $mat-dialog-radius;
+    padding: $containers-padding - 3px;
+    border: scale-color($box-border, $alpha: -65%) solid 1px;
+    overflow: hidden;
+  }
+}
+
+.small-rounded-elevated-box {
+  @extend .rounded-elevated-box;
+  width: unset;
+  padding: 0;
+  box-shadow: inset 0 0 20px 0 rgba(53, 87, 134, 0.4), 5px 5px 7px 0 rgba(0, 0, 0, 0.35);
+}
+
 // Backgrounds for the rounded boxes used as containers in the app.
 $elevated-containers-colors: (
   translucid: map_get($theme-colors, translucid),
diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
index 1c97ebe050..d9cccca87d 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -42,12 +42,6 @@ $responsive-table-colors: (
     }
 
     tr {
-      &:last-of-type {
-        td, th {
-          border-bottom: none;
-        }
-      }
-
       .sortable-column {
         @extend .selectable;
       
@@ -101,19 +95,13 @@ $responsive-table-colors: (
       }
     
       .mat-checkbox-background, .mat-checkbox-frame {
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
         box-sizing: border-box;
-        pointer-events: none;
         width: 18px;
         height: 18px;
-        background: rgba(30, 34, 39, 0.10) !important;
+        background: rgba(0, 0, 0, 0.3) !important;
         border-radius: 6px;
         border-width: 2px;
-        border-color: rgba(0, 0, 0, 0.15);
+        border-color: rgba(0, 0, 0, 0.5);
       }
     
       .mat-ripple-element {
@@ -202,6 +190,8 @@ $responsive-table-colors: (
 
   .title {
     margin-right: auto;
+    font-size: $font-size-base;
+    font-weight: bold;
   }
 
   mat-icon {
@@ -215,7 +205,8 @@ $responsive-table-colors: (
     color: $blue-dark;
     border-radius: 1000px;
     cursor: pointer;
-    opacity: 0.9;
+
+    @extend .subtle-transparent-button;
 
     @media (max-width: (map-get($grid-breakpoints, md) - 1)) {
       & {
@@ -225,9 +216,28 @@ $responsive-table-colors: (
         font-size: 24px !important;
       }
     }
+  }
+}
 
-    &:hover {
-      opacity: 1;
-    }
+// Allows to remove the margin at the right of the last mat-icon element inside
+// generic-title-container, to make it be shown correctly when there is a paginator.
+.paginator-icons-fixer {
+  mat-icon:last-of-type {
+    margin-right: 0 !important;
+  }
+}
+
+// Controls the padding of the elements in the main area when in the visor details page.
+@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
+  .small-node-list-margins {
+    padding: 0 !important;
+  }
+}
+
+// Controls the padding of the elements in the main area when showing the full list of any of the
+// elements of a visor.
+@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+  .full-node-list-margins {
+    padding: 0 !important;
   }
 }
diff --git a/static/skywire-manager-src/src/assets/scss/_variables.scss b/static/skywire-manager-src/src/assets/scss/_variables.scss
index 17def06d8e..f699b1b68d 100644
--- a/static/skywire-manager-src/src/assets/scss/_variables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_variables.scss
@@ -30,7 +30,7 @@ $theme-colors: (
   blue:               $blue,
   blue-dark:          $blue-dark,
   translucid:         rgba(32, 34, 38, .44),
-  translucid-hover:   rgba(0, 0, 0, 0.1),
+  translucid-hover:   rgba(0, 0, 0, 0.2),
   translucid-white:   rgba(255, 255, 255, .44),
   translucid-dark:    rgba(21, 75, 108, .91),
   white:              $white,
@@ -70,12 +70,10 @@ $mat-dialog-radius: 10px;
 //
 // Container
 //
-$containers-padding: 20px;
+$containers-padding: 15px;
 
 //
 // Sizes
 //
 $header-height: 82px;
 $header-buttons-height: 40px;
-
-$additional-margin: 5px;
diff --git a/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss b/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
index 3dac6de45b..dabe20ebba 100644
--- a/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
+++ b/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
@@ -46,3 +46,19 @@
     }
   }
 }
+
+.transparent-button {
+  opacity: 0.5;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+.subtle-transparent-button {
+  opacity: 0.85;
+
+  &:hover {
+    opacity: 1;
+  }
+}
diff --git a/static/skywire-manager-src/src/styles.scss b/static/skywire-manager-src/src/styles.scss
index 2196341659..cd199ca92d 100644
--- a/static/skywire-manager-src/src/styles.scss
+++ b/static/skywire-manager-src/src/styles.scss
@@ -81,11 +81,3 @@ button:focus {
 .mat-snack-bar-container {
   max-width: 90vw !important;
 }
-
-.transparent-button {
-  opacity: 0.5;
-
-  &:hover {
-    opacity: 1;
-  }
-}

From 25f3f36976fcd4a073d34d47a741c9f6774f67c9 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Thu, 2 Jul 2020 17:34:29 -0400
Subject: [PATCH 3/8] Add the dark theme to the options page

---
 .../layout/button/button.component.scss       |  6 +++++
 .../settings/password/password.component.html | 12 ++++-----
 .../settings/password/password.component.scss |  6 -----
 .../refresh-rate/refresh-rate.component.html  |  8 +++---
 .../refresh-rate/refresh-rate.component.scss  |  5 ----
 .../src/assets/scss/_forms.scss               | 26 +++++++++++++++++++
 .../src/assets/scss/_variables.scss           |  1 +
 static/skywire-manager-src/src/theme.scss     |  4 +--
 8 files changed, 45 insertions(+), 23 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/layout/button/button.component.scss b/static/skywire-manager-src/src/app/components/layout/button/button.component.scss
index e457ee6c2b..ef13aae758 100644
--- a/static/skywire-manager-src/src/app/components/layout/button/button.component.scss
+++ b/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;
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
index dc83c48dad..3779ee47b1 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
@@ -1,11 +1,11 @@
-<div [ngClass]="{ 'container-elevated-white': !forInitialConfig }">
-  <div class="help-container">
+<div [ngClass]="{ 'rounded-elevated-box': !forInitialConfig }"><div class="box-internal-container overflow">
+  <div class="form-help-icon-container">
     <mat-icon [inline]="true" [matTooltip]="(forInitialConfig ? 'settings.password.initial-config-help' : 'settings.password.help') | translate">
       help
     </mat-icon>
   </div>
   <form [formGroup]="form">
-    <mat-form-field *ngIf="!forInitialConfig">
+    <mat-form-field *ngIf="!forInitialConfig" class="white-form-field">
       <input
         type="password"
         formControlName="oldPassword"
@@ -18,7 +18,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field class="white-form-field">
       <input
         type="password"
         formControlName="newPassword"
@@ -32,7 +32,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field>
+    <mat-form-field class="white-form-field">
       <input
         type="password"
         formControlName="newPasswordConfirmation"
@@ -56,4 +56,4 @@
       {{ (forInitialConfig ? 'settings.password.initial-config.set-password': 'settings.change-password') | translate }}
     </app-button>
   </form>
-</div>
+</div></div>
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.scss b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.scss
index f322889f6a..79d3995c2e 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.scss
@@ -8,9 +8,3 @@ app-button {
   float: right;
   margin-right: 32px;
 }
-
-.help-container {
-  color: $light-gray;
-  height: 0px;
-  text-align: right;
-}
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
index 3714e7b5c0..6784c7c59e 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
@@ -1,11 +1,11 @@
-<div class="container-elevated-white">
-  <div class="help-container">
+<div class="rounded-elevated-box"><div class="box-internal-container overflow">
+  <div class="form-help-icon-container">
     <mat-icon [inline]="true" [matTooltip]="'settings.refresh-rate-help' | translate">
       help
     </mat-icon>
   </div>
   <form [formGroup]="form">
-    <mat-form-field>
+    <mat-form-field class="white-form-field">
       <mat-select formControlName="refreshRate" [placeholder]="'settings.refresh-rate' | translate">
         <mat-option *ngFor="let time of timesList" value="{{time}}">
           {{ time }} {{ 'settings.seconds' | translate }}
@@ -13,4 +13,4 @@
       </mat-select>
     </mat-form-field>
   </form>
-</div>
+</div></div>
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.scss b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.scss
index 239e23fc37..6e9502c6c4 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.scss
@@ -14,8 +14,3 @@ mat-form-field ::ng-deep {
   }
 }
 
-.help-container {
-  color: $light-gray;
-  height: 0px;
-  text-align: right;
-}
diff --git a/static/skywire-manager-src/src/assets/scss/_forms.scss b/static/skywire-manager-src/src/assets/scss/_forms.scss
index f2f406350f..16aff8d082 100644
--- a/static/skywire-manager-src/src/assets/scss/_forms.scss
+++ b/static/skywire-manager-src/src/assets/scss/_forms.scss
@@ -54,3 +54,29 @@
 mat-form-field {
   display: block !important;
 }
+
+// White form fields, to be shown with the dark background.
+.white-form-field {
+  .mat-select-value-text, .mat-form-field-label, .mat-select-value, .mat-select-arrow {
+    color: $white !important;
+  }
+
+   .mat-form-field-underline {
+    background-color: scale-color($white, $alpha: -50%) !important;
+  }
+
+  .mat-form-field-ripple {
+    background-color: $white !important;
+  }
+
+  .mat-input-element {
+    caret-color: $white;
+  }
+}
+
+// Container for the white help icons shown in the forms, to be shown with the dark background.
+.form-help-icon-container {
+  color: scale-color($white, $alpha: -20%);
+  height: 0px;
+  text-align: right;
+}
diff --git a/static/skywire-manager-src/src/assets/scss/_variables.scss b/static/skywire-manager-src/src/assets/scss/_variables.scss
index f699b1b68d..5ca670fe8a 100644
--- a/static/skywire-manager-src/src/assets/scss/_variables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_variables.scss
@@ -7,6 +7,7 @@ $black: #202226;
 
 $blue-light: #00C3FF;
 $blue: #0072FF;
+$blue-medium: #215f9e;
 $blue-dark: #154B6C;
 $blue-dark-Background1: #0e192a;
 $blue-dark-Background2: #101f34;
diff --git a/static/skywire-manager-src/src/theme.scss b/static/skywire-manager-src/src/theme.scss
index 69e6f360ca..ec9733f191 100644
--- a/static/skywire-manager-src/src/theme.scss
+++ b/static/skywire-manager-src/src/theme.scss
@@ -8,8 +8,8 @@ $general-typography: mat-typography-config(
 @include mat-core($general-typography);
 
 $mat-skywire-primary: (
-  100: $blue-light,
-  500: $blue,
+  100: $blue-medium,
+  500: $blue-medium,
   contrast: (
     100: $white,
     500: $white,

From 7b1694e06a84e5940c7786ef6b8a0ce5c9a99705 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sat, 4 Jul 2020 16:11:19 -0400
Subject: [PATCH 4/8] Update the design of the modal windows

---
 .../confirmation/confirmation.component.html  |   8 +++
 .../confirmation/confirmation.component.scss  |  10 ++-
 .../confirmation/confirmation.component.ts    |  13 +++-
 .../layout/dialog/dialog.component.html       |   6 +-
 .../layout/dialog/dialog.component.scss       |  21 +++++-
 .../layout/dialog/dialog.component.ts         |   4 ++
 .../select-page/select-page.component.html    |   2 +-
 .../select-column.component.html              |   2 +-
 .../select-language.component.scss            |   2 +-
 .../select-option.component.html              |   2 +-
 .../select-tab/select-tab.component.html      |   2 +-
 .../pages/login/login.component.html          |   2 +-
 .../pages/login/login.component.scss          |   8 +++
 .../pages/node-list/node-list.component.html  |   2 +-
 .../pages/node-list/node-list.component.ts    |  67 +++++++++++-------
 .../pages/node/actions/actions.component.ts   |   9 +--
 .../apps/node-apps/log/log.component.html     |  10 +--
 .../apps/node-apps/log/log.component.scss     |  35 ++++++---
 .../route-details.component.html              |  10 +--
 .../transport-details.component.html          |   4 +-
 .../settings/password/password.component.html |   6 +-
 .../refresh-rate/refresh-rate.component.html  |   2 +-
 .../src/assets/i18n/en.json                   |  12 ++--
 .../assets/img/modal-background-pattern.png   | Bin 0 -> 957 bytes
 .../src/assets/scss/_backgrounds.scss         |   2 +
 .../src/assets/scss/_dialogs.scss             |  19 +++--
 .../src/assets/scss/_forms.scss               |   9 ++-
 .../src/assets/scss/_variables.scss           |   3 +
 28 files changed, 196 insertions(+), 76 deletions(-)
 create mode 100644 static/skywire-manager-src/src/assets/img/modal-background-pattern.png

diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html
index 8c94d7e135..c8f39b529e 100644
--- a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.html
+++ b/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
diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.scss b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.scss
index 56a7a244b4..ae2533fad0 100644
--- a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.scss
+++ b/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;
 }
 
diff --git a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts b/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts
index b627a60be4..84a2448cce 100644
--- a/static/skywire-manager-src/src/app/components/layout/confirmation/confirmation.component.ts
+++ b/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());
diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html
index 277acc00a7..f16405db21 100644
--- a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html
+++ b/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">
+<ng-container [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="!includeScrollableArea">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </ng-container>
 <ng-template #contentTemplate><ng-content></ng-content></ng-template>
diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss
index de583d930f..9ec68779a5 100644
--- a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.scss
+++ b/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;
+}
diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts
index 987b3e36c8..ab17e114b6 100644
--- a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.ts
+++ b/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;
 }
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
index 503eca14ce..bc6ff28b1a 100644
--- a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'paginator.select-page-title' | translate">
+<app-dialog [headline]="'paginator.select-page-title' | translate" [includeVerticalMargins]="false">
   <div class="options-list-button-container" *ngFor="let page of options">
     <button
       mat-button
diff --git a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
index 159e35ccaf..7dc0ff3e0d 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'tables.title' | translate">
+<app-dialog [headline]="'tables.title' | translate" [includeVerticalMargins]="false">
   <div class="options-list-button-container" *ngFor="let column of data; let i = index">
     <ng-container *ngFor="let reverse of [false, true]">
       <button
diff --git a/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.scss b/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.scss
index 91e9cf712c..a2a64fe48f 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.scss
+++ b/static/skywire-manager-src/src/app/components/layout/select-language/select-language.component.scss
@@ -2,7 +2,7 @@
 @import 'variables';
 @import 'text';
 
-$label-background: #eeeeee;
+$label-background: rgba(255, 255, 255, 0.25);
 
 .options-container {
   display: flex;
diff --git a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
index af0ad07467..5aadb6ebac 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'common.options' | translate">
+<app-dialog [headline]="'common.options' | translate" [includeVerticalMargins]="false">
   <div class="options-list-button-container" *ngFor="let option of data; let i = index">
     <button
       mat-button
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
index f729617eb0..477e03b30b 100644
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'tabs-window.title' | translate">
+<app-dialog [headline]="'tabs-window.title' | translate" [includeVerticalMargins]="false">
   <div class="options-list-button-container" *ngFor="let tabData of data; let i = index">
     <button
       mat-button
diff --git a/static/skywire-manager-src/src/app/components/pages/login/login.component.html b/static/skywire-manager-src/src/app/components/pages/login/login.component.html
index 8390a4ab80..e58ad734d0 100644
--- a/static/skywire-manager-src/src/app/components/pages/login/login.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/login/login.component.html
@@ -1,7 +1,7 @@
 <div class="w-100 h-100 d-flex justify-content-center">
   <app-lang-button></app-lang-button>
   <div
-    class="row flex-column align-items-center h-100 justify-content-center"
+    class="row main-container"
   >
     <img src="/assets/img/logo-v.png" class="logo" />
     <form class="mt-5" [formGroup]="form">
diff --git a/static/skywire-manager-src/src/app/components/pages/login/login.component.scss b/static/skywire-manager-src/src/app/components/pages/login/login.component.scss
index c8ad201862..34c3115d1f 100644
--- a/static/skywire-manager-src/src/app/components/pages/login/login.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/login/login.component.scss
@@ -7,6 +7,14 @@ app-lang-button {
   top: 10px;
 }
 
+.main-container {
+  z-index: 1;
+  height: 100%;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
 .logo {
   width: 170px;
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
index e9c05cd127..7afabab326 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.html
@@ -93,7 +93,7 @@
               (click)="deleteNode(node)"
               mat-icon-button
               [matTooltip]="'nodes.delete-node' | translate"
-              class="grey-button-background"
+              class="big-action-button transparent-button"
             >
               <mat-icon>close</mat-icon>
             </button>
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
index 9081a7fa91..dfa93b5648 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
@@ -347,44 +347,64 @@ export class NodeListComponent implements OnInit, OnDestroy {
       this.updateSubscription.unsubscribe();
     }
 
-    const nodesToCheck = this.dataSource.filter(node => node.online).map(node => node.local_pk);
+    // Get the list of all online visors, to check if there are updates available.
+    const nodesToCheck: string[] = [];
+    const labelsToCheck: string[] = [];
+    this.dataSource.forEach(node => {
+      if (node.online) {
+        nodesToCheck.push(node.local_pk);
+        labelsToCheck.push(node.label);
+      }
+    });
+
+    // Keys and labels of all visors with an update available.
+    const keysWithUpdate: string[] = [];
+    const labelsWithUpdate: string[] = [];
+    // How many visors have an update available.
+    let visorsWithUpdate = 0;
 
     // Check if there are updates available.
     this.updateSubscription = forkJoin(nodesToCheck.map(pk => this.nodeService.checkUpdate(pk))).subscribe(response => {
-      // Check how many visors have to be updated.
-      let visorsWithUpdate = 0;
-      let currentVersion = '';
-      let differentCurrentVersions = false;
-      let newVersion = '';
-      response.forEach(updateInfo => {
+      // Contains the list of all updates found, without repetitions.
+      const updates = new Map<string, string>();
+
+      // Check the response for each visor.
+      response.forEach((updateInfo, i) => {
         if (updateInfo && updateInfo.available) {
           visorsWithUpdate += 1;
 
-          if (currentVersion && currentVersion !== updateInfo.current_version) {
-            differentCurrentVersions = true;
-          }
+          // Save the data for calling the update procedure later.
+          keysWithUpdate.push(nodesToCheck[i]);
+          labelsWithUpdate.push(labelsToCheck[i]);
 
-          currentVersion = updateInfo.current_version;
-          newVersion = updateInfo.available_version;
+          // Save the name of the update, if it was not found before.
+          if (!updates.has(updateInfo.current_version + updateInfo.available_version)) {
+            const newVersion = this.translateService.instant('nodes.update.version-change',
+              { currentVersion: updateInfo.current_version, newVersion: updateInfo.available_version }
+            );
+
+            updates.set(updateInfo.current_version + updateInfo.available_version, newVersion);
+          }
         }
       });
 
       if (visorsWithUpdate > 0) {
         // Text for asking for confirmation before updating.
         let newText: string;
-        if (!differentCurrentVersions) {
-          newText = this.translateService.instant('nodes.update.update-available',
-            { number: visorsWithUpdate, currentVersion: currentVersion, newVersion: newVersion }
-          );
+        if (visorsWithUpdate === 1) {
+          newText = 'nodes.update.update-available-single';
         } else {
-          newText = this.translateService.instant('nodes.update.update-available-different',
-            { number: visorsWithUpdate, newVersion: newVersion }
-          );
+          newText = this.translateService.instant('nodes.update.update-available-multiple', {number: visorsWithUpdate});
         }
 
+        const updatesList: string[] = [];
+        updates.forEach(u => updatesList.push(u));
+
         // New configuration for asking for confirmation.
         const newConfirmationData: ConfirmationData = {
           text: newText,
+          list: updatesList,
+          lowerText: 'nodes.update.update-available-confirmation',
           headerText: 'nodes.update.title',
           confirmButtonText: 'nodes.update.install',
           cancelButtonText: 'common.cancel',
@@ -414,15 +434,12 @@ export class NodeListComponent implements OnInit, OnDestroy {
     confirmationDialog.componentInstance.operationAccepted.subscribe(() => {
       confirmationDialog.componentInstance.showProcessing();
 
-      // Keys and labels of all visors.
-      const keys = this.dataSource.map(node => node.local_pk);
-      const labels = this.dataSource.map(node => node.label);
       // Update all visors.
-      this.updateSubscription = this.recursivelyUpdateWallets(keys, labels).subscribe(response => {
+      this.updateSubscription = this.recursivelyUpdateWallets(keysWithUpdate, labelsWithUpdate).subscribe(response => {
         if (response === 0) {
           // If everything was ok, show a confirmation.
           confirmationDialog.componentInstance.showDone('confirmation.done-header-text', 'nodes.update.done-all');
-        } else if (response === this.dataSource.length) {
+        } else if (response === visorsWithUpdate) {
           // Error if no visor was updated.
           confirmationDialog.componentInstance.showDone('confirmation.error-header-text', 'nodes.update.all-failed-error');
         } else {
@@ -430,7 +447,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
           confirmationDialog.componentInstance.showDone(
             'confirmation.error-header-text',
             this.translateService.instant('nodes.update.some-updated-error',
-              {failedNumber: response, updatedNumber: this.dataSource.length - response}
+              {failedNumber: response, updatedNumber: visorsWithUpdate - response}
             )
           );
         }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts b/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
index b992ebfa28..bb7648bb2c 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
@@ -166,11 +166,13 @@ export class ActionsComponent implements AfterViewInit, OnDestroy {
     this.updateSubscription = this.nodeService.checkUpdate(NodeComponent.getCurrentNodeKey()).subscribe(response => {
       if (response && response.available) {
         // New configuration for asking for confirmation.
-        const newText = this.translateService.instant('actions.update.update-available',
+        const newVersion = this.translateService.instant('actions.update.version-change',
           { currentVersion: response.current_version, newVersion: response.available_version }
         );
         const newConfirmationData: ConfirmationData = {
-          text: newText,
+          text: 'actions.update.update-available1',
+          list: [newVersion],
+          lowerText: 'actions.update.update-available2',
           headerText: 'actions.update.title',
           confirmButtonText: 'actions.update.install',
           cancelButtonText: 'common.cancel',
@@ -182,9 +184,8 @@ export class ActionsComponent implements AfterViewInit, OnDestroy {
         });
       } else if (response) {
         // Inform that there are no updates available.
-        const newText = this.translateService.instant('actions.update.no-update', { version: response.current_version });
         setTimeout(() => {
-          confirmationDialog.componentInstance.showDone(null, newText);
+          confirmationDialog.componentInstance.showDone(null, 'actions.update.no-update', [response.current_version]);
         });
       } else {
         // Inform that there was an error.
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
index f692df2f42..fed769c513 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
@@ -1,9 +1,9 @@
 <app-dialog [headline]="'apps.log.title' | translate" [includeScrollableArea]="false">
-  <div class="filter-link"
-    (click)="filter()"
-  >
-    <span class="transparent">{{ 'apps.log.filter-button' | translate }}</span>&nbsp;
-    <span>{{ currentFilter.text | translate }}</span>
+  <div class="filter-link-container">
+    <div class="filter-link subtle-transparent-button" (click)="filter()">
+      <span class="transparent">{{ 'apps.log.filter-button' | translate }}</span>&nbsp;
+      <span>{{ currentFilter.text | translate }}</span>
+    </div>
   </div>
   <mat-dialog-content #content>
     <div *ngFor="let message of logMessages" class="app-log-message">
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
index cddd1144bb..ffda3ff943 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
@@ -7,17 +7,36 @@
 .app-log-message {
   margin-top: 15px;
   word-break: break-word;
+
+  .transparent {
+    color: $lighter-gray;
+  }
 }
 
-.transparent {
-  opacity: 0.5;
+.app-log-message:first-of-type {
+  margin-top: 0px;
 }
 
-.filter-link {
-  font-size: $font-size-sm;
+.app-log-message:last-of-type {
+  margin-bottom: $mat-dialog-padding;
+}
+
+.filter-link-container {
   text-align: center;
-  padding: 10px 0;
-  color: $blue;
-  border-bottom: $separator solid 1px;
-  cursor: pointer;
+  margin: 15px 0;
+
+  .filter-link {
+    display: inline;
+    background: $white;
+    padding: 5px 10px;
+    border-radius: 1000px;
+    font-size: $font-size-sm;
+    text-align: center;
+    color: $blue-medium;
+    cursor: pointer;
+
+    .transparent {
+      color: scale-color($blue-medium, $alpha: -50%);
+    }
+  }
 }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html
index 8aaa83854a..2f7ba74b58 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-details/route-details.component.html
@@ -3,7 +3,7 @@
   <div *ngIf="routeRule">
     <!-- Basic info. -->
     <div class="title mt-0">
-      {{ 'routes.details.basic.title' | translate }}
+      <mat-icon [inline]="true">list</mat-icon>{{ 'routes.details.basic.title' | translate }}
     </div>
     <div class="item">
       <span>{{ 'routes.details.basic.key' | translate }}</span> {{ routeRule.key }}
@@ -15,7 +15,7 @@
     <!-- Rule summary. -->
     <div *ngIf="routeRule.rule_summary">
       <div class="title">
-        {{ 'routes.details.summary.title' | translate }}
+        <mat-icon [inline]="true">list</mat-icon>{{ 'routes.details.summary.title' | translate }}
       </div>
       <div class="item">
         <span>{{ 'routes.details.summary.keep-alive' | translate }}</span> {{ routeRule.rule_summary.keep_alive }}
@@ -29,13 +29,13 @@
 
       <!-- Title for the specific rule type. -->
       <div *ngIf="routeRule.rule_summary.app_fields" class="title">
-        {{ 'routes.details.specific-fields-titles.app' | translate }}
+        <mat-icon [inline]="true">settings</mat-icon>{{ 'routes.details.specific-fields-titles.app' | translate }}
       </div>
       <div *ngIf="routeRule.rule_summary.forward_fields" class="title">
-        {{ 'routes.details.specific-fields-titles.forward' | translate }}
+        <mat-icon [inline]="true">swap_horiz</mat-icon>{{ 'routes.details.specific-fields-titles.forward' | translate }}
       </div>
       <div *ngIf="routeRule.rule_summary.intermediary_forward_fields" class="title">
-        {{ 'routes.details.specific-fields-titles.intermediary-forward' | translate }}
+        <mat-icon [inline]="true">arrow_forward</mat-icon>{{ 'routes.details.specific-fields-titles.intermediary-forward' | translate }}
       </div>
 
       <!-- Fields for the forward and intermediary forward rules. -->
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
index cfc63eea04..b38a331cb7 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-details/transport-details.component.html
@@ -1,7 +1,7 @@
 <app-dialog class="info-dialog" [headline]="'transports.details.title' | translate">
   <div>
     <div class="title mt-0">
-      {{ 'transports.details.basic.title' | translate }}
+      <mat-icon [inline]="true">list</mat-icon>{{ 'transports.details.basic.title' | translate }}
     </div>
     <div class="item">
       <span>{{ 'transports.details.basic.state' | translate }}</span>
@@ -23,7 +23,7 @@
     </div>
 
     <div class="title">
-      {{ 'transports.details.data.title' | translate }}
+      <mat-icon [inline]="true">import_export</mat-icon>{{ 'transports.details.data.title' | translate }}
     </div>
     <div class="item">
       <span>{{ 'transports.details.data.uploaded' | translate }}</span> {{ data.log.sent | autoScale }}
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
index 3779ee47b1..ecf03f9460 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/settings/password/password.component.html
@@ -1,5 +1,5 @@
 <div [ngClass]="{ 'rounded-elevated-box': !forInitialConfig }"><div class="box-internal-container overflow">
-  <div class="form-help-icon-container">
+  <div [class]="(!forInitialConfig ? 'white-' : '') + 'form-help-icon-container'">
     <mat-icon [inline]="true" [matTooltip]="(forInitialConfig ? 'settings.password.initial-config-help' : 'settings.password.help') | translate">
       help
     </mat-icon>
@@ -18,7 +18,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="white-form-field">
+    <mat-form-field [ngClass]="{'white-form-field': !forInitialConfig}">
       <input
         type="password"
         formControlName="newPassword"
@@ -32,7 +32,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="white-form-field">
+    <mat-form-field [ngClass]="{'white-form-field': !forInitialConfig}">
       <input
         type="password"
         formControlName="newPasswordConfirmation"
diff --git a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
index 6784c7c59e..251b6f6182 100644
--- a/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/settings/refresh-rate/refresh-rate.component.html
@@ -1,5 +1,5 @@
 <div class="rounded-elevated-box"><div class="box-internal-container overflow">
-  <div class="form-help-icon-container">
+  <div class="white-form-help-icon-container">
     <mat-icon [inline]="true" [matTooltip]="'settings.refresh-rate-help' | translate">
       help
     </mat-icon>
diff --git a/static/skywire-manager-src/src/assets/i18n/en.json b/static/skywire-manager-src/src/assets/i18n/en.json
index 66d7f9a182..543eccab68 100644
--- a/static/skywire-manager-src/src/assets/i18n/en.json
+++ b/static/skywire-manager-src/src/assets/i18n/en.json
@@ -107,8 +107,10 @@
       "processing": "Looking for updates...",
       "processing-button": "Please wait",
       "no-update": "Currently, there are no new updates for the visors.",
-      "update-available": "There is an update available for {{ number }} visors. Click the 'Install update' button to continue. The currently installed version is {{ currentVersion }} and the new version is {{ newVersion }}.",
-      "update-available-different": "There is an update available for {{ number }} visors. Click the 'Install update' button to continue. There are different versions installed in the visors and the new version is {{ newVersion }}.",
+      "update-available-single": "There is an update available for 1 visor:",
+      "update-available-multiple": "There are updates available for {{ number }} visors:",
+      "update-available-confirmation": "Click the 'Install update' button to continue.",
+      "version-change": "From {{ currentVersion }} to {{ newVersion }}",
       "done": "The visor {{ name }} is being updated.",
       "done-all": "Operation completed. All visors are being updated.",
       "update-error": "Could not install the update in visor {{ name }}. Please, try again later.",
@@ -196,8 +198,10 @@
       "title": "Update",
       "processing": "Looking for updates...",
       "processing-button": "Please wait",
-      "no-update": "Currently, there is no update for the visor. The currently installed version is {{ version }}.",
-      "update-available": "There is an update available for the visor. Click the 'Install update' button to continue. The currently installed version is {{ currentVersion }} and the new version is {{ newVersion }}.",
+      "no-update": "Currently, there is no update for the visor. The currently installed version is:",
+      "update-available1": "There is an update available for the visor:",
+      "update-available2": "Click the 'Install update' button to install it.",
+      "version-change": "From {{ currentVersion }} to {{ newVersion }}",
       "done": "The visor is being updated.",
       "update-error": "Could not install the update. Please, try again later.",
       "install": "Install update"
diff --git a/static/skywire-manager-src/src/assets/img/modal-background-pattern.png b/static/skywire-manager-src/src/assets/img/modal-background-pattern.png
new file mode 100644
index 0000000000000000000000000000000000000000..33f259744b37eb71983d5a015e9318af3f9ee7a4
GIT binary patch
literal 957
zcmaJ=yKmD#9JbU4RYV1B(1nvL@sMhtFAox1F>PYUG*TT!X{2V1V_y<0wa?fW;$%W>
z2nJaAA6U9DB2fkw{sn}@pHQ)P;GD)O1Hsby9{RrT_qgv~Hyh8kGdmfM<F@OEdW+3l
z$=KRt|8KXxykXNlTI<kb(x($E#9YN8Jq+reHNY)wIn(Fgahc=R9=Poe?U+Z3O+3*`
zFk<WljLmW7{W!4f5vHJr2d=O37oX30;5sUQQZOYm(D2YboQ3#!)@a+aku5v?{!>tn
z6(-<eYJu20^&=%#`MIvb*2yvC!5l(IDu0z!$7}+PgcuaWf?!Ko1d6hV3WZ`Zy9cro
z%0mf3loODw<nxLofyKwOXra?rTDq}_#daz`q%=?<oJ=O-Bqx$^0Ff-qP|Ct=R$vGr
zn)=j=1wYzN6?7cgp&L+__#jcVdSpyho@IJff)^}h{b<o9)-V`b0Ysvdl#~KZ^Z!uK
zTcRV{!q@r!Q#fi*0}NX@BID3z7uVlSLIsKzVvCZnO~`55#paMu5)DZJG;Q8B@aV+#
z9Wsd?&pD>4)cuHBzK!d;$}<(wbsa@2%7%ezT2;?$2-Pap5<;a?PS>mY6T_(0Qm#(y
zv4?${a-C}~gRbBvcJKlgS;wLK0y{=XJTNa?aaZS3S*f?+I;(T3uH-_N3`{Qfuggx4
zn1hn#(z<N3G(Yy4<3ncc-!I>NV9!FR>y>u=qvv$HU3{={{$4)1xz1HK_6{!Zn{V$t
kypidAyx63p=Fj!pUGD7H+TBlkmtT_yRj)PlvugL%AN3_BV*mgE

literal 0
HcmV?d00001

diff --git a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
index 3ae0db6899..e8d7005b98 100644
--- a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
+++ b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
@@ -5,6 +5,8 @@
 .app-background {
   width: 100%;
   height: 100%;
+  top: 0;
+  left: 0;
   position: fixed;
   background: linear-gradient($blue-dark-Background1, $blue-dark-Background2) no-repeat fixed !important;
   box-shadow: inset 0 0 200px 0 rgba(96, 141, 205, 0.25);
diff --git a/static/skywire-manager-src/src/assets/scss/_dialogs.scss b/static/skywire-manager-src/src/assets/scss/_dialogs.scss
index b1fd483c51..f426fab1ae 100644
--- a/static/skywire-manager-src/src/assets/scss/_dialogs.scss
+++ b/static/skywire-manager-src/src/assets/scss/_dialogs.scss
@@ -9,6 +9,10 @@ mat-dialog-container.mat-dialog-container {
   border-radius: $mat-dialog-radius !important;
   padding: $mat-dialog-padding !important;
 
+  background-image: url('/assets/img/modal-background-pattern.png');
+  box-shadow: inset 0 0 100px 0 rgba(255, 255, 255, 0.5), 5px 5px 15px 0 rgba(0, 0, 0, 1);
+  background-color: $modal-background;
+
   .mat-dialog-actions {
     padding-bottom: $mat-dialog-padding;
   }
@@ -16,7 +20,6 @@ mat-dialog-container.mat-dialog-container {
 
 .mat-dialog-content {
   margin-bottom: -$mat-dialog-padding !important;
-  padding-bottom: $mat-dialog-padding !important;
 }
 
 app-dialog {
@@ -56,14 +59,20 @@ app-dialog {
   color: $black;
 
   .title {
-    border-bottom: $separator 1px solid;
-    margin-bottom: 10px;
+    margin-bottom: 2px;
     font-size: $font-size-base;
-    margin-top: 30px;
+    margin-top: 25px;
+    color: $blue-medium;
+
+    mat-icon {
+      margin-right: 5px;
+      position: relative;
+      top: 2px;
+    }
   }
   
   .item {
-    margin-top: 5px;
+    margin-top: 2px;
   
     span {
       color: $lighter-gray;
diff --git a/static/skywire-manager-src/src/assets/scss/_forms.scss b/static/skywire-manager-src/src/assets/scss/_forms.scss
index 16aff8d082..b39662706b 100644
--- a/static/skywire-manager-src/src/assets/scss/_forms.scss
+++ b/static/skywire-manager-src/src/assets/scss/_forms.scss
@@ -57,6 +57,8 @@ mat-form-field {
 
 // White form fields, to be shown with the dark background.
 .white-form-field {
+  color: $white;
+
   .mat-select-value-text, .mat-form-field-label, .mat-select-value, .mat-select-arrow {
     color: $white !important;
   }
@@ -76,7 +78,12 @@ mat-form-field {
 
 // Container for the white help icons shown in the forms, to be shown with the dark background.
 .form-help-icon-container {
-  color: scale-color($white, $alpha: -20%);
   height: 0px;
   text-align: right;
+  color: $blue-medium;
+}
+
+.white-form-help-icon-container {
+  @extend .form-help-icon-container;
+  color: scale-color($white, $alpha: -20%);
 }
diff --git a/static/skywire-manager-src/src/assets/scss/_variables.scss b/static/skywire-manager-src/src/assets/scss/_variables.scss
index 5ca670fe8a..ec5f7b6b3c 100644
--- a/static/skywire-manager-src/src/assets/scss/_variables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_variables.scss
@@ -17,6 +17,9 @@ $green: #2ECC54;
 $light-gray: #777;
 $lighter-gray: #999;
 
+$modal-background: #e0e5ec;
+$modal-separator: scale-color($blue-medium, $alpha: -80%);
+
 $nav-bg: rgba(255, 255, 255, 0.1);
 
 $box-border: rgba(156, 197, 255, 0.33);

From 981e0cb96ff09ffb2be13a6b5e01712391c1f5e7 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sat, 4 Jul 2020 19:20:21 -0400
Subject: [PATCH 5/8] Unify the option selection modal windows

---
 .../skywire-manager-src/src/app/app.module.ts |  9 ---
 .../layout/paginator/paginator.component.ts   | 15 +++--
 .../select-page/select-page.component.html    | 13 -----
 .../select-page/select-page.component.scss    |  0
 .../select-page/select-page.component.spec.ts | 25 --------
 .../select-page/select-page.component.ts      | 42 --------------
 .../select-column.component.html              | 16 -----
 .../select-column.component.scss              |  0
 .../select-column.component.spec.ts           | 25 --------
 .../select-column/select-column.component.ts  | 58 -------------------
 .../select-option.component.html              |  6 +-
 .../select-option/select-option.component.ts  | 12 ++--
 .../select-tab/select-tab.component.html      | 15 -----
 .../select-tab/select-tab.component.scss      |  0
 .../select-tab/select-tab.component.spec.ts   | 25 --------
 .../select-tab/select-tab.component.ts        | 38 ------------
 .../layout/tab-bar/tab-bar.component.ts       | 14 ++++-
 .../pages/node-list/node-list.component.ts    | 33 ++++++-----
 .../pages/node/actions/actions.component.ts   |  2 +-
 .../node-apps-list.component.ts               | 35 ++++++-----
 .../route-list/route-list.component.ts        | 35 ++++++-----
 .../transport-list.component.ts               | 37 +++++++-----
 22 files changed, 113 insertions(+), 342 deletions(-)
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.scss
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.spec.ts
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.ts
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.scss
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.spec.ts
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.ts
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.scss
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.spec.ts
 delete mode 100644 static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.ts

diff --git a/static/skywire-manager-src/src/app/app.module.ts b/static/skywire-manager-src/src/app/app.module.ts
index 6139a6c12a..b11f16f7d5 100644
--- a/static/skywire-manager-src/src/app/app.module.ts
+++ b/static/skywire-manager-src/src/app/app.module.ts
@@ -93,12 +93,9 @@ 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 {
@@ -177,12 +174,9 @@ const globalRippleConfig: RippleGlobalOptions = {
     SelectLanguageComponent,
     LangButtonComponent,
     TruncatedTextComponent,
-    SelectTabComponent,
     NodeInfoContentComponent,
     NodeInfoComponent,
-    SelectColumnComponent,
     SelectOptionComponent,
-    SelectPageComponent,
     TerminalComponent,
     SkysocksSettingsComponent,
     SkysocksClientSettingsComponent,
@@ -210,10 +204,7 @@ const globalRippleConfig: RippleGlobalOptions = {
     SnackbarComponent,
     InitialSetupComponent,
     SelectLanguageComponent,
-    SelectTabComponent,
-    SelectColumnComponent,
     SelectOptionComponent,
-    SelectPageComponent,
     TerminalComponent,
     SkysocksSettingsComponent,
     SkysocksClientSettingsComponent,
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts b/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts
index f858269009..8c87d66dfe 100644
--- a/static/skywire-manager-src/src/app/components/layout/paginator/paginator.component.ts
+++ b/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()]));
       }
     });
   }
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
deleted file mode 100644
index bc6ff28b1a..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<app-dialog [headline]="'paginator.select-page-title' | translate" [includeVerticalMargins]="false">
-  <div class="options-list-button-container" *ngFor="let page of options">
-    <button
-      mat-button
-      class="grey-button-background"
-      (click)="closePopup(page)"
-    >
-      <div class="internal-container">
-        <span>{{ page }}</span>
-      </div>
-    </button>
-  </div>
-</app-dialog>
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.scss b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.spec.ts b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.spec.ts
deleted file mode 100644
index 60525f670f..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SelectPageComponent } from './select-page.component';
-
-describe('SelectPageComponent', () => {
-  let component: SelectPageComponent;
-  let fixture: ComponentFixture<SelectPageComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SelectPageComponent ],
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SelectPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.ts b/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.ts
deleted file mode 100644
index ae8c1d28ea..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/paginator/select-page/select-page.component.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material/dialog';
-
-import { AppConfig } from 'src/app/app.config';
-
-/**
- * Modal window for selecting what page to show in a multipage list. When the user selects a page,
- * the modal window is closed and the number of the selected page is returned in the "afterClosed" envent.
- */
-@Component({
-  selector: 'app-select-page',
-  templateUrl: './select-page.component.html',
-  styleUrls: ['./select-page.component.scss'],
-})
-export class SelectPageComponent {
-  options: number[] = [];
-
-  /**
-   * Opens the modal window. Please use this function instead of opening the window "by hand".
-   */
-  public static openDialog(dialog: MatDialog, pagesToSelectFrom: number): MatDialogRef<SelectPageComponent, any> {
-    const config = new MatDialogConfig();
-    config.data = pagesToSelectFrom;
-    config.autoFocus = false;
-    config.width = AppConfig.smallModalWidth;
-
-    return dialog.open(SelectPageComponent, config);
-  }
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private dialogRef: MatDialogRef<SelectPageComponent>,
-  ) {
-    for (let i = 0; i < data; i++) {
-      this.options.push(i + 1);
-    }
-  }
-
-  closePopup(page: string) {
-    this.dialogRef.close(page);
-  }
-}
diff --git a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
deleted file mode 100644
index 7dc0ff3e0d..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<app-dialog [headline]="'tables.title' | translate" [includeVerticalMargins]="false">
-  <div class="options-list-button-container" *ngFor="let column of data; let i = index">
-    <ng-container *ngFor="let reverse of [false, true]">
-      <button
-        mat-button
-        class="grey-button-background"
-        (click)="closePopup(column, reverse)"
-        >
-        <div class="internal-container">
-          <span>{{ column | translate }}</span>
-          {{ (!reverse ? 'tables.ascending-order' : 'tables.descending-order') | translate }}
-        </div>
-      </button>
-    </ng-container>
-  </div>
-</app-dialog>
diff --git a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.scss b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.spec.ts b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.spec.ts
deleted file mode 100644
index ead94b47d0..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SelectColumnComponent } from './select-column.component';
-
-describe('SelectColumnComponent', () => {
-  let component: SelectColumnComponent;
-  let fixture: ComponentFixture<SelectColumnComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SelectColumnComponent ],
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SelectColumnComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.ts b/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.ts
deleted file mode 100644
index e6025ab94c..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/select-column/select-column.component.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material/dialog';
-
-import { AppConfig } from 'src/app/app.config';
-
-/**
- * Result returned when a column is selected with SelectColumnComponent.
- */
-export interface SelectedColumn {
-  /**
-   * Label of the selected column. Is the value of the element in the data array used for opening
-   * the modal window.
-   */
-  label: string;
-  /**
-   * If the user selected the ascending (false) or descending (true) order.
-   */
-  sortReverse: boolean;
-}
-
-/**
- * Modal window shown on small screens for allowing the user to select which column use to sort
- * a table/list. It shows an ascending and a descending option for each column. When the user
- * selects a column, the modal window is closed and a "SelectedColumn" object is returned in
- * the "afterClosed" envent.
- */
-@Component({
-  selector: 'app-select-column',
-  templateUrl: './select-column.component.html',
-  styleUrls: ['./select-column.component.scss'],
-})
-export class SelectColumnComponent {
-  /**
-   * Opens the modal window. Please use this function instead of opening the window "by hand".
-   */
-  public static openDialog(dialog: MatDialog, columnNames: string[]): MatDialogRef<SelectColumnComponent, any> {
-    const config = new MatDialogConfig();
-    config.data = columnNames;
-    config.autoFocus = false;
-    config.width = AppConfig.smallModalWidth;
-
-    return dialog.open(SelectColumnComponent, config);
-  }
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: string[],
-    private dialogRef: MatDialogRef<SelectColumnComponent>,
-  ) { }
-
-  closePopup(label: string, reverse: boolean) {
-    const response: SelectedColumn = {
-      label: label,
-      sortReverse: reverse,
-    };
-
-    this.dialogRef.close(response);
-  }
-}
diff --git a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
index 5aadb6ebac..a258000b85 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.html
@@ -1,12 +1,12 @@
-<app-dialog [headline]="'common.options' | translate" [includeVerticalMargins]="false">
-  <div class="options-list-button-container" *ngFor="let option of data; let i = index">
+<app-dialog [headline]="data.title | translate" [includeVerticalMargins]="false">
+  <div class="options-list-button-container" *ngFor="let option of data.options; let i = index">
     <button
       mat-button
       class="grey-button-background"
       (click)="closePopup(i + 1)"
     >
       <div class="internal-container">
-        <mat-icon [inline]="true">{{ option.icon }}</mat-icon>
+        <mat-icon [inline]="true" *ngIf="option.icon">{{ option.icon }}</mat-icon>
         <span>{{ option.label | translate }}</span>
       </div>
     </button>
diff --git a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
index 3a33b539f8..e5971ab305 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
+++ b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
@@ -9,7 +9,7 @@ export interface SelectableOption {
   /**
    * Name of the material icon to show.
    */
-  icon: string;
+  icon?: string;
   /**
    * Label to show.
    */
@@ -17,8 +17,7 @@ export interface SelectableOption {
 }
 
 /**
- * Modal window for allowing the user to select an option. It is used mainly for the options
- * of the elements of the tables when the screen is too small. When the user selects an option,
+ * Modal window for allowing the user to select an option. When the user selects an option,
  * the modal window is closed and the number of the selected option (counting from 1) is
  * returned in the "afterClosed" envent.
  */
@@ -31,9 +30,12 @@ export class SelectOptionComponent {
   /**
    * Opens the modal window. Please use this function instead of opening the window "by hand".
    */
-  public static openDialog(dialog: MatDialog, optionsToShow: SelectableOption[]): MatDialogRef<SelectOptionComponent, any> {
+  public static openDialog(dialog: MatDialog, optionsToShow: SelectableOption[], title: string): MatDialogRef<SelectOptionComponent, any> {
     const config = new MatDialogConfig();
-    config.data = optionsToShow;
+    config.data = {
+      options: optionsToShow,
+      title: title,
+    };
     config.autoFocus = false;
     config.width = AppConfig.smallModalWidth;
 
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
deleted file mode 100644
index 477e03b30b..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<app-dialog [headline]="'tabs-window.title' | translate" [includeVerticalMargins]="false">
-  <div class="options-list-button-container" *ngFor="let tabData of data; let i = index">
-    <button
-      mat-button
-      class="grey-button-background"
-      (click)="closePopup(i)"
-      [ngClass]="{'d-xl-none': tabData.notInXl}"
-    >
-      <div class="internal-container">
-        <mat-icon [inline]="true">{{ tabData.icon }}</mat-icon>
-        <span>{{ tabData.label | translate }}</span>
-      </div>
-    </button>
-  </div>
-</app-dialog>
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.scss b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.scss
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.spec.ts b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.spec.ts
deleted file mode 100644
index 716b53368d..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { SelectTabComponent } from './select-tab.component';
-
-describe('SelectTabComponent', () => {
-  let component: SelectTabComponent;
-  let fixture: ComponentFixture<SelectTabComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SelectTabComponent ],
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SelectTabComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should be created', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.ts b/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.ts
deleted file mode 100644
index 59ebf90281..0000000000
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/select-tab/select-tab.component.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog, MatDialogConfig } from '@angular/material/dialog';
-
-import { TabButtonData } from '../tab-bar.component';
-import { AppConfig } from 'src/app/app.config';
-
-/**
- * Modal window for allowing the user to select a tab. When the user selects an option,
- * the modal window is closed and the number of the selected option (counting from 1) is
- * returned in the "afterClosed" envent.
- */
-@Component({
-  selector: 'app-select-tab',
-  templateUrl: './select-tab.component.html',
-  styleUrls: ['./select-tab.component.scss'],
-})
-export class SelectTabComponent {
-  /**
-   * Opens the modal window. Please use this function instead of opening the window "by hand".
-   */
-  public static openDialog(dialog: MatDialog, tabs: TabButtonData[]): MatDialogRef<SelectTabComponent, any> {
-    const config = new MatDialogConfig();
-    config.data = tabs;
-    config.autoFocus = false;
-    config.width = AppConfig.smallModalWidth;
-
-    return dialog.open(SelectTabComponent, config);
-  }
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA) public data: TabButtonData[],
-    private dialogRef: MatDialogRef<SelectTabComponent>,
-  ) { }
-
-  closePopup(index: number) {
-    this.dialogRef.close(index + 1);
-  }
-}
diff --git a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.ts b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.ts
index 21f5154a25..6f7b4f0238 100644
--- a/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.ts
+++ b/static/skywire-manager-src/src/app/components/layout/tab-bar/tab-bar.component.ts
@@ -4,7 +4,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { Router } from '@angular/router';
 
 import { LanguageService } from 'src/app/services/language.service';
-import { SelectTabComponent } from './select-tab/select-tab.component';
+import { SelectableOption, SelectOptionComponent } from '../select-option/select-option.component';
 
 /**
  * Properties of the tabs shown in TabBarComponent.
@@ -105,7 +105,17 @@ export class TabBarComponent implements OnInit, OnDestroy {
   }
 
   openTabSelector() {
-    SelectTabComponent.openDialog(this.dialog, this.tabsData).afterClosed().subscribe((result: number) => {
+    // Create an option for every tab.
+    const options: SelectableOption[] = [];
+    this.tabsData.forEach(tab => {
+      options.push({
+        label: tab.label,
+        icon: tab.icon,
+      });
+    });
+
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'tabs-window.title').afterClosed().subscribe((result: number) => {
       if (result) {
         result -= 1;
         if (result !== this.selectedTabIndex) {
diff --git a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
index dfa93b5648..be21811bc6 100644
--- a/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node-list/node-list.component.ts
@@ -13,7 +13,6 @@ import { StorageService } from '../../../services/storage.service';
 import { TabButtonData } from '../../layout/tab-bar/tab-bar.component';
 import { SnackbarService } from '../../../services/snackbar.service';
 import { SidenavService } from 'src/app/services/sidenav.service';
-import { SelectColumnComponent, SelectedColumn } from '../../layout/select-column/select-column.component';
 import GeneralUtils from 'src/app/utils/generalUtils';
 import { SelectOptionComponent, SelectableOption } from '../../layout/select-option/select-option.component';
 import { processServiceError } from 'src/app/utils/errors';
@@ -189,24 +188,28 @@ export class NodeListComponent implements OnInit, OnDestroy {
    * Opens the modal window used on small screens for selecting how to sort the data.
    */
   openSortingOrderModal() {
-    // Get the list of sortable columns.
+    // Create 2 options for every sortable column, for ascending and descending order.
+    const options: SelectableOption[] = [];
     const enumKeys = Object.keys(SortableColumns);
-    const columnsMap = new Map<string, SortableColumns>();
-    const columns = enumKeys.map(key => {
-      const val = SortableColumns[key as any];
-      columnsMap.set(val, SortableColumns[key]);
-
-      return val;
+    enumKeys.forEach(key => {
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.ascending-order'),
+      });
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.descending-order'),
+      });
     });
 
-    SelectColumnComponent.openDialog(this.dialog, columns).afterClosed().subscribe((result: SelectedColumn) => {
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'tables.title').afterClosed().subscribe((result: number) => {
       if (result) {
-        if (columnsMap.has(result.label) && (result.sortReverse !== this.sortReverse || columnsMap.get(result.label) !== this.sortBy)) {
-          this.sortBy = columnsMap.get(result.label);
-          this.sortReverse = result.sortReverse;
+        result = (result - 1) / 2;
+        const index = Math.floor(result);
+        // Use the column and order selected by the user.
+        this.sortBy = SortableColumns[enumKeys[index]];
+        this.sortReverse = result !== index;
 
-          this.sortList();
-        }
+        this.sortList();
       }
     });
   }
@@ -510,7 +513,7 @@ export class NodeListComponent implements OnInit, OnDestroy {
       });
     }
 
-    SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+    SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
         if (this.clipboardService.copy(node.local_pk)) {
           this.onCopyToClipboardClicked();
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts b/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
index bb7648bb2c..49a6e87958 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/actions/actions.component.ts
@@ -238,7 +238,7 @@ export class ActionsComponent implements AfterViewInit, OnDestroy {
       },
     ];
 
-    SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+    SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
         // Open the complete terminal in a new tab.
         const protocol = window.location.protocol;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
index 7ee7717f48..6fdf7049c0 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/node-apps-list/node-apps-list.component.ts
@@ -12,11 +12,11 @@ import GeneralUtils from '../../../../../../utils/generalUtils';
 import { ConfirmationComponent } from '../../../../../layout/confirmation/confirmation.component';
 import { SnackbarService } from '../../../../../../services/snackbar.service';
 import { SelectableOption, SelectOptionComponent } from 'src/app/components/layout/select-option/select-option.component';
-import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
 import { SkysocksSettingsComponent } from '../skysocks-settings/skysocks-settings.component';
 import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
 import { SkysocksClientSettingsComponent } from '../skysocks-client-settings/skysocks-client-settings.component';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -96,6 +96,7 @@ export class NodeAppsListComponent implements OnDestroy {
     private dialog: MatDialog,
     private route: ActivatedRoute,
     private snackbarService: SnackbarService,
+    private translateService: TranslateService,
   ) {
     this.navigationsSubscription = this.route.paramMap.subscribe(params => {
       if (params.has('page')) {
@@ -234,7 +235,7 @@ export class NodeAppsListComponent implements OnDestroy {
       });
     }
 
-    SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+    SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
         this.viewLogs(app);
       } else if (selectedOption === 2) {
@@ -361,24 +362,28 @@ export class NodeAppsListComponent implements OnDestroy {
    * Opens the modal window used on small screens for selecting how to sort the data.
    */
   openSortingOrderModal() {
-    // Get the list of sortable columns.
+    // Create 2 options for every sortable column, for ascending and descending order.
+    const options: SelectableOption[] = [];
     const enumKeys = Object.keys(SortableColumns);
-    const columnsMap = new Map<string, SortableColumns>();
-    const columns = enumKeys.map(key => {
-      const val = SortableColumns[key as any];
-      columnsMap.set(val, SortableColumns[key]);
-
-      return val;
+    enumKeys.forEach(key => {
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.ascending-order'),
+      });
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.descending-order'),
+      });
     });
 
-    SelectColumnComponent.openDialog(this.dialog, columns).afterClosed().subscribe((result: SelectedColumn) => {
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'tables.title').afterClosed().subscribe((result: number) => {
       if (result) {
-        if (columnsMap.has(result.label) && (result.sortReverse !== this.sortReverse || columnsMap.get(result.label) !== this.sortBy)) {
-          this.sortBy = columnsMap.get(result.label);
-          this.sortReverse = result.sortReverse;
+        result = (result - 1) / 2;
+        const index = Math.floor(result);
+        // Use the column and order selected by the user.
+        this.sortBy = SortableColumns[enumKeys[index]];
+        this.sortReverse = result !== index;
 
-          this.recalculateElementsToShow();
-        }
+        this.recalculateElementsToShow();
       }
     });
   }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts
index b75013cad1..4eba97c985 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/route-list/route-list.component.ts
@@ -12,9 +12,9 @@ import GeneralUtils from '../../../../../utils/generalUtils';
 import { ConfirmationComponent } from '../../../../layout/confirmation/confirmation.component';
 import { SnackbarService } from '../../../../../services/snackbar.service';
 import { SelectOptionComponent, SelectableOption } from 'src/app/components/layout/select-option/select-option.component';
-import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
 import { OperationError } from 'src/app/utils/operation-error';
 import { processServiceError } from 'src/app/utils/errors';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -85,6 +85,7 @@ export class RouteListComponent implements OnDestroy {
     private dialog: MatDialog,
     private route: ActivatedRoute,
     private snackbarService: SnackbarService,
+    private translateService: TranslateService,
   ) {
     this.navigationsSubscription = this.route.paramMap.subscribe(params => {
       if (params.has('page')) {
@@ -179,7 +180,7 @@ export class RouteListComponent implements OnDestroy {
       }
     ];
 
-    SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+    SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
         this.details(route.key.toString());
       } else if (selectedOption === 2) {
@@ -235,24 +236,28 @@ export class RouteListComponent implements OnDestroy {
    * Opens the modal window used on small screens for selecting how to sort the data.
    */
   openSortingOrderModal() {
-    // Get the list of sortable columns.
+    // Create 2 options for every sortable column, for ascending and descending order.
+    const options: SelectableOption[] = [];
     const enumKeys = Object.keys(SortableColumns);
-    const columnsMap = new Map<string, SortableColumns>();
-    const columns = enumKeys.map(key => {
-      const val = SortableColumns[key as any];
-      columnsMap.set(val, SortableColumns[key]);
-
-      return val;
+    enumKeys.forEach(key => {
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.ascending-order'),
+      });
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.descending-order'),
+      });
     });
 
-    SelectColumnComponent.openDialog(this.dialog, columns).afterClosed().subscribe((result: SelectedColumn) => {
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'tables.title').afterClosed().subscribe((result: number) => {
       if (result) {
-        if (columnsMap.has(result.label) && (result.sortReverse !== this.sortReverse || columnsMap.get(result.label) !== this.sortBy)) {
-          this.sortBy = columnsMap.get(result.label);
-          this.sortReverse = result.sortReverse;
+        result = (result - 1) / 2;
+        const index = Math.floor(result);
+        // Use the column and order selected by the user.
+        this.sortBy = SortableColumns[enumKeys[index]];
+        this.sortReverse = result !== index;
 
-          this.recalculateElementsToShow();
-        }
+        this.recalculateElementsToShow();
       }
     });
   }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
index 8eb981c93e..30d0068890 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/transport-list.component.ts
@@ -12,10 +12,10 @@ import { ConfirmationComponent } from '../../../../layout/confirmation/confirmat
 import GeneralUtils from '../../../../../utils/generalUtils';
 import { TransportDetailsComponent } from './transport-details/transport-details.component';
 import { SnackbarService } from '../../../../../services/snackbar.service';
-import { SelectColumnComponent, SelectedColumn } from 'src/app/components/layout/select-column/select-column.component';
 import { SelectableOption, SelectOptionComponent } from 'src/app/components/layout/select-option/select-option.component';
 import { processServiceError } from 'src/app/utils/errors';
 import { OperationError } from 'src/app/utils/operation-error';
+import { TranslateService } from '@ngx-translate/core';
 
 /**
  * List of the columns that can be used to sort the data.
@@ -23,7 +23,7 @@ import { OperationError } from 'src/app/utils/operation-error';
 enum SortableColumns {
   State = 'transports.state',
   Id = 'transports.id',
-  RemotePk = 'transports.remote',
+  RemotePk = 'transports.remote-node',
   Type = 'transports.type',
   Uploaded = 'common.uploaded',
   Downloaded = 'common.downloaded',
@@ -90,6 +90,7 @@ export class TransportListComponent implements OnDestroy {
     private transportService: TransportService,
     private route: ActivatedRoute,
     private snackbarService: SnackbarService,
+    private translateService: TranslateService,
   ) {
     this.navigationsSubscription = this.route.paramMap.subscribe(params => {
       if (params.has('page')) {
@@ -219,7 +220,7 @@ export class TransportListComponent implements OnDestroy {
       }
     ];
 
-    SelectOptionComponent.openDialog(this.dialog, options).afterClosed().subscribe((selectedOption: number) => {
+    SelectOptionComponent.openDialog(this.dialog, options, 'common.options').afterClosed().subscribe((selectedOption: number) => {
       if (selectedOption === 1) {
         this.details(transport);
       } else if (selectedOption === 2) {
@@ -275,24 +276,28 @@ export class TransportListComponent implements OnDestroy {
    * Opens the modal window used on small screens for selecting how to sort the data.
    */
   openSortingOrderModal() {
-    // Get the list of sortable columns.
+    // Create 2 options for every sortable column, for ascending and descending order.
+    const options: SelectableOption[] = [];
     const enumKeys = Object.keys(SortableColumns);
-    const columnsMap = new Map<string, SortableColumns>();
-    const columns = enumKeys.map(key => {
-      const val = SortableColumns[key as any];
-      columnsMap.set(val, SortableColumns[key]);
-
-      return val;
+    enumKeys.forEach(key => {
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.ascending-order'),
+      });
+      options.push({
+        label: this.translateService.instant(SortableColumns[key]) + ' ' + this.translateService.instant('tables.descending-order'),
+      });
     });
 
-    SelectColumnComponent.openDialog(this.dialog, columns).afterClosed().subscribe((result: SelectedColumn) => {
+    // Open the option selection modal window.
+    SelectOptionComponent.openDialog(this.dialog, options, 'tables.title').afterClosed().subscribe((result: number) => {
       if (result) {
-        if (columnsMap.has(result.label) && (result.sortReverse !== this.sortReverse || columnsMap.get(result.label) !== this.sortBy)) {
-          this.sortBy = columnsMap.get(result.label);
-          this.sortReverse = result.sortReverse;
+        result = (result - 1) / 2;
+        const index = Math.floor(result);
+        // Use the column and order selected by the user.
+        this.sortBy = SortableColumns[enumKeys[index]];
+        this.sortReverse = result !== index;
 
-          this.recalculateElementsToShow();
-        }
+        this.recalculateElementsToShow();
       }
     });
   }

From 849b4aac1b9d24fbd92b42f1884adc7b7419b703 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sun, 5 Jul 2020 11:25:37 -0400
Subject: [PATCH 6/8] Several improvements for the manager

---
 .../layout/dialog/dialog.component.html          |  4 ++--
 .../basic-terminal/basic-terminal.component.html |  6 +++++-
 .../actions/terminal/terminal.component.html     |  1 +
 .../update-node/update-node.component.html       |  1 +
 .../node/apps/node-apps/log/log.component.html   |  2 +-
 .../node/apps/node-apps/log/log.component.scss   |  2 +-
 .../startup-config/startup-config.component.html |  2 +-
 .../app/components/pages/node/node.component.ts  |  1 +
 .../create-transport.component.ts                | 12 ++++++++++--
 .../src/assets/scss/_responsive_tables.scss      | 15 ---------------
 .../src/assets/scss/utilities/_utilities.scss    | 16 ++++++++++++++++
 11 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html
index f16405db21..8515f9307b 100644
--- a/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/dialog/dialog.component.html
@@ -10,7 +10,7 @@
 <mat-dialog-content [ngClass]="{'content-margin': includeVerticalMargins}" *ngIf="includeScrollableArea">
   <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
 </mat-dialog-content>
-<ng-container [ngClass]="{'content-margin': includeVerticalMargins}" *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>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html
index 56d6e68c2e..187eb2cdde 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/actions/basic-terminal/basic-terminal.component.html
@@ -1,4 +1,8 @@
-<app-dialog [headline]="('actions.terminal.title' | translate) + ' - ' + this.data.label + ' (' + this.data.pk + ')'" [includeScrollableArea]="false">
+<app-dialog
+  [headline]="('actions.terminal.title' | translate) + ' - ' + this.data.label + ' (' + this.data.pk + ')'"
+  [includeScrollableArea]="false"
+  [includeVerticalMargins]="false"
+>
   <mat-dialog-content #dialogContent (click)="focusTerminal()">
     <div class="wrapper">
       <div #terminal></div>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/terminal/terminal.component.html b/static/skywire-manager-src/src/app/components/pages/node/actions/terminal/terminal.component.html
index 54bcc11e29..691a3e8ca2 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/actions/terminal/terminal.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/actions/terminal/terminal.component.html
@@ -1,6 +1,7 @@
 <app-dialog
   [headline]="('actions.terminal.title' | translate) + ' - ' + this.data.label + ' (' + this.data.pk + ')'"
   [includeScrollableArea]="false"
+  [includeVerticalMargins]="false"
 >
 
   <div class="main-area">
diff --git a/static/skywire-manager-src/src/app/components/pages/node/actions/update-node/update-node.component.html b/static/skywire-manager-src/src/app/components/pages/node/actions/update-node/update-node.component.html
index b94e8979f3..3a73d1fb36 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/actions/update-node/update-node.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/actions/update-node/update-node.component.html
@@ -1,6 +1,7 @@
 <app-dialog
   class="position-relative"
   [headline]="'actions.update.title' | translate"
+  [includeVerticalMargins]="false"
   [includeScrollableArea]="false">
   <mat-progress-bar *ngIf="isLoading"
                     style="position: relative; top: 0;"
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
index fed769c513..850245116d 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.log.title' | translate" [includeScrollableArea]="false">
+<app-dialog [headline]="'apps.log.title' | translate" [includeVerticalMargins]="false" [includeScrollableArea]="false">
   <div class="filter-link-container">
     <div class="filter-link subtle-transparent-button" (click)="filter()">
       <span class="transparent">{{ 'apps.log.filter-button' | translate }}</span>&nbsp;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
index ffda3ff943..59f34b3073 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/log/log.component.scss
@@ -26,7 +26,7 @@
   margin: 15px 0;
 
   .filter-link {
-    display: inline;
+    display: inline-block;
     background: $white;
     padding: 5px 10px;
     border-radius: 1000px;
diff --git a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.html b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.html
index a250e622b8..8a76469e5f 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.html
+++ b/static/skywire-manager-src/src/app/components/pages/node/apps/node-apps/startup-config/startup-config.component.html
@@ -1,4 +1,4 @@
-<app-dialog [headline]="'apps.config.title' | translate" [includeScrollableArea]="false">
+<app-dialog [headline]="'apps.config.title' | translate" [includeScrollableArea]="false" [includeVerticalMargins]="false">
   <mat-dialog-content>
     <form class="startup-form clearfix" *ngIf="autoStartConfig">
       <mat-list>
diff --git a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts b/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
index 1bf27660b3..24d220ea00 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/node.component.ts
@@ -109,6 +109,7 @@ export class NodeComponent implements OnInit, OnDestroy {
         NodeComponent.currentNodeKey = this.route.snapshot.params['key'];
         this.lastUrl = event['urlAfterRedirects'] as string;
         this.updateTabBar();
+        this.navigationsSubscription.unsubscribe();
       }
     });
   }
diff --git a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
index 9e9155d40c..496e9943af 100644
--- a/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
+++ b/static/skywire-manager-src/src/app/components/pages/node/routing/transport-list/create-transport/create-transport.component.ts
@@ -120,10 +120,18 @@ export class CreateTransportComponent implements OnInit, OnDestroy {
       flatMap(() => this.transportService.types(NodeComponent.getCurrentNodeKey()))
     ).subscribe(
       types => {
+        // Sort the types and select dmsg as default, if posible.
+        types.sort((a, b) => a.localeCompare(b));
+        let defaultIndex = types.findIndex(type => type.toLowerCase() === 'dmsg');
+        defaultIndex = defaultIndex !== -1 ? defaultIndex : 0;
+
+        // Prepare the form.
+        this.types = types;
+        this.form.get('type').setValue(types[defaultIndex]);
+
+        // Prepare the UI change.
         this.snackbarService.closeCurrentIfTemporaryError();
         setTimeout(() => (this.firstInput.nativeElement as HTMLElement).focus());
-        this.types = types;
-        this.form.get('type').setValue(types[0]);
       },
       err => {
         err = processServiceError(err);
diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
index d9cccca87d..fb0e3eebce 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -226,18 +226,3 @@ $responsive-table-colors: (
     margin-right: 0 !important;
   }
 }
-
-// Controls the padding of the elements in the main area when in the visor details page.
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
-  .small-node-list-margins {
-    padding: 0 !important;
-  }
-}
-
-// Controls the padding of the elements in the main area when showing the full list of any of the
-// elements of a visor.
-@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
-  .full-node-list-margins {
-    padding: 0 !important;
-  }
-}
diff --git a/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss b/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
index dabe20ebba..856773ba49 100644
--- a/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
+++ b/static/skywire-manager-src/src/assets/scss/utilities/_utilities.scss
@@ -1,3 +1,5 @@
+@import "bootstrap_overrides";
+
 // General utilities for the app.
 
 .cursor-pointer {
@@ -62,3 +64,17 @@
     opacity: 1;
   }
 }
+
+// Controls the padding of the elements in the main area when a details bar is shown at the left.
+@media (max-width: (map-get($grid-breakpoints, md) - 1)) , (min-width: map-get($grid-breakpoints, lg)) and (max-width: (map-get($grid-breakpoints, xl) - 1)) {
+  .small-node-list-margins {
+    padding: 0 !important;
+  }
+}
+
+// Controls the padding of the elements in the main area when no details bar is shown at the left.
+@media (max-width: (map-get($grid-breakpoints, md) - 1)) {
+  .full-node-list-margins {
+    padding: 0 !important;
+  }
+}

From f7b87c2c02fb6dd15ada8aa3c36f3a81ff0b7c66 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Sun, 5 Jul 2020 15:31:56 -0400
Subject: [PATCH 7/8] Fix errors found in the manager

---
 .../layout/select-option/select-option.component.ts       | 8 +++++++-
 .../skywire-manager-src/src/assets/scss/_backgrounds.scss | 3 ---
 static/skywire-manager-src/src/assets/scss/_dialogs.scss  | 6 ------
 static/skywire-manager-src/src/assets/scss/_forms.scss    | 3 ---
 .../src/assets/scss/_responsive_tables.scss               | 5 -----
 static/skywire-manager-src/src/assets/scss/_tables.scss   | 4 ----
 6 files changed, 7 insertions(+), 22 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
index e5971ab305..bcc77b7268 100644
--- a/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
+++ b/static/skywire-manager-src/src/app/components/layout/select-option/select-option.component.ts
@@ -16,6 +16,12 @@ export interface SelectableOption {
   label: string;
 }
 
+// Data received by SelectOptionComponent.
+interface ComponentData {
+  options: SelectableOption[];
+  title: string;
+}
+
 /**
  * Modal window for allowing the user to select an option. When the user selects an option,
  * the modal window is closed and the number of the selected option (counting from 1) is
@@ -43,7 +49,7 @@ export class SelectOptionComponent {
   }
 
   constructor(
-    @Inject(MAT_DIALOG_DATA) public data: SelectableOption[],
+    @Inject(MAT_DIALOG_DATA) public data: ComponentData,
     private dialogRef: MatDialogRef<SelectOptionComponent>,
   ) { }
 
diff --git a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
index e8d7005b98..0baccf9ec8 100644
--- a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
+++ b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
@@ -1,6 +1,3 @@
-@import "variables";
-@import "~bootstrap/scss/functions";
-
 // Main app background.
 .app-background {
   width: 100%;
diff --git a/static/skywire-manager-src/src/assets/scss/_dialogs.scss b/static/skywire-manager-src/src/assets/scss/_dialogs.scss
index f426fab1ae..6fda0fe90d 100644
--- a/static/skywire-manager-src/src/assets/scss/_dialogs.scss
+++ b/static/skywire-manager-src/src/assets/scss/_dialogs.scss
@@ -1,9 +1,3 @@
-@import "variables";
-@import "fonts";
-@import "backgrounds";
-@import "~bootstrap/scss/functions";
-@import 'text';
-
 // Modal windows.
 mat-dialog-container.mat-dialog-container {
   border-radius: $mat-dialog-radius !important;
diff --git a/static/skywire-manager-src/src/assets/scss/_forms.scss b/static/skywire-manager-src/src/assets/scss/_forms.scss
index b39662706b..de870922c5 100644
--- a/static/skywire-manager-src/src/assets/scss/_forms.scss
+++ b/static/skywire-manager-src/src/assets/scss/_forms.scss
@@ -1,6 +1,3 @@
-@import "variables";
-@import "text";
-@import "~bootstrap/scss/functions";
 //
 // Input
 //
diff --git a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
index fb0e3eebce..c1a36bebf4 100644
--- a/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_responsive_tables.scss
@@ -1,8 +1,3 @@
-@import "variables";
-@import "bootstrap_overrides";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/mixins/text-truncate";
-
 // Backgrounds for the tables used in the app.
 $responsive-table-colors: (
   // Background, background:hover, font color
diff --git a/static/skywire-manager-src/src/assets/scss/_tables.scss b/static/skywire-manager-src/src/assets/scss/_tables.scss
index df07a42e48..2af7342106 100644
--- a/static/skywire-manager-src/src/assets/scss/_tables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_tables.scss
@@ -1,7 +1,3 @@
-@import "variables";
-@import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/mixins/text-truncate";
-
 // This file will most likelly not be needed anymore after removing old code.
 
 $tables-colors: (

From d7c0f201c7dfab3116a01bc5cdc2ebd5095ac097 Mon Sep 17 00:00:00 2001
From: Senyoret1 <34079003+Senyoret1@users.noreply.github.com>
Date: Tue, 7 Jul 2020 09:14:14 -0400
Subject: [PATCH 8/8] Changes for the dark theme

---
 .../components/layout/lang-button/lang-button.component.scss  | 4 ++++
 .../src/app/components/layout/sidenav/sidenav.component.html  | 2 +-
 static/skywire-manager-src/src/assets/scss/_backgrounds.scss  | 4 ++++
 static/skywire-manager-src/src/assets/scss/_variables.scss    | 4 ++--
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss b/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss
index 50e405321e..62be91e924 100644
--- a/static/skywire-manager-src/src/app/components/layout/lang-button/lang-button.component.scss
+++ b/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;
diff --git a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
index 0133934465..7bbea942a5 100644
--- a/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
+++ b/static/skywire-manager-src/src/app/components/layout/sidenav/sidenav.component.html
@@ -49,7 +49,7 @@
   <!-- Left options bar shown on big screens. -->
   <div class="left-bar-container d-none d-lg-block">
     <div class="left-bar-internal-container">
-      <nav class="elevated-box">
+      <nav class="elevated-box no-gradient-for-elevated-box">
         <div class="header">
           <img src="/assets/img/logo-h.png" />
         </div>
diff --git a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
index 0baccf9ec8..63c622a208 100644
--- a/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
+++ b/static/skywire-manager-src/src/assets/scss/_backgrounds.scss
@@ -9,6 +9,10 @@
   box-shadow: inset 0 0 200px 0 rgba(96, 141, 205, 0.25);
 }
 
+.no-gradient-for-elevated-box {
+  box-shadow: 5px 5px 7px 0 rgba(0, 0, 0, 0.35) ! important;
+}
+
 .elevated-box {
   background-image: url('/assets/img/background-pattern.png');
   box-shadow: inset 0 0 55px 0 rgba(53, 87, 134, 0.4), 5px 5px 7px 0 rgba(0, 0, 0, 0.35);
diff --git a/static/skywire-manager-src/src/assets/scss/_variables.scss b/static/skywire-manager-src/src/assets/scss/_variables.scss
index ec5f7b6b3c..d341ef5233 100644
--- a/static/skywire-manager-src/src/assets/scss/_variables.scss
+++ b/static/skywire-manager-src/src/assets/scss/_variables.scss
@@ -9,8 +9,8 @@ $blue-light: #00C3FF;
 $blue: #0072FF;
 $blue-medium: #215f9e;
 $blue-dark: #154B6C;
-$blue-dark-Background1: #0e192a;
-$blue-dark-Background2: #101f34;
+$blue-dark-Background1: #060a10;
+$blue-dark-Background2: #0a1421;
 
 $red: #DA3439;
 $green: #2ECC54;