refact(header): clean up home checks

src/components/Header/index.tsx

@@ -28,9 +28,9 @@ export function Header({ isHome }: IHeaderProps) {
   }, [isHome])
 
   return (
-    <SC.HeaderWrapper isHome={isHome}>
+    <SC.HeaderWrapper className={isHome ? "is-home" : ""}>
       <WavesTop />
-      <SC.FadedBottomWave faded={!isHome}>
+      <SC.FadedBottomWave>
         <WavesBottom />
       </SC.FadedBottomWave>
 
@@ -68,10 +68,12 @@ export function Header({ isHome }: IHeaderProps) {
         }}
       />
       <SC.InnerWrapper>
-        <Link to="/">
-          <SC.Logo />
-        </Link>
-        <SC.Title>The Programmer's Hangout</SC.Title>
+        <SC.TitleWrapper>
+          <Link to="/">
+            <SC.Logo />
+          </Link>
+          <SC.Title>The Programmer's Hangout</SC.Title>
+        </SC.TitleWrapper>
         <SC.Menu>
           <MenuItem to="/about">about</MenuItem>
           <MenuItem to="/rules">rules</MenuItem>

src/components/Header/styles.tsx

@@ -4,15 +4,19 @@ import styled from "styled-components"
 import DiscordLogo from "../../images/discord-logo.svg"
 import TPHLogo from "../../images/tph-logo.svg"
 
-export const HeaderWrapper = styled.header<{ isHome: boolean }>`
+export const HeaderWrapper = styled.header`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   position: relative;
-  min-height: ${props => (props.isHome ? "100vh" : "auto")};
+  min-height: auto;
   background: #121240;
   overflow: hidden;
+
+  &.is-home {
+    min-height: 100vh;
+  }
 `
 
 export const Title = styled.h1`
@@ -33,22 +37,27 @@ export const Title = styled.h1`
   }
 `
 
-export const FadedBottomWave = styled.div<{ faded: boolean }>`
+export const FadedBottomWave = styled.div`
   position: absolute;
-  transform: translateY(${props => (props.faded ? "100%" : 0)});
+  transform: translateY(100%);
   bottom: 0;
   left: 0;
   right: 0;
   transition: opacity 0.5s, transform 0.5s;
-  opacity: ${props => (props.faded ? 0 : 1)};
+  opacity: 0;
 
-  ${props =>
-    props.faded &&
-    css`
-      svg {
-        position: static;
-      }
-    `}
+  svg {
+    position: static;
+  }
+
+  .is-home & {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .is-home & svg {
+    position: static;
+  }
 `
 
 export const StyledParticles = styled(Particles)<{ noop: number }>`