chore(web): abstract styledimage, small style change

Author: kemuru

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import CrowdfundAppealSvg from "tsx:assets/svgs/mini-guides/appeal/crowdfund-appeal.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)`
   [class$="rect-bg"] {
@@ -33,6 +33,6 @@ const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)`
   }
 `;
 
-const CrowdfundAppeal: React.FC = () => <ImageRenderer image={StyledCrowdfundAppealSvg} />;
+const CrowdfundAppeal: React.FC = () => <StyledImage as={StyledCrowdfundAppealSvg} />;
 
 export default CrowdfundAppeal;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import PayoffSimulatorSvg from "tsx:assets/svgs/mini-guides/appeal/payoff-simulator.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledPayoffSimulatorSvg = styled(PayoffSimulatorSvg)`
   [class$="circle-1"] {
@@ -72,6 +72,6 @@ const StyledPayoffSimulatorSvg = styled(PayoffSimulatorSvg)`
   }
 `;
 
-const PayoffSimulator: React.FC = () => <ImageRenderer image={StyledPayoffSimulatorSvg} />;
+const PayoffSimulator: React.FC = () => <StyledImage as={StyledPayoffSimulatorSvg} />;
 
 export default PayoffSimulator;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import StageOneSvg from "tsx:assets/svgs/mini-guides/appeal/stage-one.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledStageOneSvg = styled(StageOneSvg)`
   [class$="rect-1"],
@@ -69,6 +69,6 @@ const StyledStageOneSvg = styled(StageOneSvg)`
   }
 `;
 
-const StageOne: React.FC = () => <ImageRenderer image={StyledStageOneSvg} />;
+const StageOne: React.FC = () => <StyledImage as={StyledStageOneSvg} />;
 
 export default StageOne;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import StageTwoSvg from "tsx:assets/svgs/mini-guides/appeal/stage-two.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledStageTwoSvg = styled(StageTwoSvg)`
   [class$="rect-1"] {
@@ -50,6 +50,6 @@ const StyledStageTwoSvg = styled(StageTwoSvg)`
   }
 `;
 
-const StageTwo: React.FC = () => <ImageRenderer image={StyledStageTwoSvg} />;
+const StageTwo: React.FC = () => <StyledImage as={StyledStageTwoSvg} />;
 
 export default StageTwo;

web/src/components/Popup/MiniGuides/BinaryVoting/VotingModule.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import VotingModuleSvg from "tsx:assets/svgs/mini-guides/binary-voting/voting-module.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledVotingModuleSvg = styled(VotingModuleSvg)`
   [class$="rect-1"],
@@ -34,6 +34,6 @@ const StyledVotingModuleSvg = styled(VotingModuleSvg)`
   }
 `;
 
-const VotingModule: React.FC = () => <ImageRenderer image={StyledVotingModuleSvg} />;
+const VotingModule: React.FC = () => <StyledImage as={StyledVotingModuleSvg} />;
 
 export default VotingModule;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import HowItWorksSvg from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledHowItWorksSvg = styled(HowItWorksSvg)`
   [class$="rect-1"],
@@ -19,6 +19,6 @@ const StyledHowItWorksSvg = styled(HowItWorksSvg)`
   }
 `;
 
-const HowItWorks: React.FC = () => <ImageRenderer image={StyledHowItWorksSvg} />;
+const HowItWorks: React.FC = () => <StyledImage as={StyledHowItWorksSvg} />;
 
 export default HowItWorks;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import WhatDoINeedSvg from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledWhatDoINeedSvg = styled(WhatDoINeedSvg)`
   [class$="rect-1"] {
@@ -70,6 +70,6 @@ const StyledWhatDoINeedSvg = styled(WhatDoINeedSvg)`
   }
 `;
 
-const WhatDoINeed: React.FC = () => <ImageRenderer image={StyledWhatDoINeedSvg} />;
+const WhatDoINeed: React.FC = () => <StyledImage as={StyledWhatDoINeedSvg} />;
 
 export default WhatDoINeed;

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

@@ -1,5 +1,6 @@
 import React, { useState } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
 import MainStructureTemplate from "./MainStructureTemplate";
 
 export const ParagraphsContainer = styled.div`
@@ -18,6 +19,16 @@ export const LeftContentContainer = styled.div`
   flex-direction: column;
 `;
 
+export const StyledImage = styled.div`
+  width: calc(260px + (460 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+
+  ${landscapeStyle(
+    () => css`
+      width: 389px;
+    `
+  )}
+`;
+
 const LinksContainer = styled.div`
   display: flex;
   flex-direction: column;

web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import VotingModuleSvg from "tsx:assets/svgs/mini-guides/ranked-voting/voting-module.svg";
-import ImageRenderer from "../ImageRenderer";
+import { StyledImage } from "../PageContentsTemplate";
 
 const StyledVotingModuleSvg = styled(VotingModuleSvg)`
   [class$="path-1"],
@@ -49,13 +49,16 @@ const StyledVotingModuleSvg = styled(VotingModuleSvg)`
     fill: ${({ theme }) => theme.primaryBlue};
   }
 
-  [class$="path-9"],
   [class$="path-11"],
   [class$="path-2"],
   [class$="path-6"] {
     fill: ${({ theme }) => theme.primaryText};
   }
 
+  [class$="path-9"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+
   [class$="path-10"] {
     fill: ${({ theme }) => theme.error};
   }
@@ -65,6 +68,6 @@ const StyledVotingModuleSvg = styled(VotingModuleSvg)`
   }
 `;
 
-const VotingModule: React.FC = () => <ImageRenderer image={StyledVotingModuleSvg} />;
+const VotingModule: React.FC = () => <StyledImage as={StyledVotingModuleSvg} />;
 
 export default VotingModule;