From d8f6a1f6cf016265f50934756599463b48edbf55 Mon Sep 17 00:00:00 2001
From: Cara Fisher <cfisher@scottlogic.com>
Date: Tue, 5 Dec 2023 14:26:42 +0000
Subject: [PATCH] SLVUU-111: Customise scrollbar styling for 'My Layouts' list

---
 .../src/layout-management/LayoutList.css      | 35 +++++++++++++++++--
 .../vuu-shell/src/left-nav/LeftNav.css        |  6 ++--
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
index 21ea74a573..e14e8aa803 100644
--- a/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
+++ b/vuu-ui/packages/vuu-shell/src/layout-management/LayoutList.css
@@ -5,6 +5,28 @@
     flex-direction: column;
     height: 100%;
     overflow: hidden;
+    padding-right: 6px;
+
+    /* Works on Firefox */
+    scrollbar-width: thin;
+    scrollbar-color: #D9D9D9 transparent;
+
+    /* compatible with Chrome, Edge, and Safari */
+    ::-webkit-scrollbar {
+        width: 4px;
+        height: 4px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background: transparent;
+        margin-top: 15px;
+        margin-bottom: 15px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        border-radius: 4px;
+        background: #D9D9D9;
+    }
 }
 
 .vuuLayoutList-header {
@@ -14,7 +36,7 @@
     letter-spacing: 0.48px;
     text-transform: uppercase;
     display: flex;
-    padding: 16px 0px;
+    padding: 16px 0;
     border-bottom: 1px solid rgba(119, 124, 148, 0.10);
     line-height: 200%;
 }
@@ -23,16 +45,23 @@
     display: flex;
     padding-top: 24px;
     color: var(--light-text-secondary, #606477);
+    font-feature-settings: 'ss02' on, 'ss01' on, 'salt' on, 'liga' off;
+    font-family: Nunito Sans;
+    font-size: 12px;
+    font-style: normal;
     font-weight: 700;
+    line-height: 24px; /* 200% */
     letter-spacing: 0.48px;
-    line-height: 200%;
+    text-transform: uppercase;
 }
 
 .vuuLayoutList-layoutContainer {
     display: flex;
     align-items: center;
+    width: 90%;
+    height: auto;
     gap: 8px;
-    padding: 8px 0px;
+    padding: 8px 0;
     flex: 1 1 auto;
     cursor: pointer;
 }
diff --git a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
index cf8fb562c3..12710db0df 100644
--- a/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
+++ b/vuu-ui/packages/vuu-shell/src/left-nav/LeftNav.css
@@ -16,7 +16,7 @@
 
     --menu-level-2-width: 0px;
 
-    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);
     display: flex;
     height: calc(100% - 4px);
     margin-bottom: 4px;
@@ -165,12 +165,12 @@
 
 .vuuLeftNav-drawer {
     display: flex;
-    padding: 40px 32px 0px 24px;
+    padding: 0 0 0 24px;
     flex-direction: column;
     align-items: flex-start;
     flex-shrink: 0;
     align-self: stretch;
     background: #FFF;
-    box-shadow: 3px 4px 4px 0px rgba(0, 0, 0, 0.15);
+    box-shadow: 3px 4px 4px 0 rgba(0, 0, 0, 0.15);
     height: 100%
 }
\ No newline at end of file