improved dark mode

Keith-Web3 · Apr 27, 2023 · 630f0fd · 630f0fd
1 parent e73e202
commit 630f0fd
Show file tree

Hide file tree

Showing 6 changed files with 161 additions and 18 deletions.
diff --git a/src/components/shared/ModifyBoards.tsx b/src/components/shared/ModifyBoards.tsx
@@ -12,8 +12,11 @@ const ModifyBoards: React.FC<{
   editBoard?: boolean
 }> = function ({ title, button, editBoard = false }) {
   const id = useId()
+
   const modalType = useStore(state => state.modalType)
   const currentBoard = useStore(state => state.currentBoard)
+  const theme = useStore(state => state.theme())
+
   const [boardName, setBoardName] = useState(
     editBoard ? currentBoard().name : ''
   )
@@ -30,7 +33,7 @@ const ModifyBoards: React.FC<{
     state.editBoard,
   ])
   return (
-    <div className="modify-boards">
+    <div className="modify-boards" data-theme={theme}>
       <p className="modify-boards__title">{title}</p>
       <label htmlFor={`${id}1`} className="subtask__input">
         board name

diff --git a/src/components/shared/ModifyTask.tsx b/src/components/shared/ModifyTask.tsx
@@ -78,6 +78,7 @@ const ModifyTask: React.FC<{
   const currentBoard = useStore(state => state.currentBoard())
   const createTask = useStore(state => state.createTask)
   const editTaskHandler = useStore(state => state.editTask)
+  const theme = useStore(state => state.theme())
 
   const [taskInfo, dispatchTaskInfo] = useReducer(modifyTaskReducer, {
     title: editTask ? modalType.modalInfo!.name : '',
@@ -115,7 +116,7 @@ const ModifyTask: React.FC<{
   }
 
   return (
-    <div className="add-task">
+    <div className="add-task" data-theme={theme}>
       <p className="add-task__header">{title}</p>
       <label htmlFor="task-title">
         Title
@@ -140,7 +141,7 @@ const ModifyTask: React.FC<{
           }
         />
       </label>
-      <div className="subtasks">
+      <div className="subtasks" data-theme={theme}>
         <p className="subtasks__header">Subtasks</p>
         <AnimatePresence>
           {taskInfo.subtasks.map((el, idx) => (

diff --git a/src/components/shared/ViewTask.tsx b/src/components/shared/ViewTask.tsx
@@ -13,14 +13,15 @@ const SubTask: React.FC<{ task: string; completed: boolean }> = function ({
 }) {
   const id = useId()
   const [isChecked, setIsChecked] = useState(completed)
+  const theme = useStore(state => state.theme())
   const tickVariants = {
     // pressed: (isChecked: boolean) => ({ pathLength: isChecked ? 0.85 : 0.2 }),
     checked: { pathLength: 1 },
     unchecked: { pathLength: 0 },
   }
   const boxVariants = {
     checked: { backgroundColor: '#635fc7' },
-    unchecked: { backgroundColor: '#ffffff' },
+    unchecked: { backgroundColor: theme === 'light' ? '#ffffff' : '#2b2c37' },
   }
   return (
     <label className="subtask" htmlFor={id}>
@@ -38,20 +39,22 @@ const SubTask: React.FC<{ task: string; completed: boolean }> = function ({
         animate={isChecked ? 'checked' : 'unchecked'}
         className="custom-checkbox"
       >
-        <motion.svg
-          transition={{ when: 'beforeChildren' }}
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 448 512"
-        >
-          <motion.path
-            variants={tickVariants}
-            initial={'unchecked'}
-            animate={'checked'}
-            d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
-            pathLength="100"
-            fill="#ffffff"
-          />
-        </motion.svg>
+        {isChecked && (
+          <motion.svg
+            transition={{ when: 'beforeChildren' }}
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 448 512"
+          >
+            <motion.path
+              variants={tickVariants}
+              initial={'unchecked'}
+              animate={'checked'}
+              d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"
+              pathLength="100"
+              fill="#ffffff"
+            />
+          </motion.svg>
+        )}
       </motion.div>
       {task}
     </label>
@@ -67,6 +70,7 @@ const ViewTask: React.FC<{
   const currentBoard = useStore(state => state.currentBoard())
   const setModalType = useStore(state => state.setModalType)
   const modalType = useStore(state => state.modalType)
+  const theme = useStore(state => state.theme())
 
   const [isStatusOpen, setIsStatusOpen] = useState(false)
   const [isDropDownOpen, setIsDropDownOpen] = useState(false)
@@ -95,6 +99,7 @@ const ViewTask: React.FC<{
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
         exit={{ opacity: 0 }}
+        data-theme={theme}
         layout
         className="view-task"
       >
@@ -168,6 +173,7 @@ const ViewTask: React.FC<{
             animate="animate"
             exit="exit"
             className="status-menu"
+            data-theme={theme}
           >
             {currentBoard.status.map(el => (
               <motion.p key={nanoid()} variants={itemVariants}>

diff --git a/src/sass/shared/modify-boards.scss b/src/sass/shared/modify-boards.scss
@@ -32,6 +32,9 @@
         color: #000112;
         opacity: 0.25;
       }
+      &:focus {
+        border-color: $purple-main;
+      }
     }
   }
   .columns {
@@ -62,6 +65,9 @@
           opacity: 0.25;
           font-weight: 700;
         }
+        &:focus {
+          border-color: $purple-main;
+        }
       }
       img {
         object-fit: contain;
@@ -95,4 +101,29 @@
       }
     }
   }
+
+  &[data-theme='dark'] {
+    background-color: $dark-200;
+
+    .modify-boards__title {
+      color: $white;
+    }
+    .columns__header {
+      color: $white;
+    }
+    label {
+      color: $white;
+
+      input {
+        background-color: $dark-200;
+        color: $white;
+        &::placeholder {
+          color: rgba($white, 0.25);
+        }
+      }
+    }
+    button:first-of-type {
+      background-color: $white;
+    }
+  }
 }
diff --git a/src/sass/shared/modify-task.scss b/src/sass/shared/modify-task.scss
@@ -34,6 +34,9 @@
         color: #000112;
         opacity: 0.25;
       }
+      &:focus {
+        border-color: $purple-main;
+      }
     }
     textarea {
       resize: none;
@@ -102,6 +105,32 @@
     width: 100%;
     margin-top: unset;
   }
+  &[data-theme='dark'] {
+    background-color: $dark-200;
+
+    .add-task__header {
+      color: $white;
+    }
+    .status__header,
+    .status-dropdown p {
+      color: $white;
+    }
+    .status-menu {
+      background-color: $dark-300;
+    }
+    label {
+      color: $white;
+
+      input,
+      textarea {
+        background-color: $dark-200;
+        color: $white;
+        &::placeholder {
+          color: rgba($white, 0.25);
+        }
+      }
+    }
+  }
 }
 .subtasks {
   margin-top: $spacer * 1.5;
@@ -130,6 +159,9 @@
         opacity: 0.25;
         font-weight: 700;
       }
+      &:focus {
+        border-color: $purple-main;
+      }
     }
     img {
       object-fit: contain;
@@ -148,4 +180,27 @@
     font-weight: 700;
     cursor: pointer;
   }
+  &[data-theme='dark'] {
+    background-color: $dark-200;
+
+    .subtasks__header {
+      color: $white;
+    }
+    label {
+      color: $white;
+
+      input,
+      textarea {
+        background-color: $dark-200;
+        color: $white;
+        &::placeholder {
+          color: rgba($white, 0.25);
+        }
+      }
+    }
+    .add__subtask {
+      background-color: $white;
+      color: $purple-main;
+    }
+  }
 }
diff --git a/src/sass/shared/viewtask.scss b/src/sass/shared/viewtask.scss
@@ -117,6 +117,46 @@
       color: $red-200;
     }
   }
+
+  &[data-theme='dark'] {
+    background-color: $dark-200;
+
+    .view-task__header,
+    .view-task__current,
+    .view-task__status p {
+      color: $white;
+    }
+    .subtask {
+      background-color: $dark-300;
+      color: $white;
+
+      .custom-checkbox {
+        border: 1px solid rgba(130, 143, 163, 0.248914);
+      }
+      &:has(input:checked) {
+        color: rgba($white, 0.5);
+      }
+    }
+    // .status__header,
+    // .status-dropdown p {
+    //   color: $white;
+    // }
+    // .status-menu {
+    //   background-color: $dark-300;
+    // }
+    // label {
+    //   color: $white;
+
+    //   input,
+    //   textarea {
+    //     background-color: $dark-200;
+    //     color: $white;
+    //     &::placeholder {
+    //       color: rgba($white, 0.25);
+    //     }
+    //   }
+    // }
+  }
 }
 .status-menu {
   color: $gray-200;
@@ -134,5 +174,12 @@
     padding-inline: $spacer;
     margin-bottom: $spacer;
     cursor: pointer;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  &[data-theme='dark'] {
+    background-color: $dark-300;
   }
 }