#26 updating text styles

Scout-NU · Apr 2, 2021 · 46943ac · 46943ac
1 parent f2b51ec
commit 46943ac
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 19 deletions.
diff --git a/src/components/header/header-styles.js b/src/components/header/header-styles.js
@@ -39,9 +39,8 @@ export const NavLinks = styled.div`
   }
 `
 
-export const NavLink = styled.a`
+export const NavLink = styled.div`
   font-weight: bold;
-  font-size: 16px;
   padding-left: 100px;
   text-decoration: none;
   color: #000000;

diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
@@ -8,32 +8,41 @@ import {
   NavLink,
 } from "./header-styles"
 
+import { NavText } from "../../style/type-styles"
+
 export const Header = () => {
   const [open, setOpen] = useState(false)
-  const [colorChange, setColorchange] = useState(false);
-  const changeNavbarColor = () =>{
-     if(typeof window !== "undefined" && window.scrollY >= 80){
-       setColorchange(true);
-     }
-     else{
-       setColorchange(false);
-     }
-  };
-  typeof window !== "undefined" && window.addEventListener('scroll', changeNavbarColor);
-
+  const [colorChange, setColorchange] = useState(false)
+  const changeNavbarColor = () => {
+    if (typeof window !== "undefined" && window.scrollY >= 80) {
+      setColorchange(true)
+    } else {
+      setColorchange(false)
+    }
+  }
+  typeof window !== "undefined" &&
+    window.addEventListener("scroll", changeNavbarColor)
 
   return (
-    <NavContainer className={colorChange ? 'navbar colorChange' : 'navbar'}>
+    <NavContainer className={colorChange ? "navbar colorChange" : "navbar"}>
       <Logo>PowerHouse</Logo>
 
       <MobileIcon onClick={() => setOpen(!open)} className={open ? "open" : ""}>
         <Hamburger />
       </MobileIcon>
       <NavLinks>
-        <NavLink href="/about">ABOUT</NavLink>
-        <NavLink href="/process">PROCESS</NavLink>
-        <NavLink href="/products">PRODUCTS</NavLink>
-        <NavLink href="/solutions">SOLUTIONS</NavLink>
+        <NavLink href="/about">
+          <NavText>ABOUT</NavText>
+        </NavLink>
+        <NavLink href="/process">
+          <NavText>PROCESS</NavText>
+        </NavLink>
+        <NavLink href="/products">
+          <NavText>PRODUCTS</NavText>
+        </NavLink>
+        <NavLink href="/solutions">
+          <NavText>SOLUTIONS</NavText>
+        </NavLink>
       </NavLinks>
     </NavContainer>
   )

diff --git a/src/style/type-styles.js b/src/style/type-styles.js
@@ -5,6 +5,7 @@ const minSize = {
   h2: 30,
   h3: 20,
   p: 16,
+  nav: 16,
 }
 
 const devices = {
@@ -20,6 +21,7 @@ const fontSizes = {
   h2: `calc(${minSize.h2}px + (48 - ${minSize.h2}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   h3: `calc(${minSize.h3}px + (32 - ${minSize.h3}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
   p: `calc(${minSize.p}px + (24 - ${minSize.p}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
+  NavText: `calc(${minSize.nav}px + (24 - ${minSize.nav}) * ((100vw - ${devices.mobile}px) / (${devices.desktop} - ${devices.mobile})))`,
 }
 
 const H1 = styled.h1`
@@ -41,4 +43,10 @@ const P = styled.p`
   font-size: ${fontSizes.p};
 `
 
-export { H1, H2, H3, P }
+const NavText = styled.a`
+  font-size: ${fontSizes.nav};
+
+
+`
+
+export { H1, H2, H3, P, NavText }