Skip to content

Commit 184cdea

Browse files
kemurukemuru
committed
feat: style the svgs for light and dark mode
1 parent 95f1400 commit 184cdea

15 files changed

+587
-49
lines changed

‎web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg

+42
Loading

‎web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg

+29
Loading

‎web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg

+37
Loading

‎web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg

+39
Loading

‎web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg

+53
Loading

‎web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg

+78
Loading

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

-40
This file was deleted.

‎web/src/components/Popup/MiniGuides/DisputeResolver/Parameters.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import ParametersSvg from "svgs/mini-guides/dispute-resolver/parameters.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledParametersSvg = styled(ParametersSvg)`
9+
[class$="rect-1"],
10+
[class$="rect-3"],
11+
[class$="rect-7"],
12+
[class$="path-3"] {
13+
fill: ${({ theme }) => theme.whiteBackground};
14+
}
15+
[class$="rect-2"],
16+
[class$="rect-6"],
17+
[class$="rect-8"] {
18+
stroke: ${({ theme }) => theme.stroke};
19+
}
20+
[class$="rect-4"] {
21+
stroke: ${({ theme }) => theme.primaryBlue};
22+
}
23+
[class$="rect-5"],
24+
[class$="path-2"] {
25+
fill: ${({ theme }) => theme.primaryBlue};
26+
}
27+
[class$="path-1"],
28+
[class$="path-4"],
29+
[class$="path-7"],
30+
[class$="path-8"] {
31+
fill: ${({ theme }) => theme.primaryText};
32+
}
33+
[class$="path-5"] {
34+
fill: ${({ theme }) => theme.stroke};
35+
}
36+
[class$="path-6"] {
37+
fill: ${({ theme }) => theme.secondaryPurple};
38+
}
39+
`;
40+
41+
const Parameters: React.FC = () => <StyledImage as={StyledParametersSvg} />;
42+
43+
export default Parameters;

‎web/src/components/Popup/MiniGuides/DisputeResolver/Parties.tsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import PartiesSvg from "svgs/mini-guides/dispute-resolver/parties.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledPartiesSvg = styled(PartiesSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="rect-4"],
15+
[class$="rect-5"],
16+
[class$="rect-6"] {
17+
stroke: ${({ theme }) => theme.stroke};
18+
fill: ${({ theme }) => theme.whiteBackground};
19+
}
20+
[class$="path-1"],
21+
[class$="path-3"],
22+
[class$="path-5"],
23+
[class$="path-7"] {
24+
fill: ${({ theme }) => theme.secondaryText};
25+
}
26+
[class$="path-2"],
27+
[class$="path-4"],
28+
[class$="path-6"],
29+
[class$="path-8"] {
30+
fill: ${({ theme }) => theme.primaryText};
31+
}
32+
`;
33+
34+
const Parties: React.FC = () => <StyledImage as={StyledPartiesSvg} />;
35+
36+
export default Parties;

