feat: style other pages to match home

src/components/Header/index.tsx

@@ -1,7 +1,12 @@
 import { Link } from "gatsby"
-import React, { PropsWithChildren } from "react"
+import React, { PropsWithChildren, useLayoutEffect, useState } from "react"
+import { WavesBottom, WavesTop } from "../Waves"
 import * as SC from "./styles"
 
+interface IHeaderProps {
+  isHome: boolean
+}
+
 function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   return (
     <SC.MenuItem to={to} activeClassName="active">
@@ -11,12 +16,22 @@ function MenuItem({ children, to }: PropsWithChildren<{ to: string }>) {
   )
 }
 
-export function Header() {
+export function Header({ isHome }: IHeaderProps) {
+  // Hack to force Particle.js to rerender
+  const [noop, setNoop] = useState(0)
+  useLayoutEffect(() => {
+    setNoop(prevState => prevState + 1)
+  }, [isHome])
+
   return (
-    <SC.HeaderWrapper>
-      <SC.StyledWavesTop />
-      <SC.StyledWavesBottom />
+    <SC.HeaderWrapper isHome={isHome}>
+      <WavesTop />
+      <SC.FadedBottomWave faded={!isHome}>
+        <WavesBottom />
+      </SC.FadedBottomWave>
+
       <SC.StyledParticles
+        noop={noop}
         params={{
           particles: {
             number: { value: 5, density: { enable: true, value_area: 500 } },

src/components/Header/styles.tsx

@@ -3,16 +3,14 @@ import Particles from "react-particles-js"
 import styled from "styled-components"
 import DiscordLogo from "../../images/discord-logo.svg"
 import TPHLogo from "../../images/tph-logo.svg"
-import WavesBottom from "../../images/waves-bot.svg"
-import WavesTop from "../../images/waves-top.svg"
 
-export const HeaderWrapper = styled.header`
+export const HeaderWrapper = styled.header<{ isHome: boolean }>`
   display: flex;
   justify-content: center;
   align-items: center;
   width: 100%;
   position: relative;
-  min-height: 100vh;
+  min-height: ${props => (props.isHome ? "100vh" : "auto")};
   background: #121240;
   overflow: hidden;
 `
@@ -35,21 +33,25 @@ export const Title = styled.h1`
   }
 `
 
-export const StyledWavesTop = styled(WavesTop)`
-  width: 100vw;
-  max-width: 100%;
-  position: absolute;
-  top: 0;
-`
-
-export const StyledWavesBottom = styled(WavesBottom)`
-  width: 100vw;
-  max-width: 100%;
+export const FadedBottomWave = styled.div<{ faded: boolean }>`
   position: absolute;
+  transform: translateY(${props => (props.faded ? "100%" : 0)});
   bottom: 0;
+  left: 0;
+  right: 0;
+  transition: opacity 0.5s, transform 0.5s;
+  opacity: ${props => (props.faded ? 0 : 1)};
+
+  ${props =>
+    props.faded &&
+    css`
+      svg {
+        position: static;
+      }
+    `}
 `
 
-export const StyledParticles = styled(Particles)`
+export const StyledParticles = styled(Particles)<{ noop: number }>`
   mask-image: -webkit-linear-gradient(
     top,
     rgba(0, 0, 0, 0) 5%,
@@ -93,7 +95,7 @@ export const StyledDiscordLogo = styled(DiscordLogo)`
 export const InnerWrapper = styled.div`
   width: 800px;
   max-width: calc(100% - 64px);
-  padding: 0 32px;
+  padding: 32px;
   position: relative;
   display: flex;
   align-items: flex-start;