add themed vertical scroll to columns

001elijah · Jun 28, 2023 · a9d8143 · a9d8143
1 parent d7f4bd3
commit a9d8143
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 22 deletions.
diff --git a/src/components/ButtonAddColumn/ButtonAddColumn.module.scss b/src/components/ButtonAddColumn/ButtonAddColumn.module.scss
@@ -22,6 +22,7 @@
     }
   }
   &.Card {
+    width: 335px;
     &.dark {
       background-color: $accent-color;
     }

diff --git a/src/components/TaskCard/TaskCard.module.scss b/src/components/TaskCard/TaskCard.module.scss
@@ -3,7 +3,8 @@
 .cardWrapper {
   position: relative;
   padding: 14px 21px;
-  max-width: 335px;
+  width: 335px;
+  margin-right: 8px;
   height: 154px;
   background-color: $white-text-color;
   border-radius: 8px;

diff --git a/src/components/TaskColumn/TaskColumn.jsx b/src/components/TaskColumn/TaskColumn.jsx
@@ -8,10 +8,14 @@ import { selectCards } from 'redux/Cards/cardsSelectors';
 import { addCard } from 'redux/Cards/cardsOperations';
 import shortid from 'shortid';
 import { currentBoard } from 'redux/Boards/boardsSelectors';
+import s from './TaskColumn.module.scss';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+import clsx from 'clsx';
 
 export const TaskColumn = ({ columnId }) => {
   const dispatch = useDispatch();
   const { _id } = useSelector(currentBoard);
+  const theme = useSelector(selectorTheme);
   const [modalOpen, setModalOpen] = useState(false);
   const ModalWindowOpen = () => setModalOpen(true);
   const modalWindowClose = () => setModalOpen(false);
@@ -33,7 +37,13 @@ export const TaskColumn = ({ columnId }) => {
 
   return (
     <>
-      <ul>
+      <ul
+        className={clsx(
+          theme === 'light' && s.taskCardListLight,
+          theme === 'dark' && s.taskCardListDark,
+          theme === 'colorful' && s.taskCardListColorful,
+        )}
+      >
         {cards
           .filter(card => {
             return card.columnId === columnId;

diff --git a/src/components/TaskColumn/TaskColumn.module.scss b/src/components/TaskColumn/TaskColumn.module.scss
@@ -1,19 +1,94 @@
 @import '../../assets/styles/vars';
 @import '../../assets/styles/mixins';
 
-.taskCardList {
+.taskCardListLight {
   margin-bottom: 10px;
-  overflow-y: auto;
+  overflow-y: scroll;
+  overflow-x: hidden;
   max-height: calc(100vh - 280px);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 12px;
+    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: $background-color;
+    border-radius: 100vw;
+  }
+
+  @include tablet {
+    max-height: calc(100vh - 290px);
+  }
+
+  @include desktop {
+    max-height: calc(100vh - 278px);
+  }
 }
+.taskCardListDark {
+  margin-bottom: 10px;
+  overflow-y: auto;
+  max-height: calc(100vh - 280px);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 12px;
+    margin-left: 8px;
+    margin-right: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(18, 18, 18, 1);
+    border-radius: 100vw;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $background-color;
+    border-radius: 100vw;
+  }
 
-@include tablet {
-  .taskCardList {
+  @include tablet {
     max-height: calc(100vh - 290px);
   }
+
+  @include desktop {
+    max-height: calc(100vh - 278px);
+  }
 }
-@include desktop {
-  .taskCardList {
+.taskCardListColorful {
+  margin-bottom: 10px;
+  overflow-y: auto;
+  max-height: calc(100vh - 280px);
+
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 12px;
+    margin-left: 8px;
+    margin-right: 2px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(184, 188, 253, 1);
+    border-radius: 100vw;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $background-color;
+    border-radius: 100vw;
+  }
+
+  @include tablet {
+    max-height: calc(100vh - 290px);
+  }
+
+  @include desktop {
     max-height: calc(100vh - 278px);
   }
 }
diff --git a/src/index.scss b/src/index.scss
@@ -48,19 +48,19 @@ code {
   @include container;
 }
 
-::-webkit-scrollbar {
-  width: 8px;
-  height: 12px;
-  margin-left: 8px;
-  margin-right: 2px;
-}
+// ::-webkit-scrollbar {
+//   width: 8px;
+//   height: 12px;
+//   margin-left: 8px;
+//   margin-right: 2px;
+// }
 
-::-webkit-scrollbar-thumb {
-  background-color: $dark-color;
-  border-radius: 100vw;
-}
+// ::-webkit-scrollbar-thumb {
+//   background-color: $dark-color;
+//   border-radius: 100vw;
+// }
 
-::-webkit-scrollbar-track {
-  background-color: $background-color;
-  border-radius: 100vw;
-}
+// ::-webkit-scrollbar-track {
+//   background-color: $background-color;
+//   border-radius: 100vw;
+// }