fix(web): style onboarding guides for both dark and light mode

Author: kemuru

…/mini-guides/onboarding/how-it-works.svg …es/onboarding/how-it-works-dark-mode.svgweb/src/assets/svgs/mini-guides/onboarding/how-it-works.svg renamed to web/src/assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg renamed to web/src/assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg

@@ -1,8 +1,18 @@
 import React from "react";
-import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg";
+import styled, { useTheme } from "styled-components";
+import DarkModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg";
+import LightModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg";
+
+const StyledHowItWorksImage = styled.div`
+  width: calc(260px + (379 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+  height: calc(200px + (291 - 200) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
 
 const HowItWorks: React.FC = () => {
-  return <HowItWorksImage />;
+  const theme = useTheme();
+  const HowItWorksImage = theme.name === "dark" ? DarkModeHowItWorksImage : LightModeHowItWorksImage;
+
+  return <StyledHowItWorksImage as={HowItWorksImage} />;
 };
 
 export default HowItWorks;

web/src/assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg

@@ -1,6 +1,7 @@
 import React from "react";
-import styled from "styled-components";
-import PnkIcon from "tsx:assets/svgs/styled/pnk.svg";
+import styled, { useTheme } from "styled-components";
+import DarkModePnkIcon from "tsx:assets/svgs/styled/dark-mode-pnk.svg";
+import LightModePnkIcon from "tsx:assets/svgs/styled/light-mode-pnk.svg";
 
 const Container = styled.div`
   display: flex;
@@ -10,7 +11,7 @@ const Container = styled.div`
   align-items: center;
 `;
 
-const StyledPnkIcon = styled(PnkIcon)`
+const StyledPnkIcon = styled.div`
   width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
   height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
 `;
@@ -27,12 +28,16 @@ const StyledCourtLabel = styled.label`
   -webkit-text-fill-color: transparent;
 `;
 
-const PnkLogoAndTitle: React.FC = () => {
+const PnkLogoAndTitle = () => {
+  const theme = useTheme();
+  const PnkIcon = theme.name === "dark" ? DarkModePnkIcon : LightModePnkIcon;
+
   return (
     <Container>
-      <StyledPnkIcon />
+      <StyledPnkIcon as={PnkIcon} />
       <StyledCourtLabel>Court v.2</StyledCourtLabel>
     </Container>
   );
 };
+
 export default PnkLogoAndTitle;

…ini-guides/onboarding/what-do-i-need.svg …/onboarding/what-do-i-need-dark-mode.svgweb/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg renamed to web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg renamed to web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg

@@ -1,8 +1,13 @@
 import React from "react";
-import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg";
+import { useTheme } from "styled-components";
+import DarkModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg";
+import LightModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg";
 
 const WhatDoINeed: React.FC = () => {
-  return <WhatDoINeedImage />;
+  const theme = useTheme();
+  const WhatDoINeedSVG = theme.name === "dark" ? DarkModeWhatDoINeedImage : LightModeWhatDoINeedImage;
+
+  return <WhatDoINeedSVG />;
 };
 
 export default WhatDoINeed;