@newskit-render/core 1.42.1 → 1.44.2

package/components/footer/__snapshots__/index.test.tsx.snap

@@ -255,7 +255,7 @@ exports[`Footer tests should render footer 1`] = `
           >
             <svg
               class="emotion-5"
-              height="40px"
+              height="48px"
               viewBox="0 0 244 40"
             >
               <title>
@@ -263,15 +263,17 @@ exports[`Footer tests should render footer 1`] = `
               </title>
               <path
                 d="M61.846.936c3.35.413 4.944 4.005 4.92 8.746l.017-.013c-5.497 4.462-16.323 7.515-26.958 1.71l.011-.016c1.568.832 3.224 1.475 5.172 1.715 2.386.294 4.303-1.023 6.043-2.889l.124-.134.062-.068.123-.137.123-.138.122-.14.121-.142.061-.071.121-.144.12-.145.146-.178.073-.09.182-.226.181-.228.144-.184.144-.185.143-.185.215-.279 1.091-1.431.209-.271.209-.269.14-.178.14-.177.14-.175.141-.173.141-.172.113-.136.113-.135.114-.133.114-.132.057-.065.114-.13.057-.064.115-.127.173-.187.116-.123.175-.18.117-.118C58.328 1.663 59.933.7 61.846.936z"
-                fill="#aebfff"
+                fill="white"
               />
               <path
                 d="M26.763 28.981l.011.013c-1.414-.671-2.883-1.176-4.519-1.378-1.738-.214-3.244.513-4.634 1.704l-.11.095-.163.146-.108.1-.108.101-.268.261-.106.107-.106.109-.106.11-.053.056-.105.112-.053.057-.125.136-.124.138-.124.139-.062.07-.123.142-.123.143-.122.145-.122.146-.061.073-.15.183-.075.092-.149.185-.075.093-.149.187-.149.188-.223.283-.296.38-.671.866-.222.285-.222.283-.148.188-.223.28-.149.185-.149.183-.149.182-.15.18-.117.139-.118.138-.118.136-.118.135-.119.133-.119.132-.119.13-.06.064-.12.127-.1.104-.1.103-.1.101-.151.15-.101.098-.102.096-.051.048-.102.094-.206.183-.103.089-.052.044-.104.086c-1.302 1.066-2.706 1.698-4.305 1.5-3.321-.41-4.98-3.93-5.064-8.601l-.097.09c6.351-5.963 17.155-6.757 26.506-2.264z"
-                fill="#3358cc"
+                fill="white"
+                fill-opacity="0.4"
               />
               <path
                 d="M42.216 35.925c-2.861-.398-5.212-1.275-7.302-2.318l-.189-.095-.188-.096-.186-.097-.231-.122-.229-.123-.182-.099-.226-.125-.224-.126-.178-.101-.177-.102-.264-.153-.349-.205-.278-.166-.276-.166-.411-.249-1.214-.738-.334-.201-.333-.199-2.669-1.45-.012-.013c-9.258-4.447-19.94-3.714-26.315 2.087l-.095.088C.156 20.101 8.779 2.598 25.068 4.608c2.854.352 5.141 1.176 7.14 2.181l.178.09.177.091.175.092.087.046.173.093.172.094.17.095.085.048.211.12.209.121.166.097.165.098.164.098.163.099.162.099.161.099.16.1.261.164.13.082.258.164.256.164 1.137.733.25.161.25.159.312.197.312.194a31.02 31.02 0 0 0 1.568.911l.199.106c10.506 5.694 21.166 2.775 26.7-1.604l.149-.12c-.055 10.998-8.815 28.185-24.55 26.243z"
-                fill="#577ffb"
+                fill="white"
+                fill-opacity="0.701961"
               />
             </svg>
           </div>

package/components/header/index.test.tsx

@@ -53,4 +53,21 @@ describe('Header tests', () => {
       '/section-three'
     )
   })
+
+  test('render Account link if there is user data', () => {
+    const user = {
+      firstName: '',
+      lastName: '',
+      cpn: '',
+      email: '',
+      hash: '',
+      mobile: '',
+      phoneNumber: '',
+      dateOfBirth: '',
+      subscriptions: [],
+      paymentFailure: { active: false },
+    }
+    const { getByTestId } = renderWithTheme(Header, { user })
+    expect(getByTestId('account-link')).toBeInTheDocument()
+  })
 })

