Merge pull request 'Dark Mode' (#102) from issue98 into main

Reviewed-on: #102
Reviewed-by: yury <yury@4gl.io>

.gitea/workflows/build.yaml

@@ -8,9 +8,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Install Google Chrome
         run: |
@@ -31,11 +31,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       - name: Licence checker
         run: |

.gitea/workflows/release.yaml

@@ -11,9 +11,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -36,11 +36,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       - name: Check audit
       # Audit should fail and stop the CI if critical vulnerability found
@@ -68,9 +66,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -94,11 +92,9 @@ jobs:
       - name: Install dependencies
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
 
       # Install pm2 and prepare SASJS server
       - run: npm i -g pm2
@@ -160,9 +156,9 @@ jobs:
 
     steps:
       - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 20.14.0
 
       - name: Write .npmrc file
         run: |
@@ -188,11 +184,9 @@ jobs:
         description: We want to prevent creating empty release if frontend fails
         run: |
           cd client
-          npm ci
           # Decrypt and Install sheet
           echo ${{ secrets.SHEET_PWD }} | gpg --batch --yes --passphrase-fd 0 ./libraries/sheet-crypto.tgz.gpg
-          npm i ./libraries/sheet-crypto.tgz
+          npm ci
-          # End
           npm i webpack
           npm run build
 

.gitignore

@@ -13,6 +13,7 @@ client/cypress/videos
 client/documentation
 client/sheet-crypto*
 client/.nx
+client/libraries/sheet-crypto.tgz
 cypress.env.json
 sasjsbuild
 sasjsresults

client/package.json

@@ -52,6 +52,7 @@
     "@sasjs/adapter": "4.10.2",
     "@sasjs/utils": "^3.4.0",
     "@types/d3-graphviz": "^2.6.7",
+    "@sheet/crypto": "file:libraries/sheet-crypto.tgz",
     "@types/text-encoding": "0.0.35",
     "base64-arraybuffer": "^0.2.0",
     "buffer": "^5.4.3",
@@ -78,6 +79,7 @@
     "text-encoding": "^0.7.0",
     "tslib": "^2.3.0",
     "vm": "^0.1.0",
+    "webpack": "^5.91.0",
     "zone.js": "~0.14.4"
   },
   "devDependencies": {

client/src/app/app.component.scss

@@ -1,3 +1,5 @@
+@import '../colors.scss';
+
 // Copyright (c) 2016 VMware, Inc. All Rights Reserved.
 // This software is released under MIT license.
 // The full license information can be found in LICENSE in the root directory of this project.
@@ -6,7 +8,7 @@ app-requests-modal {
 }
 
 header.app-header {
-  background: #314351 !important;
+  background: $headerBackground !important;
   color: #fff;
 }
 
@@ -42,7 +44,7 @@ header.app-header {
     align-items: center;
     padding: 30px;
     z-index: 110;
-    background: #314351;
+    background: $headerBackground;
 
     .expired-notice {
       color: #e0e0e0;
@@ -106,15 +108,6 @@ header {
   font-size: 12px;
 }
 
-.btn.btn-success {
-  border-color: #62a420;
-  background-color: #16a57a!important;
-  color: #fff;
-}
-.btn.btn-success:hover {
-  background-color: #2add39;
-  color: #fff;
-}
 
 .toggle-switch input[type=checkbox]:checked+label:before {
   border-color: #61717D;
@@ -142,59 +135,44 @@ header {
   color: #fff;
 }
 
-@media screen and (max-width: 768px) {
-  .navBarResp {
-    display: flex;
-    justify-content: flex-start;
-    background: #495A67;
-    color: #fff;
-  }
-
-  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
-      padding: 0 .5rem 0 1rem;
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      border-radius: .125rem 0 0 .125rem;
-      color: #95c84b;
-  }
-
-
-
-  .card-block, .card-footer {
-    padding: 10px 0px 0px 0px;
-  }
-
-  .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
-    padding: 0rem 0rem 0rem 0rem;
-  }
-
-}
 ::ng-deep {
   .htInvalid {
-  background: black!important;
+    background: black!important;
-}
+  }
 
   @media screen and (max-width:480px) {
-  h2 {
+    h2 {
-    font-size: .7rem!important;
+      font-size: .7rem!important;
-
+    }
+    h3 {
+      font-size: .7rem;
+    }
   }
-  h3 {
-    font-size: .7rem;
-  }
-}
 
   .nav-link {
     padding: 0rem 1rem 0rem 1rem;
   }
 
-  .btn-primary .btn, .btn.btn-primary {
+  body[cds-theme="light"] {
-    border-color: #314351;
+    .btn-primary .btn, .btn.btn-primary {
-    background-color: #314351;
+      border-color: $headerBackground;
-    color: #fff;
+      background-color: $headerBackground;
+      color: #fff;
+    }
   }
+
+  body[cds-theme="dark"] {
+    .btn-primary .btn, .btn.btn-primary {
+      border-color: #5e7382;
+      background-color: #5e7382;
+      color: #fff;
+
+      clr-icon, cds-icon {
+        color: #fff
+      }
+    }
+  }
+
   .btn {
     cursor: pointer;
     display: inline-block;
@@ -215,36 +193,32 @@ header {
     font-weight: 500;
     height: 1.5rem;
     padding: 0 .5rem;
-    border-color: #314351;
-    background-color: transparent;
-    color: #314351;
-  }
-
-  .btn.btn-outline {
-    border-color: #314351;
-    background-color: transparent;
-    color: #314351;
   }
 
   .btn.btn-outline:hover {
-    border-color: #314351;
+    border-color: $headerBackground;
     background-color: #495A67;
     color: #fff;
   }
 
-  .btn.btn-success-outline:hover {
-    background-color: #5ea71f;
-    color: #fff7f7;
-    border-color: #9a9696;
-}
-// .btn.btn-success-outline {
-//     border-color: #266900;
-//     background-color: transparent;
-//     color: #318700;
-// }
-  // .wtSpreader {
 
-  // }
+  body[cds-theme="dark"] {
+    .btn.btn-icon.btn-dimmed {
+      color: #7295ae;
+    }
+  }
+
+  body[cds-theme="light"] {
+    .btn.btn-icon.btn-dimmed {
+      color: $headerBackground;
+    }
+
+    .btn.btn-outline {
+      border-color: $headerBackground;
+      background-color: transparent;
+      color: $headerBackground;
+    }
+  }
 
   .htMobileEditorContainer .inputs textarea {
     font-size: 13pt;
@@ -277,65 +251,68 @@ header {
     width: 350px;
 }
 
-  .handsontable  {
-  background-color: #ffffff;
-  // border: 1px solid #ccc;
-  border-radius: 3px;
-  }
-  .handsontable th {
-  background-color: #fafafa;
-  }
 
   /* Left and right */
-  .ht_clone_left th {
-    border-right: 1px solid #ccc;
-    border-left: 1px solid #ccc;
-  }
 
   /* Column headers */
-  .ht_clone_top th {
+
-    border-top: 1px solid #ccc;
+  body[cds-theme="light"] {
-    border-right: 1px solid #ccc;
+    .wtBorder {
-    border-bottom: 1px solid #ccc;
+      background-color: #495A67!important;
+    }
+
+    .ht_master tr:nth-of-type(odd) > td {
+      filter: brightness(0.95);
+    }
   }
 
-  .ht_clone_top_left_corner th {
+  $darkBorderColor: #697c85;
-    border-right: 1px solid #ccc;
-  }
 
-  .ht_master tr:nth-of-type(odd) > td {
+  body[cds-theme="dark"] {
-    background-color: #f3f3f3;
+    .ht_master tr:nth-of-type(odd) > td {
-    border: 1px solid rgb(197, 197, 197);
+      filter: brightness(1.2);
-    border-bottom: 1px solid rgb(236, 235, 235);
+    }
-    // padding: 1px 1px;
-  }
 
-  .ht_master tr:nth-of-type(even) > td {
+    .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
-    background-color: white;
+      background-color: #2d4048;
-    border: 1px solid rgb(197, 197, 197);
+      border-color: $darkBorderColor;
-    border-bottom: 1px solid rgb(236, 235, 235);
+    }
-    // padding: 1px 1px;
-  }
 
-  .wtBorder {
+    .handsontable td {
-    background-color: #495A67!important;
+      // border-right: 1px solid #697c85;
+      // border-bottom: 1px solid #697c85;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable tr:first-child th, .handsontable tr:first-child td {
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable .handsontable.ht_clone_top .wtHider {
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable .changeType {
+      background-color: #3c5662;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontableInput {
+      background-color: #708b98;
+    }
   }
 
   .handsontable .handsontable.ht_clone_top .wtHider {
     padding: 0 0 0px 0!important;
     margin: 0px;
     border-bottom: 3px solid #d6d3d3;
-}
-
-  .content-container {
-    background: #F5F6FF;
   }
 
-  .card {
+  body[cds-theme="light"] {
-    box-shadow: 0 0.125rem 0 0 #d7d7d7;
+    .content-container {
-    border-radius: .0rem;
+      // background: red;
-    border: 1px solid transparent;
+      background: #F5F6FF;
-    // min-height: calc(100vh - 150px);
+    }
   }
 
   .datagrid-compact, .datagrid-history{
@@ -343,8 +320,6 @@ header {
       border-collapse: separate;
       border: 1px solid transparent;
       border-radius: .125rem;
-      background-color: #fff;
-      color: #565656;
       margin: 0;
       margin-top: 1rem;
       max-width: 100%;
@@ -366,8 +341,8 @@ header {
     }
     .datagrid-footer {
       position: absolute;
-      right: 15px;
+      right: 30px;
-      top: 2px;
+      top: 1px;
     }
     .datagrid .datagrid-head {
       background-color: #fff;
@@ -387,7 +362,6 @@ header {
     -webkit-box-direction: normal;
     -ms-flex-direction: column;
     flex-direction: column;
-    background: #f5f6ff;
     padding: .5rem 0;
     border: 1px solid #ccc;
     box-shadow: 0 1px 0.125rem hsla(0,0%,45%,.25);
@@ -402,8 +376,6 @@ header {
     border-collapse: separate;
     border: 1px solid transparent;
     border-radius: 0px;
-    background-color: #fff;
-    color: #565656;
     margin: 0;
     margin-top: 1rem;
     max-width: 100%;
@@ -414,7 +386,6 @@ header {
     font-size: .45833rem;
     font-weight: 600;
     letter-spacing: .03em;
-    background-color: #fff;
     vertical-align: bottom;
     border-bottom: 1px solid #ccc;
     text-transform: uppercase;
@@ -437,4 +408,34 @@ header {
     max-width: 400px;
     width: 100%;
   }
+}
+
+@media screen and (max-width: 768px) {
+  .navBarResp {
+    display: flex;
+    justify-content: flex-start;
+    background: #495A67;
+    color: #fff;
+  }
+
+  .main-container .sub-nav.clr-nav-level-1 .nav .nav-link, .main-container .sub-nav.clr-nav-level-2 .nav .nav-link, .main-container .subnav.clr-nav-level-1 .nav .nav-link, .main-container .subnav.clr-nav-level-2 .nav .nav-link {
+      padding: 0 .5rem 0 1rem;
+      width: 100%;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      border-radius: .125rem 0 0 .125rem;
+      color: #95c84b;
+  }
+
+
+
+  .card-block, .card-footer {
+    padding: 10px 0px 0px 0px;
+  }
+
+  .main-container[_ngcontent-c0] .content-container[_ngcontent-c0] .content-area[_ngcontent-c0] {
+    padding: 0rem 0rem 0rem 0rem;
+  }
+
 }

client/src/app/app.component.ts

@@ -13,6 +13,15 @@ import { InfoModal } from './models/InfoModal'
 import { DcAdapterSettings } from './models/DcAdapterSettings'
 import { AppStoreService } from './services/app-store.service'
 import { LicenceService } from './services/licence.service'
+import '@cds/core/icon/register.js'
+import {
+  ClarityIcons,
+  exclamationTriangleIcon,
+  moonIcon,
+  sunIcon
+} from '@cds/core/icon'
+
+ClarityIcons.addIcons(moonIcon, sunIcon, exclamationTriangleIcon)
 
 @Component({
   selector: 'my-app',

client/src/app/app.module.ts

@@ -20,10 +20,10 @@ import { UsernavRouteComponent } from './routes/usernav-route/usernav-route.comp
 import { AppService } from './services/app.service'
 import { InfoModalComponent } from './shared/abort-modal/info-modal.component'
 import { RequestsModalComponent } from './shared/requests-modal/requests-modal.component'
-import { HomeModule } from './home/home.module'
 import { DirectivesModule } from './directives/directives.module'
 import { ViyaApiExplorerComponent } from './viya-api-explorer/viya-api-explorer.component'
 import { NgxJsonViewerModule } from 'ngx-json-viewer'
+import { AppSettingsService } from './services/app-settings.service'
 
 @NgModule({
   declarations: [
@@ -50,7 +50,7 @@ import { NgxJsonViewerModule } from 'ngx-json-viewer'
     DirectivesModule,
     NgxJsonViewerModule
   ],
-  providers: [AppService, SasStoreService, LicensingGuard],
+  providers: [AppService, SasStoreService, LicensingGuard, AppSettingsService],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

client/src/app/directives/directives.module.ts

@@ -4,20 +4,23 @@ import { NgVarDirective } from './ng-var.directive'
 import { DragNdropDirective } from './drag-ndrop.directive'
 import { FileDropDirective } from './file-drop.directive'
 import { FileSelectDirective } from './file-select.directive'
+import { StealFocusDirective } from './steal-focus.directive'
 
 @NgModule({
   declarations: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ],
   imports: [CommonModule],
   exports: [
     NgVarDirective,
     DragNdropDirective,
     FileDropDirective,
-    FileSelectDirective
+    FileSelectDirective,
+    StealFocusDirective
   ]
 })
 export class DirectivesModule {}

client/src/app/directives/steal-focus.directive.ts

@@ -0,0 +1,17 @@
+import { Directive, HostListener } from '@angular/core'
+
+@Directive({
+  selector: '[appStealFocus]'
+})
+export class StealFocusDirective {
+  constructor() {}
+
+  /**
+   * For some reason newest version of Clarity v17.0.1 is stealing focus when
+   * clicking on the input inside of the clr-tree-view
+   * This is workaround
+   */
+  @HostListener('click', ['$event']) onClick(event: any) {
+    event.target.focus()
+  }
+}

client/src/app/editor/components/edit-record/edit-record.component.html

@@ -277,7 +277,7 @@
     <div>
       <button
         type="button"
-        class="btn btn-outline focusable"
+        class="btn btn-outline focusable mr-5i"
         (click)="currentRecord!.noLinkOption = false; closeRecordEdit()"
       >
         Cancel

client/src/app/editor/components/edit-record/edit-record.component.scss

@@ -38,7 +38,6 @@
       app-soft-select {
         display: block;
         width: 224px;
-        background: #fff;
         border: 1px solid #999;
         color: #000;
         padding: calc(.25rem + 2px) .5rem;
@@ -49,7 +48,6 @@
         input {
           width: 100%;
           border: 0;
-          background-color: #fff;
 
           &:focus {
             background: none;
@@ -132,7 +130,6 @@
 
     clr-input-container {
       width: 224px;
-      background: #fff;
       border: 1px solid #999;
       color: #000;
       padding: calc(.25rem + 2px) .5rem;

client/src/app/editor/editor.component.html

@@ -165,11 +165,14 @@
         class="card-header clr-row buttonBar headerBar clr-flex-md-row clr-justify-content-center clr-justify-content-lg-end"
       >
         <div *ngIf="tableTrue" class="clr-col-12 clr-col-lg-4 backBtn">
-          <span class="btn btn-sm" [routerLink]="['/home']">
+          <span class="btn btn-sm btn-icon btn-dimmed" [routerLink]="['/home']">
-            <clr-icon shape="caret" dir="left" size="20"></clr-icon>Back to
+            <clr-icon shape="caret" dir="left" size="20"></clr-icon>
-            table selection
+            Back to table selection
           </span>
-          <span (click)="viewboxManager()" class="btn btn-sm viewbox-open">
+          <span
+            (click)="viewboxManager()"
+            class="btn btn-sm btn-icon btn-dimmed viewbox-open"
+          >
             <clr-icon shape="view-cards" size="20"></clr-icon>
             Viewboxes
           </span>
@@ -235,7 +238,7 @@
           <ng-container *ngIf="hotTable.readOnly && !uploadPreview">
             <button
               type="button"
-              class="btnView btn btn-sm btn-icon btn-block"
+              class="btnView btn btn-sm btn-icon btn-block btn-dimmed"
               (click)="openQb()"
             >
               <clr-icon shape="filter"></clr-icon>
@@ -362,8 +365,8 @@
             <ng-container *ngIf="!getdataError">
               <span class="spinner"> Loading... </span>
 
-              <div>
+              <div class="mt-10">
-                <h3>Loading table</h3>
+                <p cds-text="section">Loading table</p>
               </div>
             </ng-container>
 
@@ -372,8 +375,8 @@
                 <clr-icon shape="error-standard" class="error-icon"></clr-icon>
               </span>
 
-              <div>
+              <div class="mt-10">
-                <h3>Loading table error</h3>
+                <p cds-text="section">Loading table error</p>
               </div>
             </ng-container>
           </div>
@@ -398,6 +401,7 @@
               hotId="hotInstance"
               id="hotTable"
               class="edit-hot"
+              className="htDark"
               [class.hidden]="hotTable.hidden"
               [licenseKey]="hotTable.licenseKey"
             >
@@ -486,11 +490,15 @@
                     support&#64;datacontroller.io</span
                   >
                   <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
-                    <div class="form-group">
+                    <div class="text-area-full-width">
-                      <label for="formFields_8">Message</label>
+                      <label for="formFields_8" class="mb-5 d-block"
+                        >Message</label
+                      >
                       <textarea
+                        clrTextarea
                         [(ngModel)]="message"
                         [disabled]="!validationDone"
+                        tabindex="0"
                         [value]="
                           !validationDone
                             ? 'Please wait while we validate ' +
@@ -498,10 +506,9 @@
                               ' cells.'
                             : ''
                         "
-                        class="w-100"
+                        class="submit-reason"
                         type="text"
                         id="formFields_8"
-                        rows="5"
                       ></textarea>
                     </div>
                     <!-- TODO:approvers list -->
@@ -520,6 +527,7 @@
                     [disabled]="!validationDone"
                     type="submit"
                     class="btn btn-sm btn-success-outline m-0"
+                    tabindex="0"
                     (click)="saveTable(hotTable.data)"
                   >
                     Submit
@@ -528,6 +536,7 @@
                     id="cancelSubmitBtn"
                     type="button"
                     class="btn btn-sm btn-outline"
+                    tabindex="0"
                     (click)="cancelSubmit(); submit = false; validationDone = 0"
                   >
                     Cancel

client/src/app/editor/editor.component.scss

@@ -21,12 +21,12 @@ hot-table {
 
     .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
       &.primaryKeyHeaderStyle {
-        background: #306b00b0;
+        background-color: #306b00b0 !important;
       }
     }
 
     .primaryKeyHeaderStyle {
-      background: #306b006e;
+      background-color: #306b006e !important;
     }
 
     th.readonlyCell {
@@ -41,6 +41,12 @@ hot-table {
   }
 }
 
+.submit-reason {
+  min-height: 120px;
+  max-height: 120px;
+  height: 120px;
+}
+
 .infoBar {
   margin-top:14px;
   background: #495967;
@@ -80,8 +86,7 @@ hot-table {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  background: #ffffff;
+  background: var(--clr-vertical-nav-bg-color);
-  background: #f5f6fe;
 }
 
 .error-icon {

client/src/app/editor/editor.component.ts

@@ -2766,6 +2766,7 @@ export class EditorComponent implements OnInit, AfterViewInit {
         })
 
         hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
+
         this.currentEditRecordLoadings.push(column)
         hot.render()
 
@@ -3257,6 +3258,9 @@ export class EditorComponent implements OnInit, AfterViewInit {
           if (col === 0) {
             th.classList.add('firstColumnHeaderStyle')
           }
+
+          // Dark mode
+          th.classList.add('darkTH')
         },
         afterGetCellMeta: (
           row: number,

client/src/app/editor/utils/renderers.utils.ts

@@ -11,9 +11,11 @@ export const errorRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = `${
     value ? value.toString() : ''
-  } <clr-icon shape="exclamation-circle" status="warning"></clr-icon>`
+  } <cds-icon shape="exclamation-triangle" status="warning"></cds-icon>`
 
   return td
 }
@@ -31,6 +33,8 @@ export const noSpinnerRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = value ? value : ''
 
   return td
@@ -50,9 +54,20 @@ export const spinnerRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  addDarkClass(td)
+
   td.innerHTML = `${
     value ? value.toString() : ''
   } <span class="spinner spinner-sm vertical-align-middle"></span>`
 
   return td
 }
+
+/**
+ * Adds a htDark class to a TD element if not existing
+ */
+const addDarkClass = (td: any) => {
+  if (!td.classList.contains('htDark')) {
+    td.classList.add('htDark')
+  }
+}

client/src/app/group/group.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="groups" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Groups"
@@ -27,7 +28,7 @@
       <clr-tree-node
         (click)="groupOnClick(group)"
         *ngIf="!group['hidden']"
-        [class.table-active]="group.GROUPURI === groupUri"
+        [class.active]="group.GROUPURI === groupUri"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="users"></clr-icon>

client/src/app/group/group.component.scss

@@ -1,26 +1,63 @@
+@import '../../colors.scss';
+
+::ng-deep body[cds-theme="dark"] {
+  .group-info {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .group-data {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .member-table tbody{
+    tr:hover{
+        background-color: #29404b;
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .group-info{
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .group-data {
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .member-table tbody{
+    tr:hover{
+          background-color: #e6e6e6;
+      }
+  }
+}
+
 .sidebar-height{
     height: 100%;
 }
 .group-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
 .group-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .group-info td{
     text-align: center;
 }
 
 .group-data{
-  background-color: #f9f9f9;
+  border: 1px solid;
-  border: 1px solid #a7a7a7;
   border-radius: 3px;
-  box-shadow: 0px 2px 5px #dad7d7;
 }
+
 .group-data{
   min-height: auto;
   h3, h5{
@@ -28,15 +65,11 @@
 }
 
 .member-table{
-  background-color: #f9f9f9;
   width: 100%;
 }
-.member-table thead{
+
-  background-color: #dadada;
-}
 .member-table tbody{
   tr:hover{
-      background-color: #e6e6e6;
       cursor: pointer;
   }
 }

client/src/app/home/home.component.html

@@ -4,6 +4,7 @@
       <div class="tree-search-wrapper">
         <input
           clrInput
+          appStealFocus
           #searchLibTreeInput
           placeholder="Libraries"
           name="input"
@@ -46,6 +47,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
@@ -85,7 +87,7 @@
               (click)="!tableLocked ? onTableClick(libTable, library) : ''"
               class="clr-treenode-link"
               [class.dc-locked-control]="tableLocked"
-              [class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
+              [class.active]="libTabActive(library.LIBRARYREF, libTable)"
             >
               <ng-container [ngSwitch]="libTable.includes('-FC')">
                 <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@@ -126,12 +128,20 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 *ngIf="treeNodeLibraries?.length! > 0" class="text-center color-gray">
+      <p
+        *ngIf="treeNodeLibraries?.length! > 0"
+        class="text-center color-gray mt-10"
+        cds-text="section"
+      >
         Please select a table
-      </h3>
+      </p>
-      <h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray">
+      <p
+        *ngIf="treeNodeLibraries?.length! < 1"
+        class="text-center color-gray mt-10"
+        cds-text="section"
+      >
         No Editable Tables Configured
-      </h3>
+      </p>
     </div>
   </div>
 </div>

client/src/app/lineage/lineage.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="libraryList" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Libraries"
@@ -42,6 +43,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
+              appStealFocus
               clrInput
               #searchTreeInput
               placeholder="Tables"
@@ -85,6 +87,7 @@
           <clr-tree-node *ngIf="libTable['columns']" class="search-node">
             <div class="tree-search-wrapper">
               <input
+                appStealFocus
                 clrInput
                 #searchTreeInput
                 placeholder="Columns"
@@ -138,7 +141,9 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 class="text-center color-gray">Please select a column or table</h3>
+      <p class="text-center color-gray mt-10" cds-text="section">
+        Please select a column or table
+      </p>
     </div>
 
     <ng-container *ngIf="column || table">
@@ -180,13 +185,13 @@
             <button
               (click)="limitDotDepth = true"
               type="button"
-              class="btn btn-outline"
+              class="btn btn-outline mr-5"
             >
               Limit depth
             </button>
 
             <!-- <button class="btn btn-outline" (click)='showSvg()'> Open in New Tab </button> -->
-            <div class="btn-group d-block">
+            <div class="btn-group direction d-block">
               <div
                 class="radio btn"
                 (click)="

client/src/app/lineage/lineage.component.scss

@@ -1,6 +1,8 @@
+@import '../../colors.scss';
+
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
+    border-color: $headerBackground;
-    background-color: #314351!important;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -41,6 +43,10 @@ clr-tree-node button {
     white-space: nowrap;
 }
 
+.btn-group.direction {
+    margin-left: var(--cds-global-space-6);
+}
+
 .graph-render-spinner {
     position: absolute;
     top: 0;

client/src/app/metadata/metadata.component.html

@@ -22,6 +22,7 @@
     <clr-tree-node *ngIf="metaDataList" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="search SAS Types"
@@ -72,7 +73,9 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 class="text-center color-gray">Please select a type</h3>
+      <p class="text-center color-gray mt-10" cds-text="section">
+        Please select a type
+      </p>
     </div>
 
     <div class="loadingSpinner" *ngIf="loading">
@@ -123,12 +126,18 @@
                         [class.object-header]="!entry.count"
                         class="full-width"
                       >
-                        <clr-icon
+                        <div>
-                          *ngIf="!entry.count"
+                          <clr-icon
-                          shape="rack-server"
+                            *ngIf="!entry.count"
-                        ></clr-icon>
+                            shape="rack-server"
-                        <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                          ></clr-icon>
-                        {{ entry.display }}
+                          <clr-icon
+                            *ngIf="entry.count"
+                            shape="block"
+                          ></clr-icon>
+                          {{ entry.display }}
+                        </div>
+
                         <p class="float-right object-uri" *ngIf="!entry.count">
                           {{ entry.URI }}
                         </p>
@@ -163,9 +172,15 @@
                 [clrExpandable]="true"
               >
                 <div [class.object-header]="!entry.count" class="full-width">
-                  <clr-icon *ngIf="!entry.count" shape="rack-server"></clr-icon>
+                  <div>
-                  <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                    <clr-icon
-                  {{ entry.display }}
+                      *ngIf="!entry.count"
+                      shape="rack-server"
+                    ></clr-icon>
+                    <clr-icon *ngIf="entry.count" shape="block"></clr-icon>
+                    {{ entry.display }}
+                  </div>
+
                   <p class="float-right object-uri" *ngIf="!entry.count">
                     {{ entry.URI }}
                   </p>

client/src/app/metadata/metadata.component.scss

@@ -1,14 +1,27 @@
+::ng-deep body[cds-theme="dark"] {
+  .object-header:hover {
+    background-color: #405560;
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .objects-col {
+    background: white;
+  }
+
+  .object-header:hover {
+    background-color: #d8e3e9;
+  }
+}
 
 .objects-col{
   height: 75vh;
   overflow: scroll;
   border: 1px solid #cccccc;
-  background: white;
   border-radius: 4px;
 }
 
 .cols-head {
-  background: #fafafa;
   border: 1px solid #cccccc;
   padding: 10px;
   display: flex;
@@ -40,11 +53,13 @@
   margin-top: 5px;
 }
 .object-header{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   padding-left: 3px;
   padding-right: 3px;
 }
 .object-header:hover{
-  background-color: #d8e3e9;
   border-radius: 3px;
 }
 .datagrid-host{

client/src/app/models/AppSettings.ts

@@ -0,0 +1,9 @@
+export interface AppSettings {
+  persistSelectedTheme: boolean
+  selectedTheme: AppThemes
+}
+
+export enum AppThemes {
+  light = 'light',
+  dark = 'dark'
+}

client/src/app/query/query.component.scss

@@ -1,3 +1,25 @@
+::ng-deep {
+    body[cds-theme="dark"] {
+        .clause-logic {
+            background: #192a30;
+        }
+
+        .clause-query {
+            background: #263e48;
+        }
+    }
+
+    body[cds-theme="light"] {
+        .clause-logic {
+            background: #e9e9e9;
+        }
+
+        .clause-query {
+            background: #fbf8f8;
+        }
+    }
+}
+
 .content {
     display: flex;
 
@@ -9,13 +31,12 @@
             display: flex;
             justify-content: center;
             flex-direction: column;
-            background: #e9e9e9;
+
             padding: 15px;
         }
 
         .clause-query {
             padding: 30px 0px 20px 20px;
-            background: #fbf8f8;
             display: flex;
             justify-content: center;
             flex-direction: column;
@@ -220,8 +241,11 @@
     vertical-align: middle;
     margin: 0;
 }
-:not(pre) > code[class*="language-"], pre[class*="language-"] {
+
-    background-color: #fbf8f8;
+::ng-deep body[cds-theme="dark"] {
+    .line-numbers {
+        border-color: #989797 !important;
+    }
 }
 
 pre[class*="language-"] {

client/src/app/review/approve-details/approve-details.component.html

@@ -284,19 +284,15 @@
                     >
                       <span class="label label-warning">
                         Changed Rows
-                        <span class="badge badge-warning">{{
+                        <span class="badge">{{ lens.updated }}</span>
-                          lens.updated
-                        }}</span>
                       </span>
                       <span class="label label-success">
                         Added Rows
-                        <span class="badge badge-success">{{ lens.new }}</span>
+                        <span class="badge">{{ lens.new }}</span>
                       </span>
                       <span class="label label-danger">
                         Deleted Rows
-                        <span class="badge badge-danger">{{
+                        <span class="badge">{{ lens.deleted }}</span>
-                          lens.deleted
-                        }}</span>
                       </span>
                     </div>
                   </div>
@@ -311,8 +307,8 @@
           class="h-24vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
+          <div *ngIf="!loadingTable" class="mt-10">
-            <h3>Loading table</h3>
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
 
@@ -477,15 +473,15 @@
                 >
                   <span class="label label-warning">
                     Changed Rows
-                    <span class="badge badge-warning">{{ lens.updated }}</span>
+                    <span class="badge">{{ lens.updated }}</span>
                   </span>
                   <span class="label label-success">
                     Added Rows
-                    <span class="badge badge-success">{{ lens.new }}</span>
+                    <span class="badge">{{ lens.new }}</span>
                   </span>
                   <span class="label label-danger">
                     Deleted Rows
-                    <span class="badge badge-danger">{{ lens.deleted }}</span>
+                    <span class="badge">{{ lens.deleted }}</span>
                   </span>
                 </div>
               </div>
@@ -519,8 +515,8 @@
           class="h-25vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
+          <div *ngIf="!loadingTable" class="mt-10">
-            <h3>Loading table</h3>
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
         <div class="tableCont">

client/src/app/review/approve-details/approve-details.component.scss

@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .loader {
   display:flex;
   justify-content: center;
@@ -10,19 +12,48 @@
 }
 
 .addedRow {
-  background:  rgb(146, 208, 154);
   border: 1px solid rgba(9, 77, 117, 0.2);
   border-radius: 5px;
 }
 
 .deletedRow {
-  background: rgb(230, 179, 179);
   border: 1px solid rgba(70, 71, 70, 0.2);
   border-radius: 5px;
 }
 
+::ng-deep body[cds-theme="dark"] {
+  table {
+    .updatedRow {
+      background: #93971e;
+    }
+
+    .addedRow {
+      background:  rgb(86 153 95);
+    }
+
+    .deletedRow {
+      background: rgb(138 90 90);
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  table {
+    .updatedRow {
+      background: #fafda8;
+    }
+
+    .addedRow {
+      background:  rgb(146, 208, 154);
+    }
+
+    .deletedRow {
+      background: rgb(230, 179, 179);
+    }
+  }
+}
+
 .updatedRow {
-  background: #fafda8;
   border: 1px solid rgba(9, 117, 9, 0.2);
   border-radius: 5px;
 }
@@ -45,7 +76,7 @@ background: rgba(252, 135, 120, 0.4);
     font-size: .54167rem;
     font-weight: 400;
     letter-spacing: normal;
-    background: #314351;
+    background: $headerBackground;
     border-radius: .125rem;
     color: #f0f1ec;;
     line-height: .75rem;
@@ -68,8 +99,8 @@ background: rgba(252, 135, 120, 0.4);
     top: auto;
     right: auto;
     content: "";
-    border-left: .25rem solid #314351;
+    border-left: .25rem solid $headerBackground;
-    border-top: .20833rem solid #314351;
+    border-top: .20833rem solid $headerBackground;
     border-right: .25rem solid transparent;
     border-bottom: .20833rem solid transparent;
 }
@@ -79,8 +110,8 @@ border: 0px solid;
 }
 
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
+    border-color: $headerBackground;
-    background-color: #314351!important;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -140,7 +171,7 @@ border: 0px solid;
 .tooll {
     position: absolute;
     background: #e6b3b3;
-    color: #314351;
+    color: $headerBackground;
     top: 0px;
     height: 36px;
     width: 100%;

client/src/app/review/approve/approve.component.html

@@ -99,19 +99,11 @@
             </clr-dg-cell>
           </clr-dg-row>
 
-          <clr-dg-footer class="d-flex justify-content-start">
+          <clr-dg-footer>
-            <span>items per page</span>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
-            <select [(ngModel)]="itemsNum">
+              <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
-              <option [ngValue]="3">3</option>
+                >Items per page</clr-dg-page-size
-              <option [ngValue]="5">5</option>
+              >
-              <option [ngValue]="10">10</option>
-              <option [ngValue]="15">15</option>
-            </select>
-            <clr-dg-pagination
-              #pagination
-              [clrDgPageSize]="itemsNum"
-              class="center"
-            >
               {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
               {{ pagination.totalItems }} approvals
             </clr-dg-pagination>

client/src/app/review/approve/approve.component.scss

@@ -1,3 +1,5 @@
+@import '../../../colors.scss';
+
 .column-center {
     display: flex;
     flex-direction: column;
@@ -13,11 +15,11 @@
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-    background: #314351!important;
+    background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-    border-right: .25rem solid #314351;
+    border-right: .25rem solid $headerBackground;
-    border-bottom: .20833rem solid #314351;
+    border-bottom: .20833rem solid $headerBackground;
 }
 
 .noBorder {

client/src/app/review/submitter/submitter.component.html

@@ -86,19 +86,11 @@
               </clr-dg-cell>
             </clr-dg-row>
 
-            <clr-dg-footer class="d-flex justify-content-start">
+            <clr-dg-footer>
-              <span>items per page</span>
+              <clr-dg-pagination #pagination [clrDgPageSize]="10">
-              <select [(ngModel)]="itemsNum">
+                <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]"
-                <option [ngValue]="3">3</option>
+                  >Items per page</clr-dg-page-size
-                <option [ngValue]="5">5</option>
+                >
-                <option [ngValue]="10">10</option>
-                <option [ngValue]="15">15</option>
-              </select>
-              <clr-dg-pagination
-                #pagination
-                [clrDgPageSize]="itemsNum"
-                class="center"
-              >
                 {{ pagination.firstItem + 1 }} -
                 {{ pagination.lastItem + 1 }} of
                 {{ pagination.totalItems }} submissions

client/src/app/review/submitter/submitter.component.scss

@@ -1,13 +1,15 @@
+@import '../../../colors.scss';
+
 .noBorder {
   border-bottom: 1px solid transparent!important;
 }
 
 .tooltip.tooltip-bottom-left>.tooltip-content, .tooltip .tooltip-content.tooltip-bottom-left {
-  background: #314351!important;
+  background: $headerBackground !important;
 }
 .tooltip.tooltip-bottom-left>.tooltip-content:before, .tooltip .tooltip-content.tooltip-bottom-left:before {
-  border-right: .25rem solid #314351;
+  border-right: .25rem solid $headerBackground;
-  border-bottom: .20833rem solid #314351;
+  border-bottom: .20833rem solid $headerBackground;
 }
 
 .no-submitted-tables {

client/src/app/role/role.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="roles" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Roles"
@@ -26,7 +27,7 @@
       <clr-tree-node
         (click)="roleOnClick(role)"
         *ngIf="!role['hidden']"
-        [class.table-active]="role.ROLEURI === roleUri"
+        [class.active]="role.ROLEURI === roleUri"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="blocks-group"></clr-icon>

client/src/app/role/role.component.scss

@@ -1,25 +1,61 @@
+@import '../../colors.scss';
+
+::ng-deep body[cds-theme="dark"] {
+  .role {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .role-data {
+      background-color: $headerBackground;
+      border-color: $headerBackground;
+  }
+
+  .member-table tbody{
+    tr:hover{
+        background-color: #29404b;
+    }
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .role-info{
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .role-data {
+      background-color: #f9f9f9;
+      border-color: #a7a7a7;
+      box-shadow: 0px 2px 5px #dad7d7;
+  }
+
+  .member-table tbody{
+    tr:hover{
+          background-color: #e6e6e6;
+      }
+  }
+}
+
 .sidebar-height{
     height: 100%;
 }
 .role-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
 .role-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .role-info td{
     text-align: center;
 }
 
 .role-data{
-  background-color: #f9f9f9;
+  border: 1px solid;
-  border: 1px solid #a7a7a7;
   border-radius: 3px;
-  box-shadow: 0px 2px 5px #dad7d7;
 }
 .role-data{
   min-height: unset;
@@ -28,15 +64,10 @@
   }
 }
 .member-table{
-  background-color: #f9f9f9;
   width: 100%;
 }
-.member-table thead{
-  background-color: #dadada;
-}
 .member-table tbody{
   tr:hover{
-    background-color: #e6e6e6;
     cursor: pointer;
   }
 }

client/src/app/services/app-settings.service.ts

@@ -0,0 +1,56 @@
+import { BehaviorSubject } from 'rxjs'
+import { AppSettings, AppThemes } from '../models/AppSettings'
+
+export class AppSettingsService {
+  public defaultSettings: AppSettings = {
+    persistSelectedTheme: true,
+    selectedTheme: AppThemes.light
+  }
+  public settings = new BehaviorSubject<AppSettings>(this.defaultSettings)
+
+  constructor() {
+    this.restoreAppSettings()
+  }
+
+  /**
+   * Restore app settings from the local storage
+   */
+  restoreAppSettings() {
+    try {
+      const serializedSettings = localStorage.getItem('app-settings')
+
+      if (serializedSettings) {
+        const settings = JSON.parse(serializedSettings)
+
+        this.setAppSettings(settings)
+      } else {
+        console.info(
+          'No app settings stored in the localStorage, we will set to default values.'
+        )
+      }
+    } catch (err) {
+      console.warn('Error restoring settings from local storgae.', err)
+    }
+  }
+
+  /**
+   * Save app settings to the local storage
+   */
+  storeAppSettings() {
+    localStorage.setItem('app-settings', JSON.stringify(this.settings.value))
+  }
+
+  /**
+   * Function used in the app to update global settings object
+   *
+   * @param appSettings contains properties that should be updated in settings
+   */
+  setAppSettings(appSettings: Partial<AppSettings>) {
+    this.settings.next({
+      ...this.settings.value,
+      ...appSettings
+    })
+
+    this.storeAppSettings()
+  }
+}

client/src/app/services/app.service.ts

@@ -7,6 +7,8 @@ import { BehaviorSubject } from 'rxjs'
 import { LoggerService } from './logger.service'
 import { EnvironmentInfo } from '../system/models/environment-info.model'
 import { LicenceService } from './licence.service'
+import { AppSettingsService } from './app-settings.service'
+import { AppThemes } from '../models/AppSettings'
 
 @Injectable()
 export class AppService {
@@ -18,6 +20,7 @@ export class AppService {
     private eventService: EventService,
     private sasService: SasService,
     private loggerService: LoggerService,
+    private appSettingsService: AppSettingsService,
     private router: Router
   ) {
     this.subscribe()
@@ -29,6 +32,19 @@ export class AppService {
         }
       }
     })
+
+    const appSettings = this.appSettingsService.settings.value
+
+    if (!!appSettings.persistSelectedTheme) {
+      if (appSettings.selectedTheme === AppThemes.light) {
+        this.eventService.toggleDarkMode(false)
+      } else if (appSettings.selectedTheme === AppThemes.dark) {
+        this.eventService.toggleDarkMode(true)
+      } else {
+        // Fallback to light mode
+        this.eventService.toggleDarkMode(false)
+      }
+    }
   }
 
   sasServiceInit() {
@@ -95,6 +111,7 @@ export class AppService {
           MEMSIZE: res.MEMSIZE,
           SYSPROCESSMODE: res.SYSPROCESSMODE,
           SYSHOSTNAME: res.SYSHOSTNAME,
+          SYSUSERID: res.SYSUSERID,
           SYSHOSTINFOLONG: res.SYSHOSTINFOLONG,
           SYSENCODING: res.SYSENCODING,
           AUTOEXEC: res.AUTOEXEC,

client/src/app/services/event.service.ts

@@ -1,6 +1,9 @@
 import { Injectable, Output, EventEmitter } from '@angular/core'
 import { InfoModal, AbortDetails } from '../models/InfoModal'
 import { AlertsService } from '../shared/alerts/alerts.service'
+import { BehaviorSubject } from 'rxjs'
+import { AppSettingsService } from './app-settings.service'
+import { AppThemes } from '../models/AppSettings'
 
 @Injectable({
   providedIn: 'root'
@@ -17,7 +20,23 @@ export class EventService {
   public viewLastUrl: string | null = null
   public sidebarCloseLimit = 1280
 
-  constructor(private alertsService: AlertsService) {}
+  public darkMode: BehaviorSubject<boolean> = new BehaviorSubject(false)
+
+  constructor(private appSettingsService: AppSettingsService) {}
+
+  toggleDarkMode(value: boolean) {
+    this.darkMode.next(value)
+
+    if (value) {
+      document.body.setAttribute('cds-theme', 'dark')
+    } else {
+      document.body.setAttribute('cds-theme', 'light')
+    }
+
+    this.appSettingsService.setAppSettings({
+      selectedTheme: value ? AppThemes.dark : AppThemes.light
+    })
+  }
 
   public showDemoLimitModal(featureName: string) {
     this.onDemoLimitModalShow.emit(featureName)

client/src/app/shared/autocomplete/autocomplete.component.scss

@@ -1,6 +1,6 @@
 .input-val {
   border: 0px;
-  background: #fbf8f8;
+  background: transparent;
   border-bottom: 1px solid #999999;
 }
 
@@ -13,6 +13,29 @@ input {
   }
 }
 
+::ng-deep {
+  body[cds-theme="dark"] {
+    .datalist {
+      background: #21333b;
+      border: 1px solid #575757;
+    }
+
+    input {
+      color: #fff;
+    }
+
+    .datalist option {
+      color: #fff
+    }
+  }
+
+  body[cds-theme="light"] {
+    .datalist {
+      background: #fff;
+    }
+  }
+}
+
 .autocomplete-wrapper {
   .overlay {
     position: fixed;
@@ -25,7 +48,6 @@ input {
 
   .datalist {
       position: fixed;
-      background: white;
       box-shadow: 0px 3px 10px -1px #0000002b;
       overflow: auto;
       z-index: 2000;

client/src/app/shared/dc-tree/dc-tree.component.html

@@ -2,6 +2,7 @@
   <clr-tree-node *ngIf="libraryList" class="search-node">
     <div class="tree-search-wrapper">
       <input
+        appStealFocus
         clrInput
         #searchLibTreeInput
         placeholder="Libraries"
@@ -45,6 +46,7 @@
       <clr-tree-node *ngIf="library['tables']" class="search-node">
         <div class="tree-search-wrapper">
           <input
+            appStealFocus
             clrInput
             #searchTreeInput
             placeholder="Tables"
@@ -91,7 +93,7 @@
             "
             class="clr-treenode-link"
             [class.dc-locked-control]="tableLocked"
-            [class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
+            [class.active]="libTabActive(library.LIBRARYREF, libTable)"
           >
             <ng-container [ngSwitch]="libTable.includes('-FC')">
               <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@@ -114,6 +116,7 @@
             <clr-tree-node *ngIf="libTable['columns']" class="search-node">
               <div class="tree-search-wrapper">
                 <input
+                  appStealFocus
                   clrInput
                   #searchTreeInput
                   placeholder="Columns"

client/src/app/shared/login/login.component.scss

@@ -1,5 +1,7 @@
+@import '../../../colors.scss';
+
 .sideBarProps {
-  background: #314351!important;
+  background: $headerBackground !important;
   color: #e0e0e0;
 }
 

client/src/app/shared/requests-modal/requests-modal.component.scss

@@ -70,7 +70,6 @@
     border-radius: 3px;
 
     border: 1px solid #e2e2e2;
-    background-color: #fbfbfb;
 
     height: 48vh;
     overflow: auto;

client/src/app/shared/sidebar/sidebar.component.scss

@@ -1,5 +1,10 @@
 $sidebarWidth: 272px;
 
+.clr-vertical-nav .nav-link.active {
+    background-color: transparent;
+    padding-left: 5px;
+}
+
 clr-vertical-nav {
     width: $sidebarWidth;
     min-width: $sidebarWidth;
@@ -7,7 +12,6 @@ clr-vertical-nav {
     max-width: 375px;
     position: relative;
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.12);
-    background-color: white !important;
 
     .sun-dropdown {
         min-height: 36px

client/src/app/shared/soft-select/soft-select.component.scss

@@ -1,6 +1,6 @@
 .input-val {
     border: 0px;
-    background: #fbf8f8;
+    background: transparent;
     border-bottom: 1px solid #999999;
 }
 

client/src/app/shared/user-nav-dropdown/header-actions.component.html

@@ -1,4 +1,25 @@
 <div class="header-actions">
+  <div class="d-flex clr-align-items-center">
+    <cds-icon
+      *ngIf="!darkMode.value"
+      (click)="toggleDarkMode(true)"
+      size="md"
+      class="theme-toggle-icon cursor-pointer"
+      shape="moon"
+      inverse="false"
+      solid="false"
+    ></cds-icon>
+    <cds-icon
+      *ngIf="!!darkMode.value"
+      (click)="toggleDarkMode(false)"
+      size="md"
+      class="theme-toggle-icon cursor-pointer"
+      shape="sun"
+      inverse="false"
+      solid="false"
+    ></cds-icon>
+  </div>
+
   <app-loading-indicator></app-loading-indicator>
 
   <clr-dropdown class="app-nav-dropdown">

client/src/app/shared/user-nav-dropdown/header-actions.component.scss

@@ -65,9 +65,6 @@ $clr-light-gray: #eee;
       height: 45px;
       line-height: 40px;
 
-      span.dropdown-text{
-        color: $clr-dark-gray;
-      }
 
       .badge {
         position: absolute;

client/src/app/shared/user-nav-dropdown/header-actions.component.ts

@@ -26,6 +26,7 @@ export class HeaderActions implements OnInit, OnDestroy {
   public sasjsConfig: SASjsConfig = new SASjsConfig()
   public requestsCount: number = 0
   public commitVer: string = ''
+  public darkMode = this.eventService.darkMode
 
   constructor(
     private userService: UserService,
@@ -51,6 +52,10 @@ export class HeaderActions implements OnInit, OnDestroy {
     this.userSub.unsubscribe()
   }
 
+  toggleDarkMode(value: boolean) {
+    this.eventService.toggleDarkMode(value)
+  }
+
   openRequestsModal() {
     this.eventService.openRequestsModal()
   }

client/src/app/shared/viewboxes/viewboxes.component.html

@@ -389,6 +389,7 @@
         *ngIf="viewboxTableIndex > -1"
         [hotId]="'hotInstance_viewbox_' + viewbox.id"
         id="hotTable"
+        className="htDark"
         [readOnly]="true"
         [modifyColWidth]="maxWidthCheker"
         [copyPaste]="viewboxTables[viewboxTableIndex].hotTable.copyPaste"

client/src/app/shared/viewboxes/viewboxes.component.scss

@@ -38,6 +38,10 @@ dc-tree {
 .add-new {
   width: 50%;
   padding-right: 5px;
+
+  > p {
+    margin-bottom: 1px;
+  }
 }
 
 .viewbox-limit-notice {
@@ -45,6 +49,38 @@ dc-tree {
   color: #E74C3C
 }
 
+::ng-deep body[cds-theme="dark"] {
+  .currently-open .open-viewbox:hover {
+    background: #314b57;
+  }
+
+  .cols-list {
+    background: #314b57;
+    color: #fff;
+    border-color: #858585;
+  }
+
+  .col-box {
+    background: #314b57;
+    border-color: #858585;
+    color: inherit;
+  }
+}
+
+::ng-deep body[cds-theme="light"] {
+  .currently-open .open-viewbox:hover {
+    background: #e8e8e8;
+  }
+
+  .cols-list {
+    background: #fff;
+  }
+
+  .col-box {
+    background: #fff;
+  }
+}
+
 .currently-open {
   width: 50%;
 
@@ -55,10 +91,6 @@ dc-tree {
     &.selected {
       background: #3c85002e;
     }
-
-    &:hover {
-      background: #e8e8e8;
-    }
   }
 }
 
@@ -180,7 +212,6 @@ dc-tree {
 .cols-list {
   border: solid 1px #ccc;
   min-height: 60px;
-  background: white;
   border-radius: 4px;
   overflow: hidden;
   display: block;
@@ -199,7 +230,6 @@ dc-tree {
   justify-content: space-between;
   box-sizing: border-box;
   cursor: move;
-  background: white;
   font-size: 14px;
 
   &.search:focus {

client/src/app/shared/viewboxes/viewboxes.component.ts

@@ -433,6 +433,8 @@ export class ViewboxesComponent implements OnInit, AfterViewInit, OnDestroy {
                   viewboxTable!.hotTable.headerPks.indexOf(column) > -1
 
                 if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
+                // Dark mode
+                th.classList.add('darkTH')
               }
             })
             hotInstance?.render()

client/src/app/stage/stage.component.html

@@ -16,7 +16,7 @@
         </div>
       </div>
       <div class="clr-row" ng-if="loaded">
-        <div class="card-block clr-col-md-6">
+        <div class="card-block clr-col-md-6 no-borders">
           <div class="card-header py-5">
             <div class="card-title text-center">Basic Submitted Details</div>
           </div>
@@ -51,7 +51,7 @@
             </span>
           </div>
         </div>
-        <div class="clr-col-md-6 card-block">
+        <div class="clr-col-md-6 card-block no-borders">
           <div class="card-header py-5">
             <div class="card-title text-center">Actions</div>
           </div>
@@ -118,12 +118,14 @@
         <hot-table
           hotId="hotInstance"
           id="hotTable"
+          className="htDark"
           [data]="hotTable.data"
           [colHeaders]="hotTable.colHeaders"
           [columns]="hotTable.columns"
           [maxRows]="hotTable.maxRows"
           [height]="hotTable.height"
           [licenseKey]="hotTable.licenseKey"
+          [afterGetColHeader]="hotTable.afterGetColHeader"
           stretchH="all"
           [cells]="hotTable.cells"
         >

client/src/app/stage/stage.component.scss

@@ -12,4 +12,10 @@
   cursor:pointer;
   margin-top:10px;
   color: #007cbb;
+}
+
+::ng-deep body[cds-theme="dark"] {
+  .baseTableLink {
+    color: #4ec0ff;
+  }
 }

client/src/app/stage/stage.component.ts

@@ -32,7 +32,11 @@ export class StageComponent implements OnInit {
     height: 500,
     settings: {},
     licenseKey: undefined,
-    maxRows: this.licenceState.value.stage_rows_allowed || Infinity
+    maxRows: this.licenceState.value.stage_rows_allowed || Infinity,
+    afterGetColHeader: (column, th, headerLevel) => {
+      // Dark mode
+      th.classList.add('darkTH')
+    }
   }
 
   constructor(

client/src/app/system/models/environment-info.model.ts

@@ -6,6 +6,7 @@ export interface EnvironmentInfo {
   MEMSIZE: string
   SYSPROCESSMODE: string
   SYSHOSTNAME: string
+  SYSUSERID: string
   SYSHOSTINFOLONG: string
   SYSENCODING: string
   AUTOEXEC: string

client/src/app/system/system.component.html

@@ -36,6 +36,10 @@
             SYSHOSTNAME:
             <span class="dark">{{ environmentInfo?.SYSHOSTNAME }}</span>
           </p>
+          <p cds-text="label" class="m-0">
+            SYSUSERID:
+            <span class="dark">{{ environmentInfo?.SYSUSERID }}</span>
+          </p>
           <p cds-text="label" class="m-0">
             SYSHOSTINFOLONG:
             <span class="dark">{{ environmentInfo?.SYSHOSTINFOLONG }}</span>
@@ -47,10 +51,6 @@
           <p cds-text="label" class="m-0">
             AUTOEXEC: <span class="dark">{{ environmentInfo?.AUTOEXEC }}</span>
           </p>
-          <p cds-text="label" class="m-0">
-            DC ADMIN GROUP:
-            <span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
-          </p>
         </div>
 
         <div class="d-flex clr-justify-content-lg-center">
@@ -73,6 +73,10 @@
             <p cds-text="label" class="m-0">
               HTTP: <span class="dark">{{ http ? 'YES' : 'NO' }}</span>
             </p>
+            <p cds-text="label" class="m-0">
+              DC Admin Group:
+              <span class="dark">{{ environmentInfo?.DC_ADMIN_GROUP }}</span>
+            </p>
           </div>
         </div>
 
@@ -190,6 +194,16 @@
 
       <hr class="w-100 light" />
 
+      <!-- Keep the logic in case we in future have more then 2 themes (light, dark) -->
+      <!-- -->
+      <!-- <div class="user-action">
+        Keep selected theme after reload
+
+        <clr-checkbox-wrapper>
+        <input [(ngModel)]="settings.persistSelectedTheme" (change)="settingChange($event)" value="persistDarkMode" type="checkbox" clrToggle />
+        </clr-checkbox-wrapper>
+      </div> -->
+
       <ng-container *ngIf="environmentInfo?.ISADMIN === 1">
         <div *ngIf="serverType === 'SAS9'" class="admin-action">
           Refresh Data Lineage

client/src/app/system/system.component.scss

@@ -12,7 +12,7 @@
     }
 }
 
-.admin-action {
+.admin-action, .user-action {
     display: flex;
     justify-content: space-between;
     align-items: center;
@@ -27,7 +27,8 @@
 }
 
 .dark {
-    color: black;
+    font-weight: bold;
+    margin-left: 5px;
 }
 
 @media (max-width: 993px) {

client/src/app/system/system.component.ts

@@ -7,6 +7,8 @@ import { LicenceService } from '../services/licence.service'
 import { SasService } from '../services/sas.service'
 import { AppInfo } from './models/app-info.model'
 import { EnvironmentInfo } from './models/environment-info.model'
+import { AppSettingsService } from '../services/app-settings.service'
+import { AppSettings } from '../models/AppSettings'
 
 @Component({
   selector: 'app-system',
@@ -36,25 +38,36 @@ export class SystemComponent implements OnInit {
   Infinity = Infinity
 
   licenceState = this.licenceService.licenceState
+  settings: AppSettings
 
   constructor(
     private appService: AppService,
     private sasService: SasService,
-    private licenceService: LicenceService
+    private licenceService: LicenceService,
+    private appSettingsService: AppSettingsService
   ) {
     this.serverType = this.sasService.getServerType()
     this.licenceInfo = this.licenceService.getLicenseKeyData()
     this.environmentInfo = this.appService.getEnvironmentInfo()
+    this.settings = this.appSettingsService.settings.value
 
     if (this.environmentInfo) {
       this.environmentInfo.AUTOEXEC = decodeURIComponent(
         this.environmentInfo.AUTOEXEC
       )
     }
+
+    this.appSettingsService.settings.subscribe((settings: AppSettings) => {
+      this.settings = settings
+    })
   }
 
   ngOnInit(): void {}
 
+  settingChange(event: Event) {
+    this.appSettingsService.setAppSettings(this.settings)
+  }
+
   downloadConfiguration() {
     let sasjsConfig = this.sasService.getSasjsConfig()
     let storage = sasjsConfig.serverUrl

client/src/app/system/system.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common'
 import { SystemRoutingModule } from './system-routing.module'
 import { SystemComponent } from './system.component'
 import { ClarityModule } from '@clr/angular'
+import { FormsModule } from '@angular/forms'
 
 @NgModule({
   declarations: [SystemComponent],
-  imports: [CommonModule, SystemRoutingModule, ClarityModule]
+  imports: [CommonModule, SystemRoutingModule, ClarityModule, FormsModule]
 })
 export class SystemModule {}

client/src/app/user/user.component.html

@@ -3,6 +3,7 @@
     <clr-tree-node *ngIf="users" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           placeholder="Filter by Users"
@@ -26,7 +27,7 @@
       <clr-tree-node
         (click)="userOnClick(user)"
         *ngIf="!user['hidden']"
-        [class.table-active]="userInfo?.URI === user.URI"
+        [class.active]="userInfo?.URI === user.URI"
       >
         <p class="m-0 cursor-pointer list-padding">
           <clr-icon shape="user"></clr-icon>

client/src/app/user/user.component.scss

@@ -1,24 +1,61 @@
+@import '../../colors.scss';
+
 .sidebar-height{
     height: 100%;
 }
 .user-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
+
+::ng-deep body[cds-theme="dark"] {
+    .user-info {
+        background-color: $headerBackground;
+        border-color: $headerBackground;
+    }
+
+    .user-data {
+        background-color: $headerBackground;
+        border-color: $headerBackground;
+    }
+
+    .user-table tbody{
+        tr:hover{
+            background-color: #29404b;
+        }
+    }
+}
+
+::ng-deep body[cds-theme="light"] {
+    .user-info {
+        background-color: #f9f9f9;
+        border-color: #a7a7a7;
+        box-shadow: 0px 2px 5px #dad7d7;
+    }
+
+    .user-data {
+        background-color: #f9f9f9;
+        border-color: #a7a7a7;
+        box-shadow: 0px 2px 5px #dad7d7;
+    }
+
+    .user-table tbody{
+        tr:hover{
+            background-color: #e6e6e6;
+        }
+    }
+}
+
 .user-info{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .user-info td{
     text-align: center;
 }
 .user-data{
-    background-color: #f9f9f9;
+    border: 1px solid;
-    border: 1px solid #a7a7a7;
     border-radius: 3px;
-    box-shadow: 0px 2px 5px #dad7d7;
 }
 .user-data{
     min-height: auto;
@@ -28,7 +65,6 @@
 }
 
 .user-table{
-    background-color: #f9f9f9;
     width: 100%;
 }
 .user-table thead{
@@ -36,7 +72,6 @@
 }
 .user-table tbody{
     tr:hover{
-        background-color: #e6e6e6;
         cursor: pointer;
     }
 }

client/src/app/viewer/viewer.component.html

@@ -7,6 +7,7 @@
     <clr-tree-node *ngIf="libraries" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLibTreeInput
           [(ngModel)]="librariesSearch"
@@ -50,6 +51,7 @@
         <clr-tree-node *ngIf="library['tables']" class="search-node">
           <div class="tree-search-wrapper">
             <input
+              appStealFocus
               clrInput
               #searchTreeInput
               [id]="'search_' + library.LIBRARYREF"
@@ -91,7 +93,7 @@
               (click)="!tableLocked ? onTableClick(libTable, library) : ''"
               class="clr-treenode-link"
               [class.dc-locked-control]="tableLocked"
-              [class.table-active]="libTabActive(library.LIBRARYREF, libTable)"
+              [class.active]="libTabActive(library.LIBRARYREF, libTable)"
             >
               <ng-container [ngSwitch]="libTable.includes('-FC')">
                 <clr-icon *ngSwitchCase="true" shape="bolt"></clr-icon>
@@ -195,7 +197,7 @@
     <div class="modal-body web-query">
       <div class="row">
         <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12 clr-col-xs-12">
-          <div class="card">
+          <div class="card no-borders">
             <div class="card-header d-flex justify-content-between">
               <span>Copy the below into your preferred client tool:</span>
 
@@ -225,15 +227,16 @@
                 </div>
               </div>
             </div>
-            <div class="card-block word-break-all">
+            <div class="card-block web-query-wrapper word-break-all">
               <textarea
-                class="web-query-text w-100"
+                clrTextarea
+                class="web-query-text"
                 rows="4"
                 cols="50"
                 #cliCommandInput
                 (focus)="onCliCommandFocus($event)"
                 type="text"
-                value="{{ webQueryText }}"
+                [value]="webQueryText"
                 readonly
               >
               </textarea>
@@ -315,12 +318,15 @@
 
   <div class="loadingSpinner" *ngIf="loadingTableView">
     <span class="spinner"> Loading... </span>
-    <div>
+    <div class="mt-10">
-      <h4>Loading table viewer</h4>
+      <p cds-text="section">Loading Table Viewer</p>
     </div>
   </div>
 
-  <div class="card h-100 d-flex clr-flex-column" *ngIf="!loadingTableView">
+  <div
+    class="card no-borders h-100 d-flex clr-flex-column"
+    *ngIf="!loadingTableView"
+  >
     <div
       *ngIf="table"
       class="header-row clr-row justify-content-between clr-justify-content-center w-100 m-0"
@@ -361,8 +367,9 @@
       </section>
 
       <div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row">
-        <h3
+        <p
-          class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
+          cds-text="section"
+          class="clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
         >
           <clr-tooltip class="d-flex clr-align-items-center">
             <clr-icon
@@ -407,7 +414,7 @@
               shape="refresh"
             ></clr-icon>
           </ng-container>
-        </h3>
+        </p>
       </div>
 
       <div class="options-col clr-col-md">
@@ -478,7 +485,9 @@
         size="60"
         class="is-info icon-dc-fill"
       ></clr-icon>
-      <h3 class="text-center color-gray">Please select a library</h3>
+      <h3 class="text-center color-gray mt-10" cds-text="section">
+        Please select a library
+      </h3>
     </div>
 
     <ng-container *ngIf="!noData && !noDataReqErr && !table && lib">
@@ -489,10 +498,10 @@
           class="form-block table-search-wrapper sw clr-col-md"
         ></section>
 
-        <div class="title-col clr-col-auto">
+        <div class="title-col clr-col-auto mt-15 mb-15">
-          <h3 class="viewerTitle mt-17">
+          <p cds-text="section">
             {{ lib }}
-          </h3>
+          </p>
           <clr-icon
             (click)="reloadLibInfo()"
             class="refresh-table"
@@ -516,7 +525,9 @@
           size="40"
           class="is-info icon-dc-fill"
         ></clr-icon>
-        <h3 class="text-center color-gray">Please select a table</h3>
+        <p class="text-center color-gray mt-10" cds-text="section">
+          Please select a table
+        </p>
       </div>
 
       <div *ngIf="libinfo !== null" class="libinfo m-0 clr-row">
@@ -606,6 +617,7 @@
       <hot-table
         hotId="hotInstance"
         id="hotTable"
+        className="htDark"
         [multiColumnSorting]="true"
         [viewportRowRenderingOffset]="50"
         [data]="hotTable.data"
@@ -621,6 +633,7 @@
         [cells]="hotTable.cells"
         [maxRows]="hotTable.maxRows"
         [manualColumnResize]="true"
+        [afterGetColHeader]="hotTable.afterGetColHeader"
         [rowHeaders]="hotTable.rowHeaders"
         [rowHeaderWidth]="hotTable.rowHeaderWidth"
         [rowHeights]="hotTable.rowHeights"

client/src/app/viewer/viewer.component.scss

@@ -1,3 +1,5 @@
+@import '../../colors.scss';
+
 .card {
   margin-top: 0;
 
@@ -11,8 +13,8 @@ clr-tree-node button {
 }
 
 .toggle-switch input[type=checkbox]:checked+label:before {
-    border-color: #314351;
+    border-color: $headerBackground;
-    background-color: #314351!important;
+    background-color: $headerBackground !important;
     transition: .15s ease-in;
     transition-property: border-color,background-color;
 }
@@ -54,12 +56,6 @@ clr-tree-node button {
   }
 }
 
-.viewerTitle {
-  text-align:center;
-  margin-bottom: 15px;
-  margin-top: 16px;
-}
-
 .dropdown-menu {
   width: 180px;
   margin-top: -18px;
@@ -126,8 +122,14 @@ clr-tree-node button {
 
 hot-table {
   ::ng-deep {
+    .handsontable tbody th.ht__highlight, .handsontable thead th.ht__highlight {
+      &.primaryKeyHeaderStyle {
+        background-color: #306b00b0 !important;
+      }
+    }
+
     .primaryKeyHeaderStyle {
-      background: #306b006e;
+      background-color: #306b006e !important;
     }
   }
 }
@@ -145,6 +147,45 @@ hot-table {
   .web-query-text {
     min-height: 100px;
     max-height: 100px;
+    width: 100% !important;
+  }
+
+  .web-query-wrapper {
+    ::ng-deep {
+      .clr-control-container {
+        width: 100%;
+      }
+
+      clr-textarea-container {
+        margin: 0 !important;
+      }
+
+      .clr-textarea-wrapper {
+        margin: 0 !important;
+      }
+    }
+  }
+}
+
+.table-search-wrapper {
+  margin-left: 0;
+
+  form {
+    padding-left: 0;
+  }
+
+  clr-icon {
+    margin-top: 4px;
+  }
+
+  ::ng-deep {
+    clr-input-container {
+      margin-top: 0;
+    }
+
+    .clr-control-container {
+      margin-left: 0;
+    }
   }
 }
 

client/src/app/viewer/viewer.component.ts

@@ -112,11 +112,14 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
     height: '100%',
     maxRows: this.licenceState.value.viewer_rows_allowed || Infinity,
     settings: {},
-    afterGetColHeader: undefined,
     licenseKey: undefined,
     rowHeaders: (index: number) => {
       return ' '
     },
+    afterGetColHeader: (col: number, th: any, headerLevel: number) => {
+      // Dark mode
+      th.classList.add('darkTH')
+    },
     rowHeaderWidth: 15,
     rowHeights: 20,
     contextMenu: ['copy_with_column_headers', 'copy_column_headers_only'],
@@ -1071,6 +1074,9 @@ export class ViewerComponent implements AfterContentInit, AfterViewInit {
               const isPKCol = column && this.headerPks.indexOf(column) > -1
 
               if (isPKCol) th.classList.add('primaryKeyHeaderStyle')
+
+              // Dark mode
+              th.classList.add('darkTH')
             }
           })
         }

client/src/app/viya-api-explorer/viya-api-explorer.component.html

@@ -38,6 +38,7 @@
     <clr-tree-node *ngIf="endpointLinks.length > 0" class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchLinksTreeInput
           placeholder="Search links"

client/src/app/xlmap/xlmap.component.html

@@ -7,6 +7,7 @@
     <clr-tree-node class="search-node">
       <div class="tree-search-wrapper">
         <input
+          appStealFocus
           clrInput
           #searchXLMapTreeInput
           placeholder="Filter by Id"
@@ -32,7 +33,7 @@
         <button
           (click)="xlmapOnClick(xlmap)"
           class="clr-treenode-link"
-          [class.table-active]="isActiveXLMap(xlmap.id)"
+          [class.active]="isActiveXLMap(xlmap.id)"
         >
           <clr-icon shape="file"></clr-icon>
           {{ xlmap.id }}
@@ -49,12 +50,20 @@
       size="60"
       class="is-info icon-dc-fill"
     ></clr-icon>
-    <h3 *ngIf="xlmaps.length > 0" class="text-center color-gray">
+    <p
+      *ngIf="xlmaps.length > 0"
+      class="text-center color-gray mt-10"
+      cds-text="section"
+    >
       Please select a map
-    </h3>
+    </p>
-    <h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
+    <p
+      *ngIf="xlmaps.length < 1"
+      class="text-center color-gray mt-10"
+      cds-text="section"
+    >
       No excel map is found
-    </h3>
+    </p>
   </div>
 
   <div class="loadingSpinner" *ngIf="isLoading">
@@ -118,6 +127,7 @@
       <hot-table
         hotId="hotInstance"
         id="hot-table"
+        className="htDark"
         [multiColumnSorting]="true"
         [viewportRowRenderingOffset]="50"
         [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
@@ -130,6 +140,7 @@
         [filters]="true"
         [height]="'100%'"
         stretchH="all"
+        [afterGetColHeader]="afterGetColHeader"
         [modifyColWidth]="maxWidthChecker"
         [cells]="getCellConfiguration"
         [maxRows]="hotTableMaxRows"

client/src/app/xlmap/xlmap.component.ts

@@ -117,6 +117,7 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
       data: 'VALUE_TXT'
     }
   ]
+
   public xlData: XLUploadEntry[] = []
 
   public showUploadModal = false
@@ -142,6 +143,11 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     private sasService: SasService
   ) {}
 
+  public afterGetColHeader(column: number, th: any) {
+    // Dark mode
+    th.classList.add('darkTH')
+  }
+
   public xlmapOnClick(xlmap: XLMapListItem) {
     if (xlmap.id !== this.selectedXLMap?.id) {
       this.selectedXLMap = xlmap

client/src/colors.scss

@@ -0,0 +1,4 @@
+$headerBackground: #314351;
+
+$trackColor: #3b5268;
+$thumbColor: #273849;

client/src/styles.scss

@@ -7,11 +7,37 @@
 @import '@cds/core/styles/theme.dark.min.css';
 @import '@clr/ui/clr-ui.min.css';
 
+@import './colors.scss';
+
 @font-face {
   font-family: text-security-disc;
   src: url('https://raw.githubusercontent.com/noppa/text-security/master/dist/text-security-disc.woff');
 }
 
+body[cds-theme="dark"] {
+  scrollbar-width: thin;
+  scrollbar-color: $trackColor $thumbColor;
+
+  &::-webkit-scrollbar {
+    width: 11px;
+  }
+  &::-webkit-scrollbar-track {
+    // Track
+    background: $trackColor;
+  }
+  &::-webkit-scrollbar-thumb {
+    // Thumb
+    background-color: $thumbColor;
+    border-radius: 6px;
+    // Track
+    border: 3px solid $trackColor;
+  }
+
+  clr-icon.is-highlight {
+    fill: #4ec0ff;
+  }
+}
+
 body,
 html {
   font-weight: 400 !important;
@@ -26,9 +52,27 @@ html {
   }
 }
 
-button {
+body[cds-theme="dark"] {
-  &:focus {
+  button {
-    outline: none;
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 1px solid rgb(255, 255, 255)
+    }
+  }
+}
+
+body[cds-theme="light"] {
+  button {
+    &:focus {
+      outline: none;
+    }
+
+    &:focus-visible {
+      outline: 1px solid rgb(0, 0, 0)
+    }
   }
 }
 
@@ -102,7 +146,7 @@ button {
   justify-content: center;
   align-items: center;
   height: 100vh;
-  background: #314351;
+  background: $headerBackground;
   flex-direction: column;
   z-index: 2000;
   position: fixed;
@@ -228,10 +272,6 @@ button {
   margin-top: 15px;
 }
 
-.mt-17 {
-  margin-top: 17px;
-}
-
 .mt-20 {
   margin-top: 20px;
 }
@@ -308,6 +348,10 @@ button {
   margin-bottom: 10px !important;
 }
 
+.mb-15 {
+  margin-bottom: 15px;
+}
+
 .mb-20 {
   margin-bottom: 20px;
 }
@@ -348,16 +392,18 @@ button {
   background: transparent !important;
 }
 
-.color-gray {
+body[cds-theme="light"] {
-  color: #5a5a5a;
+  .color-gray {
-}
+    color: #5a5a5a;
+  }
 
-.color-dark-gray {
+  .color-dark-gray {
-  color: #495967;
+    color: #495967;
-}
+  }
 
-.color-darker-gray {
+  .color-darker-gray {
-  color: #314351;
+    color: $headerBackground;
+  }
 }
 
 .color-white {
@@ -550,6 +596,25 @@ button {
   }
 }
 
+.text-area-full-width {
+  .clr-control-container {
+    width: 100%;
+
+    textarea {
+      width: 100%;
+
+    }
+  }
+
+  clr-textarea-container {
+    margin: 0 !important;
+  }
+
+  .clr-textarea-wrapper {
+    margin: 0 !important;
+  }
+}
+
 .progresStatic {
   margin-top: -6px !important;
   position: absolute !important;
@@ -621,10 +686,6 @@ button {
   margin-left: 0.2rem !important;
 }
 
-.table-active {
-  background: #d8e3e9 !important;
-  color: black !important;
-}
 
 .table-active:focus {
   background: #d8e3e9;
@@ -723,6 +784,30 @@ clr-icon.is-info {
   box-shadow: none !important;
 }
 
+body[cds-theme="dark"] {
+  .htDark {
+    background: #888;
+    color: #fff;
+  }
+
+  .handsontable .htDark {
+    background: #3c5662;
+    color: #eee;
+  }
+
+  .handsontable .darkTH {
+    &:not(.primaryKeyHeaderStyle) {
+      background: #487d96;
+      color: #eee;
+    }
+
+    &.ht__highlight {
+      background: #3b6b81;
+    }
+  }
+}
+
+
 .handsontable .htAutocompleteArrow {
   color: #828282;
 }
@@ -752,6 +837,29 @@ clr-icon.is-info {
   visibility: hidden;
 }
 
+.no-borders {
+  border: 0;
+}
+
+.card {
+  &.no-borders {
+    border: 0;
+    box-shadow: none;
+
+    .card-header, .card-block, .card-footer {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  &.no-inner-borders {
+    .card-header, .card-block, .card-footer {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+}
+
 @media (min-width: 576px) {
   .d-sm-none {
     display: none !important;
@@ -895,7 +1003,7 @@ clr-icon.is-info {
   flex-direction: column;
   align-items: center;
   position: absolute;
-  background: white;
+  background: var(--clr-vertical-nav-bg-color);
   z-index: 10;
   width: 100%;
   height: 100%;
@@ -967,8 +1075,7 @@ clr-tree-node {
     right: 0;
     bottom: 0;
     margin: 0;
-    margin-top: 5px;
+    margin-bottom: 3px;
-    background: white;
     cursor: pointer;
   }
 }
@@ -1070,6 +1177,13 @@ hr.light {
   background: url('./images/caret.svg') !important;
 }
 
+body[cds-theme="dark"] {
+  .table-search-wrapper {
+    // background: #2d4048;
+    background: #21333b;
+  }
+}
+
 .table-search-wrapper {
   background-color: #fff;
 
@@ -1086,7 +1200,10 @@ hr.light {
 
     clr-icon {
       cursor: pointer;
-      background: white;
+    }
+
+    [name="search-input"] {
+      padding-right: 25px;
     }
   }
 

package.json

@@ -9,7 +9,8 @@
     "@semantic-release/npm": "11.0.0",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "^11.0.4",
-    "commit-and-tag-version": "^11.2.2"
+    "commit-and-tag-version": "^11.2.2",
+    "prettier": "3.2.5"
   },
   "scripts": {
     "install": "cd client && npm i && cd ../sas && npm i",

sas/mocks/sas9/sasjs/services/public/startupservice.js

@@ -78,6 +78,23 @@ _webout=`{"SYSDATE" : "26SEP22"
 "DC_RESTRICT_EDITRECORD": "NO"
 }
 ]
+,"xlmaps": [
+  [
+      "BASEL-CR2",
+      "",
+      "DC866788.MPE_XLMAP_DATA"
+  ],
+  [
+      "BASEL-KM1",
+      "Basel 3 Key Metrics report",
+      "DC866788.MPE_XLMAP_DATA"
+  ],
+  [
+      "SAMPLE",
+      "",
+      "DC866788.MPE_XLMAP_DATA"
+  ]
+]
 ,"_DEBUG" : ""
 ,"_METAUSER": "sasdemo@SAS"
 ,"_METAPERSON": "sasdemo"

sas/package-lock.json

@@ -7,7 +7,7 @@
       "name": "dc-sas",
       "dependencies": {
         "@sasjs/cli": "^4.11.1",
-        "@sasjs/core": "^4.52.1"
+        "@sasjs/core": "^4.52.4"
       }
     },
     "node_modules/@coolaj86/urequest": {
@@ -116,9 +116,9 @@
       "integrity": "sha512-Grwydm5GxBsYk238PZw41XPjXVVQ9vWcvfZ06L2P0bQbvK0sGn7l69JA7H5MGr3QcaLpiD4Kg70cAh7PgE+JOw=="
     },
     "node_modules/@sasjs/core": {
-      "version": "4.52.1",
+      "version": "4.52.4",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.4.tgz",
-      "integrity": "sha512-XPNuKD1T5XLGMKg4Ll3KggOTjhHgnjdbefpwajpfro/8/9bJK7lyNehzUCcmbhJnijJbbChE7drIOF+uSaVxVg=="
+      "integrity": "sha512-8lf5ixlA312EgA2DorwbpNXXPfLPzUHO67exIV7SjKiU23Tn1au5GD6hT0Ysr2kophOs10Mp1TCXJjhEq7Qk4A=="
     },
     "node_modules/@sasjs/lint": {
       "version": "2.3.1",
@@ -1834,9 +1834,9 @@
       }
     },
     "@sasjs/core": {
-      "version": "4.52.1",
+      "version": "4.52.4",
-      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.1.tgz",
+      "resolved": "https://registry.npmjs.org/@sasjs/core/-/core-4.52.4.tgz",
-      "integrity": "sha512-XPNuKD1T5XLGMKg4Ll3KggOTjhHgnjdbefpwajpfro/8/9bJK7lyNehzUCcmbhJnijJbbChE7drIOF+uSaVxVg=="
+      "integrity": "sha512-8lf5ixlA312EgA2DorwbpNXXPfLPzUHO67exIV7SjKiU23Tn1au5GD6hT0Ysr2kophOs10Mp1TCXJjhEq7Qk4A=="
     },
     "@sasjs/lint": {
       "version": "2.3.1",

sas/package.json

@@ -29,6 +29,6 @@
   "private": true,
   "dependencies": {
     "@sasjs/cli": "^4.11.1",
-    "@sasjs/core": "^4.52.1"
+    "@sasjs/core": "^4.52.4"
   }
 }

sas/sasjs/sasjsconfig.json

@@ -230,7 +230,7 @@
         "macroVars": {}
       },
       "streamConfig": {
-        "streamWeb": true,
+        "streamWeb": false,
         "streamWebFolder": "web",
         "webSourcePath": "../client/dist",
         "streamServiceName": "DataController2",