Skip to content

Commit dbe008d

Browse files
kemurukemuru
committed
chore(web): more abstractions
1 parent 09b1a14 commit dbe008d

File tree

12 files changed

+67
-89
lines changed

12 files changed

+67
-89
lines changed

‎web/src/components/Popup/MiniGuides/Appeal/CrowdfundAppeal.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeCrowdfundAppealImage from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal-dark-mode.svg";
53
import LightModeCrowdfundAppealImage from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const CrowdfundAppeal: React.FC = () => {
8-
const theme = useTheme();
9-
const CrowdfundAppealImage = theme.name === "dark" ? DarkModeCrowdfundAppealImage : LightModeCrowdfundAppealImage;
10-
11-
return <StyledImage as={CrowdfundAppealImage} />;
12-
};
6+
const CrowdfundAppeal: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeCrowdfundAppealImage} lightModeImage={LightModeCrowdfundAppealImage} />
8+
);
139

1410
export default CrowdfundAppeal;

‎web/src/components/Popup/MiniGuides/Appeal/PayoffSimulator.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModePayoffSimulatorImage from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator-dark-mode.svg";
53
import LightModePayoffSimulatorImage from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const PayoffSimulator: React.FC = () => {
8-
const theme = useTheme();
9-
const PayoffSimulatorImage = theme.name === "dark" ? DarkModePayoffSimulatorImage : LightModePayoffSimulatorImage;
10-
11-
return <StyledImage as={PayoffSimulatorImage} />;
12-
};
6+
const PayoffSimulator: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModePayoffSimulatorImage} lightModeImage={LightModePayoffSimulatorImage} />
8+
);
139

1410
export default PayoffSimulator;

‎web/src/components/Popup/MiniGuides/Appeal/StageOne.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeStageOneImage from "tsx:assets/svgs/mini-guides/appeal/stage-one-dark-mode.svg";
53
import LightModeStageOneImage from "tsx:assets/svgs/mini-guides/appeal/stage-one-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const StageOne: React.FC = () => {
8-
const theme = useTheme();
9-
const StageOneImage = theme.name === "dark" ? DarkModeStageOneImage : LightModeStageOneImage;
10-
11-
return <StyledImage as={StageOneImage} />;
12-
};
6+
const StageOne: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeStageOneImage} lightModeImage={LightModeStageOneImage} />
8+
);
139

1410
export default StageOne;

‎web/src/components/Popup/MiniGuides/Appeal/StageTwo.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeStageTwoImage from "tsx:assets/svgs/mini-guides/appeal/stage-two-dark-mode.svg";
53
import LightModeStageTwoImage from "tsx:assets/svgs/mini-guides/appeal/stage-two-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const StageTwo: React.FC = () => {
8-
const theme = useTheme();
9-
const StageTwoImage = theme.name === "dark" ? DarkModeStageTwoImage : LightModeStageTwoImage;
10-
11-
return <StyledImage as={StageTwoImage} />;
12-
};
6+
const StageTwo: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeStageTwoImage} lightModeImage={LightModeStageTwoImage} />
8+
);
139

1410
export default StageTwo;

‎web/src/components/Popup/MiniGuides/ImageRenderer.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { FC, SVGAttributes } from "react";
2+
import styled, { useTheme, css } from "styled-components";
3+
import { landscapeStyle } from "styles/landscapeStyle";
4+
5+
const StyledImage = styled.div`
6+
width: calc(260px + (460 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
7+
8+
${landscapeStyle(
9+
() => css`
10+
width: 389px;
11+
`
12+
)}
13+
`;
14+
15+
interface IImageRenderer {
16+
darkModeImage: FC<SVGAttributes<SVGElement>>;
17+
lightModeImage: FC<SVGAttributes<SVGElement>>;
18+
}
19+
20+
const ImageRenderer: FC<IImageRenderer> = ({ darkModeImage, lightModeImage }) => {
21+
const theme = useTheme();
22+
const image = theme.name === "dark" ? darkModeImage : lightModeImage;
23+
24+
return <StyledImage as={image} />;
25+
};
26+
27+
export default ImageRenderer;

‎web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg";
53
import LightModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const HowItWorks: React.FC = () => {
8-
const theme = useTheme();
9-
const HowItWorksImage = theme.name === "dark" ? DarkModeHowItWorksImage : LightModeHowItWorksImage;
10-
11-
return <StyledImage as={HowItWorksImage} />;
12-
};
6+
const HowItWorks: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeHowItWorksImage} lightModeImage={LightModeHowItWorksImage} />
8+
);
139

1410
export default HowItWorks;

‎web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
32
import DarkModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg";
43
import LightModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
55

6-
const WhatDoINeed: React.FC = () => {
7-
const theme = useTheme();
8-
const WhatDoINeedSVG = theme.name === "dark" ? DarkModeWhatDoINeedImage : LightModeWhatDoINeedImage;
9-
10-
return <WhatDoINeedSVG />;
11-
};
6+
const WhatDoINeed: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeWhatDoINeedImage} lightModeImage={LightModeWhatDoINeedImage} />
8+
);
129

1310
export default WhatDoINeed;

‎web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeCourtHeaderImage from "tsx:assets/svgs/mini-guides/staking/court-header-dark-mode.svg";
53
import LightModeCourtHeaderImage from "tsx:assets/svgs/mini-guides/staking/court-header-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const CourtHeader: React.FC = () => {
8-
const theme = useTheme();
9-
const CourtHeaderImage = theme.name === "dark" ? DarkModeCourtHeaderImage : LightModeCourtHeaderImage;
10-
11-
return <StyledImage as={CourtHeaderImage} />;
12-
};
6+
const CourtHeader: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeCourtHeaderImage} lightModeImage={LightModeCourtHeaderImage} />
8+
);
139

1410
export default CourtHeader;

‎web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeJurorRewardsImage from "tsx:assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg";
53
import LightModeJurorRewardsImage from "tsx:assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const JurorRewards: React.FC = () => {
8-
const theme = useTheme();
9-
const JurorRewardsImage = theme.name === "dark" ? DarkModeJurorRewardsImage : LightModeJurorRewardsImage;
10-
11-
return <StyledImage as={JurorRewardsImage} />;
12-
};
6+
const JurorRewards: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeJurorRewardsImage} lightModeImage={LightModeJurorRewardsImage} />
8+
);
139

1410
export default JurorRewards;

‎web/src/components/Popup/MiniGuides/Staking/Notifications.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,10 @@
11
import React from "react";
2-
import { useTheme } from "styled-components";
3-
import { StyledImage } from "../Template";
42
import DarkModeNotificationsImage from "tsx:assets/svgs/mini-guides/staking/notifications-dark-mode.svg";
53
import LightModeNotificationsImage from "tsx:assets/svgs/mini-guides/staking/notifications-light-mode.svg";
4+
import ImageRenderer from "../ImageRenderer";
65

7-
const Notifications: React.FC = () => {
8-
const theme = useTheme();
9-
const NotificationsImage = theme.name === "dark" ? DarkModeNotificationsImage : LightModeNotificationsImage;
10-
11-
return <StyledImage as={NotificationsImage} />;
12-
};
6+
const Notifications: React.FC = () => (
7+
<ImageRenderer darkModeImage={DarkModeNotificationsImage} lightModeImage={LightModeNotificationsImage} />
8+
);
139

1410
export default Notifications;

0 commit comments

Comments
 (0)