From 9576406eb1e009362517960b7cbf05f1bb575aba Mon Sep 17 00:00:00 2001
From: AkiraFukushima <h3.poteto@gmail.com>
Date: Sat, 2 Dec 2023 15:13:28 +0900
Subject: [PATCH] Change scrollbar design

---
 renderer/app.css                           | 27 ++++++++++++++++++++++
 renderer/components/detail/Profile.tsx     |  2 +-
 renderer/components/timelines/Timeline.tsx |  1 +
 3 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/renderer/app.css b/renderer/app.css
index 7adbd931..1f0c205e 100644
--- a/renderer/app.css
+++ b/renderer/app.css
@@ -35,3 +35,30 @@
 .raw-html .invisible {
   display: none;
 }
+
+.timeline-scrollable {
+  overflow-y: auto;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 6px !important;
+    height: 6px !important;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgb(203 213 225);
+    border-radius: 4px !important;
+    opacity: 0;
+  }
+
+  &::-webkit-scrollbar-track {
+    border-radius: 4px !important;
+    background-color: rgb(241 245 249);
+  }
+
+  &:hover {
+    &::-webkit-scrollbar-thumb {
+      opacity: 1;
+    }
+  }
+}
diff --git a/renderer/components/detail/Profile.tsx b/renderer/components/detail/Profile.tsx
index b1892bee..09133d1f 100644
--- a/renderer/components/detail/Profile.tsx
+++ b/renderer/components/detail/Profile.tsx
@@ -55,7 +55,7 @@ export default function Profile(props: Props) {
   }
 
   return (
-    <div style={{ height: 'calc(100% - 50px)' }} className="overflow-y-auto">
+    <div style={{ height: 'calc(100% - 50px)' }} className="overflow-y-auto timeline-scrollable">
       <Flowbite theme={{ theme: customTheme }}>
         {user && relationship && (
           <>
diff --git a/renderer/components/timelines/Timeline.tsx b/renderer/components/timelines/Timeline.tsx
index ad38e9de..e7209840 100644
--- a/renderer/components/timelines/Timeline.tsx
+++ b/renderer/components/timelines/Timeline.tsx
@@ -173,6 +173,7 @@ export default function Timeline(props: Props) {
             scrollerRef={ref => {
               scrollerRef.current = ref as HTMLElement
             }}
+            className="timeline-scrollable"
             firstItemIndex={firstItemIndex}
             atTopStateChange={prependUnreads}
             data={statuses}