From c85d330a3cb789fbbf063c070e14eb2a18b1f1f0 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 12 Dec 2024 16:31:47 +0100 Subject: [PATCH 1/7] chore: smaller logo size, dont show court keyword if it ends with it, gap adjustment, max-width --- web/src/components/ErrorFallback.tsx | 2 +- web/src/layout/Header/DesktopHeader.tsx | 1 + web/src/layout/Header/Logo.tsx | 16 ++++++++-------- web/src/layout/Header/MobileHeader.tsx | 1 + web/src/layout/Header/index.tsx | 2 +- web/src/pages/Cases/index.tsx | 2 +- .../Courts/CourtDetails/StakePanel/index.tsx | 3 ++- web/src/pages/Courts/CourtDetails/Stats.tsx | 13 +++++++++++-- web/src/pages/Courts/CourtDetails/index.tsx | 5 ++--- web/src/pages/Courts/index.tsx | 2 +- web/src/pages/Dashboard/index.tsx | 2 +- web/src/pages/GetPnk/index.tsx | 2 +- web/src/pages/Home/index.tsx | 2 +- web/src/pages/Resolver/index.tsx | 2 +- web/src/pages/Settings/index.tsx | 2 +- 15 files changed, 34 insertions(+), 23 deletions(-) diff --git a/web/src/components/ErrorFallback.tsx b/web/src/components/ErrorFallback.tsx index 6b9fef67b..87fcd8a6a 100644 --- a/web/src/components/ErrorFallback.tsx +++ b/web/src/components/ErrorFallback.tsx @@ -17,7 +17,7 @@ const Container = styled.div` height: 100vh; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index ac17f602f..5edab822d 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -34,6 +34,7 @@ import Settings from "./navbar/Menu/Settings"; const Container = styled.div` display: none; position: absolute; + height: 64px; ${landscapeStyle( () => css` diff --git a/web/src/layout/Header/Logo.tsx b/web/src/layout/Header/Logo.tsx index 730121153..36dd0cf0f 100644 --- a/web/src/layout/Header/Logo.tsx +++ b/web/src/layout/Header/Logo.tsx @@ -3,11 +3,12 @@ import styled, { Theme } from "styled-components"; import { Link } from "react-router-dom"; -import KlerosCourtLogo from "svgs/header/kleros-court.svg"; - import { ArbitratorTypes, getArbitratorType } from "consts/index"; + import { isUndefined } from "utils/index"; +import KlerosCourtLogo from "svgs/header/kleros-court.svg"; + const Container = styled.div` display: flex; flex-direction: row; @@ -15,10 +16,6 @@ const Container = styled.div` gap: 16px; `; -const StyledLink = styled(Link)` - min-height: 48px; -`; - const BadgeContainer = styled.div<{ backgroundColor: keyof Theme }>` transform: skewX(-15deg); background-color: ${({ theme, backgroundColor }) => theme[backgroundColor]}; @@ -32,6 +29,9 @@ const BadgeText = styled.label` `; const StyledKlerosCourtLogo = styled(KlerosCourtLogo)` + max-height: 40px; + width: auto; + &:hover { path { fill: ${({ theme }) => theme.white}BF; @@ -61,9 +61,9 @@ const CourtBadge: React.FC = () => { const Logo: React.FC = () => ( {" "} - + - + ); diff --git a/web/src/layout/Header/MobileHeader.tsx b/web/src/layout/Header/MobileHeader.tsx index 6900ac759..280881cb9 100644 --- a/web/src/layout/Header/MobileHeader.tsx +++ b/web/src/layout/Header/MobileHeader.tsx @@ -17,6 +17,7 @@ const Container = styled.div` align-items: center; justify-content: space-between; width: 100%; + height: 64px; ${landscapeStyle( () => css` diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index 74adad072..ac7a0e3de 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -17,7 +17,7 @@ const Container = styled.div` const HeaderContainer = styled.div` width: 100%; - padding: 8px 24px; + padding: 0 24px; `; const Header: React.FC = () => { diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 03de868e0..c43ace3b2 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -13,7 +13,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index 11e6696cd..34a3d5582 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -64,7 +64,8 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index f84dcce4d..9be25ae14 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -1,6 +1,7 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import { useParams } from "react-router-dom"; import { Accordion } from "@kleros/ui-components-library"; @@ -39,11 +40,19 @@ const StyledAccordion = styled(Accordion)` } //adds padding to body container > * > div > div { - padding: 0 24px; + padding: 0; } [class*="accordion-item"] { margin: 0; } + + ${landscapeStyle( + () => css` + > * > div > div { + padding: 0 24px; + } + ` + )} `; const TimeDisplayContainer = styled.div` diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 540cdc663..397954a4d 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -77,14 +77,13 @@ const StakePanelAndStats = styled.div` flex-direction: row; justify-content: space-between; margin-top: 24px; - gap: 20px; + gap: 16px; flex-wrap: wrap; ${landscapeStyle( () => css` & > * { - flex: 1 1 calc(50% - 10px); - max-width: calc(50% - 10px); + flex: 1 1 calc(50% - 8px); } ` )} diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index 5944cd9b9..a5372a0ce 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -12,7 +12,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index 0e8e75649..6bf2a2ded 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -25,7 +25,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index 5c4b0a574..00680ae11 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -19,7 +19,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; display: flex; flex-direction: column; diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 699ed8a13..1a5acca99 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -22,7 +22,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index 10ab5c242..d20faffb8 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -38,7 +38,7 @@ const Container = styled.div` padding: ${responsiveSize(24, 32)}; padding-top: ${responsiveSize(24, 28)}; padding-bottom: ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx index 55b719478..3b1d9a2a2 100644 --- a/web/src/pages/Settings/index.tsx +++ b/web/src/pages/Settings/index.tsx @@ -11,7 +11,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1780px; + max-width: 1400px; margin: 0 auto; `; From ba21ef10ed2dc67590ad350093a1c7143653d337 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Thu, 12 Dec 2024 21:17:56 +0530 Subject: [PATCH 2/7] fix(web): stake-button-disabling --- .../StakePanel/StakeWithdrawButton.tsx | 33 ++++++++++--------- 1 file changed, 17 insertions(+), 16 deletions(-) diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index f2ed90a85..7738650bb 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -83,7 +83,12 @@ const StakeWithdrawButton: React.FC = ({ amount, parsedAmount, ac error: allowanceError, } = useSimulatePnkIncreaseAllowance({ query: { - enabled: isAllowance && !isUndefined(targetStake) && !isUndefined(allowance) && !isUndefined(balance), + enabled: + isAllowance && + !isUndefined(targetStake) && + !isUndefined(allowance) && + !isUndefined(balance) && + parsedAmount <= balance, }, args: [klerosCoreAddress[DEFAULT_CHAIN], BigInt(targetStake ?? 0) - BigInt(allowance ?? 0)], }); @@ -103,7 +108,7 @@ const StakeWithdrawButton: React.FC = ({ amount, parsedAmount, ac parsedAmount !== 0n && targetStake >= 0n && !isAllowance && - (isStaking ? true : jurorBalance && parsedAmount <= jurorBalance[2]), + Boolean(isStaking ? balance && parsedAmount <= balance : jurorBalance && parsedAmount <= jurorBalance[2]), }, args: [BigInt(id ?? 0), targetStake], }); @@ -231,30 +236,26 @@ const StakeWithdrawButton: React.FC = ({ amount, parsedAmount, ac useEffect(() => { if (isPopupOpen) return; - if (setStakeError || allowanceError) { - setErrorMsg(parseWagmiError(setStakeError || allowanceError)); - } else if (targetStake !== 0n && courtDetails && targetStake < BigInt(courtDetails.court?.minStake)) { + if ( + action === ActionType.stake && + targetStake !== 0n && + courtDetails && + targetStake < BigInt(courtDetails.court?.minStake) + ) { setErrorMsg(`Min Stake in court is: ${formatETH(courtDetails?.court?.minStake)}`); + } else if (setStakeError || allowanceError) { + setErrorMsg(parseWagmiError(setStakeError || allowanceError)); } - }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen]); + }, [setStakeError, setErrorMsg, targetStake, courtDetails, allowanceError, isPopupOpen, action]); const isDisabled = useMemo(() => { - if ( - parsedAmount == 0n || - isUndefined(targetStake) || - isUndefined(courtDetails) || - (targetStake !== 0n && targetStake < BigInt(courtDetails.court?.minStake)) - ) - return true; + if (parsedAmount == 0n) return true; if (isAllowance) { return isUndefined(increaseAllowanceConfig) || isSimulatingAllowance || !isUndefined(allowanceError); } - return isUndefined(setStakeConfig) || isSimulatingSetStake || !isUndefined(setStakeError); }, [ parsedAmount, - targetStake, - courtDetails, increaseAllowanceConfig, isSimulatingAllowance, setStakeConfig, From cee02b717a27fce3f9e0c91b6b19496cd55c378f Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 12 Dec 2024 21:20:41 +0100 Subject: [PATCH 3/7] feat: add links to courts in extrastats, style adjustments --- .../DisputePreview/DisputeContext.tsx | 48 +++++++------------ web/src/components/ExtraStatsDisplay.tsx | 16 +++++-- .../hooks/queries/usePopulatedDisputeData.ts | 2 + .../CaseDetails/Evidence/EvidenceSearch.tsx | 2 +- .../StakePanel/Simulator/Header.tsx | 2 +- .../Courts/CourtDetails/StakePanel/index.tsx | 18 +++---- .../pages/Home/CourtOverview/ExtraStats.tsx | 8 +++- 7 files changed, 47 insertions(+), 49 deletions(-) diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 6f1cba411..68472a707 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -14,24 +14,20 @@ import { StyledSkeleton } from "components/StyledSkeleton"; import AliasDisplay from "./Alias"; import { Divider } from "../Divider"; +import { ExternalLink } from "../ExternalLink"; const StyledH1 = styled.h1` margin: 0; word-wrap: break-word; `; -const QuestionAndDescription = styled.div` - display: flex; - flex-direction: column; - word-wrap: break-word; - div:first-child p:first-of-type { - font-size: 16px; - font-weight: 400; +const ReactMarkdownWrapper = styled.div` + & p:first-of-type { margin: 0; } `; -const VotingOptions = styled(QuestionAndDescription)` +const VotingOptions = styled.div` display: flex; flex-direction: column; gap: 8px; @@ -51,19 +47,6 @@ const Answer = styled.div` display: flex; flex-wrap: wrap; gap: 6px; - > label { - max-width: 100%; - } -`; - -const StyledSmall = styled.small` - color: ${({ theme }) => theme.secondaryText}; - font-weight: 400; -`; - -const StyledLabel = styled.label` - color: ${({ theme }) => theme.primaryText}; - font-weight: 600; `; const AliasesContainer = styled.div` @@ -83,26 +66,29 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp <> {isUndefined(disputeDetails) ? : (disputeDetails?.title ?? errMsg)} {!isUndefined(disputeDetails) && ( - - {disputeDetails?.question} - {disputeDetails?.description} - + <> + + {disputeDetails?.question} + + + {disputeDetails?.description} + + )} {isUndefined(disputeDetails?.frontendUrl) ? null : ( - + Go to arbitrable - + )} {isUndefined(disputeDetails) ? null : Voting Options} {disputeDetails?.answers?.map((answer: IAnswer, i: number) => ( - {i + 1 + `.`} - - {answer.title} + + {answer.title} {answer.description.trim() ? ` - ${answer.description}` : null} - + ))} diff --git a/web/src/components/ExtraStatsDisplay.tsx b/web/src/components/ExtraStatsDisplay.tsx index 165e90fc0..a562708a2 100644 --- a/web/src/components/ExtraStatsDisplay.tsx +++ b/web/src/components/ExtraStatsDisplay.tsx @@ -3,6 +3,7 @@ import styled from "styled-components"; import { StyledSkeleton } from "components/StyledSkeleton"; import { isUndefined } from "utils/index"; +import { InternalLink } from "./InternalLink"; const Container = styled.div` display: flex; @@ -30,10 +31,8 @@ const TextContainer = styled.div` justify-content: center; `; -const StyledP = styled.p` - font-size: 14px; +const StyledInternalLink = styled(InternalLink)` font-weight: 600; - margin: 0; `; const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)` @@ -42,18 +41,25 @@ const StyledExtraStatTitleSkeleton = styled(StyledSkeleton)` export interface IExtraStatsDisplay { title: string; + courtId?: string; icon: React.FunctionComponent>; content?: React.ReactNode; text?: string; } -const ExtraStatsDisplay: React.FC = ({ title, text, content, icon: Icon, ...props }) => { +const ExtraStatsDisplay: React.FC = ({ title, courtId, text, content, icon: Icon, ...props }) => { return ( {} - {content ? content : {!isUndefined(text) ? text : }} + {content ? ( + content + ) : ( + + {!isUndefined(text) ? text : } + + )} ); diff --git a/web/src/hooks/queries/usePopulatedDisputeData.ts b/web/src/hooks/queries/usePopulatedDisputeData.ts index 8175d6354..d7268bce4 100644 --- a/web/src/hooks/queries/usePopulatedDisputeData.ts +++ b/web/src/hooks/queries/usePopulatedDisputeData.ts @@ -6,6 +6,7 @@ import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disput import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate"; import { useGraphqlBatcher } from "context/GraphqlBatcher"; +import { DEFAULT_CHAIN } from "consts/chains"; import { debounceErrorToast } from "utils/debounceErrorToast"; import { isUndefined } from "utils/index"; @@ -47,6 +48,7 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?: document: disputeTemplateQuery, variables: { id: disputeData.dispute?.templateId.toString() }, isDisputeTemplate: true, + chainId: DEFAULT_CHAIN, }); const templateData = disputeTemplate?.templateData; diff --git a/web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx b/web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx index 7aa1a3671..8d42dfebe 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/EvidenceSearch.tsx @@ -48,7 +48,7 @@ const EvidenceSearch: React.FC = ({ search, setSearch, evidence setSearch(e.target.value)} value={search} /> diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx index 3f44cb01b..3c1882d25 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/Header.tsx @@ -14,7 +14,7 @@ const Container = styled.div` const PNKLogoAndTitle = styled.div` display: flex; - gap: 0 16px; + gap: 0 12px; align-items: center; `; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index 34a3d5582..51749d478 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -15,18 +15,20 @@ const Container = styled.div` position: relative; display: flex; flex-direction: column; - gap: 28px; + gap: 16px; ${landscapeStyle( () => css` + gap: 24px; flex-direction: column; ` )}; `; -const LeftArea = styled.div` +const StakingArea = styled.div` display: flex; flex-direction: column; + gap: 24px; `; const TagArea = styled.div` @@ -34,13 +36,11 @@ const TagArea = styled.div` gap: 10px; `; -const StakeArea = styled(TagArea)` - margin-top: 28px; +const InputArea = styled(TagArea)` flex-direction: column; `; const TextArea = styled.div` - margin-top: 32px; color: ${({ theme }) => theme.primaryText}; `; @@ -57,7 +57,7 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour const isStaking = action === ActionType.stake; return ( - + handleClick(ActionType.stake)} /> handleClick(ActionType.withdraw)} /> @@ -67,10 +67,10 @@ const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Cour {courtName} {courtName.toLowerCase().endsWith("court") || courtName.toLowerCase().startsWith("corte") ? null : " Court"} - + - - + + ); diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx index 8d1f6253b..18112c115 100644 --- a/web/src/pages/Home/CourtOverview/ExtraStats.tsx +++ b/web/src/pages/Home/CourtOverview/ExtraStats.tsx @@ -26,6 +26,7 @@ const StyledLabel = styled.label` interface IStat { title: string; getText: (data) => string; + getCourtId: (data) => string; icon: React.FC>; } @@ -33,16 +34,19 @@ const stats: IStat[] = [ { title: "Most Cases", getText: ({ data }) => data?.mostDisputedCourt?.name, + getCourtId: ({ data }) => data?.mostDisputedCourt?.id, icon: LongArrowUp, }, { title: "Highest drawing chance", getText: ({ data }) => data?.bestDrawingChancesCourt?.name, + getCourtId: ({ data }) => data?.bestDrawingChancesCourt?.id, icon: LongArrowUp, }, { title: "Highest rewards chance", getText: ({ data }) => data?.bestExpectedRewardCourt?.name, + getCourtId: ({ data }) => data?.bestExpectedRewardCourt?.id, icon: LongArrowUp, }, ]; @@ -83,8 +87,8 @@ const ExtraStats = () => { {data.data?.mostDisputedCourt?.numberDisputes === 0 ? ( No activity in this period ) : ( - stats.map(({ title, getText, icon }) => ( - + stats.map(({ title, getCourtId, getText, icon }) => ( + )) )} From 10db6b7194d115382a9e53b898b8e222ab7426cd Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 12 Dec 2024 22:20:26 +0100 Subject: [PATCH 4/7] chore: adjust icons, gap in court details component --- web/src/assets/svgs/icons/ethereum-vote.svg | 3 +++ .../svgs/icons/law-balance-hourglass.svg | 3 +++ .../Courts/CourtDetails/StakePanel/index.tsx | 10 ++++---- web/src/pages/Courts/CourtDetails/Stats.tsx | 24 +++++++++++++++---- 4 files changed, 30 insertions(+), 10 deletions(-) create mode 100644 web/src/assets/svgs/icons/ethereum-vote.svg create mode 100644 web/src/assets/svgs/icons/law-balance-hourglass.svg diff --git a/web/src/assets/svgs/icons/ethereum-vote.svg b/web/src/assets/svgs/icons/ethereum-vote.svg new file mode 100644 index 000000000..43285b356 --- /dev/null +++ b/web/src/assets/svgs/icons/ethereum-vote.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/assets/svgs/icons/law-balance-hourglass.svg b/web/src/assets/svgs/icons/law-balance-hourglass.svg new file mode 100644 index 000000000..fd82a58de --- /dev/null +++ b/web/src/assets/svgs/icons/law-balance-hourglass.svg @@ -0,0 +1,3 @@ + + + diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index 51749d478..74c2f0a6b 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -28,7 +28,7 @@ const Container = styled.div` const StakingArea = styled.div` display: flex; flex-direction: column; - gap: 24px; + gap: 28px; `; const TagArea = styled.div` @@ -36,14 +36,14 @@ const TagArea = styled.div` gap: 10px; `; -const InputArea = styled(TagArea)` - flex-direction: column; -`; - const TextArea = styled.div` color: ${({ theme }) => theme.primaryText}; `; +const InputArea = styled(TagArea)` + flex-direction: column; +`; + const StakePanel: React.FC<{ courtName: string }> = ({ courtName = "General Court" }) => { const [amount, setAmount] = useState(""); const [isActive, setIsActive] = useState(true); diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 9be25ae14..a1a71d6df 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -7,7 +7,10 @@ import { useParams } from "react-router-dom"; import { Accordion } from "@kleros/ui-components-library"; import EthereumIcon from "svgs/icons/ethereum.svg"; +import EthereumVoteIcon from "svgs/icons/ethereum-vote.svg"; import BalanceIcon from "svgs/icons/law-balance.svg"; +import BalanceWithHourglassIcon from "svgs/icons/law-balance-hourglass.svg"; +import JurorIcon from "svgs/icons/user.svg"; import MinStake from "svgs/icons/min-stake.svg"; import PNKIcon from "svgs/icons/pnk.svg"; import PNKRedistributedIcon from "svgs/icons/redistributed-pnk.svg"; @@ -70,7 +73,6 @@ const StyledAllTimeText = styled.p` color: ${({ theme }) => theme.primaryText}; margin: 0; font-size: 14px; - font-weight: 600; `; const StyledChartIcon = styled(ChartIcon)` @@ -79,6 +81,18 @@ const StyledChartIcon = styled(ChartIcon)` } `; +const StyledEthereumVoteIcon = styled(EthereumVoteIcon)` + height: 32px !important; +`; + +const StyledJurorIcon = styled(JurorIcon)` + height: 15px !important; +`; + +const StyledBalanceWithHourglassIcon = styled(BalanceWithHourglassIcon)` + height: 32px !important; +`; + const AccordionContainer = styled.div` display: flex; flex-direction: column; @@ -132,7 +146,7 @@ const stats: IStat[] = [ }, getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.feeForJuror)) * (coinPrice ?? 0)), color: "blue", - icon: EthereumIcon, + icon: StyledEthereumVoteIcon, }, { title: "PNK Staked", @@ -146,7 +160,7 @@ const stats: IStat[] = [ title: "Active Jurors", getText: (data) => data?.numberStakedJurors, color: "green", - icon: PNKRedistributedIcon, + icon: StyledJurorIcon, }, { title: "Cases", @@ -158,10 +172,10 @@ const stats: IStat[] = [ title: "In Progress", getText: (data) => data?.numberDisputes - data?.numberClosedDisputes, color: "green", - icon: BalanceIcon, + icon: StyledBalanceWithHourglassIcon, }, { - title: "Total ETH paid", + title: "ETH paid", coinId: 1, getText: (data) => `${formatETH(data?.paidETH)} ETH`, getSubtext: (data, coinPrice) => formatUSD(Number(formatUnitsWei(data?.paidETH)) * (coinPrice ?? 0)), From 9921bc0499ff6a85d022febce94baf6aeb793850 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 13 Dec 2024 01:28:01 +0100 Subject: [PATCH 5/7] fix: appeal icon not showing, gap adjustments --- web/src/components/StyledIcons/ClosedCircleIcon.tsx | 3 ++- web/src/components/Verdict/DisputeTimeline.tsx | 7 ++++--- web/src/pages/Courts/CourtDetails/StakePanel/index.tsx | 2 +- web/src/pages/Courts/CourtDetails/index.tsx | 2 +- 4 files changed, 8 insertions(+), 6 deletions(-) diff --git a/web/src/components/StyledIcons/ClosedCircleIcon.tsx b/web/src/components/StyledIcons/ClosedCircleIcon.tsx index 29b7e47a3..14bf877fe 100644 --- a/web/src/components/StyledIcons/ClosedCircleIcon.tsx +++ b/web/src/components/StyledIcons/ClosedCircleIcon.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import ClosedCircle from "svgs/icons/close-circle.svg"; -const StyledClosedCircle = styled(ClosedCircle)` +export const StyledClosedCircle = styled(ClosedCircle)` path { fill: ${({ theme }) => theme.error}; } @@ -11,4 +11,5 @@ const StyledClosedCircle = styled(ClosedCircle)` const ClosedCircleIcon: React.FC = () => { return ; }; + export default ClosedCircleIcon; diff --git a/web/src/components/Verdict/DisputeTimeline.tsx b/web/src/components/Verdict/DisputeTimeline.tsx index 0947ab043..a120bf9fa 100644 --- a/web/src/components/Verdict/DisputeTimeline.tsx +++ b/web/src/components/Verdict/DisputeTimeline.tsx @@ -1,13 +1,14 @@ import React, { useMemo } from "react"; import styled, { useTheme } from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import { useParams } from "react-router-dom"; import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library"; import CalendarIcon from "svgs/icons/calendar.svg"; import ClosedCaseIcon from "svgs/icons/check-circle-outline.svg"; -import AppealedCaseIcon from "svgs/icons/close-circle.svg"; import { Periods } from "consts/periods"; import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData"; @@ -19,7 +20,7 @@ import { useVotingHistory } from "queries/useVotingHistory"; import { ClassicRound } from "src/graphql/graphql"; -import { responsiveSize } from "styles/responsiveSize"; +import { StyledClosedCircle } from "components/StyledIcons/ClosedCircleIcon"; const Container = styled.div` display: flex; @@ -101,7 +102,7 @@ const useItems = (disputeDetails?: DisputeDetailsQuery, arbitrable?: `0x${string party: "", subtitle: formatDate(roundTimeline?.[Periods.appeal]), rightSided: true, - Icon: AppealedCaseIcon, + Icon: StyledClosedCircle, }); } else if (rulingOverride && parsedDisputeFinalRuling !== parsedRoundChoice) { acc.push({ diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx index 74c2f0a6b..4d676c362 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/index.tsx @@ -28,7 +28,7 @@ const Container = styled.div` const StakingArea = styled.div` display: flex; flex-direction: column; - gap: 28px; + gap: 24px; `; const TagArea = styled.div` diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 397954a4d..e255cb103 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -32,7 +32,7 @@ const CourtHeader = styled.h1` display: flex; flex-direction: row; justify-content: space-between; - gap: 24px; + gap: 8px; flex-wrap: wrap; margin-bottom: 16px; `; From 4776c3139ba432dc2540110d204c4487e571cd43 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Fri, 13 Dec 2024 10:41:35 +0530 Subject: [PATCH 6/7] fix(web): fix-overlay-scroll-lock --- .../Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx | 2 ++ .../Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx | 2 -- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx index 7738650bb..d8269fa4f 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx @@ -16,6 +16,7 @@ import { useWritePnkIncreaseAllowance, } from "hooks/contracts/generated"; import { useCourtDetails } from "hooks/queries/useCourtDetails"; +import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import { usePnkData } from "hooks/usePNKData"; import { formatETH } from "utils/format"; import { isUndefined } from "utils/index"; @@ -55,6 +56,7 @@ const StakeWithdrawButton: React.FC = ({ amount, parsedAmount, ac const [isSuccess, setIsSuccess] = useState(false); const [popupStepsState, setPopupStepsState] = useState(); const controllerRef = useRef(null); + useLockOverlayScroll(isPopupOpen); const { data: courtDetails } = useCourtDetails(id); const { balance, jurorBalance, allowance, refetchAllowance } = usePnkData({ courtId: id }); diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx index 5b5f891fe..e226edf30 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawPopup/index.tsx @@ -5,7 +5,6 @@ import { _TimelineItem1, CustomTimeline } from "@kleros/ui-components-library"; import Close from "svgs/icons/close.svg"; -import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import { useSortitionModulePhase } from "hooks/useSortitionModule"; import { landscapeStyle } from "styles/landscapeStyle"; @@ -112,7 +111,6 @@ interface IStakeWithdrawPopup { } const StakeWithdrawPopup: React.FC = ({ amount, closePopup, steps, isSuccess, action }) => { - useLockOverlayScroll(true); const { data: phase } = useSortitionModulePhase(); return ( From c65acd9436570fa8329eff526452df3173c6039d Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Fri, 13 Dec 2024 14:29:36 +0100 Subject: [PATCH 7/7] refactor: abstract max width landscape --- web/src/components/ErrorFallback.tsx | 8 ++++---- web/src/pages/Cases/index.tsx | 3 ++- web/src/pages/Courts/index.tsx | 7 ++++--- web/src/pages/Dashboard/index.tsx | 7 ++++--- web/src/pages/GetPnk/index.tsx | 7 ++++--- web/src/pages/Home/index.tsx | 7 ++++--- web/src/pages/Resolver/index.tsx | 4 ++-- web/src/pages/Settings/index.tsx | 7 ++++--- web/src/styles/landscapeStyle.ts | 2 ++ 9 files changed, 30 insertions(+), 22 deletions(-) diff --git a/web/src/components/ErrorFallback.tsx b/web/src/components/ErrorFallback.tsx index 87fcd8a6a..dd1428839 100644 --- a/web/src/components/ErrorFallback.tsx +++ b/web/src/components/ErrorFallback.tsx @@ -1,15 +1,15 @@ import React from "react"; import styled, { css } from "styled-components"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { FallbackProps } from "react-error-boundary"; import { Button } from "@kleros/ui-components-library"; import ErrorIcon from "svgs/icons/warning-outline.svg"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; - import HeroImage from "./HeroImage"; const Container = styled.div` @@ -17,7 +17,7 @@ const Container = styled.div` height: 100vh; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index c43ace3b2..0dda22163 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -1,5 +1,6 @@ import React from "react"; import styled from "styled-components"; +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; import { Routes, Route } from "react-router-dom"; @@ -13,7 +14,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index a5372a0ce..691c849d2 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -1,9 +1,10 @@ import React from "react"; import styled from "styled-components"; -import { Routes, Route, Navigate } from "react-router-dom"; - import { responsiveSize } from "styles/responsiveSize"; +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; + +import { Routes, Route, Navigate } from "react-router-dom"; import CourtDetails from "./CourtDetails"; import TopSearch from "./TopSearch"; @@ -12,7 +13,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index 6bf2a2ded..5aa271d7e 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -1,6 +1,9 @@ import React, { useMemo } from "react"; import styled from "styled-components"; +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { useNavigate, useParams } from "react-router-dom"; import { useAccount } from "wagmi"; @@ -12,8 +15,6 @@ import { useUserQuery } from "queries/useUser"; import { OrderDirection } from "src/graphql/graphql"; -import { responsiveSize } from "styles/responsiveSize"; - import CasesDisplay from "components/CasesDisplay"; import ConnectWallet from "components/ConnectWallet"; import ScrollTop from "components/ScrollTop"; @@ -25,7 +26,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index 00680ae11..dce7ea464 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -1,10 +1,11 @@ import React from "react"; import styled from "styled-components"; -import { isProductionDeployment } from "consts/index"; - +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { isProductionDeployment } from "consts/index"; + import ClaimPnkButton from "components/ClaimPnkButton"; import HeroImage from "components/HeroImage"; import ScrollTop from "components/ScrollTop"; @@ -19,7 +20,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; display: flex; flex-direction: column; diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 1a5acca99..0ca9d370c 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,11 +1,12 @@ import React from "react"; import styled from "styled-components"; +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + import { HomePageProvider } from "hooks/useHomePageContext"; import { getOneYearAgoTimestamp } from "utils/date"; -import { responsiveSize } from "styles/responsiveSize"; - import HeroImage from "components/HeroImage"; import LatestCases from "components/LatestCases"; import ScrollTop from "components/ScrollTop"; @@ -22,7 +23,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Resolver/index.tsx b/web/src/pages/Resolver/index.tsx index d20faffb8..386f16c75 100644 --- a/web/src/pages/Resolver/index.tsx +++ b/web/src/pages/Resolver/index.tsx @@ -5,7 +5,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom"; import { useToggle } from "react-use"; import { useAccount } from "wagmi"; -import { landscapeStyle } from "styles/landscapeStyle"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import ConnectWallet from "components/ConnectWallet"; @@ -38,7 +38,7 @@ const Container = styled.div` padding: ${responsiveSize(24, 32)}; padding-top: ${responsiveSize(24, 28)}; padding-bottom: ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Settings/index.tsx b/web/src/pages/Settings/index.tsx index 3b1d9a2a2..e85ec6f68 100644 --- a/web/src/pages/Settings/index.tsx +++ b/web/src/pages/Settings/index.tsx @@ -1,17 +1,18 @@ import React from "react"; import styled from "styled-components"; -import { Route, Routes } from "react-router-dom"; - +import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { Route, Routes } from "react-router-dom"; + import EmailConfirmation from "./EmailConfirmation"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; padding: ${responsiveSize(32, 80)} ${responsiveSize(24, 136)} ${responsiveSize(76, 96)}; - max-width: 1400px; + max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/styles/landscapeStyle.ts b/web/src/styles/landscapeStyle.ts index a54121f1f..ac781c110 100644 --- a/web/src/styles/landscapeStyle.ts +++ b/web/src/styles/landscapeStyle.ts @@ -1,5 +1,7 @@ import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components"; +export const MAX_WIDTH_LANDSCAPE = "1400px"; + export const BREAKPOINT_LANDSCAPE = 900; export const landscapeStyle = (styleFn: () => FlattenInterpolation>) => css`