From ba8b08dc90f22d6c321ae3bfe865f15cda1d21d7 Mon Sep 17 00:00:00 2001
From: Shusui MOYATANI <syusui.s@gmail.com>
Date: Mon, 10 Jul 2023 20:04:34 +0900
Subject: [PATCH] Revert "feat: remove scrollbar"

This reverts commit 605a87558e2001bb0b5ededc524b430a31397dd3.
---
 src/components/column/Column.tsx         |  6 ++++--
 src/components/column/ColumnSettings.tsx |  6 ++++--
 src/index.css                            | 17 +++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/column/Column.tsx b/src/components/column/Column.tsx
index c0ab0a4..9b83a16 100644
--- a/src/components/column/Column.tsx
+++ b/src/components/column/Column.tsx
@@ -59,7 +59,9 @@ const Column: Component<ColumnProps> = (props) => {
           fallback={
             <>
               <div class="shrink-0 border-b">{props.header}</div>
-              <div class="flex flex-col overflow-y-scroll scroll-smooth">{props.children}</div>
+              <div class="scrollbar flex flex-col overflow-y-scroll scroll-smooth">
+                {props.children}
+              </div>
             </>
           }
         >
@@ -76,7 +78,7 @@ const Column: Component<ColumnProps> = (props) => {
                   <div>{i18n()('column.back')}</div>
                 </button>
               </div>
-              <ul class="flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
+              <ul class="scrollbar flex h-full flex-col overflow-y-scroll scroll-smooth pb-8">
                 <TimelineContentDisplay timelineContent={timeline} />
               </ul>
             </div>
diff --git a/src/components/column/ColumnSettings.tsx b/src/components/column/ColumnSettings.tsx
index b5a2b01..98d8e9f 100644
--- a/src/components/column/ColumnSettings.tsx
+++ b/src/components/column/ColumnSettings.tsx
@@ -19,12 +19,14 @@ type ColumnSettingsSectionProps = {
   children: JSX.Element;
 };
 
-const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => (
+const ColumnSettingsSection: Component<ColumnSettingsSectionProps> = (props) => {
+  return (
     <div class="flex flex-col gap-2 border-b p-2">
       <div>{props.title}</div>
       <div>{props.children}</div>
     </div>
   );
+};
 
 const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
   const i18n = useTranslation();
@@ -43,7 +45,7 @@ const ColumnSettings: Component<ColumnSettingsProps> = (props) => {
   return (
     <div class="flex flex-col border-t">
       <ColumnSettingsSection title={i18n()('column.config.columnWidth')}>
-        <div class="flex h-9 gap-2 overflow-x-scroll">
+        <div class="scrollbar flex h-9 gap-2 overflow-x-scroll">
           <button
             class="rounded-md border px-4 hover:bg-stone-100"
             onClick={() => setColumnWidth('widest')}
diff --git a/src/index.css b/src/index.css
index 4445102..7d722d4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -38,3 +38,20 @@ em-emoji-picker {
   width: 360px;
   max-width: 90vw;
 }
+
+.scrollbar::-webkit-scrollbar:vertical {
+  width: 8px;
+}
+.scrollbar::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
+.scrollbar::-webkit-scrollbar {
+  background-color: #fbf9f9;
+}
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: #fce9ec;
+  border-radius: 8px;
+}
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  background-color: #fcd9dc;
+}