From fb17a679c0f2f850011730575a5e368a52f98fb8 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 1 Jun 2023 14:42:34 +1000
Subject: [PATCH] First pass at new table colours

There is more to do, for example the dropshadows.

I've continued with the unopinionated colour naming (eg color-7), but would like to consider giving them more meaningfule names..
---
 .../css/admin_v3/globals/variables.scss       | 13 +++++------
 app/webpacker/css/admin_v3/shared/tables.scss | 22 +++++--------------
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/app/webpacker/css/admin_v3/globals/variables.scss b/app/webpacker/css/admin_v3/globals/variables.scss
index 167d5fe2f6..b1a064901f 100644
--- a/app/webpacker/css/admin_v3/globals/variables.scss
+++ b/app/webpacker/css/admin_v3/globals/variables.scss
@@ -18,7 +18,7 @@ $color-link-hover:               $color-2 !default;
 $color-link-active:              $color-2 !default;
 $color-link-focus:               $color-2 !default;
 $color-link-visited:             $color-3 !default;
-$color-border:                   very-light($color-3, 12) !default;
+$color-border:                   $color-7 !default;
 
 // Basic flash colors
 $color-success:                  $color-2 !default;
@@ -26,9 +26,8 @@ $color-notice:                   $color-6 !default;
 $color-error:                    $color-5 !default;
 
 // Table colors
-$color-tbl-odd:                  $color-1 !default;
-$color-tbl-even:                 very-light($color-3, 4) !default;
-$color-tbl-thead:                very-light($color-3, 4) !default;
+$color-tbl-cell-bg:              $color-1 !default;
+$color-tbl-thead-bg:             $color-7 !default;
 
 // Button colors
 $color-btn-bg:                   $color-3 !default;
@@ -62,8 +61,8 @@ $color-sel-hover-text:           $color-1 !default;
 
 // Text inputs colors
 $color-txt-brd:                  $color-border !default;
-$color-txt-text:                 $color-3 !default;
-$color-txt-hover-brd:            $color-2 !default;
+$color-txt-text:                 $color-8 !default;
+$color-txt-hover-brd:            $color-3 !default;
 
 // States label colors
 $color-ste-complete-bg:          $color-success !default;
@@ -127,7 +126,7 @@ $actions-brd-colors:             $color-action-edit-brd, $color-action-clone-brd
 
 // Sizes
 //--------------------------------------------------------------
-$body-font-size:                 13px !default;
+$body-font-size:                 14px !default;
 
 $h6-size:                        $body-font-size + 2 !default;
 $h5-size:                        $h6-size + 2 !default;
diff --git a/app/webpacker/css/admin_v3/shared/tables.scss b/app/webpacker/css/admin_v3/shared/tables.scss
index 47180ac786..a41cc34f0f 100644
--- a/app/webpacker/css/admin_v3/shared/tables.scss
+++ b/app/webpacker/css/admin_v3/shared/tables.scss
@@ -6,9 +6,9 @@ table {
   th,
   td {
     padding: 7px 5px;
-    border-right: 1px solid $color-border;
-    border-bottom: 1px solid $color-border;
+    background: $color-tbl-cell-bg;
     vertical-align: middle;
+    text-align: left;
     text-overflow: ellipsis;
 
     img {
@@ -129,27 +129,17 @@ table {
   thead {
     th {
       padding: 10px;
-      border-top: 1px solid $color-border;
       border-bottom: none;
-      background-color: $color-tbl-thead;
-      text-transform: uppercase;
-      font-size: 85%;
+      background-color: $color-tbl-thead-bg;
+      font-size: 13px;
       font-weight: $font-weight-bold;
     }
   }
 
   tbody {
     tr {
-      &:first-child th,
-      &:first-child td {
-        border-top: 1px solid $color-border;
-      }
-      &.even td {
-        background-color: $color-tbl-even;
-
-        img {
-          border: 1px solid very-light($color-3, 6);
-        }
+      td {
+        border-top: 4px solid $color-border; // TODO: Let the table background colour come through, to enable drop shadows
       }
 
       &:hover td {