From 9dd319f4dac8bbfb95807b54ab0fdc93e8ce039e Mon Sep 17 00:00:00 2001
From: Jesse Lucas <jesse@jesselucas.com>
Date: Tue, 14 Apr 2020 20:44:24 -0400
Subject: [PATCH] status-list: update styling, adding selected and hover states

---
 .../chart-item/chart-item.component.scss      |  2 +-
 .../device-list/device-list.component.html    |  8 +--
 .../device-list/device-list.component.scss    | 44 ------------
 .../device-list/device-list.component.ts      |  2 +-
 .../folder-list/folder-list.component.html    | 10 +--
 .../folder-list/folder-list.component.scss    | 44 ------------
 .../folder-list/folder-list.component.ts      |  2 +-
 .../status-list/status-list.component.scss    | 67 +++++++++++++++++++
 src/styles.scss                               |  2 +-
 9 files changed, 80 insertions(+), 101 deletions(-)
 delete mode 100644 src/app/lists/device-list/device-list.component.scss
 delete mode 100644 src/app/lists/folder-list/folder-list.component.scss

diff --git a/src/app/charts/chart-item/chart-item.component.scss b/src/app/charts/chart-item/chart-item.component.scss
index 4444b2f38..4a7d9a572 100644
--- a/src/app/charts/chart-item/chart-item.component.scss
+++ b/src/app/charts/chart-item/chart-item.component.scss
@@ -10,7 +10,7 @@
         color: #303030;
     }
     .selected a {
-        color: #000000;
+        color: #303030;
         text-decoration: none;
     }
 
diff --git a/src/app/lists/device-list/device-list.component.html b/src/app/lists/device-list/device-list.component.html
index 822767592..a27202588 100644
--- a/src/app/lists/device-list/device-list.component.html
+++ b/src/app/lists/device-list/device-list.component.html
@@ -9,17 +9,17 @@
   </ng-container>
   <ng-container matColumnDef="expandedDetail">
     <td mat-cell *matCellDef="let device" [attr.colspan]="displayedColumns.length">
-      <div class="device-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
-        <div class="device-folders">
+      <div class="table-detail" [@detailExpand]="device == expandedDevice ? 'expanded' : 'collapsed'">
+        <div class="detail-items">
           <span>Folders: </span>
-          <span class="folder-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
+          <span class="item-name" *ngFor="let folder of device.folders">{{folder.label | trim}}</span>
         </div>
       </div>
     </td>
   </ng-container>
 
   <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let device; columns: displayedColumns;" class="device-row"
+  <tr mat-row *matRowDef="let device; columns: displayedColumns;" class="table-row"
     [class.expanded-row]="expandedDevice === device"
     (click)="expandedDevice = expandedDevice === device ? null : device">
   </tr>
