improved the ui.

frontend/pages/index.tsx

@@ -36,15 +36,13 @@ const Home = () => {
           .next-training {
             padding: 1.2em 0.3em;
           }
-
           .training-title {
-            grid-area: title;
             margin: 0.3em 0;
             padding: 0;
             font-size: 3.4rem;
             font-weight: 300;
             text-transform: uppercase;
-            color: ${theme.colors.offWhite};
+            color: ${theme.colors.presentationBackground};
             margin: 0.3em 0;
             position: relative;
           }
@@ -57,19 +55,9 @@ const Home = () => {
             position: absolute;
             top: -1rem;
             left: 1rem;
-            color: ${theme.colors.darkerblue};
-          }
-
-          :global(.training-program) {
-            grid-area: program;
+            color: ${theme.colors.highlight};
           }
-          :global(.training-archive) {
-            grid-area: archive;
-          }
-          :global(.training-meta) {
-            grid-area: info;
-          }
-          @media (min-width: 600px) {
+          @media (min-width: ${theme.midsize}) {
             .next-training {
               display: grid;
               grid-template-columns: 1fr auto;
@@ -79,11 +67,22 @@ const Home = () => {
                 'archive  archive';
               column-gap: 1em;
             }
+            .training-title {
+            grid-area: title;
+            }
+            :global(.training-meta) {
+              grid-area: info;
+            }
+            :global(.training-program) {
+              grid-area: program;
+            }
+            :global(.training-archive) {
+              grid-area: archive;
+            }
           }
-          @media (min-width: 1024px) {
+          @media (min-width: ${theme.fullsize}) {
             .next-training {
               padding: 3em 3em;
-              display: grid;
               grid-template-columns: 2fr 1fr;
               grid-template-rows: auto 1fr auto;
               grid-template-areas:
@@ -93,15 +92,16 @@ const Home = () => {
               column-gap: 2em;
               background-image: linear-gradient(
                 to bottom,
-                #84cae7,
-                #84cae7 400px,
-                #cdcdcd 400px,
-                #ebebeb 406px
+                ${theme.colors.presentationBackground},
+                ${theme.colors.presentationBackground} 400px,
+                ${theme.colors.black}44 400px,
+                ${theme.colors.background} 406px
               );
             }
             .training-title {
               font-size: 5rem;
               margin: 0;
+              color: ${theme.colors.presentation}
             }
             .training-title::before {
               font-size: 1.4rem;
@@ -109,20 +109,15 @@ const Home = () => {
               position: absolute;
               top: -0.7rem;
               left: 0.8rem;
-              color: ${theme.colors.darkerblue};
+              color: ${theme.colors.presentation};
             }
             .training-meta-wrap {
               filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
             }
             .next-training :global(.training-meta) {
-              grid-area: info;
-              width: 700px;
-              margin-left: auto;
-              padding: 2em;
-              padding-top: 11.5em;
-              color: ${theme.colors.offWhite};
+              padding-top: 6em;
+              color: ${theme.colors.white};
               height: 300px;
-              background-color: #efefef;
               background-image: url('/media/man_working_out.jpg');
               background-size: auto 100%;
               background-repeat: no-repeat;

frontend/src/app/components/AdminPage.tsx

@@ -2,6 +2,7 @@ import { FunctionComponent, useContext } from 'react'
 import AdminSideBar from './AdminSideBar'
 import { UserContext } from '../../user/hooks'
 import { LoginPage } from '../../user'
+import theme from '../../styles/theme'
 
 const AdminPage: FunctionComponent = ({ children }) => {
   const { user } = useContext(UserContext)
@@ -19,7 +20,7 @@ const AdminPage: FunctionComponent = ({ children }) => {
       <div className='admin-content'>{content}</div>
 
       <style jsx>{`
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.fullsize}) {
           .admin-page {
             min-height: 100%;
             display: grid;

frontend/src/app/components/AdminSideBar.tsx

@@ -41,10 +41,10 @@ const AdminSideBar = () => {
         nav li {
           display: block;
           padding: 0.9em;
-          border-top: 1px solid #dedede44;
+          border-top: 1px solid ${theme.colors.mobileNav}33;
         }
         nav a:last-child li {
-          border-bottom: 1px solid #dedede44;
+          border-bottom: 1px solid ${theme.colors.mobileNav}33;
         }
         nav li:hover {
           box-shadow: ${theme.bsSmall};
@@ -54,7 +54,7 @@ const AdminSideBar = () => {
           text-decoration: none;
         }
         nav a:hover {
-          color: ${theme.colors.lightblue};
+          color: ${theme.colors.mobileNav};
         }
       `}</style>
     </nav>

frontend/src/app/components/Footer.tsx

@@ -6,8 +6,8 @@ const Footer = () => (
     <style jsx>{`
       footer {
         text-align: center;
-        background-color: ${theme.colors.black};
-        color: ${theme.colors.offWhite};
+        background-color: ${theme.colors.footerBackground};
+        color: ${theme.colors.footer};
         box-shadow: ${theme.bsUp};
       }
     `}</style>

frontend/src/app/components/Header.tsx

@@ -18,10 +18,10 @@ const Header = () => (
         box-shadow: ${theme.bs};
       }
 
-      @media screen and (min-width: 768px) {
+      @media (min-width: ${theme.fullsize}) {
         header {
           display: grid;
-          grid-template-columns: 1fr auto minmax(670px, 1fr) 1fr;
+          grid-template-columns: 1fr auto minmax(800px, 1fr) 1fr;
         }
 
         header :global(.logo) {

frontend/src/app/components/Nav.tsx

@@ -1,14 +1,30 @@
 import Link from 'next/link'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCalendarAlt, faStopwatch20 } from '@fortawesome/free-solid-svg-icons'
+import { faCalendarAlt, faSearch } from '@fortawesome/free-solid-svg-icons'
 
 import theme from '../../styles/theme'
 import UserNav from '../../user/components/UserNav'
+import { useState, useRef, RefObject } from 'react'
+import { useOnClickOutside } from '../../lib/onClickOutside'
+import Search from './Search'
 
 const Nav = () => {
+  const [menu, setMenu] = useState(false)
+  const ref = useRef<HTMLDivElement>(null)
+  useOnClickOutside(ref, () => {
+    console.log('outside checkbox', menu)
+    setMenu(false)
+  })
+
   return (
-    <>
-      <input type='checkbox' id='nav-toggle' className='nav-toggle' />
+    <div ref={ref}>
+      <input
+        type='checkbox'
+        id='nav-toggle'
+        checked={menu}
+        onChange={() => setMenu(!menu)}
+        className='nav-toggle'
+      />
       <label htmlFor='nav-toggle' className='nav-toggle-label'>
         <span></span>
       </label>
@@ -22,6 +38,7 @@ const Nav = () => {
               </a>
             </Link>
           </li>
+          <Search />
           <UserNav />
         </ul>
       </nav>
@@ -36,7 +53,7 @@ const Nav = () => {
           top: 100%;
           left: 0;
           width: 100%;
-          background-color: ${theme.colors.nav};
+          background-color: ${theme.colors.mobileNavBackground};
           align-content: end;
         }
 
@@ -62,7 +79,7 @@ const Nav = () => {
         }
 
         nav :global(a) {
-          color: ${theme.colors.offWhite};
+          color: ${theme.colors.mobileNav};
           text-decoration: none;
           font-size: 1.2rem;
           text-transform: uppercase;
@@ -128,7 +145,7 @@ const Nav = () => {
           transform: rotate(-45deg) translate(0);
         }
 
-        @media screen and (min-width: 768px) {
+        @media screen and (min-width: ${theme.fullsize}) {
           .nav-toggle-label {
             display: none;
           }
@@ -172,7 +189,7 @@ const Nav = () => {
           }
         }
       `}</style>
-    </>
+    </div>
   )
 }
 

frontend/src/app/components/Search.tsx

@@ -0,0 +1,52 @@
+import { useState, useContext, FunctionComponent, useRef } from 'react'
+import Link from 'next/link'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
+import theme from '../../styles/theme'
+import { useOnClickOutside } from '../../lib/onClickOutside'
+
+const Search = () => {
+  const [menu, setMenu] = useState(false)
+  const ref = useRef<HTMLLIElement>(null)
+  useOnClickOutside(ref, () => {
+    setMenu(false)
+  })
+
+  return (
+    <>
+      <li>
+        <a
+          onClick={(event) => {
+            event.preventDefault()
+            setMenu(!menu)
+          }}
+        >
+          <FontAwesomeIcon icon={faSearch} />
+          Search
+        </a>
+
+        {menu ? (
+          <section className='searchmenu'>
+            <input type='search' />
+          </section>
+        ) : null}
+      </li>
+
+      <style jsx>{`
+        .searchmenu {
+          right: 0;
+          top: 100%;
+
+          color: ${theme.colors.mobileNav};
+          background-color: ${theme.colors.mobileNavBackground};
+          align-content: end;
+        }
+        .searchmenu :global(a) {
+          color: ${theme.colors.mobileNav};
+        }
+      `}</style>
+    </>
+  )
+}
+
+export default Search

frontend/src/app/components/TileContainer.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent } from 'react'
+import theme from '../../styles/theme'
 
 const TileContainer: FunctionComponent = ({ children }) => {
   return (
@@ -10,14 +11,14 @@ const TileContainer: FunctionComponent = ({ children }) => {
           grid-template-columns: 1fr;
         }
 
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.midsize}) {
           .tile-container {
             grid-template-columns: 1fr 1fr;
             grid-gap: 2em;
           }
         }
 
-        @media (min-width: 1024px) {
+        @media (min-width: ${theme.fullsize}) {
           .tile-container {
             grid-template-columns: 1fr 1fr 1fr;
           }

frontend/src/dropdown/components/Dropdown.tsx

@@ -1,4 +1,4 @@
-import React, { useState, ReactChild, FunctionComponent } from 'react'
+import { useState, ReactChild, FunctionComponent } from 'react'
 import onClickOutside from 'react-onclickoutside'
 
 interface IDropdown {
@@ -17,19 +17,18 @@ const Dropdown: FunctionComponent<IDropdown> & {
   const [active, setActive] = useState<undefined | string | number>()
   Dropdown.handleClickOutside = () => setOpen(false)
 
-  const activeItem =
-    active !== undefined && items && items.find(item => item.key === active)
+  const activeItem = active !== undefined && items && items.find((item) => item.key === active)
 
   return (
     <div id='dd-container'>
       <div id='dd-header'>
-        <p onClick={event => setOpen(!open)}>
+        <p onClick={(event) => setOpen(!open)}>
           {activeItem ? activeItem.title : 'please select one'}
         </p>
       </div>
       <ul id='dd-items'>
         {items &&
-          items.map(item => (
+          items.map((item) => (
             <li
               key={item.key}
               onClick={() => {
@@ -39,9 +38,7 @@ const Dropdown: FunctionComponent<IDropdown> & {
               }}
             >
               {typeof item.content === 'string' ? (
-                <p className={active === item.key ? 'active' : undefined}>
-                  {item.content}
-                </p>
+                <p className={active === item.key ? 'active' : undefined}>{item.content}</p>
               ) : (
                 item.content
               )}
@@ -81,5 +78,5 @@ const Dropdown: FunctionComponent<IDropdown> & {
 }
 
 export default onClickOutside(Dropdown, {
-  handleClickOutside: () => Dropdown.handleClickOutside
+  handleClickOutside: () => Dropdown.handleClickOutside,
 })

frontend/src/lib/onClickOutside/hooks.tsx

@@ -0,0 +1,23 @@
+import { useEffect, MutableRefObject } from 'react'
+
+export function useOnClickOutside(
+  ref: MutableRefObject<any>,
+  handler: (event: MouseEvent | TouchEvent) => void
+) {
+  useEffect(() => {
+    const listener = (event: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(event.target)) {
+        return
+      }
+      handler(event)
+    }
+
+    document.addEventListener('mousedown', listener)
+    document.addEventListener('touchstart', listener)
+
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [ref, handler])
+}

frontend/src/lib/onClickOutside/index.ts

@@ -0,0 +1,3 @@
+import { useOnClickOutside } from './hooks'
+
+export { useOnClickOutside }

frontend/src/styles/global.ts

@@ -101,25 +101,25 @@ const GlobalStyle = css.global`
     margin: 0.8em auto;
     padding: 0.5em 1em;
     border: none;
-    background-color: ${theme.colors.darkerblue};
-    color: ${theme.colors.offWhite};
+    background-color: ${theme.colors.buttonBackground};
+    color: ${theme.colors.button};
   }
 
-  fieldset {
+  form fieldset {
     border: none;
     margin: none;
     padding: 1em 0.3em;
-    background: ${theme.colors.offWhite};
+    background: ${theme.colors.background};
     box-shadow: ${theme.bsSmall};
   }
 
-  fieldset legend {
+  form fieldset legend {
     font-size: 120%;
     padding: 0.5em;
     box-shadow: ${theme.bsSmall};
   }
 
-  @media (min-width: 768px) {
+  @media (min-width: ${theme.midsize}) {
     fieldset {
       padding: 2em 3em;
     }

frontend/src/styles/theme.ts

@@ -1,8 +1,6 @@
 const theme = {
   colors: {
     lightred: '#f0b0b0',
-    logoRed: '#eb0000',
-    logoBlack: '#1a1a1a',
     black: '#393939',
     darkgrey: '#5d6a6b',
     grey: '#7f8c8d',
@@ -15,6 +13,8 @@ const theme = {
     offWhite: '#EDEDED',
     nav: '#393939e7',
 
+    logoRed: '#eb0000',
+    logoBlack: '#1a1a1a',
     color: '#424242',
     background: '#ededed',
     links: '#00A54D',
@@ -53,4 +53,49 @@ const theme = {
   bsSmall: '0 5px 10px 0 rgba(0,0,0,0.19)',
 }
 
-export default theme
+const palette2 = {
+  color1: '#18DAAE',
+  color2: '#EF476F',
+  color3: '#FFD166',
+  color4: '#118AB2',
+  color5: '#073B4C',
+  white: '#eeeeee',
+  black: '#444444',
+}
+
+const theme2 = {
+  colors: {
+    logoRed: '#eb0000',
+    logoBlack: '#1a1a1a',
+    color: palette2.black,
+    highlight: palette2.color5,
+    background: palette2.white,
+    links: palette2.color2,
+    linksHighlight: palette2.color2,
+    headerColor: palette2.black,
+    headerBackground: palette2.white,
+    footer: palette2.white,
+    footerBackground: palette2.black,
+    button: palette2.white,
+    buttonBackground: palette2.color2,
+    formColor: '#085B96',
+    formBackground: '#8CC1E7',
+    formHighlight: '#00A54D',
+    formHighlightBackground: '#88ECB6',
+    formError: '#EA3500',
+    formErrorBackground: '#FFAC94',
+    mobileNav: '#efefef',
+    mobileNavBackground: '#565656',
+    presentation: palette2.white,
+    presentationBackground: palette2.color4,
+    white: palette2.white,
+    black: palette2.black,
+  },
+  midsize: '512px',
+  fullsize: '1024px',
+  bs: '0 8px 12px 0 rgba(0,0,0,0.09)',
+  bsUp: '0 -8px 12px 0 rgba(0,0,0,0.18)',
+  bsSmall: '0 5px 10px 0 rgba(0,0,0,0.19)',
+}
+
+export default theme2

frontend/src/timer/components/Timer.tsx

@@ -155,12 +155,10 @@ const Timer = ({ training }: { training: TTraining }) => {
           padding: 0.3rem;
           min-width: 6rem;
           border: none;
-          background-color: ${theme.colors.darkblue};
-          color: ${theme.colors.offWhite};
           cursor: pointer;
         }
 
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.midsize}) {
           #timer {
             display: grid;
             grid-template-columns: 1fr 1fr;

frontend/src/training/components/BlockInstanceInputs.tsx

@@ -1,6 +1,7 @@
 import BlockInputs from './BlockInputs'
 import { TextInput } from '../../form'
 import { TBlockInstance } from '../types'
+import theme from '../../styles/theme'
 
 const BlockInstanceInputs = ({
   value,
@@ -52,7 +53,7 @@ const BlockInstanceInputs = ({
       />
 
       <style jsx>{`
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.midsize}) {
           div {
             display: grid;
             grid-template-areas:

frontend/src/training/components/EditTraining.tsx

@@ -7,6 +7,7 @@ import { TTraining } from '../types'
 import Registrations from './Registrations'
 import Ratings from './Ratings'
 import BlockList from './BlockList'
+import theme from '../../styles/theme'
 
 const EditTraining = ({ training }: { training?: TTraining }) => {
   const { values, touched, onChange, loadData } = useForm(training || emptyTraining())
@@ -104,7 +105,7 @@ const EditTraining = ({ training }: { training?: TTraining }) => {
           font-size: 120%;
         }
 
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.midsize}) {
           .fields-training {
             display: grid;
             grid-gap: 0.2em 2em;

frontend/src/training/components/RegistrationButton.tsx

@@ -60,7 +60,6 @@ const RegistrationButton: TRegisterButton = ({ training: { id, registrations } }
           margin-left: 1em;
           height: 100%;
           cursor: pointer;
-          color: ${theme.colors.darkblue};
         }
 
         .register-label span {

frontend/src/training/components/Training.tsx

@@ -44,22 +44,18 @@ const Training = ({ training }: { training: TTraining }) => {
             grid-area: title;
             font-weight: 900;
             font-size: 160%;
-            background: ${theme.colors.darkerblue};
-            color: ${theme.colors.offWhite};
+            color: ${theme.colors.color};
           }
 
           section {
             grid-area: content;
             padding: 1em 2em;
           }
-
           span.caption {
           }
 
           button {
             border: none;
-            background: ${theme.colors.darkblue};
-            color: ${theme.colors.offWhite};
             font-weight: 900;
             padding: 0.5rem;
             cursor: pointer;

frontend/src/training/components/TrainingArchive.tsx

@@ -4,7 +4,7 @@ import TrainingHint from './TrainingHint'
 import theme from '../../styles/theme'
 
 const TrainingArchive = () => {
-  const trainingsPerPage = 5
+  const trainingsPerPage = 4
   const [state, setState] = useState(0)
   const archive = usePublishedTrainingsQuery()
   const { data, error, loading } = useTrainingsQuery({
@@ -23,11 +23,11 @@ const TrainingArchive = () => {
   return (
     <section className='training-archive'>
       <h2>Training Archive</h2>
-      <ol>
+      <ul>
         {trainings.map((training) => (
           <TrainingHint key={training.id} training={training} />
         ))}
-      </ol>
+      </ul>
       {pages.map((index) => (
         <button
           key={index}
@@ -39,21 +39,43 @@ const TrainingArchive = () => {
       ))}
 
       <style jsx>{`
+        ul {
+          display: grid;
+          grid-template-columns: 1fr;
+          list-style: none;
+          margin: 1.2em 0;
+          padding: 0;
+        }
+        ul :global(a) {
+          text-decoration: none;
+          color: ${theme.colors.color};
+        }
         button {
+          display: inline;
           border: none;
           padding: 0.3em 0.6em;
           margin: 0 0.3em;
           background-color: transparent;
-          color: ${theme.colors.darkblue};
+          color: ${theme.colors.buttonBackground};
           border-radius: 6px;
           cursor: pointer;
         }
         button:hover {
-          background-color: ${theme.colors.darkblue}22;
+          background-color: ${theme.colors.buttonBackground}22;
         }
         button.active {
-          background-color: ${theme.colors.darkblue};
-          color: ${theme.colors.offWhite};
+          background-color: ${theme.colors.buttonBackground};
+          color: ${theme.colors.button};
+        }
+        @media (min-width: 480px) {
+          ul {
+            grid-template-columns: 1fr 1fr;
+          }
+        }
+        @media (min-width: 1024px) {
+          ul {
+            grid-template-columns: repeat(4, 1fr);
+          }
         }
       `}</style>
     </section>

frontend/src/training/components/TrainingHint.tsx

@@ -1,12 +1,18 @@
 import { FunctionComponent } from 'react'
 import { TTraining } from '../types'
+import Link from 'next/link'
 
 const TrainingHint: FunctionComponent<{ training: TTraining }> = ({ training }) => {
   return (
-    <div>
-      <div>{training.title}</div>
-      <div>{new Date(training.trainingDate).toLocaleString()}</div>
-    </div>
+    <Link href='/training/[id]' as={`/training/${training.id}`}>
+      <a>
+        <li>
+          <div>{training.title}</div>
+          <div>{new Date(training.trainingDate).toLocaleString()}</div>
+          <style jsx>{``}</style>
+        </li>
+      </a>
+    </Link>
   )
 }
 

frontend/src/training/components/TrainingProgram.tsx

@@ -11,7 +11,9 @@ const TrainingProgram: FunctionComponent<{ training: TTraining }> = ({ training
     <section className='training-program'>
       <Link href='/timer/[id]' as={`/timer/${training.id}`}>
         <button type='button'>
-          <span>Start Timer</span> <FontAwesomeIcon icon={faStopwatch20} height='1.2em' />
+          <span>
+            Start <FontAwesomeIcon icon={faStopwatch20} height='1.2em' /> now!{' '}
+          </span>
         </button>
       </Link>
       {training.blocks &&
@@ -29,11 +31,8 @@ const TrainingProgram: FunctionComponent<{ training: TTraining }> = ({ training
           padding: 1em 2em;
           margin: 0.8em auto;
           border: none;
-          background-color: ${theme.colors.darkblue};
-          color: ${theme.colors.offWhite};
           font-size: 140%;
           text-transform: uppercase;
-          align-items: center;
           cursor: pointer;
         }
         button span {

frontend/src/user/components/LoginPage.tsx

@@ -28,11 +28,10 @@ const LoginPage = () => {
           border-radius: 8px;
           margin: 0 auto;
           padding: 1em;
-          max-width: ${theme.maxWidth};
           box-shadow: ${theme.bsSmall};
         }
 
-        @media (min-width: 768px) {
+        @media (min-width: ${theme.midsize}) {
           .login-page {
             grid-template-columns: 1fr 1fr;
             grid-gap: 4em;

frontend/src/user/components/UserNav.tsx

@@ -1,31 +1,41 @@
-import { useState, useContext } from 'react'
+import { useState, useContext, FunctionComponent, useRef } from 'react'
 import Link from 'next/link'
 import LogoutButton from './LogoutButton'
 import LoginForm from './LoginForm'
 import { UserContext } from '../hooks'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { faUser, faUserNinja } from '@fortawesome/free-solid-svg-icons'
 import { Permission } from '../../gql'
 import theme from '../../styles/theme'
+import { useOnClickOutside } from '../../lib/onClickOutside'
 
 const UserNav = () => {
   const [menu, setMenu] = useState(false)
+  const ref = useRef<HTMLLIElement>(null)
   const { user } = useContext(UserContext)
+  useOnClickOutside(ref, () => {
+    console.log('outside menupoint', menu)
+    setMenu(false)
+  })
 
   return (
     <>
       {user?.data?.currentUser.permissions.includes(Permission.Admin) && (
         <li>
           <Link href='admin'>
-            <a>Admin</a>
+            <a>
+              <FontAwesomeIcon icon={faUserNinja} />
+              Admin
+            </a>
           </Link>
         </li>
       )}
-      <li className='menupoint'>
+      <li ref={ref} className='menupoint'>
         <a
           href=''
-          onClick={(ev) => {
-            ev.preventDefault()
+          onClick={(event) => {
+            console.log('menupoint', menu)
+            event.preventDefault()
             setMenu(!menu)
           }}
         >
@@ -51,16 +61,15 @@ const UserNav = () => {
 
       <style jsx>{`
         .usermenu {
-          position: absolute;
           right: 0;
           top: 100%;
 
-          color: ${theme.colors.offWhite};
-          background-color: ${theme.colors.nav};
+          color: ${theme.colors.mobileNav};
+          background-color: ${theme.colors.mobileNavBackground};
           align-content: end;
         }
         .usermenu :global(a) {
-          color: ${theme.colors.offWhite};
+          color: ${theme.colors.mobileNav};
         }
       `}</style>
     </>