feat(orb-ui) CSS Improvements on Nav and Sidebar

ui/src/app/@theme/components/header/header.component.html

@@ -8,10 +8,10 @@
         [matRippleCentered]="true"
         (click)="toggleSidebar()"
     >
-      <nb-icon [icon]="'menu-outline'"></nb-icon>
+      <nb-icon [icon]="'menu-outline'" style="color: #969fb9; size: 18px 12px;"></nb-icon>
     </a>
     <a class="logo header-logo" href="#" (click)="navigateHome()"><img
-        src="assets/images/orb_logo_50.png" alt="ORB Overview" class="header-logo"></a>
+        src="assets/images/nav_logo.png" alt="ORB Overview" class="header-logo"></a>
   </div>
 </div>
 

ui/src/app/@theme/components/header/header.component.scss

@@ -32,19 +32,21 @@
     align-items: center;
     width: auto;
 
-    .sidebar-toggle {
-      @include nb-ltr(margin-right, 1.25rem);
-      @include nb-rtl(margin-left, 1.25rem);
-      text-decoration: none;
-      color: nb-theme(text-primary-color);
+    .logo-container {
+      .sidebar-toggle {
+        @include nb-ltr(margin-right, 0 !important);
+        @include nb-rtl(margin-left, 27px !important);
+        text-decoration: none;
+        color: nb-theme(text-primary-color);
 
-      nb-icon {
-        font-size: 1.75rem;
+        nb-icon {
+          font-size: 1.75rem;
+        }
       }
     }
 
     .logo {
-      padding: 0 1.25rem;
+      padding: 0 0 0 17px;
       font-size: 1.75rem;
       //@include nb-ltr(border-left, 1px solid nb-theme(divider-color));
       //@include nb-rtl(border-right, 1px solid nb-theme(divider-color));

ui/src/app/@theme/layouts/one-column/one-column.layout.ts

@@ -16,10 +16,6 @@ import { Component } from '@angular/core';
       <nb-layout-column>
         <ng-content select="router-outlet"></ng-content>
       </nb-layout-column>
-
-      <nb-layout-footer fixed>
-        <ngx-footer></ngx-footer>
-      </nb-layout-footer>
     </nb-layout>
   `,
 })

ui/src/app/@theme/styles/themes.scss

@@ -112,12 +112,34 @@ $nb-themes: nb-register-theme((
 ), material-dark, material-dark);
 
 $nb-themes: nb-register-theme((
+  // outter layout
   layout-padding-left: 0,
   layout-padding-right: 0,
-  layout-padding-top: 2.25rem,
-  menu-item-icon-margin: 0 0 0 0,
+  layout-padding-top: 1.75rem,
+  // nav menu
+  scrollable-padding: 10px 0 12px 0,
+  //menu-card-height-tiny: 13.5rem,
+  menu-item-divider-style: 0,
+  menu-item-active-text-color: #969fb9,
   menu-item-icon-active-color: #df316f,
-  card-height-tiny: 13.5rem,
+  //menu-item-icon-margin: 12px 12px 12px 15px,
+  //menu-item-padding: 10px 0 10px 0 !important,
+  menu-submenu-item-border-style: 0,
+  //menu-item-menu-submenu-margin: 12px 0 12px 62px,
+  menu-submenu-item-padding: 16px 0 20px 20px,
+  menu-text-color: #ffffff,
+  menu-text-font-family: 'Montserrat',
+  menu-text-line-height: 13px,
+  menu-text-font-size: 13px,
+  menu-text-font-weight: 400,
+  // side bar
+  sidebar-background-color: #171c30,
+  sidebar-shadow: 0,
+  sidebar-menu-item-highlight-color: #969fb9,
+  // button
+  button-outline-border-width : 0,
+  button-filled-border-width: 0,
+  // card
   card-height-small: 21.1875rem,
   card-height-medium: 28.875rem,
   card-height-large: 36.5625rem,
@@ -129,6 +151,7 @@ $nb-themes: nb-register-theme((
   select-giant-text-line-height: 1rem,
   option-list-border-radius: 0,
   input-large-text-line-height: 1rem,
+  // slide
   slide-out-background: linear-gradient(270deg, #1f1f1f 0%, #292929 100%),
   slide-out-shadow-color: 0 4px 14px 0 #292929,
   slide-out-shadow-color-rtl: 0 4px 14px 0 #292929,

ui/src/app/pages/pages-menu.ts

@@ -75,6 +75,7 @@ export const MENU_ITEMS: NbMenuItem[] = environment.production ?
     {
       title: 'Settings',
       icon: 'settings-2-outline',
+      expanded: false,
       children: [
         {
           title: 'Sink Management',

ui/src/app/pages/pages.component.scss

@@ -15,4 +15,16 @@
       }
     }
   }
+
+  ::ng-deep {
+    nb-icon.expand-state {
+      visibility: hidden;
+    }
+
+    .scrollable {
+      padding: 12px 0 12px 27px !important;
+
+    }
+  }
+
 }

ui/src/app/pages/pages.component.ts

@@ -7,7 +7,7 @@ import { MENU_ITEMS } from './pages-menu';
   styleUrls: ['pages.component.scss'],
   template: `
     <ngx-one-column-layout>
-      <nb-menu [items]="menu"></nb-menu>
+      <nb-menu autoCollapse="false" [items]="menu"></nb-menu>
       <router-outlet></router-outlet>
     </ngx-one-column-layout>
   `,

ui/src/app/pages/sinks/delete/sinks.delete.component.html

@@ -1,21 +1,26 @@
-<nb-card size="medium">
-  <nb-card-header class="d-flex">
-    <p class="align-content-center">Delete Sink Confirmation</p>
-    <button nbButton ghost="true" size="small" class="orb-close-dialog"
-            (click)="onClose()"><span class="nb-close"></span>Close
+<nb-card size="large" class="nb-card-medium">
+  <nb-card-header>
+    {{strings.delete.header}}
+    <button nbButton
+            ghost="true"
+            size="small"
+            class="orb-close-dialog align-content-end"
+            (click)="onClose()">
+      <span class="nb-close">{{strings.delete.close}}</span>
     </button>
   </nb-card-header>
   <nb-card-body>
     <div class="row form-row">
-      <p>Are you sure you want to delete this sink? This may cause
-        policies which use this sink to become invalid. This action
-        cannot be undone.<span class="ns1-red">*</span></p>
+      <p>{{strings.delete.body}}<span class="ns1-red">*</span></p>
     </div>
-    <p class="ns1-red">*To confirm, type your sink label exactly as it appears</p>
+    <p class="ns1-red">{{strings.delete.warning}}</p>
     <input type="text" nbInput placeholder="{{sink.name}}" [(ngModel)]="sinkName">
   </nb-card-body>
   <nb-card-footer>
-    <button [disabled]="!isEnabled()" nbButton (click)="onDelete()">I Understand, Delete This Sink
+    <button nbButton
+            class="orb-sink-delete-warning-button"
+            [disabled]="!isEnabled()"
+            (click)="onDelete()">I Understand, Delete This Sink
     </button>
   </nb-card-footer>
 </nb-card>

ui/src/app/pages/sinks/delete/sinks.delete.component.scss

@@ -2,14 +2,6 @@ nb-card {
   width: 400px;
 }
 
-.nb-card-header {
-  background: #232940;
-  color: #232940;
-
-  .p {
-    color: #969fb9;
-  }
-}
 
 button {
   margin: 10px;
@@ -25,8 +17,32 @@ nb-card-footer {
 }
 
 // ORB
-.orb-close-dialog {
-  color: #3089fc;
+::ng-deep {
+  .orb-close-dialog {
+    color: #232940;
+    border-radius: 4px;
+
+    .content {
+      color: #232940;
+    }
+  }
+
+  .orb-sink-delete-warning-button {
+    color: #df316f;
+
+    .content {
+      color: #df316f;
+    }
+  }
+
+  .nb-card-header {
+    background: #232940 !important;
+    color: #232940 !important;
+    fill: #232940;
+
+    .p {
+      color: #969fb9;
+    }
+  }
 
-  border-radius: 4px;
 }

ui/src/app/pages/sinks/delete/sinks.delete.component.ts

@@ -1,6 +1,7 @@
-import {Component, Input} from '@angular/core';
-import {NbDialogRef} from '@nebular/theme';
-import {SinksService} from 'app/common/services/sinks/sinks.service';
+import { Component, Input } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+import { SinksService } from 'app/common/services/sinks/sinks.service';
+import { STRINGS } from 'assets/text/strings';
 
 @Component({
   selector: 'ngx-sinks-delete-component',
@@ -14,11 +15,13 @@ export class SinksDeleteComponent {
     id: '',
   };
 
+  strings = STRINGS.sink;
+
   sinkName: string = '';
 
   constructor(
-      protected dialogRef: NbDialogRef<SinksDeleteComponent>,
-      protected sinkService: SinksService,
+    protected dialogRef: NbDialogRef<SinksDeleteComponent>,
+    protected sinkService: SinksService,
   ) {
   }
 

ui/src/app/pages/sinks/details/sinks.details.component.html

@@ -1,8 +1,12 @@
 <nb-card size="large" class="nb-card-medium">
   <nb-card-header>
     {{header}}
-    <button nbButton ghost="true" size="small" class="orb-close-dialog"
-            (click)="onClose()"><span class="nb-close"></span>Close
+    <button nbButton
+            ghost="true"
+            size="small"
+            class="orb-close-dialog"
+            (click)="onClose()">
+      <span class="nb-close">Close</span>
     </button>
   </nb-card-header>
   <nb-card-body>

ui/src/app/pages/sinks/details/sinks.details.component.scss

@@ -51,7 +51,7 @@ nb-tabset {
 }
 
 .orb-close-dialog {
-  color: #3089fc;
+  color: #232940;
 
   border-radius: 4px;
 }

ui/src/app/shared/components/table/table.component.html

@@ -5,7 +5,9 @@
         class="sink-table-title">
       <div [ngSwitch]="colName">
         <div class="d-flex justify-content-end">
-          <button *ngSwitchCase="'orb-sink-add'" nbButton ghost=true class="button-new-sink"
+          <button *ngSwitchCase="'orb-sink-add'"
+                  nbButton ghost=true
+                  class="button-new-sink"
                   (click)="onAdd()">
             <i class="fa fa-plus">&nbsp;</i>{{strings.sink.list.create}}
           </button>
@@ -21,7 +23,8 @@
   <tr *ngFor="let row of page.rows"
       (mouseenter)="onMouseEnter($event, row)"
       (mouseleave)="onMouseLeave($event, row)">
-    <td *ngFor="let key of config.keys" class="sink-table-row">
+    <td *ngFor="let key of config.keys"
+        class="sink-table-row">
       <div [ngSwitch]="key">
         <div *ngSwitchCase="'checkbox'">
           <nb-checkbox (checkedChange)="onToggleCheckbox(row)"></nb-checkbox>
@@ -31,32 +34,44 @@
         </div>
         <div *ngSwitchCase="'status'">
           <div *ngIf="row[key] === 'active'">
-            <i class="fa fa-circle orb-service-active" aria-hidden="true"></i>
-            {{ row[key] | titlecase }}</div>
+            <i class="fa fa-circle orb-service-active"
+               aria-hidden="true"></i>
+            {{ row[key] | titlecase }}
+          </div>
           <div *ngIf="row[key] !== 'active'">
-            <i class="fa fa-circle orb-service-inactive" aria-hidden="true"></i>
-            {{ row[key] | titlecase }}</div>
+            <i class="fa fa-circle orb-service-inactive"
+               aria-hidden="true"></i>
+            {{ row[key] | titlecase }}
+          </div>
+        </div>
+        <div *ngSwitchCase="'tags'">
+          <mat-chip-list>
+            <mat-chip
+                class="orb-tag-sink "
+                *ngFor="let tag of row[key] | keyvalue">
+              <span class="align-content-center" style="font-size: 11px;">{{tag.key}}, {{tag.value}}</span>
+            </mat-chip>
+          </mat-chip-list>
         </div>
-        <mat-chip-list *ngSwitchCase="'tags'">
-          <mat-chip
-              class="orb-tag-sink "
-              *ngFor="let tag of row[key] | keyvalue">
-            {{tag.key}}, {{tag.value}}
-          </mat-chip>
-        </mat-chip-list>
         <div *ngSwitchCase="'created'">
           {{ row[key] | date:'long' }}
         </div>
-        <div class="orb-action-hover-container orb-table-actions" *ngSwitchCase="
-        'orb-action-hover'">
+        <div class="orb-action-hover-container orb-table-actions"
+             *ngSwitchCase="'orb-action-hover'">
           <div *ngIf="row['isHover']">
-            <button nbButton class="orb-action-hover detail-button" (click)="onDetails(row)">
+            <button nbButton
+                    class="orb-action-hover detail-button"
+                    (click)="onDetails(row)">
               <nb-icon icon="search-outline"></nb-icon>
             </button>
-            <button nbButton class="orb-action-hover edit-button" (click)="onEdit(row)">
+            <button nbButton
+                    class="orb-action-hover edit-button"
+                    (click)="onEdit(row)">
               <nb-icon icon="edit-outline"></nb-icon>
             </button>
-            <button nbButton class="orb-action-hover del-button" (click)="onDelete(row)">
+            <button nbButton
+                    class="orb-action-hover del-button"
+                    (click)="onDelete(row)">
               <nb-icon icon="trash-2-outline"></nb-icon>
             </button>
           </div>

ui/src/app/shared/components/table/table.component.scss

@@ -46,14 +46,21 @@ $orb-primary-inactive: #969fb9;
   }
 
   .orb-action-hover {
-    margin: 0;
-    padding: 0;
+    padding-left: 30px;
     z-index: 999;
-    background-color: #bb3148;
+    background-color: #232940 !important;
+    color: $orb-gray !important;
+    border: 0 !important;
 
     :hover {
-      background-color: #2b3148;
-      color: $orb-gray;
+      nb-icon {
+        border: 0 !important;
+
+        icon {
+          background-color: #232940 !important;
+          color: $orb-gray !important;
+        }
+      }
     }
   }
 
@@ -99,6 +106,10 @@ $orb-primary-inactive: #969fb9;
       line-height: 20px;
       color: #ffffff;
     }
+
+    :last-child {
+      padding-bottom: 2px;
+    }
   }
 
   .sink-table-title {