diff --git a/src/app/lists/device-list/device-list.component.scss b/src/app/lists/device-list/device-list.component.scss
deleted file mode 100644
index 63b82ff7f..000000000
--- a/src/app/lists/device-list/device-list.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.full-width-table {
-    width: 100%;
-}
-  
-.mat-form-field {
-    font-size: 14px;
-    width: 100%;
-}
-
-tr.detail-row {
-  height: 0;
-}
-
-tr.device-row:not(.expanded-row):hover {
-  background: whitesmoke;
-}
-
-/*
-tr.device-row:not(.device-row):active {
-  background: #efefef;
-}
-*/
-
-.device-row td {
-  border-bottom-width: 0;
-}
-
-.device-detail {
-  overflow: hidden;
-  display: flex;
-}
-
-.device-folders {
-  padding-bottom: 16px;
-}
-
-// Hide empty name
-.folder-name:empty {
-  display: none;
-}
-
-.folder-name:not(:last-child):after {
-  content: ", ";
-}
\ No newline at end of file
diff --git a/src/app/lists/device-list/device-list.component.ts b/src/app/lists/device-list/device-list.component.ts
index 3cf3c8bc0..3333b01a9 100644
--- a/src/app/lists/device-list/device-list.component.ts
+++ b/src/app/lists/device-list/device-list.component.ts
@@ -14,7 +14,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 @Component({
   selector: 'app-device-list',
   templateUrl: './device-list.component.html',
-  styleUrls: ['./device-list.component.scss'],
+  styleUrls: ['../status-list/status-list.component.scss'],
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
diff --git a/src/app/lists/folder-list/folder-list.component.html b/src/app/lists/folder-list/folder-list.component.html
index f715da319..90b16c28f 100644
--- a/src/app/lists/folder-list/folder-list.component.html
+++ b/src/app/lists/folder-list/folder-list.component.html
@@ -10,18 +10,18 @@
     <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
     <ng-container matColumnDef="expandedDetail">
         <td mat-cell *matCellDef="let folder" [attr.colspan]="displayedColumns.length">
-            <div class="folder-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
-                <div class="folder-devices">
+            <div class="table-detail" [@detailExpand]="folder == expandedFolder ? 'expanded' : 'collapsed'">
+                <div class="detail-items">
                     <span>Shared with: </span>
-                    <span class="device-name" *ngFor="let device of folder.devices">{{device.name}}</span>
+                    <span class="item-name" *ngFor="let device of folder.devices">{{device.name}}</span>
                 </div>
             </div>
         </td>
     </ng-container>
 
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-    <tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="folder-row"
-        [class.example-expanded-row]="expandedFolder === folder"
+    <tr mat-row *matRowDef="let folder; columns: displayedColumns;" class="table-row"
+        [class.expanded-row]="expandedFolder === folder"
         (click)="expandedFolder = expandedFolder === folder ? null : folder">
     </tr>
     <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
diff --git a/src/app/lists/folder-list/folder-list.component.scss b/src/app/lists/folder-list/folder-list.component.scss
deleted file mode 100644
index 5521fe398..000000000
--- a/src/app/lists/folder-list/folder-list.component.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-.full-width-table {
-    width: 100%;
-}
-  
-.mat-form-field {
-    font-size: 14px;
-    width: 100%;
-}
-
-tr.detail-row {
-  height: 0;
-}
-
-tr.folder-row:not(.expanded-row):hover {
-  background: whitesmoke;
-}
-
-/*
-tr.folder-row:not(.folder-row):active {
-  background: #efefef;
-}
-*/
-
-.folder-row td {
-  border-bottom-width: 0;
-}
-
-.folder-detail {
-  overflow: hidden;
-  display: flex;
-}
-
-.folder-devices {
-  padding-bottom: 16px;
-}
-
-// Hide empty name
-.device-name:empty {
-  display: none;
-}
-
-.device-name:not(:last-child):after {
-  content: ", ";
-}
\ No newline at end of file
diff --git a/src/app/lists/folder-list/folder-list.component.ts b/src/app/lists/folder-list/folder-list.component.ts
index a88f08c5a..357108281 100644
--- a/src/app/lists/folder-list/folder-list.component.ts
+++ b/src/app/lists/folder-list/folder-list.component.ts
@@ -14,7 +14,7 @@ import { trigger, state, style, transition, animate } from '@angular/animations'
 @Component({
   selector: 'app-folder-list',
   templateUrl: './folder-list.component.html',
-  styleUrls: ['./folder-list.component.scss'],
+  styleUrls: ['../status-list/status-list.component.scss'],
   animations: [
     trigger('detailExpand', [
       state('collapsed', style({ height: '0px', minHeight: '0' })),
diff --git a/src/app/lists/status-list/status-list.component.scss b/src/app/lists/status-list/status-list.component.scss
index e258cb9be..61d04678d 100644
--- a/src/app/lists/status-list/status-list.component.scss
+++ b/src/app/lists/status-list/status-list.component.scss
@@ -1,3 +1,70 @@
 .status-list .tui-card-toggle {
     padding: 16px 16px 0 16px;
+}
+
+.full-width-table {
+    width: 100%;
+}
+
+.mat-form-field {
+    font-size: 14px;
+    width: 100%;
+}
+
+tr.detail-row {
+    height: 0;
+}
+
+tr.table-row:not(.expanded-row):hover {
+    background: whitesmoke;
+    color: #303030;
+}
+
+tr.table-row:not(.expanded-row):active {
+    background: #DDDDDD;
+    color: #303030;
+}
+
+.expanded-row {
+    background: #DDDDDD;
+    color: #303030;
+}
+
+.table-row td {
+    border-bottom-width: 0;
+}
+
+.table-detail {
+    overflow: hidden;
+    display: flex;
+}
+
+.detail-items {
+    padding: 16px;
+}
+
+// Hide empty name
+.item-name:empty {
+    display: none;
+}
+
+.item-name:not(:last-child):after {
+    content: ", ";
+}
+
+@media (prefers-color-scheme: dark) {
+    tr.table-row:not(.expanded-row):hover {
+        background: #212121;
+        color: white;
+    }
+
+    tr.table-row:not(.expanded-row):active {
+        background: #212121;
+        color: white;
+    }
+
+    .expanded-row {
+        background: #212121;
+        color: white;
+    }
 }
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 757f02480..15bed241b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -3,6 +3,7 @@
 @import '~@angular/material/theming';
 @import './app/card/card.component.scss';
 @import './app/charts/chart-item/chart-item.component.scss';
+@import './app/lists/status-list/status-list.component.scss';
 
 
 // Custom typography
@@ -81,7 +82,6 @@ $tech-ui-dark-theme: mat-dark-theme($tech-ui-primary, $tech-ui-accent, $tech-ui-
 @include angular-material-theme($tech-ui-theme);
 @include tui-card-theme($tech-ui-theme);
 @include chart-item-theme($tech-ui-theme);
-
    
 html, body { 
     height: 100%;