From 2c0afd02684cdf3bda374731b0359665e00ed95d Mon Sep 17 00:00:00 2001
From: Mihajlo Medjedovic <mihajlo.medjedovic@outlook.com>
Date: Thu, 23 May 2024 16:16:47 +0200
Subject: [PATCH] feat(dark mode): removing custom css rules so clarity can
 handle dark/light modes. Handsontable css for dark mode

---
 client/src/app/app.component.scss             |  94 +++++++---------
 client/src/app/editor/editor.component.html   |  20 ++--
 client/src/app/editor/editor.component.scss   |  10 +-
 client/src/app/editor/editor.component.ts     |   1 -
 client/src/app/group/group.component.html     |   2 +-
 client/src/app/home/home.component.html       |  10 +-
 client/src/app/lineage/lineage.component.html |   2 +-
 .../src/app/metadata/metadata.component.html  |   2 +-
 .../approve-details.component.html            |   8 +-
 .../app/review/approve/approve.component.html |  19 +---
 .../review/submitter/submitter.component.html |  20 +---
 client/src/app/role/role.component.html       |   2 +-
 client/src/app/services/app.service.ts        |   1 +
 .../app/shared/dc-tree/dc-tree.component.html |   2 +-
 .../requests-modal.component.scss             |   1 -
 .../shared/viewboxes/viewboxes.component.html |   1 +
 .../shared/viewboxes/viewboxes.component.ts   |   2 +
 client/src/app/stage/stage.component.html     |   2 +
 client/src/app/stage/stage.component.ts       |   6 +-
 .../system/models/environment-info.model.ts   |   1 +
 client/src/app/system/system.component.html   |  12 +-
 client/src/app/system/system.component.scss   |   3 +-
 client/src/app/user/user.component.html       |   2 +-
 client/src/app/viewer/viewer.component.html   |  34 +++---
 client/src/app/viewer/viewer.component.scss   |  53 +++++++--
 client/src/app/viewer/viewer.component.ts     |   8 +-
 client/src/app/xlmap/xlmap.component.html     |  12 +-
 client/src/app/xlmap/xlmap.component.ts       |   6 +
 client/src/styles.scss                        | 103 ++++++++++++++----
 sas/sasjs/sasjsconfig.json                    |   2 +-
 30 files changed, 273 insertions(+), 168 deletions(-)

diff --git a/client/src/app/app.component.scss b/client/src/app/app.component.scss
index d1741a0..3719952 100644
--- a/client/src/app/app.component.scss
+++ b/client/src/app/app.component.scss
@@ -133,49 +133,19 @@ 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 {
-    font-size: .7rem!important;
-
+    h2 {
+      font-size: .7rem!important;
+    }
+    h3 {
+      font-size: .7rem;
+    }
   }
-  h3 {
-    font-size: .7rem;
-  }
-}
 
   .nav-link {
     padding: 0rem 1rem 0rem 1rem;
@@ -299,7 +269,7 @@ header {
       filter: brightness(1.2);
     }
 
-    .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.innerBorderInlineStart):not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
+    .ht_master:not(.emptyColumns) ~ .handsontable tbody tr th, .ht_master:not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
       background-color: #2d4048;
     }
   }
@@ -317,20 +287,11 @@ header {
     }
   }
 
