From 7893129ef42af39b54fedc2ffc18facf8c161edf Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa@nocodb.com>
Date: Mon, 23 Oct 2023 10:01:28 +0000
Subject: [PATCH] fix: Darkened table scrollbar

---
 packages/nc-gui/assets/style.scss             | 25 ++++++++++++++++++-
 .../components/smartsheet/grid/Table.vue      |  2 +-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/assets/style.scss b/packages/nc-gui/assets/style.scss
index c317f29f0c..d235ec9450 100644
--- a/packages/nc-gui/assets/style.scss
+++ b/packages/nc-gui/assets/style.scss
@@ -54,7 +54,7 @@ main {
 }
 
 .mobile {
-  .nc-scrollbar-md, nc-scrollbar-dark-md, nc-scrollbar-dark-md, nc-scrollbar-sm-dark, nc-scrollbar-x-md {
+  .nc-scrollbar-md, .nc-scrollbar-dark-md, .nc-scrollbar-dark-md, .nc-scrollbar-sm-dark, .nc-scrollbar-x-md, .nc-scrollbar-x-md-dark {
     &::-webkit-scrollbar {
       width: 0px;
     }
@@ -160,6 +160,29 @@ main {
   }
 }
 
+
+.nc-scrollbar-x-md-dark {
+  overflow-x: scroll;
+
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+  &::-webkit-scrollbar-track-piece {
+    width: 0px;
+  }
+  &::-webkit-scrollbar {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    width: 4px;
+    @apply bg-gray-300 !bg-opacity-100;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-400;
+  }
+}
+
 html {
   overflow-y: auto !important;
 }
diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index ad298abff6..9b61fb9afe 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -371,7 +371,7 @@ const gridWrapperClass = computed<string>(() => {
   const classes = []
   if (headerOnly !== true) {
     if (!scrollParent.value) {
-      classes.push('nc-scrollbar-x-md overflow-auto')
+      classes.push('nc-scrollbar-x-md-dark overflow-auto')
     }
   } else {
     classes.push('overflow-visible')