‎web/src/components/Popup/MiniGuides/DisputeResolver/Policy.tsx

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import PolicySvg from "svgs/mini-guides/dispute-resolver/policy.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledPolicySvg = styled(PolicySvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"] {
13+
stroke: ${({ theme }) => theme.stroke};
14+
}
15+
[class$="rect-3"] {
16+
fill: ${({ theme }) => theme.mediumBlue};
17+
stroke: ${({ theme }) => theme.primaryBlue};
18+
}
19+
[class$="path-1"],
20+
[class$="path-3"] {
21+
fill: ${({ theme }) => theme.primaryText};
22+
}
23+
[class$="path-2"],
24+
[class$="path-4"] {
25+
fill: ${({ theme }) => theme.primaryBlue};
26+
}
27+
`;
28+
29+
const Policy: React.FC = () => <StyledImage as={StyledPolicySvg} />;
30+
31+
export default Policy;

‎web/src/components/Popup/MiniGuides/DisputeResolver/StartACase.tsx

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import StartACaseSvg from "svgs/mini-guides/dispute-resolver/start-a-case.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledStartACaseSvg = styled(StartACaseSvg)`
9+
[class$="rect-1"],
10+
[class$="path-1"] {
11+
fill: ${({ theme }) => theme.whiteBackground};
12+
}
13+
[class$="rect-2"],
14+
[class$="circle-2"],
15+
[class$="circle-3"],
16+
[class$="circle-4"],
17+
[class$="path-12"],
18+
[class$="path-13"] {
19+
stroke: ${({ theme }) => theme.stroke};
20+
}
21+
[class$="circle-1"],
22+
[class$="path-11"] {
23+
stroke: ${({ theme }) => theme.primaryBlue};
24+
fill: ${({ theme }) => theme.primaryBlue};
25+
}
26+
[class$="circle-2"],
27+
[class$="circle-3"],
28+
[class$="circle-4"] {
29+
fill: ${({ theme }) => theme.whiteBackground};
30+
}
31+
[class$="path-2"],
32+
[class$="path-18"] {
33+
fill: ${({ theme }) => theme.primaryText};
34+
}
35+
[class$="path-3"],
36+
[class$="path-5"],
37+
[class$="path-6"],
38+
[class$="path-7"],
39+
[class$="path-8"],
40+
[class$="path-9"],
41+
[class$="path-10"],
42+
[class$="path-15"],
43+
[class$="path-17"] {
44+
fill: ${({ theme }) => theme.secondaryText};
45+
}
46+
[class$="path-4"],
47+
[class$="path-14"],
48+
[class$="path-16"] {
49+
fill: ${({ theme }) => theme.stroke};
50+
}
51+
`;
52+
53+
const StartACase: React.FC = () => <StyledImage as={StyledStartACaseSvg} />;
54+
55+
export default StartACase;

‎web/src/components/Popup/MiniGuides/DisputeResolver/VotingOptions.tsx

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import VotingOptionsSvg from "svgs/mini-guides/dispute-resolver/voting-options.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledVotingOptionsSvg = styled(VotingOptionsSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="rect-4"],
15+
[class$="rect-5"] {
16+
stroke: ${({ theme }) => theme.stroke};
17+
fill: ${({ theme }) => theme.whiteBackground};
18+
}
19+
[class$="circle-1"],
20+
[class$="circle-2"],
21+
[class$="path-8"] {
22+
fill: ${({ theme }) => theme.primaryBlue};
23+
}
24+
[class$="path-1"],
25+
[class$="path-3"],
26+
[class$="path-5"],
27+
[class$="path-7"] {
28+
fill: ${({ theme }) => theme.primaryText};
29+
}
30+
[class$="path-2"],
31+
[class$="path-4"],
32+
[class$="path-6"],
33+
[class$="path-9"] {
34+
fill: ${({ theme }) => theme.secondaryText};
35+
}
36+
`;
37+
38+
const VotingOptions: React.FC = () => <StyledImage as={StyledVotingOptionsSvg} />;
39+
40+
export default VotingOptions;

