From 1496f9046ad87bed6ed5488cc1d933e14f9f3582 Mon Sep 17 00:00:00 2001 From: peterjurco Date: Tue, 19 Nov 2024 15:15:05 +0100 Subject: [PATCH 1/3] The layout fix (footer not stretched to the bottom) --- src/components/layout/layout.module.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/components/layout/layout.module.scss b/src/components/layout/layout.module.scss index 62e55b95..f62923aa 100644 --- a/src/components/layout/layout.module.scss +++ b/src/components/layout/layout.module.scss @@ -6,10 +6,13 @@ background: linear-gradient(334deg, #fafafa -0.91%, #ebf0ff 48.81%, #fafafa 99.52%); min-height: 100vh; position: relative; + display: flex; + flex-direction: column; } .content { display: flex; + flex-grow: 1; } .main { From 3057501fd6394a2caffafcc9668d2c7c92dbed8d Mon Sep 17 00:00:00 2001 From: peterjurco Date: Tue, 19 Nov 2024 15:15:20 +0100 Subject: [PATCH 2/3] History icon fix --- src/components/menu/history-icon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/menu/history-icon.tsx b/src/components/menu/history-icon.tsx index 5037f55d..2b873fc5 100644 --- a/src/components/menu/history-icon.tsx +++ b/src/components/menu/history-icon.tsx @@ -3,8 +3,8 @@ const HistoryIcon = () => ( Date: Tue, 19 Nov 2024 15:43:17 +0100 Subject: [PATCH 3/3] Add menu hover & active states --- src/components/menu/menu.module.scss | 42 ++++++++++++++++++++++++---- 1 file changed, 37 insertions(+), 5 deletions(-) diff --git a/src/components/menu/menu.module.scss b/src/components/menu/menu.module.scss index 48eefa0b..af51668a 100644 --- a/src/components/menu/menu.module.scss +++ b/src/components/menu/menu.module.scss @@ -20,18 +20,42 @@ .navLink { border-left: 2px solid transparent; + + &:hover { + .menuItem { + color: $color-dark-blue-50; + } + } + + &:active { + .menuItem { + color: $color-dark-blue-100; + } + } } .activeNavLink { - cursor: default; border-left: 2px solid $color-blue-500; - .menuItem, - .menuItemText, - .menuMobileItemText, - .menuMobileItem svg { + .menuItem { color: $color-blue-500; } + + &:hover { + border-left: 2px solid $color-blue-200; + + .menuItem { + color: $color-blue-200; + } + } + + &:active { + border-left: 2px solid $color-blue-700; + + .menuItem { + color: $color-blue-700; + } + } } .menuItem { @@ -86,6 +110,14 @@ img { padding: 4px; } + + &:hover { + color: $color-dark-blue-50; + } + + &:active { + color: $color-dark-blue-100; + } } .mobileMenuWrapper {