-  .card {
-    box-shadow: 0 0.125rem 0 0 #d7d7d7;
-    border-radius: .0rem;
-    border: 1px solid transparent;
-    // min-height: calc(100vh - 150px);
-  }
-
   .datagrid-compact, .datagrid-history{
     .datagrid {
       border-collapse: separate;
       border: 1px solid transparent;
       border-radius: .125rem;
-      background-color: #fff;
-      color: #565656;
       margin: 0;
       margin-top: 1rem;
       max-width: 100%;
@@ -352,8 +313,8 @@ header {
     }
     .datagrid-footer {
       position: absolute;
-      right: 15px;
-      top: 2px;
+      right: 30px;
+      top: 1px;
     }
     .datagrid .datagrid-head {
       background-color: #fff;
@@ -387,8 +348,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%;
@@ -399,7 +358,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;
@@ -422,4 +380,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;
+  }
+
 }
\ No newline at end of file
diff --git a/client/src/app/editor/editor.component.html b/client/src/app/editor/editor.component.html
index fa4c73d..76bb5b2 100644
--- a/client/src/app/editor/editor.component.html
+++ b/client/src/app/editor/editor.component.html
@@ -362,8 +362,8 @@
             <ng-container *ngIf="!getdataError">
               <span class="spinner"> Loading... </span>
 
-              <div>
-                <h3>Loading table</h3>
+              <div class="mt-10">
+                <p cds-text="section">Loading table</p>
               </div>
             </ng-container>
 
@@ -372,8 +372,8 @@
                 <clr-icon shape="error-standard" class="error-icon"></clr-icon>
               </span>
 
-              <div>
-                <h3>Loading table error</h3>
+              <div class="mt-10">
+                <p cds-text="section">Loading table error</p>
               </div>
             </ng-container>
           </div>
@@ -398,6 +398,7 @@
               hotId="hotInstance"
               id="hotTable"
               class="edit-hot"
+              className="htDark"
               [class.hidden]="hotTable.hidden"
               [licenseKey]="hotTable.licenseKey"
             >
@@ -486,11 +487,13 @@
                     support&#64;datacontroller.io</span
                   >
                   <div *ngIf="tableTrue" class="clr-offset-md-2 clr-col-md-8">
-                    <div class="form-group">
-                      <label for="formFields_8">Message</label>
+                    <div class="text-area-full-width">
+                      <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 +501,9 @@
                               ' cells.'
                             : ''
                         "
-                        class="w-100"
+                        class="submit-reason"
                         type="text"
                         id="formFields_8"
-                        rows="5"
                       ></textarea>
                     </div>
                     <!-- TODO:approvers list -->
@@ -520,6 +522,7 @@
                     [disabled]="!validationDone"
                     type="submit"
                     class="btn btn-sm btn-success-outline m-0"
+                    tabindex="0"
                     (click)="saveTable(hotTable.data)"
                   >
                     Submit
@@ -528,6 +531,7 @@
                     id="cancelSubmitBtn"
                     type="button"
                     class="btn btn-sm btn-outline"
+                    tabindex="0"
                     (click)="cancelSubmit(); submit = false; validationDone = 0"
                   >
                     Cancel
diff --git a/client/src/app/editor/editor.component.scss b/client/src/app/editor/editor.component.scss
index acd1f82..e3d8e95 100644
--- a/client/src/app/editor/editor.component.scss
+++ b/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;
diff --git a/client/src/app/editor/editor.component.ts b/client/src/app/editor/editor.component.ts
index e188734..de38f95 100644
--- a/client/src/app/editor/editor.component.ts
+++ b/client/src/app/editor/editor.component.ts
@@ -3193,7 +3193,6 @@ export class EditorComponent implements OnInit, AfterViewInit {
         rowHeights: 24,
         maxRows: this.licenceState.value.editor_rows_allowed || Infinity,
         invalidCellClassName: 'htInvalid',
-        className: 'htDark',
         dropdownMenu: {
           items: {
             make_read_only: {
diff --git a/client/src/app/group/group.component.html b/client/src/app/group/group.component.html
index 492873a..509113d 100644
--- a/client/src/app/group/group.component.html
+++ b/client/src/app/group/group.component.html
@@ -28,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>
diff --git a/client/src/app/home/home.component.html b/client/src/app/home/home.component.html
index 97b3106..cb446a9 100644
--- a/client/src/app/home/home.component.html
+++ b/client/src/app/home/home.component.html
@@ -87,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>
@@ -128,12 +128,12 @@
         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>
-      <h3 *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray">
+      </p>
+      <p *ngIf="treeNodeLibraries?.length! < 1" class="text-center color-gray mt-10" cds-text="section">
         No Editable Tables Configured
-      </h3>
+      </p>
     </div>
   </div>
 </div>
diff --git a/client/src/app/lineage/lineage.component.html b/client/src/app/lineage/lineage.component.html
index 97ecfbf..de97743 100644
--- a/client/src/app/lineage/lineage.component.html
+++ b/client/src/app/lineage/lineage.component.html
@@ -141,7 +141,7 @@
         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">
diff --git a/client/src/app/metadata/metadata.component.html b/client/src/app/metadata/metadata.component.html
index 97a7186..c8b2563 100644
--- a/client/src/app/metadata/metadata.component.html
+++ b/client/src/app/metadata/metadata.component.html
@@ -73,7 +73,7 @@
         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">
diff --git a/client/src/app/review/approve-details/approve-details.component.html b/client/src/app/review/approve-details/approve-details.component.html
index b505669..10916d5 100644
--- a/client/src/app/review/approve-details/approve-details.component.html
+++ b/client/src/app/review/approve-details/approve-details.component.html
@@ -311,8 +311,8 @@
           class="h-24vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
-            <h3>Loading table</h3>
+          <div *ngIf="!loadingTable" class="mt-10">
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
 
@@ -519,8 +519,8 @@
           class="h-25vh d-flex flex-column justify-content-center align-items-center"
         >
           <span class="spinner"> Loading... </span>
-          <div *ngIf="!loadingTable">
-            <h3>Loading table</h3>
+          <div *ngIf="!loadingTable" class="mt-10">
+            <p cds-text="section">Loading table</p>
           </div>
         </div>
         <div class="tableCont">
diff --git a/client/src/app/review/approve/approve.component.html b/client/src/app/review/approve/approve.component.html
index 5c3520b..d7ed3a1 100644
--- a/client/src/app/review/approve/approve.component.html
+++ b/client/src/app/review/approve/approve.component.html
@@ -99,21 +99,10 @@
             </clr-dg-cell>
           </clr-dg-row>
 
-          <clr-dg-footer class="d-flex justify-content-start">
-            <span>items per page</span>
-            <select [(ngModel)]="itemsNum">
-              <option [ngValue]="3">3</option>
-              <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-footer>
+            <clr-dg-pagination #pagination [clrDgPageSize]="10">
+              <clr-dg-page-size [clrPageSizeOptions]="[3, 5, 10, 15]">Items per page</clr-dg-page-size>
+              {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} approvals
             </clr-dg-pagination>
           </clr-dg-footer>
         </clr-datagrid>
diff --git a/client/src/app/review/submitter/submitter.component.html b/client/src/app/review/submitter/submitter.component.html
index f9e6547..3c1fe92 100644
--- a/client/src/app/review/submitter/submitter.component.html
+++ b/client/src/app/review/submitter/submitter.component.html
@@ -86,22 +86,10 @@
               </clr-dg-cell>
             </clr-dg-row>
 
-            <clr-dg-footer class="d-flex justify-content-start">
-              <span>items per page</span>
-              <select [(ngModel)]="itemsNum">
-                <option [ngValue]="3">3</option>
-                <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
+            <clr-dg-footer>
+              <clr-dg-pagination #pagination [clrDgPageSize]="10">
+                <clr-dg-page-size [clrPageSizeOptions]="[3 ,5 ,10, 15]">Items per page</clr-dg-page-size>
+                {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of {{ pagination.totalItems }} submissions
               </clr-dg-pagination>
             </clr-dg-footer>
           </clr-datagrid>
diff --git a/client/src/app/role/role.component.html b/client/src/app/role/role.component.html
index ce26f76..d264f29 100644
--- a/client/src/app/role/role.component.html
+++ b/client/src/app/role/role.component.html
@@ -27,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>
diff --git a/client/src/app/services/app.service.ts b/client/src/app/services/app.service.ts
index 105026e..92093ad 100644
--- a/client/src/app/services/app.service.ts
+++ b/client/src/app/services/app.service.ts
@@ -95,6 +95,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,
diff --git a/client/src/app/shared/dc-tree/dc-tree.component.html b/client/src/app/shared/dc-tree/dc-tree.component.html
index eceabef..677dbe6 100644
--- a/client/src/app/shared/dc-tree/dc-tree.component.html
+++ b/client/src/app/shared/dc-tree/dc-tree.component.html
@@ -93,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>
diff --git a/client/src/app/shared/requests-modal/requests-modal.component.scss b/client/src/app/shared/requests-modal/requests-modal.component.scss
index a410079..37484d3 100644
--- a/client/src/app/shared/requests-modal/requests-modal.component.scss
+++ b/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;
diff --git a/client/src/app/shared/viewboxes/viewboxes.component.html b/client/src/app/shared/viewboxes/viewboxes.component.html
index 50c6b38..8f8079f 100644
--- a/client/src/app/shared/viewboxes/viewboxes.component.html
+++ b/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"
diff --git a/client/src/app/shared/viewboxes/viewboxes.component.ts b/client/src/app/shared/viewboxes/viewboxes.component.ts
index 9566441..b757793 100644
--- a/client/src/app/shared/viewboxes/viewboxes.component.ts
+++ b/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()
diff --git a/client/src/app/stage/stage.component.html b/client/src/app/stage/stage.component.html
index 9015138..a81ab4e 100644
--- a/client/src/app/stage/stage.component.html
+++ b/client/src/app/stage/stage.component.html
@@ -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"
         >
diff --git a/client/src/app/stage/stage.component.ts b/client/src/app/stage/stage.component.ts
index abe0e48..4eb702f 100644
--- a/client/src/app/stage/stage.component.ts
+++ b/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(
diff --git a/client/src/app/system/models/environment-info.model.ts b/client/src/app/system/models/environment-info.model.ts
index b44ae44..4dcae15 100644
--- a/client/src/app/system/models/environment-info.model.ts
+++ b/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
diff --git a/client/src/app/system/system.component.html b/client/src/app/system/system.component.html
index 51b3c52..f91fbdd 100644
--- a/client/src/app/system/system.component.html
+++ b/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>
 
diff --git a/client/src/app/system/system.component.scss b/client/src/app/system/system.component.scss
index 307e7db..57c64a5 100644
--- a/client/src/app/system/system.component.scss
+++ b/client/src/app/system/system.component.scss
@@ -27,7 +27,8 @@
 }
 
 .dark {
-    color: black;
+    font-weight: bold;
+    margin-left: 5px;
 }
 
 @media (max-width: 993px) {
diff --git a/client/src/app/user/user.component.html b/client/src/app/user/user.component.html
index 0d20d4b..fb67bdc 100644
--- a/client/src/app/user/user.component.html
+++ b/client/src/app/user/user.component.html
@@ -27,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>
diff --git a/client/src/app/viewer/viewer.component.html b/client/src/app/viewer/viewer.component.html
index a5c7aaa..fd78523 100644
--- a/client/src/app/viewer/viewer.component.html
+++ b/client/src/app/viewer/viewer.component.html
@@ -93,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>
@@ -197,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>
 
@@ -227,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>
@@ -317,8 +318,8 @@
 
   <div class="loadingSpinner" *ngIf="loadingTableView">
     <span class="spinner"> Loading... </span>
-    <div>
-      <h4>Loading table viewer</h4>
+    <div class="mt-10">
+      <p cds-text="section">Loading Table Viewer</p>
     </div>
   </div>
 
@@ -363,8 +364,9 @@
       </section>
 
       <div class="title-col clr-col-auto clr-flex-column clr-flex-sm-row">
-        <h3
-          class="viewerTitle clr-flex-column d-flex clr-flex-sm-row clr-align-items-center clr-justify-content-center"
+        <p
+          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
@@ -409,7 +411,7 @@
               shape="refresh"
             ></clr-icon>
           </ng-container>
-        </h3>
+        </p>
       </div>
 
       <div class="options-col clr-col-md">
@@ -480,7 +482,7 @@
         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">
@@ -491,10 +493,10 @@
           class="form-block table-search-wrapper sw clr-col-md"
         ></section>
 
-        <div class="title-col clr-col-auto">
-          <h3 class="viewerTitle mt-17">
+        <div class="title-col clr-col-auto mt-15 mb-15">
+          <p cds-text="section">
             {{ lib }}
-          </h3>
+          </p>
           <clr-icon
             (click)="reloadLibInfo()"
             class="refresh-table"
@@ -518,7 +520,7 @@
           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">
@@ -608,6 +610,7 @@
       <hot-table
         hotId="hotInstance"
         id="hotTable"
+        className="htDark"
         [multiColumnSorting]="true"
         [viewportRowRenderingOffset]="50"
         [data]="hotTable.data"
@@ -623,6 +626,7 @@
         [cells]="hotTable.cells"
         [maxRows]="hotTable.maxRows"
         [manualColumnResize]="true"
+        [afterGetColHeader]="hotTable.afterGetColHeader"
         [rowHeaders]="hotTable.rowHeaders"
         [rowHeaderWidth]="hotTable.rowHeaderWidth"
         [rowHeights]="hotTable.rowHeights"
diff --git a/client/src/app/viewer/viewer.component.scss b/client/src/app/viewer/viewer.component.scss
index 9e0e6c8..93b1d8e 100644
--- a/client/src/app/viewer/viewer.component.scss
+++ b/client/src/app/viewer/viewer.component.scss
@@ -54,12 +54,6 @@ clr-tree-node button {
   }
 }
 
-.viewerTitle {
-  text-align:center;
-  margin-bottom: 15px;
-  margin-top: 16px;
-}
-
 .dropdown-menu {
   width: 180px;
   margin-top: -18px;
@@ -126,8 +120,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 +145,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;
+    }
   }
 }
 
diff --git a/client/src/app/viewer/viewer.component.ts b/client/src/app/viewer/viewer.component.ts
index e3f8cae..f5ac816 100644
--- a/client/src/app/viewer/viewer.component.ts
+++ b/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'],
@@ -1080,6 +1083,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')
             }
           })
         }