package/components/header/index.tsx

@@ -31,12 +31,14 @@ import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { AppContext } from '../../app-context/AppContext'
 import { handleEnterKeyPress } from '../../helpers/a11y'
+import IconNavLink from '../common/iconNavLink'
+import { IconAccount } from '../common/icons/IconAccount'
 
-export const headerSize = 'sizing090'
+export const headerSize = 'sizing100'
 
 const StyledHeader = styled.div`
   ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'customInterfaceBrand')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   a,
   a:visited:not(:disabled) {
     ${getColorCssFromTheme('color', 'white')};
@@ -44,14 +46,14 @@ const StyledHeader = styled.div`
     line-height: ${getFontsFromTheme('fontLineHeight040')};
   }
   ${getMediaQueryFromTheme('xs')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing000')};
     ${getSizingCssFromTheme('paddingRight', 'sizing000')};
   }
   ${getMediaQueryFromTheme('lg')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing090')};
     ${getSizingCssFromTheme('paddingRight', 'sizing090')};
   }
@@ -111,14 +113,14 @@ const NavigationContainer = styled.div<NavigationProps>`
   overflow: auto;
   width: 100%;
   min-height: 100vh;
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   left: 0;
   ${getSizingCssFromTheme('top', headerSize)}
-  z-index: 1;
+  z-index: 2;
   display: ${(props) => (props.show ? 'block' : 'none')};
 
   ${getMediaQueryFromTheme('md')} {
-    display: block;
+    display: flex;
     position: relative;
     overflow: hidden;
     width: initial;
@@ -127,6 +129,7 @@ const NavigationContainer = styled.div<NavigationProps>`
     left: initial;
     top: initial;
     z-index: 1;