‎web/src/components/Popup/MiniGuides/DisputeResolver/WellDone.tsx

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import WellDoneSvg from "svgs/mini-guides/dispute-resolver/well-done.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledWellDoneSvg = styled(WellDoneSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="line-1"],
15+
[class$="line-2"] {
16+
stroke: ${({ theme }) => theme.stroke};
17+
}
18+
[class$="circle-1"] {
19+
fill: ${({ theme }) => theme.primaryPurple};
20+
}
21+
[class$="path-1"],
22+
[class$="path-2"],
23+
[class$="path-4"],
24+
[class$="path-5"],
25+
[class$="path-7"],
26+
[class$="path-9"],
27+
[class$="path-11"],
28+
[class$="path-15"],
29+
[class$="path-18"],
30+
[class$="path-21"] {
31+
fill: ${({ theme }) => theme.primaryText};
32+
}
33+
[class$="path-3"],
34+
[class$="path-6"],
35+
[class$="path-8"],
36+
[class$="path-10"],
37+
[class$="path-12"],
38+
[class$="path-14"],
39+
[class$="path-17"],
40+
[class$="path-20"] {
41+
fill: ${({ theme }) => theme.secondaryText};
42+
}
43+
[class$="path-13"],
44+
[class$="path-16"],
45+
[class$="path-19"] {
46+
fill: ${({ theme }) => theme.secondaryPurple};
47+
}
48+
`;
49+
50+
const WellDone: React.FC = () => <StyledImage as={StyledWellDoneSvg} />;
51+
52+
export default WellDone;

‎web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx

+43-8
Original file line numberDiff line numberDiff line change
@@ -2,22 +2,57 @@ import React from "react";
22

33
import PageContentsTemplate from "../PageContentsTemplate";
44

5-
import CrowdfundAppeal from "./CrowdfundAppeal";
5+
import StartACase from "./StartACase";
6+
import Parameters from "./Parameters";
7+
import VotingOptions from "./VotingOptions";
8+
import Parties from "./Parties";
9+
import Policy from "./Policy";
10+
import WellDone from "./WellDone";
611

712
const leftPageContents = [
813
{
9-
title: "Dispute Resolver",
14+
title: "Start a case",
1015
paragraphs: [
11-
"If after the jury has reached a decision, a party is not satisfied (because she thinks the result was" +
12-
" unfair), she can appeal and have the dispute ruled again.",
13-
"Every time the case is appealed a new round starts with all the voting options available for voting" +
14-
" again. The results of the previous rounds are irrelevant in terms of what the final result will be.",
15-
"Each new appeal instance will have twice the previous number of jurors plus one.",
16+
"First, you need to write a title, and a description for the case. Make it simple to read and understand.",
17+
],
18+
},
19+
{
20+
title: "Parameters",
21+
paragraphs: [
22+
"Define some parameters:",
23+
"• Choose a court to arbitrate the case.<br/>• Select a category.<br/>• Select the number of jurors.",
24+
"The more jurors you select, higher the arbitration cost will be. By default we use 3 jurors for the first " +
25+
"round. The arbitration cost is the value used to pay the jurors for their work.",
26+
],
27+
},
28+
{
29+
title: "Voting options",
30+
paragraphs: [
31+
"Write the question jurors will answer when voting, and the voting options. You can have 2 or more options if needed.",
32+
],
33+
},
34+
{
35+
title: "Parties of the dispute",
36+
paragraphs: ["Define the parties involved in the dispute."],
37+
},
38+
{
39+
title: "Policy",
40+
paragraphs: [
41+
"Submit a Policy. The Policy provides jurors with a framework to vote fairly. It can be a set of " +
42+
"criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules " +
43+
"that are relevant to jurors' decision-making.",
44+
],
45+
},
46+
{
47+
title: "Well done!",
48+
paragraphs: [
49+
"The case is ready to be created! Review the information, and submit the case. Don't forget to submit " +
50+
"evidence, and follow up the dispute resolution process until its conclusion.",
1651
],
1752
},
1853
];
1954

20-
const rightPageComponents = [CrowdfundAppeal];
55+
const rightPageComponents = [StartACase, Parameters, VotingOptions, Parties, Policy, WellDone];
2156

2257
interface IDisputeResolver {
2358
toggleMiniGuide: () => void;

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

+9-1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@ const StyledLabel = styled.label`
4242
cursor: pointer;
4343
`;
4444

45+
const StyledParagraph = styled.p`
46+
font-weight: 400;
47+
font-size: 14px;
48+
line-height: 18px;
49+
color: ${({ theme }) => theme.secondaryText};
50+
margin: 0;
51+
`;
52+
4553
const extractGuideName = (linkText) => linkText.split(". ")[1];
4654

4755
const LeftContent: React.FC<{
@@ -60,7 +68,7 @@ const LeftContent: React.FC<{
6068
<Title>{title}</Title>
6169
<ParagraphsContainer>
6270
{paragraphs.map((paragraph, index) => (
63-
<label key={index}>{paragraph}</label>
71+
<StyledParagraph key={index} dangerouslySetInnerHTML={{ __html: paragraph }} />
6472
))}
6573
</ParagraphsContainer>
6674
{links && links.length > 0 && toggleSubMiniGuide ? (

0 commit comments

Comments
 (0)