add horizontal scrollbar

001elijah · Jun 30, 2023 · 9efd330 · 9efd330
1 parent f5c79b5
commit 9efd330
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 3 deletions.
diff --git a/src/components/MainBoard/MainBoard.jsx b/src/components/MainBoard/MainBoard.jsx
@@ -50,7 +50,7 @@ export const MainBoard = () => {
         colorbg={curTheme}
       >
         <HeaderDashBoard title={board.title} />
-        <ContentBoard>
+        <ContentBoard currentTheme={curTheme}>
           <ColumnsList>
             {board.columns.map(item => (
               <TasksColumnHeader

diff --git a/src/components/MainBoard/MainBoard.styled.jsx b/src/components/MainBoard/MainBoard.styled.jsx
@@ -121,8 +121,73 @@ export const Wrappers = styled.div`
 export const ColumnsList = styled.ul`
   display: flex;
 `;
-export const ContentBoard = styled.div`
+export const ContentBoard = styled.div(props => {
+  const lightTheme = `
   display: flex;
   wrap: nowrap;
   overflow: auto;
-`;
+  &::-webkit-scrollbar {
+        height: 12px;
+        margin-top: 16px;
+        margin-left: 8px;
+        margin-right: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(22, 22, 22, 0.1);
+        border-radius: 100vw;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #e6e6e6;
+        border-radius: 100vw;
+      }`;
+  const darkTheme = `
+  display: flex;
+  wrap: nowrap;
+  overflow: auto;
+  &::-webkit-scrollbar {
+        height: 12px;
+        margin-top: 16px;
+        margin-left: 8px;
+        margin-right: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(18, 18, 18, 1);
+        border-radius: 100vw;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #e6e6e6;
+        border-radius: 100vw;
+      }`;
+  const colorfulTheme = `
+  display: flex;
+  wrap: nowrap;
+  overflow: auto;
+  &::-webkit-scrollbar {
+        height: 12px;
+        margin-top: 16px;
+        margin-left: 8px;
+        margin-right: 2px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: rgba(184, 188, 253, 1);
+        border-radius: 100vw;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: #e6e6e6;
+        border-radius: 100vw;
+      }`;
+
+  if (props.currentTheme === "#F6F6F7") {
+      return lightTheme;
+  } else if (props.currentTheme === "#1F1F1F") {
+      return darkTheme;
+  } else {
+      return colorfulTheme;
+    }
+});