fix: design review Nav2025 tweaks (#694)

comicrelief · Jan 21, 2025 · 39377fe · 39377fe
1 parent ec3a2b0
commit 39377fe
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 8 deletions.
diff --git a/src/components/Organisms/Header2025/Header2025.js b/src/components/Organisms/Header2025/Header2025.js
@@ -9,9 +9,10 @@ import {
 } from './Header2025.style';
 
 const Header2025 = ({
-  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null, characterLimit = 60, ...rest
+  navItems = {}, metaIcons, campaign = 'Comic Relief', donateButton = null,
+  characterLimit = 60, showBoxShadow = false, ...rest
 }) => (
-  <Header2025Wrapper navItems {...rest}>
+  <Header2025Wrapper navItems showBoxShadow={showBoxShadow} {...rest}>
     <InnerWrapper>
       <Brand>
         <Logos
@@ -56,7 +57,8 @@ Header2025.propTypes = {
   // ... and is supplied separately to allow more render control:
   donateButton: PropTypes.node,
   campaign: PropTypes.string,
-  characterLimit: PropTypes.number
+  characterLimit: PropTypes.number,
+  showBoxShadow: PropTypes.bool
 };
 
 export default Header2025;
diff --git a/src/components/Organisms/Header2025/Header2025.style.js b/src/components/Organisms/Header2025/Header2025.style.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import zIndex from '../../../theme/shared/zIndex';
 import containers from '../../../theme/shared/containers';
@@ -16,6 +16,10 @@ const Header2025Wrapper = styled.header.attrs(() => ({
   @media ${({ theme }) => theme.allBreakpoints('Nav')} {
     height: auto;
   }
+
+  ${({ showBoxShadow }) => showBoxShadow && css`
+    box-shadow: 0 5px 15px 0 ${({ theme }) => theme.color('grey_4')};
+  `};
 `;
 
 const InnerWrapper = styled.div`

diff --git a/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js b/src/components/Organisms/Header2025/HeaderNav2025/HeaderNav2025.style.js
@@ -140,10 +140,6 @@ const SubNavItem = styled.li`
   position: relative;
   transition: background-color ${transitionDuration}s ease;
 
-  &:first-of-type {
-    border-top: none;
-  }
-
   span {
     font-weight: 100;
   }