fix: design review Nav tweaks 3 (#695)

* Tweak boxshadows * fix: design review Nav tweaks 3 * Tweak shadows
comicrelief · Jan 22, 2025 · 6966568 · 6966568
1 parent 39377fe
commit 6966568
Show file tree

Hide file tree

Showing 6 changed files with 20 additions and 7 deletions.
diff --git a/src/components/Organisms/Header2025/Header2025.md b/src/components/Organisms/Header2025/Header2025.md
@@ -478,6 +478,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"
@@ -589,6 +590,7 @@ const [success, setSuccess] = React.useState(false);
 
 <>
 <Header2025
+  showBoxShadow="true"
   characterLimit={50}
   navItems={data}
   rotate="true"

diff --git a/src/components/Organisms/Header2025/Header2025.style.js b/src/components/Organisms/Header2025/Header2025.style.js
@@ -18,7 +18,7 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   }
 
   ${({ showBoxShadow }) => showBoxShadow && css`
-    box-shadow: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
   `};
 `;
 

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js b/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.js
@@ -83,7 +83,6 @@ const HeaderNav2025 = ({
       // If we've changed from desktop to not, remove any previously-attached MoreNav event
       // listeners, BEFORE we update the flag that'd remove the elements from the DOM:
       if (isCurrentlyNotDesktop && processedItems.moreNavGroups.length) {
-        // HERE CHERE
         document.getElementById('more-nav-ul').removeEventListener('mouseleave', resetMoreNavMouse);
       }
 

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js b/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js
@@ -125,7 +125,7 @@ const SubNavMenu = styled.ul`
     border-radius: 0 0 25px 25px;
     transition: opacity ${transitionDuration}s ease;
     opacity: 0;
-    box-shadow: 0px 20px 20px 5px rgba(0, 0, 0, 0.25);
+    box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
   }
 `;
 
@@ -140,6 +140,10 @@ const SubNavItem = styled.li`
   position: relative;
   transition: background-color ${transitionDuration}s ease;
 
+  &:first-of-type {
+    border-top: none;
+  }
+
   span {
     font-weight: 100;
   }

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.js b/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.js
@@ -13,7 +13,8 @@ import {
   MoreNestedSubNavMenu,
   MoreSubNavItem,
   MoreNavNestedLink,
-  MoreSubNavLink
+  MoreSubNavLink,
+  MoreNavSubItem
 } from './MoreNav.style';
 
 const MoreNav = ({
@@ -96,7 +97,7 @@ const MoreNav = ({
                     const thisSubUrl = navHelper(subChild);
                     return (
                       // 'More Nav' sub item:
-                      <MoreSubNavItem key={thisSubUrl}>
+                      <MoreNavSubItem key={thisSubUrl}>
                         <MoreSubNavLink
                           href={thisSubUrl}
                           inline
@@ -109,7 +110,7 @@ const MoreNav = ({
                             {subChild.title}
                           </Text>
                         </MoreSubNavLink>
-                      </MoreSubNavItem>
+                      </MoreNavSubItem>
                     );
                   })}
                 </MoreNestedSubNavMenu>

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js b/src/components/Organisms/Header2025/HeaderNav2025/MoreNav.style.js
@@ -154,6 +154,12 @@ const MoreSubNavItem = styled(SubNavItem)`
   }
 `;
 
+const MoreNavSubItem = styled(MoreSubNavItem)`
+  &:first-of-type {
+    border-top: 1px solid ${({ theme }) => theme.color('grey_medium')};
+  }
+`;
+
 const MoreNavNestedLink = styled(NavLink)`
   padding: 20px 25px 22px 42px;
 
@@ -186,5 +192,6 @@ export {
   MoreNestedSubNavMenu,
   MoreSubNavItem,
   MoreNavNestedLink,
-  MoreSubNavLink
+  MoreSubNavLink,
+  MoreNavSubItem
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,7 +18,7 @@ const Header2025Wrapper = styled.header.attrs(() => ({ @@
       }
       ${({ showBoxShadow }) => showBoxShadow && css`
-        box-shadow: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+        box-shadow: 0px 13px 15px 0 rgba(0, 0, 0, 0.15);
       `};
     `;
@@ Expand Down @@