From cde9877ecb23645041ccce71569fbadad47a45bf Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Tue, 6 Dec 2022 12:58:32 -0800
Subject: [PATCH] Fleet UI: Scroll shadows (#8914)

---
 changes/issue-7308-scroll-shadows             |  1 +
 .../TableContainer/DataTable/_styles.scss     | 49 ++++++++++++++-----
 frontend/styles/var/colors.scss               | 24 ++++++++-
 3 files changed, 59 insertions(+), 15 deletions(-)
 create mode 100644 changes/issue-7308-scroll-shadows

diff --git a/changes/issue-7308-scroll-shadows b/changes/issue-7308-scroll-shadows
new file mode 100644
index 0000000000..73b08ea84c
--- /dev/null
+++ b/changes/issue-7308-scroll-shadows
@@ -0,0 +1 @@
+* Spiffier UI: Add scroll shadows to indicate horizontal scrolling to user
\ No newline at end of file
diff --git a/frontend/components/TableContainer/DataTable/_styles.scss b/frontend/components/TableContainer/DataTable/_styles.scss
index 92b0b0feb3..d0fa604734 100644
--- a/frontend/components/TableContainer/DataTable/_styles.scss
+++ b/frontend/components/TableContainer/DataTable/_styles.scss
@@ -1,3 +1,6 @@
+$shadow-width: 40px;
+$shadow-transition-width: 10px;
+
 .data-table-block {
   position: relative;
   display: inline-block;
@@ -9,9 +12,30 @@
       border: 1px solid $ui-fleet-blue-15;
       border-radius: 6px;
       margin-top: $pad-small;
-      box-shadow: inset -8px 0 17px -10px #e8edf4;
       flex-grow: 1;
       width: 100%;
+
+      // Shadow
+      background-image: 
+      /* Shadows */ linear-gradient(
+          to right,
+          white,
+          $transparent
+        ),
+        linear-gradient(to left, white, $transparent),
+        /* Shadow covers */
+          linear-gradient(to right, $ui-shadow, white $shadow-transition-width),
+        linear-gradient(to left, $ui-shadow, white $shadow-transition-width);
+
+      background-position: left center, right center, left center, right center;
+      background-repeat: no-repeat;
+      background-color: white;
+      background-size: $shadow-width 100%, $shadow-width 100%, 50% 100%,
+        50% 100%;
+
+      /* Opera doesn't support this in the shorthand */
+      background-attachment: local, local, scroll, scroll;
+      // End shadow
     }
 
     &__table {
@@ -30,6 +54,15 @@
       .component__tooltip-wrapper__element {
         white-space: initial; // wraps long text with tooltip
       }
+
+      tr:hover {
+        background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow
+      }
+
+      .single-row:hover {
+        cursor: pointer;
+        background-color: $ui-vibrant-blue-10-opaque; // opaque needed for horizontal scroll shadow
+      }
     }
 
     tr {
@@ -39,14 +72,6 @@
         border-bottom: 0;
       }
 
-      &.single-row {
-        cursor: pointer;
-
-        &:hover {
-          background-color: rgba($core-vibrant-blue, 0.1);
-        }
-      }
-
       // override styles of checkbox data cells
       .form-field--checkbox {
         display: flex;
@@ -60,7 +85,7 @@
     }
 
     thead {
-      background-color: $ui-off-white;
+      background-color: $ui-off-white-opaque; // opaque needed for horizontal scroll shadow
       color: $core-fleet-black;
       text-align: left;
       border-bottom: 1px solid $ui-fleet-blue-15;
@@ -194,9 +219,7 @@
           font-style: italic;
         }
       }
-      tr:hover {
-        background-color: $ui-off-white;
-      }
+
       .disable-highlight:hover {
         background-color: initial;
       }
diff --git a/frontend/styles/var/colors.scss b/frontend/styles/var/colors.scss
index 09809ecaf5..d9edab063d 100644
--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@@ -16,10 +16,11 @@ $ui-dark-blue-gray: #afbec1;
 $ui-blue-gray: #dbe3e5;
 $ui-gray: #e3e3e3;
 $ui-light-grey: #fafafa;
-$ui-off-white: #f9fafc;
+$ui-off-white: #f9fafc; // rgba(249, 250, 252, 1)
+$ui-shadow: #e9e9e9;
 $ui-vibrant-blue-50: rgba(106, 103, 254, 0.5);
 $ui-vibrant-blue-25: #d9d9fe;
-$ui-vibrant-blue-10: #f1f0ff;
+$ui-vibrant-blue-10: #f1f0ff; // rgba(241, 240, 255, 1)
 
 // Notifications & status & specific messages
 $ui-offline: #8b8fa2;
@@ -49,3 +50,22 @@ $core-vibrant-blue-over: #5855eb;
 $core-vibrant-blue-down: #3f3cd4;
 $core-fleet-blue-over: #303860;
 $core-fleet-blue-down: $core-fleet-black;
+
+$transparent: rgba(255, 255, 255, 0);
+
+// Opaque colors for table shadows
+// l = lowest color  a = (255-l)/255
+$ui-vibrant-blue-10-alpha: (255-240)/255; // rgba(241, 240, 255)
+$ui-vibrant-blue-10-opaque: rgba(
+  (241-240) / $ui-vibrant-blue-10-alpha,
+  (240-240) / $ui-vibrant-blue-10-alpha,
+  (255-240) / $ui-vibrant-blue-10-alpha,
+  $ui-vibrant-blue-10-alpha
+);
+$ui-off-white-alpha: (255-249)/255; // rgba(249, 250, 252)
+$ui-off-white-opaque: rgba(
+  (249-249) / $ui-off-white-alpha,
+  (250-249) / $ui-off-white-alpha,
+  (252-249) / $ui-off-white-alpha,
+  $ui-off-white-alpha
+);