feat(dark mode): clarity optimizations

client/src/app/app.component.scss

@@ -201,13 +201,13 @@ header {
 
 
   body[cds-theme="dark"] {
-    .btn.btn-icon {
+    .btn.btn-icon.btn-dimmed {
       color: #7295ae;
     }
   }
 
   body[cds-theme="light"] {
-    .btn.btn-icon {
+    .btn.btn-icon.btn-dimmed {
       color: #314351;
     }
 
@@ -264,6 +264,8 @@ header {
     }
   }
 
+  $darkBorderColor: #697c85;
+
   body[cds-theme="dark"] {
     .ht_master tr:nth-of-type(odd) > td {
       filter: brightness(1.2);
@@ -271,6 +273,30 @@ header {
 
     .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;
+      border-color: $darkBorderColor;
+    }
+
+    .handsontable td {
+      // 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;
     }
   }
 

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,11 @@
         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 btn-icon" [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 btn-icon 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 +235,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>

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

@@ -2766,8 +2766,10 @@ export class EditorComponent implements OnInit, AfterViewInit {
         })
 
         hot.setCellMeta(row, column, 'renderer', spinnerRenderer)
+
         this.currentEditRecordLoadings.push(column)
         hot.render()
+        return
 
         this.sasService
           .request('editors/getdynamiccolvals', data, undefined, {

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

@@ -50,6 +50,7 @@ export const spinnerRenderer = (
   value: any,
   cellProperties: any
 ) => {
+  td.classList.add('htDark')
   td.innerHTML = `${
     value ? value.toString() : ''
   } <span class="spinner spinner-sm vertical-align-middle"></span>`

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

@@ -1,26 +1,61 @@
+::ng-deep body[cds-theme="dark"] {
+  .group-info {
+      background-color: #314351;
+      border-color: #314351;
+  }
+
+  .group-data {
+      background-color: #314351;
+      border-color: #314351;
+  }
+
+  .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 +63,12 @@
 }
 
 .member-table{
-  background-color: #f9f9f9;
+  // background-color: #f9f9f9;
   width: 100%;
 }
-.member-table thead{
+
-  background-color: #dadada;
-}
 .member-table tbody{
   tr:hover{
-      background-color: #e6e6e6;
       cursor: pointer;
   }
 }

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,17 +284,17 @@
                     >
                       <span class="label label-warning">
                         Changed Rows
-                        <span class="badge badge-warning">{{
+                        <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">{{
+                        <span class="badge">{{
                           lens.deleted
                         }}</span>
                       </span>
@@ -477,15 +477,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>

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

@@ -10,19 +10,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;
 }

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/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;

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/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/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>

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

@@ -2,23 +2,58 @@
     height: 100%;
 }
 .user-info-text{
-    display: inline;    
+    display: inline;
     font-size: 20px;
 }
+
+::ng-deep body[cds-theme="dark"] {
+    .user-info {
+        background-color: #314351;
+        border-color: #314351;
+    }
+
+    .user-data {
+        background-color: #314351;
+        border-color: #314351;
+    }
+
+    .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 +63,6 @@
 }
 
 .user-table{
-    background-color: #f9f9f9;
     width: 100%;
 }
 .user-table thead{
@@ -36,7 +70,6 @@
 }
 .user-table tbody{
     tr:hover{
-        background-color: #e6e6e6;
         cursor: pointer;
     }
 }

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

@@ -323,7 +323,7 @@
     </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"

client/src/styles.scss

@@ -850,6 +850,10 @@ body[cds-theme="dark"] {
   visibility: hidden;
 }
 
+.no-borders {
+  border: 0;
+}
+
 .card {
   &.no-borders {
     border: 0;
@@ -1186,7 +1190,16 @@ 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;
+
   .input-wrapper {
     position: relative;
     min-width: 170px;