feat(web): add svg header for mobile, desktop

Author: kemuru

web/src/assets/svgs/header/header-darkmode-desktop.svg

@@ -1,10 +1,15 @@
-import React from "react";
-import styled from "styled-components";
+import React, { useEffect, useState } from "react";
+import styled, { useTheme } from "styled-components";
 import CourtOverview from "./CourtOverview";
 import LatestCases from "./LatestCases";
 import Community from "./Community";
 import { HomePageProvider } from "hooks/useHomePageContext";
 import { getOneYearAgoTimestamp } from "utils/date";
+import { BREAKPOINT_SMALL_SCREEN } from "styles/smallScreenStyle";
+import HeaderLightMobile from "tsx:svgs/header/header-lightmode-mobile.svg";
+import HeaderDarkMobile from "tsx:svgs/header/header-darkmode-mobile.svg";
+import HeaderLightDesktop from "tsx:svgs/header/header-lightmode-desktop.svg";
+import HeaderDarkDesktop from "tsx:svgs/header/header-darkmode-desktop.svg";
 
 const Container = styled.div`
   width: 100%;
@@ -13,14 +18,45 @@ const Container = styled.div`
   padding: 32px;
 `;
 
-const Home: React.FC = () => (
-  <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
-    <Container>
-      <CourtOverview />
-      <LatestCases />
-      <Community />
-    </Container>
-  </HomePageProvider>
-);
+const Header = () => {
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const theme = useTheme();
+  const themeIsLight = theme.name === "light";
+  const breakpointIsBig = windowWidth > BREAKPOINT_SMALL_SCREEN;
+  return (
+    <>
+      {themeIsLight && breakpointIsBig && <HeaderLightDesktop />}
+      {!themeIsLight && breakpointIsBig && <HeaderDarkDesktop />}
+      {themeIsLight && !breakpointIsBig && <HeaderLightMobile />}
+      {!themeIsLight && !breakpointIsBig && <HeaderDarkMobile />}
+    </>
+  );
+};
+
+const Home: React.FC = () => {
+  return (
+    <HomePageProvider timeframe={getOneYearAgoTimestamp()}>
+      <Header />
+      <Container>
+        <CourtOverview />
+        <LatestCases />
+        <Community />
+      </Container>
+    </HomePageProvider>
+  );
+};
 
 export default Home;

web/src/assets/svgs/header/header-darkmode-mobile.svg

@@ -0,0 +1,9 @@
+import { css, FlattenSimpleInterpolation } from "styled-components";
+
+export const BREAKPOINT_SMALL_SCREEN = 768;
+
+export const smallScreenStyle = (style: FlattenSimpleInterpolation) => css`
+  @media (max-width: ${BREAKPOINT_SMALL_SCREEN}px) {
+    ${style}
+  }
+`;

web/src/assets/svgs/header/header-lightmode-desktop.svg

@@ -2,6 +2,7 @@ import { lightTheme as componentsLightTheme, darkTheme as componentsDarkTheme }
 
 export const lightTheme = {
   ...componentsLightTheme,
+  name: "light",
   primaryPurple: "#4D00B4",
   secondaryPurple: "#9013FE",
   mediumPurple: "#F8F1FF",
@@ -38,6 +39,7 @@ export const lightTheme = {
 
 export const darkTheme = {
   ...componentsDarkTheme,
+  name: "dark",
   primaryPurple: "#7E1BD4",
   secondaryPurple: "#B45FFF",
   mediumPurple: "#390F6C",