Layout fixes (#494)

* The layout fix (footer not stretched to the bottom) * History icon fix * Add menu hover & active states
api3dao · Nov 20, 2024 · 0ed47aa · 0ed47aa
1 parent adcc9bb
commit 0ed47aa
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 7 deletions.
diff --git 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 {

diff --git a/src/components/menu/history-icon.tsx b/src/components/menu/history-icon.tsx
@@ -3,8 +3,8 @@ const HistoryIcon = () => (
     <path
       d="M15.875 7.375L15.875 15.8765L21.875 17.875"
       stroke="currentColor"
-      stroke-width="1.25"
-      stroke-linejoin="round"
+      strokeWidth="1.25"
+      strokeLinejoin="round"
     />
     <path
       d="M4.08234 11.8341C5.12706 8.84542 7.25653 6.35839 10.0487 4.86592C12.8408 3.37346 16.0917 2.98452 19.1571 3.77618C22.2225 4.56785 24.8786 6.48235 26.5989 9.14018C28.3191 11.798 28.978 15.0052 28.4449 18.1259C27.9118 21.2467 26.2256 24.0533 23.7206 25.9893C21.2156 27.9254 18.0747 28.8496 14.9203 28.5788C11.7659 28.308 8.82842 26.862 6.69006 24.5273C4.5517 22.1926 3.36858 19.1397 3.3752 15.9737"

diff --git 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 {