Merge pull request #1636 from kleros/feat/add-resolver-miniguides

feat: resolver miniguides

Author: alcercu

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/assets/svgs/mini-guides/dispute-resolver/parameters.svg

@@ -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/assets/svgs/mini-guides/dispute-resolver/parties.svg

@@ -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/assets/svgs/mini-guides/dispute-resolver/policy.svg

@@ -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;