From bc74d0a854ee9c3aa53def04f89235fdc2f5e9cb Mon Sep 17 00:00:00 2001
From: Chukwumdiebube <chukwumdiebubeojinta@gmail.com>
Date: Mon, 6 Feb 2023 22:42:29 +0100
Subject: [PATCH] arranged styles

---
 src/components/Partials/Sidebar.jsx | 32 ++++++++++++++---------------
 src/index.css                       |  3 +++
 2 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/components/Partials/Sidebar.jsx b/src/components/Partials/Sidebar.jsx
index 8521bf6..b36d1f6 100755
--- a/src/components/Partials/Sidebar.jsx
+++ b/src/components/Partials/Sidebar.jsx
@@ -116,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   } `}
                   to="/"
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="dashboard" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white dark:focus:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -136,11 +136,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="reminder" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple dark:hover:text-white dark:focus:text-white text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -159,11 +159,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="tracking" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -179,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="calendar" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -199,11 +199,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="resources" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -220,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="History" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -249,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="profile" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -269,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="setting" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
diff --git a/src/index.css b/src/index.css
index d422148..c990ed6 100755
--- a/src/index.css
+++ b/src/index.css
@@ -309,6 +309,9 @@ input[type="number"] {
 .menu-setting-items .nav-item.active span.item-content {
   @apply text-purple;
 }
+.dark .menu-setting-items .nav-item.active span.item-content {
+  @apply text-white
+}
 /* TODO: =================================layout end================================ */
 /* TODO: =================================HomePage ================================ */
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {