Added hover effect and removed the "before" element because it was af…

…fecting Tab Navigation accuracy
Rinakat225 · Jun 5, 2024 · 1877a0a · 1877a0a
1 parent 295e8b1
commit 1877a0a
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 29 deletions.
diff --git a/src/TodoList.jsx b/src/TodoList.jsx
@@ -115,7 +115,7 @@ export default function TodoList() {
                 <span className="text-md w-20">{date}</span>
                 <h1 className="text-4xl font-bold">To do List</h1>
                 <button onClick={() => handleDarkModeButtonClick()}>
-                    <LightBulbIcon className="size-6 w-20" />
+                    <LightBulbIcon className="size-6 w-20 hover:text-[#54edfe] dark:hover:text-[#ddfbff]" />
                 </button>
             </div>
 

diff --git a/src/components/NewTasks.jsx b/src/components/NewTasks.jsx
@@ -27,14 +27,15 @@ export default function NewTasks({
     };
 
     const NEWTASKS_DEFAULT_CLASSNAMES =
-        'bg-[#2e3f4e] dark:bg-[#54edfe] text-[#54edfe] dark:text-black font-bold rounded p-1.5 mt-7 mb-9 w-60';
+        'bg-[#2e3f4e] dark:bg-[#54edfe] text-[#54edfe] dark:text-black font-bold rounded p-1.5 mt-7 mb-9 w-60 hover:bg-[#54edfe] hover:text-[#172a3a] dark:hover:bg-[#172a3a] dark:hover:text-[#54edfe] dark:hover:bg-[#65717b]';
 
     return (
         <div className="flex justify-center text-xs">
             <form onSubmit={handleSubmitUserInputButtonClick}>
                 <input
                     className={twMerge(NEWTASKS_DEFAULT_CLASSNAMES, 'mr-2')}
                     type="text"
+                    placeholder="Write your task..."
                     value={newTask}
                     onChange={(event) => setNewTask(event.target.value)}
                 />
@@ -48,7 +49,7 @@ export default function NewTasks({
             <button
                 className={twMerge(
                     NEWTASKS_DEFAULT_CLASSNAMES,
-                    'bg-[#54edfe] dark:bg-[#65717b] text-[#172a3a] dark:text-[#54edfe] w-13 border-solid border-[1px] border-[#2e3f4e]'
+                    'bg-[#54edfe] dark:bg-[#65717b] text-[#172a3a] dark:text-[#54edfe] w-13 hover:bg-[#2e3f4e] hover:text-[#54edfe] dark:hover:bg-[#54edfe] dark:hover:text-[#172a3a]'
                 )}
                 onClick={() => onClearAllTasksButtonClick()}
             >

diff --git a/src/components/Tabs.jsx b/src/components/Tabs.jsx
@@ -2,7 +2,7 @@ import {twMerge} from 'tailwind-merge';
 
 export default function Tabs({setCurrentTab, currentTab}) {
     const TABS_DEFAULT_CLASSNAMES =
-        'text-lg text-[#172a3a] dark:text-[#65717b] font-semibold p-1 w-1/3';
+        'text-lg text-[#172a3a] dark:text-[#65717b] font-semibold p-1 w-1/3 hover:bg-[#65717b] hover:text-[#54edfe] dark:hover:text-[#54edfe]';
     const TABS_ACTIVE_CLASSNAMES =
         'bg-[#65717b] dark:bg-[#65717b] text-[#54edfe] dark:text-[#54edfe]';
 

diff --git a/src/components/TaskList.jsx b/src/components/TaskList.jsx
@@ -26,11 +26,11 @@ export default function TaskList({
     const TASKLIST_DEFAULT_TEXT_CLASSNAMES =
         'text-base font-semibold flex justify-between items-center p-3 text-[#172a3a] dark:text-[#54edfe]';
 
-    const TASKLIST_BEFORE_ELEMENT_CLASSNAMES =
-        'mr-5 w-15 relative flex items-center justify-center';
+    const TASKLIST_ICONS_CLASSNAMES =
+        'mr-5 w-15 absolute flex items-center justify-center translate-x-1/2 -translate-y-1/2';
 
     const TASKLIST_BTN_CLASSNAMES =
-        'before:block before:absolute before:rounded-full before:bg-[#65717b] before:w-8 before:h-8 before:top-50% before:left-50% before:-translate-x-1/4 before:-translate-y-1/4 relative inline-block';
+        'block relative rounded-full bg-[#65717b] w-8 h-8 relative inline-block hover:ring-2 hover:ring-[#54edfe]';
 
     return (
         <div className="flex flex-col p-2 justify-center">
@@ -47,19 +47,19 @@ export default function TaskList({
                 <div className="flex gap-3 items-center">
                     <div className="flex flex-col">
                         <button onClick={() => onMoveTaskUpButtonClick(index)}>
-                            <ChevronUpIcon className="size-5" />
+                            <ChevronUpIcon className="size-5 hover:text-[#54edfe] dark:hover:text-[#65717b]" />
                         </button>
                         <button
                             onClick={() => onMoveTaskDownButtonClick(index)}
                         >
-                            <ChevronDownIcon className="size-5" />
+                            <ChevronDownIcon className="size-5 hover:text-[#54edfe] dark:hover:text-[#65717b]" />
                         </button>
                     </div>
                     <ul>
                         <li key={id}>
                             {edit === id ? (
                                 <input
-                                    className="bg-[#65717b] dark:bg-[#54edfe] text-[#54edfe] dark:text-black rounded w-30"
+                                    className="bg-[#65717b] dark:bg-[#54edfe] text-[#54edfe] dark:text-black rounded w-30 hover:ring-2 hover:ring-[#54edfe] hover:dark:ring-[#65717b]"
                                     type="text"
                                     defaultValue={userInput}
                                     value={editedInput}
@@ -74,29 +74,25 @@ export default function TaskList({
                     </ul>
                 </div>
 
-                <div>
+                <div className="flex gap-1">
                     {edit === id ? (
                         <button
                             onClick={() => onCancelEditingModeButtonClick()}
                             className={twMerge(
                                 TASKLIST_BTN_CLASSNAMES,
-                                'before:bg-[#54edfe]'
+                                'hover:dark:ring-[#54edfe]'
                             )}
                         >
-                            <span
-                                className={TASKLIST_BEFORE_ELEMENT_CLASSNAMES}
-                            >
-                                <XMarkIcon fill="#65717b" className="size-4" />
+                            <span className={TASKLIST_ICONS_CLASSNAMES}>
+                                <XMarkIcon fill="#54edfe" className="size-4" />
                             </span>
                         </button>
                     ) : (
                         <button
                             onClick={() => onRemoveTaskButtonClick(id)}
                             className={TASKLIST_BTN_CLASSNAMES}
                         >
-                            <span
-                                className={TASKLIST_BEFORE_ELEMENT_CLASSNAMES}
-                            >
+                            <span className={TASKLIST_ICONS_CLASSNAMES}>
                                 <TrashIcon fill="#54edfe" className="size-4" />
                             </span>
                         </button>
@@ -106,23 +102,19 @@ export default function TaskList({
                             onClick={() => onSaveEditedTaskButtonClick(id)}
                             className={twMerge(
                                 TASKLIST_BTN_CLASSNAMES,
-                                'before:bg-[#54edfe]'
+                                'hover:dark:ring-[#54edfe]'
                             )}
                         >
-                            <span
-                                className={TASKLIST_BEFORE_ELEMENT_CLASSNAMES}
-                            >
-                                <CheckIcon fill="#65717b" className="size-4" />
+                            <span className={TASKLIST_ICONS_CLASSNAMES}>
+                                <CheckIcon fill="#54edfe" className="size-4" />
                             </span>
                         </button>
                     ) : (
                         <button
                             onClick={() => onEditTaskButtonClick(id)}
                             className={TASKLIST_BTN_CLASSNAMES}
                         >
-                            <span
-                                className={TASKLIST_BEFORE_ELEMENT_CLASSNAMES}
-                            >
+                            <span className={TASKLIST_ICONS_CLASSNAMES}>
                                 <PencilSquareIcon
                                     fill="#54edfe"
                                     className="size-4"
@@ -142,7 +134,7 @@ export default function TaskList({
                         >
                             <span
                                 className={twMerge(
-                                    TASKLIST_BEFORE_ELEMENT_CLASSNAMES,
+                                    TASKLIST_ICONS_CLASSNAMES,
                                     'mr-0'
                                 )}
                             >
@@ -160,7 +152,7 @@ export default function TaskList({
                         >
                             <span
                                 className={twMerge(
-                                    TASKLIST_BEFORE_ELEMENT_CLASSNAMES,
+                                    TASKLIST_ICONS_CLASSNAMES,
                                     'mr-0'
                                 )}
                             >