feat: resolver miniguides

web/package.json

@@ -77,7 +77,7 @@
     "@cyntler/react-doc-viewer": "^1.16.3",
     "@filebase/client": "^0.0.5",
     "@kleros/kleros-sdk": "workspace:^",
-    "@kleros/ui-components-library": "^2.12.0",
+    "@kleros/ui-components-library": "^2.14.0",
     "@lifi/widget": "^2.10.1",
     "@middy/core": "^5.3.2",
     "@middy/http-json-body-parser": "^5.3.2",

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

@@ -0,0 +1,43 @@
+import React from "react";
+import styled from "styled-components";
+
+import ParametersSvg from "svgs/mini-guides/dispute-resolver/parameters.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledParametersSvg = styled(ParametersSvg)`
+  [class$="rect-1"],
+  [class$="rect-3"],
+  [class$="rect-7"],
+  [class$="path-3"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"],
+  [class$="rect-6"],
+  [class$="rect-8"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="rect-4"] {
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="rect-5"],
+  [class$="path-2"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="path-1"],
+  [class$="path-4"],
+  [class$="path-7"],
+  [class$="path-8"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-5"] {
+    fill: ${({ theme }) => theme.stroke};
+  }
+  [class$="path-6"] {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+`;
+
+const Parameters: React.FC = () => <StyledImage as={StyledParametersSvg} />;
+
+export default Parameters;

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

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+
+import PartiesSvg from "svgs/mini-guides/dispute-resolver/parties.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledPartiesSvg = styled(PartiesSvg)`
+  [class$="rect-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"],
+  [class$="rect-3"],
+  [class$="rect-4"],
+  [class$="rect-5"],
+  [class$="rect-6"] {
+    stroke: ${({ theme }) => theme.stroke};
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="path-1"],
+  [class$="path-3"],
+  [class$="path-5"],
+  [class$="path-7"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+  [class$="path-2"],
+  [class$="path-4"],
+  [class$="path-6"],
+  [class$="path-8"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+`;
+
+const Parties: React.FC = () => <StyledImage as={StyledPartiesSvg} />;
+
+export default Parties;

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

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+
+import PolicySvg from "svgs/mini-guides/dispute-resolver/policy.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledPolicySvg = styled(PolicySvg)`
+  [class$="rect-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="rect-3"] {
+    fill: ${({ theme }) => theme.mediumBlue};
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="path-1"],
+  [class$="path-3"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-2"],
+  [class$="path-4"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const Policy: React.FC = () => <StyledImage as={StyledPolicySvg} />;
+
+export default Policy;

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

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "styled-components";
+
+import StartACaseSvg from "svgs/mini-guides/dispute-resolver/start-a-case.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledStartACaseSvg = styled(StartACaseSvg)`
+  [class$="rect-1"],
+  [class$="path-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"],
+  [class$="circle-2"],
+  [class$="circle-3"],
+  [class$="circle-4"],
+  [class$="path-12"],
+  [class$="path-13"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="circle-1"],
+  [class$="path-11"] {
+    stroke: ${({ theme }) => theme.primaryBlue};
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="circle-2"],
+  [class$="circle-3"],
+  [class$="circle-4"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="path-2"],
+  [class$="path-18"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-3"],
+  [class$="path-5"],
+  [class$="path-6"],
+  [class$="path-7"],
+  [class$="path-8"],
+  [class$="path-9"],
+  [class$="path-10"],
+  [class$="path-15"],
+  [class$="path-17"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+  [class$="path-4"],
+  [class$="path-14"],
+  [class$="path-16"] {
+    fill: ${({ theme }) => theme.stroke};
+  }
+`;
+
+const StartACase: React.FC = () => <StyledImage as={StyledStartACaseSvg} />;
+
+export default StartACase;

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

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+import VotingOptionsSvg from "svgs/mini-guides/dispute-resolver/voting-options.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledVotingOptionsSvg = styled(VotingOptionsSvg)`
+  [class$="rect-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"],
+  [class$="rect-3"],
+  [class$="rect-4"],
+  [class$="rect-5"] {
+    stroke: ${({ theme }) => theme.stroke};
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="circle-1"],
+  [class$="circle-2"],
+  [class$="path-8"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="path-1"],
+  [class$="path-3"],
+  [class$="path-5"],
+  [class$="path-7"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-2"],
+  [class$="path-4"],
+  [class$="path-6"],
+  [class$="path-9"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+`;
+
+const VotingOptions: React.FC = () => <StyledImage as={StyledVotingOptionsSvg} />;
+
+export default VotingOptions;

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

@@ -0,0 +1,52 @@
+import React from "react";
+import styled from "styled-components";
+
+import WellDoneSvg from "svgs/mini-guides/dispute-resolver/well-done.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledWellDoneSvg = styled(WellDoneSvg)`
+  [class$="rect-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="rect-2"],
+  [class$="rect-3"],
+  [class$="line-1"],
+  [class$="line-2"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="circle-1"] {
+    fill: ${({ theme }) => theme.primaryPurple};
+  }
+  [class$="path-1"],
+  [class$="path-2"],
+  [class$="path-4"],
+  [class$="path-5"],
+  [class$="path-7"],
+  [class$="path-9"],
+  [class$="path-11"],
+  [class$="path-15"],
+  [class$="path-18"],
+  [class$="path-21"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-3"],
+  [class$="path-6"],
+  [class$="path-8"],
+  [class$="path-10"],
+  [class$="path-12"],
+  [class$="path-14"],
+  [class$="path-17"],
+  [class$="path-20"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+  [class$="path-13"],
+  [class$="path-16"],
+  [class$="path-19"] {
+    fill: ${({ theme }) => theme.secondaryPurple};
+  }
+`;
+
+const WellDone: React.FC = () => <StyledImage as={StyledWellDoneSvg} />;
+
+export default WellDone;

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

@@ -0,0 +1,74 @@
+import React from "react";
+
+import PageContentsTemplate from "../PageContentsTemplate";
+
+import StartACase from "./StartACase";
+import Parameters from "./Parameters";
+import VotingOptions from "./VotingOptions";
+import Parties from "./Parties";
+import Policy from "./Policy";
+import WellDone from "./WellDone";
+
+const leftPageContents = [
+  {
+    title: "Start a case",
+    paragraphs: [
+      "First, you need to write a title, and a description for the case. Make it simple to read and understand.",
+    ],
+  },
+  {
+    title: "Parameters",
+    paragraphs: [
+      "Define some parameters:",
+      "• Choose a court to arbitrate the case.\n• Select a category.\n• Select the number of jurors.",
+      "The more jurors you select, higher the arbitration cost will be. By default we use 3 jurors for the first " +
+        "round. The arbitration cost is the value used to pay the jurors for their work.",
+    ],
+  },
+  {
+    title: "Voting options",
+    paragraphs: [
+      "Write the question jurors will answer when voting, and the voting options. You can have 2 or more options if needed.",
+    ],
+  },
+  {
+    title: "Parties of the dispute",
+    paragraphs: ["Define the parties involved in the dispute."],
+  },
+  {
+    title: "Policy",
+    paragraphs: [
+      "Submit a Policy. The Policy provides jurors with a framework to vote fairly. It can be a set of " +
+        "criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules " +
+        "that are relevant to jurors' decision-making.",
+    ],
+  },
+  {
+    title: "Well done!",
+    paragraphs: [
+      "The case is ready to be created! Review the information, and submit the case. Don't forget to submit " +
+        "evidence, and follow up the dispute resolution process until its conclusion.",
+    ],
+  },
+];
+
+const rightPageComponents = [StartACase, Parameters, VotingOptions, Parties, Policy, WellDone];
+
+interface IDisputeResolver {
+  toggleMiniGuide: () => void;
+}
+
+const DisputeResolver: React.FC<IDisputeResolver> = ({ toggleMiniGuide }) => {
+  return (
+    <PageContentsTemplate
+      toggleMiniGuide={toggleMiniGuide}
+      leftPageContents={leftPageContents}
+      rightPageComponents={rightPageComponents}
+      isOnboarding={false}
+      canClose={true}
+      isVisible={true}
+    />
+  );
+};
+
+export default DisputeResolver;

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

@@ -100,7 +100,7 @@ const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
       <Title>{title}</Title>
       <ParagraphsContainer>
         {paragraphs.map((paragraph, index) => (
-          <label key={index}>{paragraph}</label>
+          <label key={paragraph}>{paragraph}</label>
         ))}
       </ParagraphsContainer>
     </LeftContentContainer>