diff --git a/client/src/app/xlmap/xlmap.component.html b/client/src/app/xlmap/xlmap.component.html
index f04af26..c99d8c9 100644
--- a/client/src/app/xlmap/xlmap.component.html
+++ b/client/src/app/xlmap/xlmap.component.html
@@ -33,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 }}
@@ -50,12 +50,12 @@
       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>
-    <h3 *ngIf="xlmaps.length < 1" class="text-center color-gray">
+    </p>
+    <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">
@@ -119,6 +119,7 @@
       <hot-table
         hotId="hotInstance"
         id="hot-table"
+        className="htDark"
         [multiColumnSorting]="true"
         [viewportRowRenderingOffset]="50"
         [data]="selectedTab === TabsEnum.Rules ? xlmapRules : xlData"
@@ -131,6 +132,7 @@
         [filters]="true"
         [height]="'100%'"
         stretchH="all"
+        [afterGetColHeader]="afterGetColHeader"
         [modifyColWidth]="maxWidthChecker"
         [cells]="getCellConfiguration"
         [maxRows]="hotTableMaxRows"
diff --git a/client/src/app/xlmap/xlmap.component.ts b/client/src/app/xlmap/xlmap.component.ts
index 44fe63f..8d557fb 100644
--- a/client/src/app/xlmap/xlmap.component.ts
+++ b/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
@@ -151,6 +152,11 @@ export class XLMapComponent implements AfterContentInit, AfterViewInit, OnInit {
     event.target.focus()
   }
 