+    ${getSizingCssFromTheme('height', 'sizing080')}
   }
 `
 
@@ -146,12 +149,10 @@ const Navigation = styled.div`
 const NavButton = ({
   buttonText,
   href,
-  isMobile,
   ariaLabel,
 }: {
   buttonText: string
   href: string
-  isMobile: boolean
   isLast?: boolean
   ariaLabel?: string
 }) => (
@@ -159,9 +160,12 @@ const NavButton = ({
     as="span"
     spaceInline={{
       xs: 'space000',
-      md: 'space050',
+      md: 'space040',
+    }}
+    spaceStack={{
+      xs: 'space050',
+      md: 'space000',
     }}
-    spaceStack={isMobile ? 'space050' : ''}
   >
     <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
   </Block>
@@ -228,8 +232,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 stackDistribution="flex-end"
                 wrap="nowrap"
               >
-                <NavigationContainer show={showMenu}>
-                  <Navigation>
+                <NavigationContainer
+                  show={showMenu}
+                  data-testid="NavigationContainer"
+                >
+                  <Navigation data-testid="Navigation">
                     {showMenu && (
                       <Block
                         spaceStack="space050"
@@ -239,21 +246,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     <NavButton
                       buttonText="Section One"
                       href="/section-one"
-                      isMobile={showMenu}
                       ariaLabel="Section One Link"
                     />
                     <NavButton
                       buttonText="Section Two"
                       href="/section-two"
-                      isMobile={showMenu}
                       ariaLabel="Section Two Link"
                     />
                     <NavButton
                       buttonText="Section Three"
                       href="/section-three"
-                      isMobile={showMenu}
                       ariaLabel="Section Three Link"
                     />
+                    {user && (
+                      <IconNavLink
+                        icon={<IconAccount data-testid="account-link" />}
+                        href="/account"
+                        text="Account"
+                        spaceInline="space040"
+                        typographyPreset="utilityMeta020"
+                        stylePreset="linkStandaloneInverse"
+                      />
+                    )}
                   </Navigation>
                 </NavigationContainer>
                 <Visible xs sm>

package/cypress/e2e/account/account-subscription.spec.js

@@ -219,4 +219,49 @@ describe('Account Subscription & Cancellation', () => {
     cy.get('[data-testid="banner-container"]').should('not.exist')
     cy.clearLocalStorage()
   })
+
+  it('should show modal when Cancel subscription link is clicked but user is in payment failure', () => {
+    cy.GetAcsSession('withSub')
+    cy.mockConsent()
+    cy.visit('/account/subscription-and-billing', {
+      onBeforeLoad: (win) => {
+        let nextData
+
+        Object.defineProperty(win, '__NEXT_DATA__', {
+          set(o) {
+            // eslint-disable-next-line no-param-reassign
+            o.props.pageProps.user.paymentFailure = {
+              active: true,
+              startDate: new Date().toISOString(),
+            }
+            nextData = o
+          },
+          get() {
+            return nextData
+          },
+        })
+      },
+    })
+    cy.get('a[href="/account/cancellation"]').should('be.visible').click()
+
+    cy.contains('You have outstanding payments')
+  })
+
+  it('should show paypal subscription', () => {
+    cy.GetAcsSession('paypalSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.contains('[data-testid="payment-type"]', 'Paypal account')
+  })
+
+  it('should show inline message for paypal subscription', () => {
+    cy.GetAcsSession('paypalSub')
+    cy.mockConsentAndVisit('/account/subscription-and-billing')
+    cy.get('a[href="/account/payment"]')
+      .should('be.visible')
+      .click({ force: true })
+    cy.contains(
+      '[data-testid="Zuora-inline"]',
+      'To update your Paypal credentials, please speak to one of our advisors on xxxx-xxx-xxxx or add a new payment method via credit/debit card using the form below.'
+    )
+  })
 })

package/cypress/support/commands.js

@@ -25,7 +25,11 @@ const userMap = {
   withSub: {
     username: 'render.e2e.sub@yopmail.com',
     password: 'Ad45p0-swq151@',
-  }
+  },
+  paypalSub: {
+    username: 'render-paypal-payment@yopmail.com',
+    password: 'testing123',
+  },
 }
 
 Cypress.Commands.add('GetAcsSession', (user = 'default') => {

package/infrastructure/.circleci/config.yml

@@ -255,6 +255,7 @@ orbs:
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.OKTA_CLIENT_SECRET=${OKTA_CLIENT_SECRET}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.OKTA_DOMAIN=${OKTA_DOMAIN}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.NEXTAUTH_URL=${NEXTAUTH_URL}"' >> $BASH_ENV
+                echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.NEXTAUTH_SECRET=${NEXTAUTH_SECRET}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_PASSWORD=${SN_PASSWORD}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_USERNAME=${SN_USERNAME}"' >> $BASH_ENV
                 echo 'export HELM_OPT_SET="$HELM_OPT_SET --set secret.items.SN_ENVIRONMENT=${SN_ENVIRONMENT}"' >> $BASH_ENV

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@newskit-render/core",
-  "version": "1.42.1",
+  "version": "1.44.2",
   "description": "Newskit Render - Core package",
   "author": "",
   "license": "UNLICENSED",
@@ -34,12 +34,12 @@
   "dependencies": {
     "@apollo/client": "3.4.16",
     "@newskit-render/api": "^0.18.0",
-    "@newskit-render/auth": "^0.31.1",
-    "@newskit-render/checkout": "^0.26.0",
-    "@newskit-render/feature-flags": "^0.12.0",
-    "@newskit-render/feed": "^0.5.1",
-    "@newskit-render/my-account": "^0.151.0",
-    "@newskit-render/shared-components": "^0.43.0",
+    "@newskit-render/auth": "^0.31.3",
+    "@newskit-render/checkout": "^0.26.3",
+    "@newskit-render/feature-flags": "^0.13.0",
+    "@newskit-render/feed": "^0.5.2",
+    "@newskit-render/my-account": "^0.152.0",
+    "@newskit-render/shared-components": "^0.45.0",
     "@newskit-render/validation": "^0.39.1",
     "cross-fetch": "3.1.5",
     "graphql": "15.6.0",

package/pages/preview/[articleId]/version/[versionId]/index.tsx

@@ -61,21 +61,23 @@ const PreviewArticle = ({
 
   return (
     <PageWithAuth onDenied={accessDeniedPage} isLoading={showOnLoading}>
-      <CookieView>
-        <Button size="medium" onClick={signOut}>
-          sign out
-        </Button>
-      </CookieView>
-      <ArticlePage
-        section={section}
-        articleURL={articleURL}
-        {...universalArticle}
-        siteHost={siteHost}
-        gscId={gscId}
-        twitterUsername={twitterUsername}
-        highlights={highlights}
-        relatedArticles={relatedArticles}
-      />
+      <>
+        <CookieView>
+          <Button size="medium" onClick={() => signOut()}>
+            sign out
+          </Button>
+        </CookieView>
+        <ArticlePage
+          section={section}
+          articleURL={articleURL}
+          {...universalArticle}
+          siteHost={siteHost}
+          gscId={gscId}
+          twitterUsername={twitterUsername}
+          highlights={highlights}
+          relatedArticles={relatedArticles}
+        />
+      </>
     </PageWithAuth>
   )
 }

package/temp/_app.tsx

@@ -13,6 +13,215 @@ if (!process.browser) {
 }
 
 const GlobalStyling = css`
+  @font-face {
+    font-family: GillSansMTStd-Medium;
+    src: url('/fonts/GillSansMTStd-Medium.otf');
+  }
+  @font-face {
+    font-family: TimesModern-Bold;
+    src: url('/fonts/TimesDigital-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesModern-Regular;
+    src: url('/fonts/TimesDigital-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TimesDigitalW04-Regular;
+    src: url('/fonts/TimesDigitalW04-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: Montserrat;
+    src: url('/fonts/Montserrat-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Bold;
+    src: url('/fonts/TheSun-Bold.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-HeavyNarrow;
+    src: url('/fonts/TheSun-HeavyNarrow.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Regular;
+    src: url('/fonts/TheSun-Regular.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: TheSun-Medium;
+    src: url('/fonts/TheSun-Medium.ttf') format('truetype');
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-regular-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-regular-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-italic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-italic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-medium-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-medium-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-mediumitalic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-mediumitalic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-bold-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-bold-webfont.woff') format('woff');
+    font-style: normal;
+    font-weight: 700;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'DM Sans';
+    src: url('/fonts/dmsans-bolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/dmsans-bolditalic-webfont.woff') format('woff');
+    font-style: italic;
+    font-weight: 700;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-bold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-bold-webfont.woff') format('woff');
+    font-weight: 700;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-bolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-bolditalic-webfont.woff') format('woff');
+    font-weight: normal;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-extrabold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-extrabold-webfont.woff') format('woff');
+    font-weight: 800;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-extrabolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-extrabolditalic-webfont.woff') format('woff');
+    font-weight: 800;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-italic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-italic-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-light-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-light-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-lightitalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-lightitalic-webfont.woff') format('woff');
+    font-weight: 300;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-medium-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-medium-webfont.woff') format('woff');
+    font-weight: 500;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-mediumitalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-mediumitalic-webfont.woff') format('woff');
+    font-weight: 500;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-regular-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-regular-webfont.woff') format('woff');
+    font-weight: 400;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-semibold-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-semibold-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: normal;
+  }
+  @font-face {
+    font-family: 'Poppins';
+    src: url('/fonts/poppins-semibolditalic-webfont.woff2') format('woff2'),
+      url('/fonts/poppins-semibolditalic-webfont.woff') format('woff');
+    font-weight: 600;
+    font-style: italic;
+  }
+  @font-face {
+    font-family: 'DM Mono';
+    src: url('/fonts/dmmono-medium.woff2') format('woff2'),
+      url('/fonts/dmmono-medium.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-regular.woff2') format('woff2'),
+      url('/fonts/bitter-regular.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-medium.woff2') format('woff2'),
+      url('/fonts/bitter-medium.woff') format('woff');
+    font-style: normal;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-mediumitalic.woff2') format('woff2'),
+      url('/fonts/bitter-mediumitalic.woff') format('woff');
+    font-style: italic;
+    font-weight: 500;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'Bitter';
+    src: url('/fonts/bitter-semibold.woff2') format('woff2'),
+      url('/fonts/bitter-semibold.woff') format('woff');
+    font-style: normal;
+    font-weight: 600;
+    font-display: swap;
+  }
+
   html,
   body {
     padding: 0;

package/temp/header.tsx

@@ -18,12 +18,14 @@ import NewsKitLogoFull from '../common/NewskitLogo'
 import NewsKitLogoShort from '../common/NewskitLogoShort'
 import NavLink from '../common/NavLink'
 import { handleEnterKeyPress } from '../../helpers/a11y'
+import IconNavLink from '../common/iconNavLink'
+import { IconAccount } from '../common/icons/IconAccount'
 
-export const headerSize = 'sizing090'
+export const headerSize = 'sizing100'
 
 const StyledHeader = styled.div`
   ${getSizingCssFromTheme('height', headerSize)}
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   a,
   a:visited:not(:disabled) {
     ${getColorCssFromTheme('color', 'white')};
@@ -31,14 +33,14 @@ const StyledHeader = styled.div`
     line-height: ${getFontsFromTheme('fontLineHeight040')};
   }
   ${getMediaQueryFromTheme('xs')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing000')};
     ${getSizingCssFromTheme('paddingRight', 'sizing000')};
   }
   ${getMediaQueryFromTheme('lg')} {
-    ${getSizingCssFromTheme('paddingTop', 'sizing030')};
-    ${getSizingCssFromTheme('paddingBottom', 'sizing030')};
+    ${getSizingCssFromTheme('paddingTop', 'sizing040')};
+    ${getSizingCssFromTheme('paddingBottom', 'sizing040')};
     ${getSizingCssFromTheme('paddingLeft', 'sizing090')};
     ${getSizingCssFromTheme('paddingRight', 'sizing090')};
   }
@@ -53,14 +55,14 @@ const NavigationContainer = styled.div<NavigationProps>`
   overflow: auto;
   width: 100%;
   min-height: 100vh;
-  ${getColorCssFromTheme('backgroundColor', 'neutral100')};
+  ${getColorCssFromTheme('backgroundColor', 'interfaceBrand010')};
   left: 0;
   ${getSizingCssFromTheme('top', headerSize)}
-  z-index: 1;
+  z-index: 2;
   display: ${(props) => (props.show ? 'block' : 'none')};
 
   ${getMediaQueryFromTheme('md')} {
-    display: block;
+    display: flex;
     position: relative;
     overflow: auto;
     width: initial;
@@ -69,6 +71,7 @@ const NavigationContainer = styled.div<NavigationProps>`
     left: initial;
     top: initial;
     z-index: 1;
+    ${getSizingCssFromTheme('height', 'sizing080')}
   }
 `
 
@@ -133,12 +136,10 @@ const BannerContainer = styled(Block)`
 const NavButton = ({
   buttonText,
   href,
-  isMobile,
   ariaLabel,
 }: {
   buttonText: string
   href: string
-  isMobile: boolean
   isLast?: boolean
   ariaLabel?: string
 }) => (
@@ -146,9 +147,12 @@ const NavButton = ({
     as="span"
     spaceInline={{
       xs: 'space000',
-      md: 'space050',
+      md: 'space040',
+    }}
+    spaceStack={{
+      xs: 'space050',
+      md: 'space000',
     }}
-    spaceStack={isMobile && 'space050'}
   >
     <NavLink href={href} ariaLabel={ariaLabel} buttonText={buttonText} />
   </Block>
@@ -191,8 +195,11 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                 stackDistribution="flex-end"
                 wrap="nowrap"
               >
-                <NavigationContainer show={showMenu}>
-                  <Navigation>
+                <NavigationContainer
+                  show={showMenu}
+                  data-testid="NavigationContainer"
+                >
+                  <Navigation data-testid="Navigation">
                     {showMenu && (
                       <Block
                         spaceStack="space050"
@@ -202,21 +209,28 @@ const Header: React.FC<{ user: UserData }> = ({ user }) => {
                     <NavButton
                       buttonText="Section One"
                       href="/section-one"
-                      isMobile={showMenu}
                       ariaLabel="Section One Link"
                     />
                     <NavButton
                       buttonText="Section Two"
                       href="/section-two"
-                      isMobile={showMenu}
                       ariaLabel="Section Two Link"
                     />
                     <NavButton
                       buttonText="Section Three"
                       href="/section-three"
-                      isMobile={showMenu}
                       ariaLabel="Section Three Link"
                     />
+                    {user && (
+                      <IconNavLink
+                        icon={<IconAccount data-testid="account-link" />}
+                        href="/account"
+                        text="Account"
+                        spaceInline="space040"
+                        typographyPreset="utilityMeta020"
+                        stylePreset="linkStandaloneInverse"
+                      />
+                    )}
                   </Navigation>
                 </NavigationContainer>
                 <Visible xs sm>