From a9570e01e230d0e4d91c8ddf39ace0401541e734 Mon Sep 17 00:00:00 2001
From: Weves <chrisweaver101@gmail.com>
Date: Wed, 20 Dec 2023 18:26:34 -0800
Subject: [PATCH] Make document sidebar scrollbar darker

---
 web/src/app/chat/documentSidebar/DocumentSidebar.tsx | 4 ++--
 web/src/app/globals.css                              | 9 +++++++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
index a9e062e2f6..5f7f4fd351 100644
--- a/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
+++ b/web/src/app/chat/documentSidebar/DocumentSidebar.tsx
@@ -68,7 +68,7 @@ export function DocumentSidebar({
         </div>
 
         {currentDocuments ? (
-          <div className="overflow-y-auto overflow-x-hidden flex flex-col">
+          <div className="overflow-y-auto dark-scrollbar overflow-x-hidden flex flex-col">
             <div>
               {dedupedDocuments.length > 0 ? (
                 dedupedDocuments.map((document, ind) => (
@@ -141,7 +141,7 @@ export function DocumentSidebar({
         </div>
 
         {selectedDocuments && selectedDocuments.length > 0 ? (
-          <div className="flex flex-col gap-y-2 py-3 px-3 overflow-y-auto max-h-full">
+          <div className="flex flex-col gap-y-2 py-3 px-3 overflow-y-auto dark-scrollbar max-h-full">
             {selectedDocuments.map((document) => (
               <SelectedDocumentDisplay
                 key={document.document_id}
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 52f28f3a75..413e9d46ee 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -17,6 +17,15 @@
   background: #d1d5db; /* Handle color on hover */
 }
 
+.dark-scrollbar::-webkit-scrollbar-thumb {
+  background: #c7cdd2; /* Handle color */
+  border-radius: 10px;
+}
+
+.dark-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #989a9c; /* Handle color on hover */
+}
+
 ::-webkit-scrollbar {
   width: 8px; /* Vertical scrollbar width */
   height: 8px; /* Horizontal scrollbar height */