Merge pull request #50 from bjcarlson42/redesign

feat: redesign

components/Container.js

@@ -1,41 +1,34 @@
-import React from 'react'
-import { useColorMode, Flex, Text, Link, IconButton, SimpleGrid, Box } from '@chakra-ui/react'
-import { FiGithub, FiTwitter, FiLinkedin, FiYoutube, FiMail } from "react-icons/fi"
-
-import { Footer } from '../components/Footer'
+import {
+  useColorModeValue,
+  Flex,
+  Box,
+} from '@chakra-ui/react'
+import Footer from '../components/Footer'
 import Navigation from '../components/Navigation'
-import MobileNavigation from '../components/MobileNavigation'
-import MobileNavigationTop from '../components/MobileNavigationTop'
-
+import Hero from './Hero'
+import { useRouter } from 'next/router'
 
 const Container = ({ children }) => {
-  const { colorMode } = useColorMode()
-  const bgColor = {
-    light: 'white',
-    dark: '#15161a'
-  }
-  const color = {
-    light: 'black',
-    dark: 'white'
-  }
-
+  const router = useRouter()
   return (
     <>
+      <Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
       <Navigation />
-      <MobileNavigationTop page="Home" />
+      <Box h={8} bgColor={useColorModeValue("rgb(248, 250, 252)", "gray.900")} />
       <Flex
         as="main"
         justifyContent="center"
         flexDirection="column"
-        bg={bgColor[colorMode]}
-        color={color[colorMode]}
-        px={[0, 4, 4]}
-        mt={0, 8, 8}
+        bg={useColorModeValue("#ffffff", "#15161a")}
+        color={useColorModeValue("#000000", "#ffffff")}
       >
-        {children}
+        {/* hero outside main Flex to avoid px */}
+        {router.pathname == '/' && <Hero />}
+        <Flex px={4} flexDir="column" minH="90vh">
+          {children}
+        </Flex>
         <Footer />
       </Flex>
-      <MobileNavigation />
     </>
   )
 }

components/CustomIcons.js

@@ -82,38 +82,4 @@ export const MailIcon = (props) => (
             </g>
         </svg>
     </Icon>
-)
-
-export const CodeIcon = (props) => (
-    <Icon {...props}>
-        <svg viewBox="0 0 24 24">
-            <g
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            >
-                <polyline points="16 18 22 12 16 6"></polyline>
-                <polyline points="8 6 2 12 8 18"></polyline>
-            </g>
-        </svg>
-    </Icon>
-)
-
-export const WOTDIcon = (props) => (
-    <Icon {...props}>
-        <svg viewBox="0 0 24 24">
-            <g
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-            >
-                <path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path>
-                <path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path>
-            </g>
-        </svg>
-    </Icon>
-)
+)

components/DarkModeSwitch.js

@@ -9,6 +9,7 @@ const DarkModeSwitch = () => {
   }
   return (
     <IconButton
+      variant="ghost"
       aria-label="Toggle dark mode"
       icon={colorMode === 'dark' ? <SunIcon /> : <MoonIcon />}
       onClick={toggleColorMode}