#61 updating gatsby links and logo image

src/components/footer/footer.js

@@ -57,8 +57,6 @@ export default function footer({ data }) {
               alt={data.prismicFooter.data.footer_image_alt}
               src={data.prismicFooter.data.footer_image.url}
             />
-
-            {/*  */}
           </FooterImage>
           <SockContainer>
             <SockContent>
@@ -95,7 +93,7 @@ export default function footer({ data }) {
                   {data.prismicFooter.data.powerhouse_title}
                 </FooterHeader>
                 <AddressSection>
-                  {data.prismicFooter.data.address}{" "}
+                  {data.prismicFooter.data.address}
                 </AddressSection>
               </SocialSection>
 

src/components/header/header-styles.js

@@ -1,10 +1,10 @@
 import styled from "styled-components"
 import dimensions from "../../style/dimensions"
 import colors from "../../style/colors"
+import { Link } from "gatsby"
 
 export const NavContainer = styled.div`
   z-index: 2;
-  padding-bottom: 32px;
   &.colorChange {
     background-color: ${colors.blue900};
     color: ${colors.white900};
@@ -27,6 +27,11 @@ export const LogoLink = styled.a`
   &.home-header {
     color: ${colors.white900};
   }
+
+  img {
+    width: 186px;
+    margin-bottom: 32px;
+  }
 `
 
 export const Logo = styled.div`
@@ -73,7 +78,7 @@ export const NavLinks = styled.div`
   }
 `
 
-export const NavLink = styled.a`
+export const NavLink = styled(Link)`
   font-weight: bold;
   padding-left: 100px;
   text-decoration: none;
@@ -146,5 +151,5 @@ export const NodeLine = styled.div`
   top: 8vh;
   left: 55px;
   z-index: 3;
-  background-color: ${colors.orange900};
+  background-color: ${colors.grass900};
 `

src/components/header/header.jsx

@@ -1,6 +1,8 @@
 import React, { useState, useEffect } from "react"
 import Hamburger from "../../vectors/hamburger.svg"
 import CloseIcon from "../../vectors/CloseIcon.svg"
+import { Link } from "gatsby"
+
 import {
   NavContainer,
   Logo,
@@ -17,6 +19,8 @@ import {
 import Circle from "../../vectors/circle.svg"
 import { NavText } from "../../style/type-styles"
 import { createGlobalStyle } from "styled-components"
+import LogoHomepage from "../../images/navlogohomepage.png"
+import NavLogo from "../../images/navlogo.png"
 
 const GlobalStyle = createGlobalStyle`
    body {
@@ -27,28 +31,34 @@ const GlobalStyle = createGlobalStyle`
 export const Header = ({ home }) => {
   const [open, setOpen] = useState(false)
   const [colorChange, setColorchange] = useState(false)
+  const [logoImage, setLogoImage] = useState()
   const changeNavbarColor = () => {
     if (typeof window !== "undefined" && window.scrollY >= 80) {
       setColorchange(true)
+      setLogoImage(LogoHomepage)
     } else {
       setColorchange(false)
+      !home && setLogoImage(NavLogo)
     }
   }
 
+  useEffect(() => {
+    home ? setLogoImage(LogoHomepage) : setLogoImage(NavLogo)
+  }, [setLogoImage])
+
   typeof window !== "undefined" &&
     window.addEventListener("scroll", changeNavbarColor)
 
   return (
     <NavContainer className={colorChange ? "navbar colorChange" : "navbar"}>
       <GlobalStyle open={open ? "open" : ""} />
-
       <Logo
         alt="PowerHouse Logo"
         className={colorChange ? "navbar colorChange" : "navbar"}
       >
         <div>
           <LogoLink className={home === true ? "home-header" : ""} href="/">
-            PowerHouse
+            <img src={logoImage} />
           </LogoLink>
         </div>
       </Logo>
@@ -69,27 +79,27 @@ export const Header = ({ home }) => {
           <MobileLink>
             <Circle />
 
-            <a href="/">PowerHouse</a>
+            <Link href="/">PowerHouse</Link>
           </MobileLink>
           <MobileLink>
             <Circle />
 
-            <a href="/about">About</a>
+            <Link href="/about">About</Link>
           </MobileLink>
           <MobileLink>
             <Circle />
 
-            <a href="/process">Process</a>
+            <Link href="/process">Process</Link>
           </MobileLink>
           <MobileLink>
             <Circle />
 
-            <a href="/products">Products</a>
+            <Link href="/products">Products</Link>
           </MobileLink>
           <MobileLink>
             <Circle />
 
-            <a href="/solutions">Solutions</a>
+            <Link href="/solutions">Solutions</Link>
           </MobileLink>
         </MobileLinks>
       </OpenNavContainer>