From 95f14002a57884d10ab4bbcf2c40507add455b4b Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 1 Jul 2024 13:05:52 +0200 Subject: [PATCH 01/11] feat: setup structure for resolver miniguides --- .../DisputeResolver/CrowdfundAppeal.tsx | 40 +++++++++++++++++++ .../MiniGuides/DisputeResolver/index.tsx | 39 ++++++++++++++++++ web/src/pages/Resolver/index.tsx | 11 ++++- 3 files changed, 89 insertions(+), 1 deletion(-) create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx new file mode 100644 index 000000000..462a493bb --- /dev/null +++ b/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import styled from "styled-components"; + +import CrowdfundAppealSvg from "svgs/mini-guides/appeal/crowdfund-appeal.svg"; + +import { StyledImage } from "../PageContentsTemplate"; + +const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)` + [class$="rect-bg"] { + fill: ${({ theme }) => theme.whiteBackground}; + stroke: ${({ theme }) => theme.stroke}; + } + + [class$="path-1"], + [class$="path-2"], + [class$="path-3"] { + fill: ${({ theme }) => theme.primaryText}; + } + + [class$="rect-fg"] { + fill: ${({ theme }) => theme.whiteBackground}; + stroke: ${({ theme }) => theme.stroke}; + } + + [class$="rect-accent"] { + fill: ${({ theme }) => theme.primaryBlue}; + } + + [class$="path-4"] { + fill: ${({ theme }) => theme.whiteBackground}; + } + + [class$="path-5"] { + fill: ${({ theme }) => theme.secondaryText}; + } +`; + +const CrowdfundAppeal: React.FC = () => ; + +export default CrowdfundAppeal; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx new file mode 100644 index 000000000..3b45d79a5 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +import PageContentsTemplate from "../PageContentsTemplate"; + +import CrowdfundAppeal from "./CrowdfundAppeal"; + +const leftPageContents = [ + { + title: "Dispute Resolver", + paragraphs: [ + "If after the jury has reached a decision, a party is not satisfied (because she thinks the result was" + + " unfair), she can appeal and have the dispute ruled again.", + "Every time the case is appealed a new round starts with all the voting options available for voting" + + " again. The results of the previous rounds are irrelevant in terms of what the final result will be.", + "Each new appeal instance will have twice the previous number of jurors plus one.", + ], + }, +]; + +const rightPageComponents = [CrowdfundAppeal]; + +interface IDisputeResolver { + toggleMiniGuide: () => void; +} + +const DisputeResolver: React.FC = ({ toggleMiniGuide }) => { + return ( + + ); +}; + +export default DisputeResolver; diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 7a25d2495..01bc83d99 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { Navigate, Route, Routes, useLocation } from "react-router-dom"; +import { useToggle } from "react-use"; import { useAccount } from "wagmi"; import { landscapeStyle } from "styles/landscapeStyle"; @@ -10,6 +11,8 @@ import { responsiveSize } from "styles/responsiveSize"; import ConnectWallet from "components/ConnectWallet"; import { EnsureAuth } from "components/EnsureAuth"; import HeroImage from "components/HeroImage"; +import HowItWorks from "components/HowItWorks"; +import Resolver from "components/Popup/MiniGuides/DisputeResolver"; import Description from "./Briefing/Description"; import Title from "./Briefing/Title"; @@ -67,9 +70,10 @@ const StyledLabel = styled.label` const DisputeResolver: React.FC = () => { const location = useLocation(); - + const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false); const { isConnected } = useAccount(); const isPreviewPage = location.pathname.includes("/preview"); + return ( <> @@ -79,6 +83,11 @@ const DisputeResolver: React.FC = () => { {isConnected && !isPreviewPage ? : null} + } /> } /> From 184cdea43dfa15a7c9c3fcf564a0c1b174c5adb0 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 1 Jul 2024 18:47:22 +0200 Subject: [PATCH 02/11] feat: style the svgs for light and dark mode --- .../dispute-resolver/parameters.svg | 42 ++++++++++ .../mini-guides/dispute-resolver/parties.svg | 29 +++++++ .../mini-guides/dispute-resolver/policy.svg | 37 +++++++++ .../dispute-resolver/start-a-case.svg | 39 ++++++++++ .../dispute-resolver/voting-options.svg | 53 +++++++++++++ .../dispute-resolver/well-done.svg | 78 +++++++++++++++++++ .../DisputeResolver/CrowdfundAppeal.tsx | 40 ---------- .../MiniGuides/DisputeResolver/Parameters.tsx | 43 ++++++++++ .../MiniGuides/DisputeResolver/Parties.tsx | 36 +++++++++ .../MiniGuides/DisputeResolver/Policy.tsx | 31 ++++++++ .../MiniGuides/DisputeResolver/StartACase.tsx | 55 +++++++++++++ .../DisputeResolver/VotingOptions.tsx | 40 ++++++++++ .../MiniGuides/DisputeResolver/WellDone.tsx | 52 +++++++++++++ .../MiniGuides/DisputeResolver/index.tsx | 51 ++++++++++-- .../Popup/MiniGuides/PageContentsTemplate.tsx | 10 ++- 15 files changed, 587 insertions(+), 49 deletions(-) create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg create mode 100644 web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg delete mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/Parameters.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/Parties.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/Policy.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/StartACase.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/VotingOptions.tsx create mode 100644 web/src/components/Popup/MiniGuides/DisputeResolver/WellDone.tsx diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg new file mode 100644 index 000000000..097bd593f --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg new file mode 100644 index 000000000..9cff755b8 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg new file mode 100644 index 000000000..ccc5496d0 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg new file mode 100644 index 000000000..30319a8ba --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg new file mode 100644 index 000000000..ca93d9c9d --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg b/web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg new file mode 100644 index 000000000..4e94ed36a --- /dev/null +++ b/web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx deleted file mode 100644 index 462a493bb..000000000 --- a/web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -import CrowdfundAppealSvg from "svgs/mini-guides/appeal/crowdfund-appeal.svg"; - -import { StyledImage } from "../PageContentsTemplate"; - -const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)` - [class$="rect-bg"] { - fill: ${({ theme }) => theme.whiteBackground}; - stroke: ${({ theme }) => theme.stroke}; - } - - [class$="path-1"], - [class$="path-2"], - [class$="path-3"] { - fill: ${({ theme }) => theme.primaryText}; - } - - [class$="rect-fg"] { - fill: ${({ theme }) => theme.whiteBackground}; - stroke: ${({ theme }) => theme.stroke}; - } - - [class$="rect-accent"] { - fill: ${({ theme }) => theme.primaryBlue}; - } - - [class$="path-4"] { - fill: ${({ theme }) => theme.whiteBackground}; - } - - [class$="path-5"] { - fill: ${({ theme }) => theme.secondaryText}; - } -`; - -const CrowdfundAppeal: React.FC = () => ; - -export default CrowdfundAppeal; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/Parameters.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/Parameters.tsx new file mode 100644 index 000000000..b7a23c393 --- /dev/null +++ b/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 = () => ; + +export default Parameters; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/Parties.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/Parties.tsx new file mode 100644 index 000000000..98c7877dc --- /dev/null +++ b/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 = () => ; + +export default Parties; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/Policy.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/Policy.tsx new file mode 100644 index 000000000..d757c6eaa --- /dev/null +++ b/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 = () => ; + +export default Policy; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/StartACase.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/StartACase.tsx new file mode 100644 index 000000000..71241e71b --- /dev/null +++ b/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 = () => ; + +export default StartACase; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/VotingOptions.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/VotingOptions.tsx new file mode 100644 index 000000000..1dbaaf3d7 --- /dev/null +++ b/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 = () => ; + +export default VotingOptions; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/WellDone.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/WellDone.tsx new file mode 100644 index 000000000..8b50fff70 --- /dev/null +++ b/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 = () => ; + +export default WellDone; diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx index 3b45d79a5..14ae840d3 100644 --- a/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx +++ b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx @@ -2,22 +2,57 @@ import React from "react"; import PageContentsTemplate from "../PageContentsTemplate"; -import CrowdfundAppeal from "./CrowdfundAppeal"; +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: "Dispute Resolver", + title: "Start a case", paragraphs: [ - "If after the jury has reached a decision, a party is not satisfied (because she thinks the result was" + - " unfair), she can appeal and have the dispute ruled again.", - "Every time the case is appealed a new round starts with all the voting options available for voting" + - " again. The results of the previous rounds are irrelevant in terms of what the final result will be.", - "Each new appeal instance will have twice the previous number of jurors plus one.", + "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.
• Select a category.
• 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 = [CrowdfundAppeal]; +const rightPageComponents = [StartACase, Parameters, VotingOptions, Parties, Policy, WellDone]; interface IDisputeResolver { toggleMiniGuide: () => void; diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index d3f5b5fa5..b5ad1d4e6 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -42,6 +42,14 @@ const StyledLabel = styled.label` cursor: pointer; `; +const StyledParagraph = styled.p` + font-weight: 400; + font-size: 14px; + line-height: 18px; + color: ${({ theme }) => theme.secondaryText}; + margin: 0; +`; + const extractGuideName = (linkText) => linkText.split(". ")[1]; const LeftContent: React.FC<{ @@ -60,7 +68,7 @@ const LeftContent: React.FC<{ {title} {paragraphs.map((paragraph, index) => ( - + ))} {links && links.length > 0 && toggleSubMiniGuide ? ( From 8b076c5ea14786ff34c580ca9218748af985dd67 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 13:42:40 +0200 Subject: [PATCH 03/11] feat: adjust paddings, attach to dispute resolver page, add to onboarding miniguides --- .../Popup/MiniGuides/Onboarding/index.tsx | 22 +++++++++++--- web/src/pages/Resolver/Briefing/Title.tsx | 1 + .../pages/Resolver/Parameters/Category.tsx | 1 + web/src/pages/Resolver/Parameters/Court.tsx | 1 + web/src/pages/Resolver/Parameters/Jurors.tsx | 1 + web/src/pages/Resolver/Policy/index.tsx | 1 + web/src/pages/Resolver/Timeline.tsx | 15 ++-------- web/src/pages/Resolver/index.tsx | 30 +++++++++++++++---- 8 files changed, 49 insertions(+), 23 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx index 22896df57..058779242 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx @@ -5,10 +5,11 @@ import { useToggle } from "react-use"; import Appeal from "../Appeal"; import BinaryVoting from "../BinaryVoting"; import JurorLevels from "../JurorLevels"; -import PageContentsTemplate from "../PageContentsTemplate"; import RankedVoting from "../RankedVoting"; import Staking from "../Staking"; +import DisputeResolver from "../DisputeResolver"; +import PageContentsTemplate from "../PageContentsTemplate"; import HowItWorks from "./HowItWorks"; import PnkLogoAndTitle from "./PnkLogoAndTitle"; import WhatDoINeed from "./WhatDoINeed"; @@ -35,7 +36,14 @@ const leftPageContents = [ { title: "Access the Mini Guides", paragraphs: [], - links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"], + links: [ + "1. Staking", + "2. Binary Voting", + "3. Ranked Voting", + "4. Appeal", + "5. Juror Levels", + "6. Dispute Resolver", + ], }, ]; @@ -51,20 +59,23 @@ const Onboarding: React.FC = ({ toggleMiniGuide }) => { const [isRankedVotingMiniGuideOpen, toggleRankedVotingMiniGuide] = useToggle(false); const [isAppealMiniGuideOpen, toggleAppealMiniGuide] = useToggle(false); const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false); + const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false); const isAnyMiniGuideOpen = isStakingMiniGuideOpen || isBinaryVotingMiniGuideOpen || isRankedVotingMiniGuideOpen || isAppealMiniGuideOpen || - isJurorLevelsMiniGuideOpen; + isJurorLevelsMiniGuideOpen || + isDisputeResolverMiniGuideOpen; const canCloseOnboarding = !isStakingMiniGuideOpen && !isBinaryVotingMiniGuideOpen && !isRankedVotingMiniGuideOpen && !isAppealMiniGuideOpen && - !isJurorLevelsMiniGuideOpen; + !isJurorLevelsMiniGuideOpen && + !isDisputeResolverMiniGuideOpen; const toggleSubMiniGuide = (guideName: string) => { if (guideName === "Staking") { @@ -77,6 +88,8 @@ const Onboarding: React.FC = ({ toggleMiniGuide }) => { toggleAppealMiniGuide(); } else if (guideName === "Juror Levels") { toggleJurorLevelsMiniGuide(); + } else if (guideName === "Dispute Resolver") { + toggleDisputeResolverMiniGuide(); } }; @@ -97,6 +110,7 @@ const Onboarding: React.FC = ({ toggleMiniGuide }) => { {isRankedVotingMiniGuideOpen && } {isAppealMiniGuideOpen && } {isJurorLevelsMiniGuideOpen && } + {isDisputeResolverMiniGuideOpen && } ); }; diff --git a/web/src/pages/Resolver/Briefing/Title.tsx b/web/src/pages/Resolver/Briefing/Title.tsx index 1ade32aba..1bbcc8e9a 100644 --- a/web/src/pages/Resolver/Briefing/Title.tsx +++ b/web/src/pages/Resolver/Briefing/Title.tsx @@ -16,6 +16,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; + padding-bottom: ${responsiveSize(70, 240)}; `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Parameters/Category.tsx b/web/src/pages/Resolver/Parameters/Category.tsx index f7effd190..1168462f6 100644 --- a/web/src/pages/Resolver/Parameters/Category.tsx +++ b/web/src/pages/Resolver/Parameters/Category.tsx @@ -16,6 +16,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; + padding-bottom: ${responsiveSize(70, 191)}; `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Parameters/Court.tsx b/web/src/pages/Resolver/Parameters/Court.tsx index c7b7c16c6..98860b929 100644 --- a/web/src/pages/Resolver/Parameters/Court.tsx +++ b/web/src/pages/Resolver/Parameters/Court.tsx @@ -19,6 +19,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; + padding-bottom: ${responsiveSize(70, 115)}; `; const StyledDropdownCascader = styled(DropdownCascader)` diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index 189a49611..6c65b5320 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -22,6 +22,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; + padding-bottom: ${responsiveSize(70, 79)}; `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx index 4bc2e6d83..c0d92a6d2 100644 --- a/web/src/pages/Resolver/Policy/index.tsx +++ b/web/src/pages/Resolver/Policy/index.tsx @@ -20,6 +20,7 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; + padding-bottom: ${responsiveSize(70, 82)}; `; const StyledLabel = styled.label` diff --git a/web/src/pages/Resolver/Timeline.tsx b/web/src/pages/Resolver/Timeline.tsx index dc30e3850..93bd1309b 100644 --- a/web/src/pages/Resolver/Timeline.tsx +++ b/web/src/pages/Resolver/Timeline.tsx @@ -1,23 +1,12 @@ import React from "react"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { useLocation } from "react-router-dom"; import { Steps } from "@kleros/ui-components-library"; -import { landscapeStyle } from "styles/landscapeStyle"; - const StyledSteps = styled(Steps)` - display: none; - - ${landscapeStyle( - () => css` - display: flex; - position: absolute; - left: 2%; - height: 360px; - ` - )} + height: 360px; `; const items = [ diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 01bc83d99..837fa9592 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -49,6 +49,20 @@ const StyledEnsureAuth = styled(EnsureAuth)` align-self: center; `; +const HowItWorksAndTimeline = styled.div` + display: none; + + ${landscapeStyle( + () => css` + display: flex; + flex-direction: column; + position: absolute; + left: 2%; + gap: 40px; + ` + )} +`; + const MiddleContentContainer = styled.div` display: flex; justify-content: center; @@ -82,12 +96,16 @@ const DisputeResolver: React.FC = () => { {isConnected ? ( - {isConnected && !isPreviewPage ? : null} - + {isConnected && !isPreviewPage ? ( + + + + + ) : null} } /> } /> From 598df35639f4798dd22acf404dd0a28bc76ed971 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 14:07:46 +0200 Subject: [PATCH 04/11] fix: codderabbitai comment --- .../Popup/MiniGuides/DisputeResolver/index.tsx | 2 +- .../Popup/MiniGuides/PageContentsTemplate.tsx | 11 ++++++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx index 14ae840d3..7de74c08d 100644 --- a/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx +++ b/web/src/components/Popup/MiniGuides/DisputeResolver/index.tsx @@ -20,7 +20,7 @@ const leftPageContents = [ title: "Parameters", paragraphs: [ "Define some parameters:", - "• Choose a court to arbitrate the case.
• Select a category.
• Select the number of jurors.", + "• 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.", ], diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index b5ad1d4e6..160a48da2 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -52,6 +52,15 @@ const StyledParagraph = styled.p` const extractGuideName = (linkText) => linkText.split(". ")[1]; +const processNewLineInParagraph = (paragraph: string) => { + return paragraph.split("\n").map((text, index) => ( + + {index > 0 &&
} + {text} + + )); +}; + const LeftContent: React.FC<{ currentPage: number; leftPageContents: { @@ -68,7 +77,7 @@ const LeftContent: React.FC<{ {title} {paragraphs.map((paragraph, index) => ( - + {processNewLineInParagraph(paragraph)} ))} {links && links.length > 0 && toggleSubMiniGuide ? ( From 4669205ad1b954b162cfdc80c9bdf54e780f6474 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:54:59 +0200 Subject: [PATCH 05/11] chore: remove start a case text, close text --- .../MiniGuides/MainStructureTemplate.tsx | 36 +------------------ web/src/pages/Resolver/index.tsx | 1 - 2 files changed, 1 insertion(+), 36 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index d452fe0d2..9753e5f22 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -96,30 +96,6 @@ const DesktopCompactPagination = styled(CompactPagination)` )} `; -const Close = styled.label` - display: none; - - ${landscapeStyle( - () => css` - display: flex; - position: absolute; - top: ${responsiveSize(24, 32)}; - right: 17px; - display: flex; - align-items: flex-end; - justify-content: flex-end; - cursor: pointer; - z-index: 11; - - &:hover { - text-decoration: underline; - } - - color: ${({ theme }) => theme.primaryBlue}; - ` - )} -`; - const RightContainer = styled.div` width: 86vw; position: relative; @@ -203,17 +179,7 @@ const Template: React.FC = ({ label={`${currentPage}/${numPages}`} /> - - { - onClose(); - removeOnboardingHashPath(); - }} - > - Close - - {RightContent} - + {RightContent} ); diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 837fa9592..e2e77d1bc 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -92,7 +92,6 @@ const DisputeResolver: React.FC = () => { <> - {isConnected && !isPreviewPage ? Start a case : null} {isConnected ? ( From 0035cd3e50b453ae1b5db01e626110b91c2e2a5d Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 17:33:48 +0200 Subject: [PATCH 06/11] chore: logic simplification --- .../components/Popup/MiniGuides/Onboarding/index.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx index 058779242..2fb481f86 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx @@ -69,14 +69,6 @@ const Onboarding: React.FC = ({ toggleMiniGuide }) => { isJurorLevelsMiniGuideOpen || isDisputeResolverMiniGuideOpen; - const canCloseOnboarding = - !isStakingMiniGuideOpen && - !isBinaryVotingMiniGuideOpen && - !isRankedVotingMiniGuideOpen && - !isAppealMiniGuideOpen && - !isJurorLevelsMiniGuideOpen && - !isDisputeResolverMiniGuideOpen; - const toggleSubMiniGuide = (guideName: string) => { if (guideName === "Staking") { toggleStakingMiniGuide(); @@ -100,7 +92,7 @@ const Onboarding: React.FC = ({ toggleMiniGuide }) => { leftPageContents={leftPageContents} rightPageComponents={rightPageComponents} isOnboarding={true} - canClose={canCloseOnboarding} + canClose={!isAnyMiniGuideOpen} isVisible={!isAnyMiniGuideOpen} toggleSubMiniGuide={toggleSubMiniGuide} /> From bb82c670852ab81bd3e16abc7853dacc0ca5eb05 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 17:39:33 +0200 Subject: [PATCH 07/11] fix: remove array index from keys --- web/src/components/Popup/MiniGuides/JurorLevels.tsx | 2 +- web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/JurorLevels.tsx b/web/src/components/Popup/MiniGuides/JurorLevels.tsx index 8313d580c..43bd79a54 100644 --- a/web/src/components/Popup/MiniGuides/JurorLevels.tsx +++ b/web/src/components/Popup/MiniGuides/JurorLevels.tsx @@ -100,7 +100,7 @@ const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { {title} {paragraphs.map((paragraph, index) => ( - + ))} diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index 160a48da2..4922785f7 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -54,7 +54,7 @@ const extractGuideName = (linkText) => linkText.split(". ")[1]; const processNewLineInParagraph = (paragraph: string) => { return paragraph.split("\n").map((text, index) => ( - + {index > 0 &&
} {text} From 6a05b74d04fbf99e9e2f0cf2bed96b4174cf7193 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 2 Jul 2024 17:45:30 +0200 Subject: [PATCH 08/11] fix: not use array index in array key --- web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx index 4922785f7..d8b4e9741 100644 --- a/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/PageContentsTemplate.tsx @@ -76,8 +76,8 @@ const LeftContent: React.FC<{ {title} - {paragraphs.map((paragraph, index) => ( - {processNewLineInParagraph(paragraph)} + {paragraphs.map((paragraph) => ( + {processNewLineInParagraph(paragraph)} ))} {links && links.length > 0 && toggleSubMiniGuide ? ( From eafab3eb7f2f3d67e3a4ebe6ebd665fa24363523 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 3 Jul 2024 12:39:29 +0200 Subject: [PATCH 09/11] fix: only modify padding-bottoms on desktop --- web/src/pages/Resolver/Briefing/Title.tsx | 7 ++++++- web/src/pages/Resolver/Parameters/Category.tsx | 7 ++++++- web/src/pages/Resolver/Parameters/Court.tsx | 7 ++++++- web/src/pages/Resolver/Parameters/Jurors.tsx | 10 ++++++++-- web/src/pages/Resolver/Policy/index.tsx | 7 ++++++- 5 files changed, 32 insertions(+), 6 deletions(-) diff --git a/web/src/pages/Resolver/Briefing/Title.tsx b/web/src/pages/Resolver/Briefing/Title.tsx index 1bbcc8e9a..bfb1a064d 100644 --- a/web/src/pages/Resolver/Briefing/Title.tsx +++ b/web/src/pages/Resolver/Briefing/Title.tsx @@ -16,7 +16,12 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding-bottom: ${responsiveSize(70, 240)}; + + ${landscapeStyle( + () => css` + padding-bottom: 240px; + ` + )} `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Parameters/Category.tsx b/web/src/pages/Resolver/Parameters/Category.tsx index 1168462f6..e32a8b237 100644 --- a/web/src/pages/Resolver/Parameters/Category.tsx +++ b/web/src/pages/Resolver/Parameters/Category.tsx @@ -16,7 +16,12 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding-bottom: ${responsiveSize(70, 191)}; + + ${landscapeStyle( + () => css` + padding-bottom: 191px; + ` + )} `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Parameters/Court.tsx b/web/src/pages/Resolver/Parameters/Court.tsx index 98860b929..d941cfc33 100644 --- a/web/src/pages/Resolver/Parameters/Court.tsx +++ b/web/src/pages/Resolver/Parameters/Court.tsx @@ -19,7 +19,12 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding-bottom: ${responsiveSize(70, 115)}; + + ${landscapeStyle( + () => css` + padding-bottom: 115px; + ` + )} `; const StyledDropdownCascader = styled(DropdownCascader)` diff --git a/web/src/pages/Resolver/Parameters/Jurors.tsx b/web/src/pages/Resolver/Parameters/Jurors.tsx index 6c65b5320..05fcefcb9 100644 --- a/web/src/pages/Resolver/Parameters/Jurors.tsx +++ b/web/src/pages/Resolver/Parameters/Jurors.tsx @@ -1,5 +1,5 @@ import React, { useEffect } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { DisplaySmall, Field } from "@kleros/ui-components-library"; @@ -13,6 +13,7 @@ import { isUndefined } from "utils/index"; import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata"; import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import Header from "pages/Resolver/Header"; @@ -22,7 +23,12 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding-bottom: ${responsiveSize(70, 79)}; + + ${landscapeStyle( + () => css` + padding-bottom: 79px; + ` + )} `; const StyledField = styled(Field)` diff --git a/web/src/pages/Resolver/Policy/index.tsx b/web/src/pages/Resolver/Policy/index.tsx index c0d92a6d2..49b54bcd1 100644 --- a/web/src/pages/Resolver/Policy/index.tsx +++ b/web/src/pages/Resolver/Policy/index.tsx @@ -20,7 +20,12 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - padding-bottom: ${responsiveSize(70, 82)}; + + ${landscapeStyle( + () => css` + padding-bottom: 82px; + ` + )} `; const StyledLabel = styled.label` From 21a96769650cab423ff594549ca4af38e2a4786c Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 3 Jul 2024 17:23:12 +0200 Subject: [PATCH 10/11] feat: update ui-components-library package version and add close feature to the mini guides --- web/package.json | 2 +- .../Popup/MiniGuides/MainStructureTemplate.tsx | 4 +++- yarn.lock | 10 +++++----- 3 files changed, 9 insertions(+), 7 deletions(-) diff --git a/web/package.json b/web/package.json index a2c9fbe1d..262787b85 100644 --- a/web/package.json +++ b/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", diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index 9753e5f22..a304ee064 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -162,12 +162,13 @@ const Template: React.FC = ({ - + @@ -176,6 +177,7 @@ const Template: React.FC = ({ currentPage={currentPage} callback={setCurrentPage} numPages={numPages} + onCloseOnLastPage={onClose} label={`${currentPage}/${numPages}`} /> diff --git a/yarn.lock b/yarn.lock index 956936e95..5e226fd1c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6628,7 +6628,7 @@ __metadata: "@kleros/kleros-v2-eslint-config": "workspace:^" "@kleros/kleros-v2-prettier-config": "workspace:^" "@kleros/kleros-v2-tsconfig": "workspace:^" - "@kleros/ui-components-library": "npm:^2.12.0" + "@kleros/ui-components-library": "npm:^2.14.0" "@lifi/widget": "npm:^2.10.1" "@middy/core": "npm:^5.3.2" "@middy/http-json-body-parser": "npm:^5.3.2" @@ -6693,9 +6693,9 @@ __metadata: languageName: unknown linkType: soft -"@kleros/ui-components-library@npm:^2.12.0": - version: 2.12.0 - resolution: "@kleros/ui-components-library@npm:2.12.0" +"@kleros/ui-components-library@npm:^2.14.0": + version: 2.14.0 + resolution: "@kleros/ui-components-library@npm:2.14.0" dependencies: "@datepicker-react/hooks": "npm:^2.8.4" "@swc/helpers": "npm:^0.3.2" @@ -6712,7 +6712,7 @@ __metadata: react-dom: ^18.0.0 react-is: ^18.0.0 styled-components: ^5.3.3 - checksum: 9c53e9ce217a5dd6c0f5dc1b19c8c14fb6f4843f5cf7a0eb1b1ae9561ead583c1bcf5bc2687e7f678007363768be3de95f5d573298b00b965d13a563c4b59495 + checksum: ea5d9689562a6aa963eda44ad94336d4152c5d0f46c81e70a0c271a09fb93e9c9fd7b4ee609b1f6e1eb6e18f557f1cc0b132c3ac10d9f5af6ffc911ecb71d9da languageName: node linkType: hard From 062af96bd96cd6dcc2444badea3e5e842d938445 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 3 Jul 2024 17:54:13 +0200 Subject: [PATCH 11/11] fix: remove onboarding hash path on close in compact pagination --- .../Popup/MiniGuides/MainStructureTemplate.tsx | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx index a304ee064..833561cdf 100644 --- a/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx +++ b/web/src/components/Popup/MiniGuides/MainStructureTemplate.tsx @@ -147,10 +147,14 @@ const Template: React.FC = ({ if (isOnboarding && location.hash.includes("#onboarding")) navigate("#", { replace: true }); }, [location.hash, navigate, isOnboarding]); + const onCloseAndRemoveOnboardingHashPath = () => { + onClose(); + removeOnboardingHashPath(); + }; + useClickAway(containerRef, () => { if (canClose) { - onClose(); - removeOnboardingHashPath(); + onCloseAndRemoveOnboardingHashPath(); } }); @@ -168,7 +172,7 @@ const Template: React.FC = ({ currentPage={currentPage} callback={setCurrentPage} numPages={numPages} - onCloseOnLastPage={onClose} + onCloseOnLastPage={onCloseAndRemoveOnboardingHashPath} label={`${currentPage}/${numPages}`} /> @@ -177,7 +181,7 @@ const Template: React.FC = ({ currentPage={currentPage} callback={setCurrentPage} numPages={numPages} - onCloseOnLastPage={onClose} + onCloseOnLastPage={onCloseAndRemoveOnboardingHashPath} label={`${currentPage}/${numPages}`} />