From d9d747e4e0b5f0900c82f36c12096e3d11dadabf Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Sun, 2 Jun 2024 22:59:30 +0100 Subject: [PATCH 1/8] added navItem hover --- components/Containers/NavBar/NavItem/index.module.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index a47c9e9fac9a..9468bf391346 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -6,6 +6,10 @@ px-3 py-2; + &:hover { + @apply bg-neutral-100 dark:bg-neutral-900; + } + .label { @apply text-sm font-medium From 2eb246d55e86023f1a934a4c89ef000ef43b13fb Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Tue, 4 Jun 2024 01:49:46 +0100 Subject: [PATCH 2/8] navItem hover color green-400 --- .../Containers/NavBar/NavItem/index.module.css | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index 9468bf391346..be39f099ddfd 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -6,14 +6,15 @@ px-3 py-2; - &:hover { - @apply bg-neutral-100 dark:bg-neutral-900; - } - .label { @apply text-sm font-medium leading-5; + + &:hover { + @apply text-green-400 + dark:text-green-400; + } } .icon { @@ -49,7 +50,8 @@ } &:hover { - @apply bg-neutral-100 dark:bg-neutral-900; + @apply bg-neutral-100 + dark:bg-neutral-900; } } } From 4499f78f21294086af04d898ecd9415b1a52c541 Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Tue, 4 Jun 2024 01:59:20 +0100 Subject: [PATCH 3/8] navItem nav.label hover color green-400 --- components/Containers/NavBar/NavItem/index.module.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index be39f099ddfd..bc142bdaa985 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -10,11 +10,6 @@ @apply text-sm font-medium leading-5; - - &:hover { - @apply text-green-400 - dark:text-green-400; - } } .icon { @@ -27,6 +22,11 @@ .label { @apply text-neutral-900 dark:text-white; + + &:hover { + @apply text-green-400 + dark:text-green-400; + } } &.active { From 5bdfafba8026417d9fbb2fad9803f9cf18ee96e7 Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Tue, 4 Jun 2024 02:11:52 +0100 Subject: [PATCH 4/8] move up the hover logic up by one from nav.label to nav hover .label --- components/Containers/NavBar/NavItem/index.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index bc142bdaa985..f748acbaaf04 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -22,8 +22,10 @@ .label { @apply text-neutral-900 dark:text-white; + } - &:hover { + &:hover { + .label { @apply text-green-400 dark:text-green-400; } From 31080d0e1b4e78c28897768d8f27f55adb8b936c Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Tue, 4 Jun 2024 02:23:58 +0100 Subject: [PATCH 5/8] prevent text color change when active --- components/Containers/NavBar/NavItem/index.module.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index f748acbaaf04..7797f3f11b21 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -24,7 +24,7 @@ dark:text-white; } - &:hover { + &:not(.active):hover { .label { @apply text-green-400 dark:text-green-400; From 972545a63bb9ad96a583cdf803673f00abc555bf Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Tue, 4 Jun 2024 21:31:39 +0100 Subject: [PATCH 6/8] changed hover color to text-green-700 --- components/Containers/NavBar/NavItem/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index 7797f3f11b21..3ab4ba6bc2af 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -26,8 +26,8 @@ &:not(.active):hover { .label { - @apply text-green-400 - dark:text-green-400; + @apply text-green-700 + dark:text-green-700; } } From 090b91ba75350f0db63755c1e7ff85312dbd0780 Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Mon, 10 Jun 2024 10:35:12 +0100 Subject: [PATCH 7/8] reverted to the original propoal --- .../NavBar/NavItem/index.module.css | 38 ++++++------------- 1 file changed, 11 insertions(+), 27 deletions(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index 3ab4ba6bc2af..019c8d7da1c4 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -1,34 +1,21 @@ .navItem { - @apply inline-flex - items-center - gap-2 - rounded - px-3 - py-2; + @apply inline-flex items-center gap-2 rounded px-3 py-2; .label { - @apply text-sm - font-medium - leading-5; + @apply text-sm font-medium leading-5; } .icon { - @apply size-3 - text-neutral-500 - dark:text-neutral-200; + @apply size-3 text-neutral-500 dark:text-neutral-200; + } + + &:hover { + @apply bg-neutral-100 dark:bg-neutral-900; } &.nav { .label { - @apply text-neutral-900 - dark:text-white; - } - - &:not(.active):hover { - .label { - @apply text-green-700 - dark:text-green-700; - } + @apply text-neutral-900 dark:text-white; } &.active { @@ -39,21 +26,18 @@ } .icon { - @apply text-white - opacity-50; + @apply text-white opacity-50; } } } &.footer { .label { - @apply text-neutral-800 - dark:text-white; + @apply text-neutral-800 dark:text-white; } &:hover { - @apply bg-neutral-100 - dark:bg-neutral-900; + @apply bg-neutral-100 dark:bg-neutral-900; } } } From bbfbdd75fb2441500037d9b1973dbe3eee86d54c Mon Sep 17 00:00:00 2001 From: mAmineChniti Date: Mon, 10 Jun 2024 12:08:35 +0100 Subject: [PATCH 8/8] fixed css formatting mistake --- .../NavBar/NavItem/index.module.css | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git a/components/Containers/NavBar/NavItem/index.module.css b/components/Containers/NavBar/NavItem/index.module.css index 019c8d7da1c4..f8c6f6d5a60d 100644 --- a/components/Containers/NavBar/NavItem/index.module.css +++ b/components/Containers/NavBar/NavItem/index.module.css @@ -1,21 +1,32 @@ .navItem { - @apply inline-flex items-center gap-2 rounded px-3 py-2; + @apply inline-flex + items-center + gap-2 + rounded + px-3 + py-2; .label { - @apply text-sm font-medium leading-5; + @apply text-sm + font-medium + leading-5; } .icon { - @apply size-3 text-neutral-500 dark:text-neutral-200; + @apply size-3 + text-neutral-500 + dark:text-neutral-200; } &:hover { - @apply bg-neutral-100 dark:bg-neutral-900; + @apply bg-neutral-100 + dark:bg-neutral-900; } &.nav { .label { - @apply text-neutral-900 dark:text-white; + @apply text-neutral-900 + dark:text-white; } &.active { @@ -26,18 +37,21 @@ } .icon { - @apply text-white opacity-50; + @apply text-white + opacity-50; } } } &.footer { .label { - @apply text-neutral-800 dark:text-white; + @apply text-neutral-800 + dark:text-white; } &:hover { - @apply bg-neutral-100 dark:bg-neutral-900; + @apply bg-neutral-100 + dark:bg-neutral-900; } } }