Change scrollbar design

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;
+    }
+  }
+}

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 && (
           <>

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}