task: Update nav bar

src/components/Icons/SetupIcon.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import NavbarIcon from '~/components/NavbarIcon/navbarIcon'
+import { IconType } from './types'
+import { Monitor } from 'grommet-icons'
+
+const Icon: IconType = ({ isFilled }) => (
+  <NavbarIcon xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    {isFilled ? <Monitor fill="red" /> : <Monitor fill="red" />}
+  </NavbarIcon>
+)
+
+export default Icon

src/components/Layout/layout.tsx

@@ -11,13 +11,23 @@ const Container = styled.div`
   position: relative;
 
   @media (min-width: 750px) {
-    margin-top: 0;
-    margin-left: 45vw;
+    margin-left: ${props => props.theme.margin};
     margin-bottom: 20px;
+    margin-top: ${props => props.theme.marginTop};
     position: relative;
   }
 `
 
+const theme = {
+  margin: '45vw',
+  marginTop: '15vh'
+}
+
+const themeCenter = {
+  margin: '20vw',
+  marginTop: '0'
+}
+
 // TODO:  Move values to a constants file
 export const Main = styled.main`
   background: var(--background);
@@ -49,10 +59,12 @@ const Layout: React.FunctionComponent<{
   imageBackgroundColor?: string
 }> = ({ pathname, children, image, imageTitle, imageBackgroundColor }) => {
   const [isApp, setIsApp] = React.useState(false)
+  const [hasImage, setHasImage] = React.useState(false)
   React.useEffect(() => setIsApp('standalone' in window.navigator), [])
+  React.useEffect(() => setHasImage(!!image), [])
 
   return (
-    <Container>
+    <Container theme={hasImage ? theme : themeCenter}>
       {image && (
         <Image
           fluid={image}

src/components/MainStyles/mainStyles.tsx

@@ -81,7 +81,7 @@ const MainStyles = createGlobalStyle`
 
   body {
     background: var(--background-color);
-    color: var(--lightGray);
+    color: var(--white);
     font-family: var(--primaryFont);
     font-feature-settings: 'calt' 1;
     font-variant-ligatures: contextual;

src/components/Navbar/navbar.tsx

@@ -4,6 +4,7 @@ import NavbarLink from '~/components/NavbarLink/navbarLink'
 import { IconProps } from '~/components/Icons/types'
 import HomeIcon from '~/components/Icons/HomeIcon'
 import ResumeIcon from '~/components/Icons/ResumeIcon'
+import SetupIcon from '~/components/Icons/SetupIcon'
 
 const NavbarWrapper = styled.nav`
   position: fixed;
@@ -63,7 +64,7 @@ const Navbar: React.FunctionComponent<{
       <NavbarLink
         to="/using"
         isActive={new RegExp('^/using').test(pathname)}
-        Icon={(props: IconProps) => <ResumeIcon {...props} />}
+        Icon={(props: IconProps) => <SetupIcon {...props} />}
         label="My Setup"
       />
     </InnerNavbarWrapper>