+  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
diff --git a/client/src/styles.scss b/client/src/styles.scss
index cc7d3fe..b913594 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -65,9 +65,27 @@ html {
   }
 }
 
-button {
-  &:focus {
-    outline: none;
+body[cds-theme="dark"] {
+  button {
+    &: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)
+    }
   }
 }
 
@@ -267,10 +285,6 @@ button {
   margin-top: 15px;
 }
 
-.mt-17 {
-  margin-top: 17px;
-}
-
 .mt-20 {
   margin-top: 20px;
 }
@@ -347,6 +361,10 @@ button {
   margin-bottom: 10px !important;
 }
 
+.mb-15 {
+  margin-bottom: 15px;
+}
+
 .mb-20 {
   margin-bottom: 20px;
 }
@@ -387,16 +405,18 @@ button {
   background: transparent !important;
 }
 
-.color-gray {
-  color: #5a5a5a;
-}
+body[cds-theme="light"] {
+  .color-gray {
+    color: #5a5a5a;
+  }
 
-.color-dark-gray {
-  color: #495967;
-}
+  .color-dark-gray {
+    color: #495967;
+  }
 
-.color-darker-gray {
-  color: #314351;
+  .color-darker-gray {
+    color: #314351;
+  }
 }
 
 .color-white {
@@ -589,6 +609,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;
@@ -660,10 +699,6 @@ button {
   margin-left: 0.2rem !important;
 }
 
-.table-active {
-  background: #d8e3e9 !important;
-  color: black !important;
-}
 
 .table-active:focus {
   background: #d8e3e9;
@@ -778,6 +813,10 @@ body[cds-theme="dark"] {
       background: #487d96;
       color: #eee;
     }
+
+    &.ht__highlight {
+      background: #3b6b81;
+    }
   }
 }
 
@@ -811,6 +850,25 @@ body[cds-theme="dark"] {
   visibility: hidden;
 }
 
+.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;
@@ -1129,8 +1187,6 @@ hr.light {
 }
 
 .table-search-wrapper {
-  background-color: #fff;
-
   .input-wrapper {
     position: relative;
     min-width: 170px;
@@ -1144,7 +1200,10 @@ hr.light {
 
     clr-icon {
       cursor: pointer;
-      background: white;
+    }
+
+    [name="search-input"] {
+      padding-right: 25px;
     }
   }
 
diff --git a/sas/sasjs/sasjsconfig.json b/sas/sasjs/sasjsconfig.json
index 48844bf..107d98d 100644
--- a/sas/sasjs/sasjsconfig.json
+++ b/sas/sasjs/sasjsconfig.json
@@ -230,7 +230,7 @@
         "macroVars": {}
       },
       "streamConfig": {
-        "streamWeb": true,
+        "streamWeb": false,
         "streamWebFolder": "web",
         "webSourcePath": "../client/dist",
         "streamServiceName": "DataController2",