From 13aa86052255526df893aeb4a6263b5e7bcaf0f5 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Fri, 27 Oct 2023 23:17:09 +0200 Subject: [PATCH 01/31] feat(web): add debug info to desktop version in help component --- web/src/layout/Header/navbar/Menu/Help.tsx | 4 +++- web/src/layout/Header/navbar/index.tsx | 2 -- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index 320ec29c7..cbc9891cc 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -9,6 +9,7 @@ import ETH from "svgs/icons/eth.svg"; import Faq from "svgs/menu-icons/help.svg"; import Telegram from "svgs/socialmedia/telegram.svg"; import { IHelp } from ".."; +import Debug from "../Debug"; const Container = styled.div` display: flex; @@ -32,7 +33,7 @@ const Container = styled.div` ${landscapeStyle( () => css` margin-top: 64px; - width: 240px; + width: 260px; top: 0; right: 0; left: auto; @@ -112,6 +113,7 @@ const Help: React.FC = ({ toggleIsHelpOpen }) => { {item.text} ))} + ); }; diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 5faf54147..fc7205d52 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -11,7 +11,6 @@ import LightButton from "components/LightButton"; import { Overlay } from "components/Overlay"; import KlerosSolutionsIcon from "svgs/menu-icons/kleros-solutions.svg"; import Menu from "./Menu"; -import Debug from "./Debug"; import Help from "./Menu/Help"; import Settings from "./Menu/Settings"; import { DisconnectWalletButton } from "./Menu/Settings/General"; @@ -97,7 +96,6 @@ const NavBar: React.FC = () => {

- {(isDappListOpen || isHelpOpen || isSettingsOpen) && ( From 9b8a25adb519984f10ebc70fd06fc146eea737ac Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Sun, 29 Oct 2023 02:22:25 +0200 Subject: [PATCH 02/31] feat(web): set some structure basis for the desktop my courts section --- web/src/pages/Dashboard/Courts/CourtCard.tsx | 81 +++++++++++++------ web/src/pages/Dashboard/Courts/Header.tsx | 84 ++++++++++++++++++++ web/src/pages/Dashboard/Courts/index.tsx | 28 +++++-- 3 files changed, 159 insertions(+), 34 deletions(-) create mode 100644 web/src/pages/Dashboard/Courts/Header.tsx diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx index c199929e7..48b5ec542 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard.tsx @@ -1,37 +1,66 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import { useAccount } from "wagmi"; import { formatUnits } from "viem"; import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library"; -import WithHelpTooltip from "../WithHelpTooltip"; import { isUndefined } from "utils/index"; import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated"; const Card = styled(_Card)` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; height: auto; width: 100%; - padding: 12px 24px; + padding: 21.5px 32px 21.5px 27px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; + flex-wrap: wrap; `; -const ValueContainer = styled.div` - width: 100%; +const CourtName = styled.div` + small { + height: 100%; + } + + ${landscapeStyle(() => css``)} +`; + +const StyledBreadcrumb = styled(Breadcrumb)` display: flex; align-items: center; - justify-content: space-between; + height: 100%; `; -const StyledBreadcrumb = styled(Breadcrumb)` - margin-bottom: 12px; +const StakesContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + + ${landscapeStyle(() => css``)} `; -const tooltipMsg = - "When a juror is selected to arbitrate a case, part of their stake (PNK) is " + - "locked until the case is resolved. Jurors whose vote is coherent with the " + - "final jury decision have their locked stake released. Jurors whose vote " + - "is not coherent with the final jury decision, lose their locked stake. " + - "The locked stake of incoherent jurors is redistributed as incentives for " + - "the coherent jurors."; +const Stake = styled.div` + display: flex; + width: 69px; + label { + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; + } +`; + +const LockedStake = styled.div` + display: flex; + gap: 8px; + width: 112px; + justify-content: flex-end; + align-items: flex-end; + + label { + color: ${({ theme }) => theme.primaryText}; + } +`; interface ICourtCard { id: string; @@ -53,17 +82,17 @@ const CourtCard: React.FC = ({ id, name }) => { return stake > 0 || lockedStake > 0 ? ( - - - - {`${formatedStake} PNK`} - - - - - - {`${formatedLockedStake} PNK`} - + + + + + + + + + + + ) : null; }; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx new file mode 100644 index 000000000..1b8c30c9e --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -0,0 +1,84 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; + +const Container = styled.div` + display: flex; + justify-content: space-between; + width: 100%; + height: 100%; + background-color: transparent; + padding: 24px; + flex-wrap: wrap; + + ${landscapeStyle( + () => + css` + flex-wrap: nowrap; + gap: 0px; + padding: 23.15px 32px; + ` + )} +`; + +const CourtName = styled.div` + width: 100%; + + ${landscapeStyle(() => css``)} +`; + +const StakesContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + + ${landscapeStyle( + () => + css` + width: 206px; + ` + )} +`; + +const Stake = styled.div` + display: flex; + width: 69px; +`; + +const LockedStake = styled.div` + display: flex; + align-items: center; + gap: 8px; + width: 112px; +`; + +const lockedStakeTooltipMsg = + "When a juror is selected to arbitrate a case, part of their stake (PNK) is " + + "locked until the case is resolved. Jurors whose vote is coherent with the " + + "final jury decision have their locked stake released. Jurors whose vote " + + "is not coherent with the final jury decision, lose their locked stake. " + + "The locked stake of incoherent jurors is redistributed as incentives for " + + "the coherent jurors."; + +const Header: React.FC = () => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export default Header; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index f82427133..d3c468e75 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -5,6 +5,7 @@ import { useFragment as getFragment } from "src/graphql"; import { useUserQuery, userFragment } from "queries/useUser"; import { isUndefined } from "utils/index"; import CourtCard from "./CourtCard"; +import Header from "./Header"; const Container = styled.div` margin-top: 64px; @@ -14,7 +15,15 @@ const Container = styled.div` } `; -const CourtsContainer = styled.div` +const Divider = styled.hr` + display: flex; + border: none; + height: 1px; + background-color: ${({ theme }) => theme.stroke}; + margin: 0; +`; + +const CourtCardsContainer = styled.div` display: flex; flex-direction: column; gap: 8px; @@ -29,14 +38,17 @@ const Courts: React.FC = () => { return (

My Courts

- {!isUndefined(data) ?
: null} - - {!isUndefined(data) - ? user?.tokens?.map(({ court: { id, name } }) => { + + {!isUndefined(data) ? ( + <> +
+ + {user?.tokens?.map(({ court: { id, name } }) => { return ; - }) - : null} - + })} + + + ) : null} ); }; From bea87bed52155f5a2973fcdd53ffdd8412ccca97 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Mon, 30 Oct 2023 13:22:28 +0100 Subject: [PATCH 03/31] fix(web): some gap between court name and stake data --- web/src/pages/Dashboard/Courts/CourtCard.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx index 48b5ec542..e8021b2e9 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard.tsx @@ -9,7 +9,7 @@ import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated"; const Card = styled(_Card)` display: flex; - flex-direction: row; + flex-direction: column; align-items: center; justify-content: space-between; height: auto; @@ -17,6 +17,14 @@ const Card = styled(_Card)` padding: 21.5px 32px 21.5px 27px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; flex-wrap: wrap; + gap: 20px; + + ${landscapeStyle( + () => + css` + flex-direction: row; + ` + )} `; const CourtName = styled.div` From 873399d7408a62064be78024ab707cd50afdb609 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:27:31 +0100 Subject: [PATCH 04/31] feat(web): add how it works miniguide to dashboard, style header for mobile --- web/src/pages/Dashboard/JurorInfo/Header.tsx | 28 ++++++++++++++++---- 1 file changed, 23 insertions(+), 5 deletions(-) diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index a3eb04a09..abba588a5 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -1,22 +1,39 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import XIcon from "svgs/socialmedia/x.svg"; +import HowItWorks from "pages/Home/TopJurors/Header/HowItWorks"; +import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` display: flex; - flex-direction: row; + flex-direction: column; align-items: center; justify-content: space-between; + + ${landscapeStyle( + () => css` + flex-direction: row; + ` + )} `; const StyledTitle = styled.h1` margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); `; -const XLinkContainer = styled.div` +const LinksContainer = styled.div` display: flex; color: ${({ theme }) => theme.primaryBlue}; margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + align-items: center; + gap: 24px; + flex-wrap: wrap; + + ${landscapeStyle( + () => css` + gap: 32px; + ` + )} `; const StyledXIcon = styled(XIcon)` @@ -52,11 +69,12 @@ const Header: React.FC = ({ levelTitle, levelNumber, totalCoherent, tot return ( Juror Dashboard - + + Share your juror score - + ); }; From aefcc48c100fc376b3e4898725119d2b0c778493 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 15:33:38 +0100 Subject: [PATCH 05/31] feat(web): hide share juror score button if you have 0 cases --- web/src/pages/Dashboard/JurorInfo/Header.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index abba588a5..3fedf1b8c 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -71,9 +71,11 @@ const Header: React.FC = ({ levelTitle, levelNumber, totalCoherent, tot Juror Dashboard - - Share your juror score - + {totalResolvedDisputes > 0 ? ( + + Share your juror score + + ) : null} ); From be3968b724cbe2d50f6853c40a4cedcecf222b86 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:17:03 +0100 Subject: [PATCH 06/31] fix(web): correction on topjurors styling --- web/src/pages/Dashboard/WithHelpTooltip.tsx | 4 +++- web/src/pages/Home/TopJurors/Header/Rewards.tsx | 4 ++-- web/src/pages/Home/TopJurors/Header/index.tsx | 2 +- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/pages/Dashboard/WithHelpTooltip.tsx b/web/src/pages/Dashboard/WithHelpTooltip.tsx index 3a4fddb39..395b0ea66 100644 --- a/web/src/pages/Dashboard/WithHelpTooltip.tsx +++ b/web/src/pages/Dashboard/WithHelpTooltip.tsx @@ -10,10 +10,12 @@ const Container = styled.div` `; const HelpIcon = styled(_HelpIcon)` + display: flex; + align-items: center; height: 12px; width: 12px; fill: ${({ theme }) => theme.secondaryText}; - margin: 4px 4px 6px 8px; + margin: 0 0 0 8px; ${landscapeStyle( () => css` diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 02b062e87..8d178eb3c 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -5,12 +5,12 @@ import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` display: flex; + color: ${({ theme }) => theme.secondaryText}; + font-size: 12px !important; &::before { content: "Rewards"; } - color: ${({ theme }) => theme.secondaryText}; - align-items: center; ${landscapeStyle( () => diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx index 005681e04..8a8ff1ec7 100644 --- a/web/src/pages/Home/TopJurors/Header/index.tsx +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -61,7 +61,7 @@ const Header: React.FC = () => { - toggleIsLevelMiniGuidesOpen()} /> + ); }; From 175162688d161b08879d92459b6cf194c7a1bc93 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 17:38:42 +0100 Subject: [PATCH 07/31] feat(web): slight adjustment topjurors mobile component --- web/src/pages/Home/TopJurors/Header/Rewards.tsx | 1 + web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 8d178eb3c..6f55edfae 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -6,6 +6,7 @@ import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` display: flex; color: ${({ theme }) => theme.secondaryText}; + gap: 0px; font-size: 12px !important; &::before { diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index 910c5595b..479006212 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -19,7 +19,7 @@ const Container = styled.div` border 1px solid ${({ theme }) => theme.stroke}; border-top: none; align-items: center; - gap: 20px; + gap: 18px; ${landscapeStyle( () => css` @@ -47,6 +47,7 @@ const HeaderRewardsAndRewards = styled.div` display: flex; flex-direction: column; width: 100%; + gap: 5px; `; const BottomSide = styled.div` @@ -60,6 +61,7 @@ const HeaderCoherencyAndCoherency = styled.div` display: flex; flex-direction: column; align-items: flex-end; + gap: 3px; svg { margin-right: 0; From 7a7eef678a69ab5703280da7ca838460bf00541d Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 20:26:33 +0100 Subject: [PATCH 08/31] feat(web): create new query for juror stakes, change whole structure of courts index and courtcard --- .../queries/useJurorStakeDetailsQuery.ts | 28 +++++++++++++++++ web/src/pages/Dashboard/Courts/CourtCard.tsx | 29 ++++++------------ web/src/pages/Dashboard/Courts/index.tsx | 30 ++++++++++++------- 3 files changed, 57 insertions(+), 30 deletions(-) create mode 100644 web/src/hooks/queries/useJurorStakeDetailsQuery.ts diff --git a/web/src/hooks/queries/useJurorStakeDetailsQuery.ts b/web/src/hooks/queries/useJurorStakeDetailsQuery.ts new file mode 100644 index 000000000..7de7effb5 --- /dev/null +++ b/web/src/hooks/queries/useJurorStakeDetailsQuery.ts @@ -0,0 +1,28 @@ +import { graphql } from "src/graphql"; +import { JurorStakeDetailsQuery } from "src/graphql/graphql"; +import { useQuery } from "@tanstack/react-query"; +import { graphqlQueryFnHelper } from "utils/graphqlQueryFnHelper"; +export type { JurorStakeDetailsQuery }; + +const jurorStakeDetailsQuery = graphql(` + query JurorStakeDetails($userId: String) { + jurorTokensPerCourts(where: { juror: $userId }) { + court { + id + name + } + staked + locked + } + } +`); + +export const useJurorStakeDetailsQuery = (userId?: string) => { + const isEnabled = userId !== undefined; + + return useQuery({ + queryKey: ["refetchOnBlock", `jurorStakeDetails${userId}`], + enabled: isEnabled, + queryFn: async () => await graphqlQueryFnHelper(jurorStakeDetailsQuery, { userId }), + }); +}; diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx index e8021b2e9..ed72e1810 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard.tsx @@ -1,11 +1,8 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import { useAccount } from "wagmi"; import { formatUnits } from "viem"; import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library"; -import { isUndefined } from "utils/index"; -import { useKlerosCoreGetJurorBalance } from "hooks/contracts/generated"; const Card = styled(_Card)` display: flex; @@ -71,38 +68,30 @@ const LockedStake = styled.div` `; interface ICourtCard { - id: string; name: string; + stake: bigint; + lockedStake: bigint; } -const CourtCard: React.FC = ({ id, name }) => { - const { address } = useAccount(); - const { data: jurorBalance } = useKlerosCoreGetJurorBalance({ - enabled: !isUndefined(address), - args: [address!, BigInt(id)], - watch: true, - }); +const CourtCard: React.FC = ({ name, stake, lockedStake }) => { + const formattedStake = formatUnits(stake, 18); + const formattedLockedStake = formatUnits(lockedStake, 18); - const stake = jurorBalance?.[0] ?? BigInt(0); - const lockedStake = jurorBalance?.[1] ?? BigInt(0); - const formatedStake = formatUnits(stake, 18); - const formatedLockedStake = formatUnits(lockedStake, 18); - - return stake > 0 || lockedStake > 0 ? ( + return ( - + - + - ) : null; + ); }; export default CourtCard; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index d3c468e75..6373afd8c 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -1,9 +1,8 @@ import React from "react"; import styled from "styled-components"; import { useAccount } from "wagmi"; -import { useFragment as getFragment } from "src/graphql"; -import { useUserQuery, userFragment } from "queries/useUser"; -import { isUndefined } from "utils/index"; +import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; +import Skeleton from "react-loading-skeleton"; import CourtCard from "./CourtCard"; import Header from "./Header"; @@ -30,22 +29,33 @@ const CourtCardsContainer = styled.div` z-index: 0; `; +const StyledLabel = styled.label` + display: flex; + font-size: 16px; + color: ${({ theme }) => theme.secondaryText}; +`; + const Courts: React.FC = () => { const { address } = useAccount(); - const { data } = useUserQuery(address?.toLowerCase() as `0x${string}`); - const user = getFragment(userFragment, data?.user); + const { data: stakeData, isLoading } = useJurorStakeDetailsQuery(address?.toLowerCase() as `0x${string}`); + const stakedCourts = stakeData?.jurorTokensPerCourts?.filter(({ staked, locked }) => staked > 0 || locked > 0); + const isStaked = stakedCourts && stakedCourts.length > 0; return (

My Courts

- - {!isUndefined(data) ? ( + {isLoading ? : null} + {!isStaked && !isLoading ? You are not staked in any court : null} + {isStaked && !isLoading ? ( <> +
- {user?.tokens?.map(({ court: { id, name } }) => { - return ; - })} + {stakeData?.jurorTokensPerCourts + ?.filter(({ staked, locked }) => staked > 0 || locked > 0) + .map(({ court: { id, name }, staked, locked }) => ( + + ))} ) : null} From aec94519ffd576c426450477b9ed601717730137 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Tue, 31 Oct 2023 22:06:09 +0100 Subject: [PATCH 09/31] feat(web): add skeleton to evidencecard and empty evidence message --- web/src/components/StyledSkeleton.tsx | 7 +++ .../Cases/CaseDetails/Evidence/index.tsx | 47 +++++++++++-------- web/src/pages/Dashboard/Courts/index.tsx | 2 - 3 files changed, 35 insertions(+), 21 deletions(-) diff --git a/web/src/components/StyledSkeleton.tsx b/web/src/components/StyledSkeleton.tsx index 0d695e0dc..913a350a6 100644 --- a/web/src/components/StyledSkeleton.tsx +++ b/web/src/components/StyledSkeleton.tsx @@ -31,6 +31,11 @@ const StyledSkeletonDisputeListItem = styled(Skeleton)` height: 62px; `; +const StyledSkeletonEvidenceCard = styled(Skeleton)` + height: 146px; + width: 76vw; +`; + export const SkeletonDisputeCard = () => ( @@ -38,3 +43,5 @@ export const SkeletonDisputeCard = () => ( ); export const SkeletonDisputeListItem = () => ; + +export const SkeletonEvidenceCard = () => ; diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index ea06d40da..2e5cd12b1 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -6,6 +6,7 @@ import { Button, Searchbar } from "@kleros/ui-components-library"; import { useEvidenceGroup } from "queries/useEvidenceGroup"; import { useEvidences } from "queries/useEvidences"; import SubmitEvidenceModal from "./SubmitEvidenceModal"; +import { SkeletonEvidenceCard } from "components/StyledSkeleton"; import EvidenceCard from "components/EvidenceCard"; import { EnsureChain } from "components/EnsureChain"; import { isUndefined } from "utils/index"; @@ -24,6 +25,12 @@ const StyledButton = styled(Button)` align-self: flex-end; `; +const StyledLabel = styled.label` + display: flex; + margin-top: 16px; + font-size: 16px; +`; + const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => { const [isModalOpen, setIsModalOpen] = useState(false); const { id } = useParams(); @@ -33,25 +40,27 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => { return ( - <> - {!isUndefined(evidenceGroup) && ( - setIsModalOpen(false)} {...{ evidenceGroup }} /> - )} - - - setIsModalOpen(true)} - /> - - {data && - data.evidences.map(({ key, evidence, sender }, i) => ( - - ))} - + {!isUndefined(evidenceGroup) && ( + setIsModalOpen(false)} {...{ evidenceGroup }} /> + )} + + + setIsModalOpen(true)} + /> + + {data ? ( + data.evidences.map(({ key, evidence, sender }, i) => ( + + )) + ) : ( + + )} + {data && data.evidences.length === 0 ? There is no evidence submitted yet : null} ); }; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 6373afd8c..e7acc3a15 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -30,9 +30,7 @@ const CourtCardsContainer = styled.div` `; const StyledLabel = styled.label` - display: flex; font-size: 16px; - color: ${({ theme }) => theme.secondaryText}; `; const Courts: React.FC = () => { From a5f70c0b5737298ed4ea5d31baec2bb1b9fb1771 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 1 Nov 2023 00:19:54 +0100 Subject: [PATCH 10/31] fix(web): modularization of components, mobilecard, desktopcard, style changes --- .../components/Popup/MiniGuides/Template.tsx | 4 + web/src/pages/Dashboard/Courts/CourtCard.tsx | 97 ------------------- .../Courts/CourtCard/CourtBranch.tsx | 31 ++++++ .../Courts/CourtCard/DesktopCard.tsx | 59 +++++++++++ .../Courts/CourtCard/LockedStake.tsx | 27 ++++++ .../Dashboard/Courts/CourtCard/MobileCard.tsx | 58 +++++++++++ .../Dashboard/Courts/CourtCard/Stake.tsx | 28 ++++++ .../Dashboard/Courts/CourtCard/index.tsx | 22 +++++ web/src/pages/Dashboard/Courts/Header.tsx | 84 ---------------- .../Dashboard/Courts/Header/CourtBranch.tsx | 18 ++++ .../Dashboard/Courts/Header/LockedStake.tsx | 36 +++++++ .../pages/Dashboard/Courts/Header/Stake.tsx | 14 +++ .../pages/Dashboard/Courts/Header/index.tsx | 53 ++++++++++ web/src/pages/Dashboard/Courts/index.tsx | 2 +- .../Home/TopJurors/Header/HowItWorks.tsx | 5 + 15 files changed, 356 insertions(+), 182 deletions(-) delete mode 100644 web/src/pages/Dashboard/Courts/CourtCard.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx create mode 100644 web/src/pages/Dashboard/Courts/CourtCard/index.tsx delete mode 100644 web/src/pages/Dashboard/Courts/Header.tsx create mode 100644 web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx create mode 100644 web/src/pages/Dashboard/Courts/Header/LockedStake.tsx create mode 100644 web/src/pages/Dashboard/Courts/Header/Stake.tsx create mode 100644 web/src/pages/Dashboard/Courts/Header/index.tsx diff --git a/web/src/components/Popup/MiniGuides/Template.tsx b/web/src/components/Popup/MiniGuides/Template.tsx index d8bcb18a5..c9a454175 100644 --- a/web/src/components/Popup/MiniGuides/Template.tsx +++ b/web/src/components/Popup/MiniGuides/Template.tsx @@ -76,6 +76,10 @@ const Close = styled.label` justify-content: flex-end; cursor: pointer; + &:hover { + text-decoration: underline; + } + color: ${({ theme }) => theme.primaryBlue}; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/Courts/CourtCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard.tsx deleted file mode 100644 index ed72e1810..000000000 --- a/web/src/pages/Dashboard/Courts/CourtCard.tsx +++ /dev/null @@ -1,97 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { formatUnits } from "viem"; -import { Card as _Card, Breadcrumb } from "@kleros/ui-components-library"; - -const Card = styled(_Card)` - display: flex; - flex-direction: column; - align-items: center; - justify-content: space-between; - height: auto; - width: 100%; - padding: 21.5px 32px 21.5px 27px; - border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; - flex-wrap: wrap; - gap: 20px; - - ${landscapeStyle( - () => - css` - flex-direction: row; - ` - )} -`; - -const CourtName = styled.div` - small { - height: 100%; - } - - ${landscapeStyle(() => css``)} -`; - -const StyledBreadcrumb = styled(Breadcrumb)` - display: flex; - align-items: center; - height: 100%; -`; - -const StakesContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - ${landscapeStyle(() => css``)} -`; - -const Stake = styled.div` - display: flex; - width: 69px; - label { - font-weight: 600; - color: ${({ theme }) => theme.primaryText}; - } -`; - -const LockedStake = styled.div` - display: flex; - gap: 8px; - width: 112px; - justify-content: flex-end; - align-items: flex-end; - - label { - color: ${({ theme }) => theme.primaryText}; - } -`; - -interface ICourtCard { - name: string; - stake: bigint; - lockedStake: bigint; -} - -const CourtCard: React.FC = ({ name, stake, lockedStake }) => { - const formattedStake = formatUnits(stake, 18); - const formattedLockedStake = formatUnits(lockedStake, 18); - - return ( - - - - - - - - - - - - - - ); -}; - -export default CourtCard; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx new file mode 100644 index 000000000..1c07daf21 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { Breadcrumb } from "@kleros/ui-components-library"; + +const CourtName = styled.div` + small { + height: 100%; + } + + ${landscapeStyle(() => css``)} +`; + +const StyledBreadcrumb = styled(Breadcrumb)` + display: flex; + align-items: center; + height: 100%; +`; + +interface ICourtBranch { + name: string; +} + +const CourtBranch: React.FC = ({ name }) => { + return ( + + + + ); +}; +export default CourtBranch; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx new file mode 100644 index 000000000..da0edd184 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { Card as _Card } from "@kleros/ui-components-library"; +import CourtBranch from "./CourtBranch"; +import Stake from "./Stake"; +import LockedStake from "./LockedStake"; + +const Container = styled(_Card)` + display: none; + + flex-direction: row; + align-items: center; + justify-content: space-between; + height: auto; + width: 100%; + padding: 21.5px 32px 21.5px 27px; + border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; + flex-wrap: wrap; + gap: 20px; + + ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} + + ${landscapeStyle( + () => + css` + display: flex; + ` + )} +`; + +const StakesContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 220px; + gap: 32px; +`; + +interface IDesktopCard { + name: string; + stake: bigint; + lockedStake: bigint; +} + +const DesktopCard: React.FC = ({ name, stake, lockedStake }) => { + return ( + + + + + + + + ); +}; + +export default DesktopCard; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx new file mode 100644 index 000000000..e3db4483e --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { formatUnits } from "viem"; + +const StyledLockedStakeLabel = styled.label` + display: flex; + justify-content: flex-end; + color: ${({ theme }) => theme.primaryText}; + + ${landscapeStyle( + () => css` + min-width: 107px; + ` + )} +`; + +interface ILockedStake { + lockedStake: bigint; +} + +const LockedStake: React.FC = ({ lockedStake }) => { + const formattedLockedStake = formatUnits(lockedStake, 18); + + return {`${formattedLockedStake} PNK`}; +}; +export default LockedStake; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx new file mode 100644 index 000000000..d26391a6c --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx @@ -0,0 +1,58 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { Card as _Card } from "@kleros/ui-components-library"; +import CourtBranch from "./CourtBranch"; +import Stake from "./Stake"; +import LockedStake from "./LockedStake"; + +const Container = styled(_Card)` + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + height: auto; + width: 100%; + padding: 21.5px 32px 21.5px 27px; + border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; + flex-wrap: wrap; + gap: 20px; + + ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} + + ${landscapeStyle( + () => + css` + display: none; + ` + )} +`; + +const StakesContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + width: 220px; + gap: 32px; +`; + +interface IMobileCard { + name: string; + stake: bigint; + lockedStake: bigint; +} + +const MobileCard: React.FC = ({ name, stake, lockedStake }) => { + return ( + + + + + + + + ); +}; + +export default MobileCard; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx new file mode 100644 index 000000000..87b14c5c4 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -0,0 +1,28 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { formatUnits } from "viem"; + +const StyledStakeLabel = styled.label` + display: flex; + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; + justify-content: flex-end; + + ${landscapeStyle( + () => css` + width: 140px; + ` + )} +`; + +interface IStake { + stake: bigint; +} + +const Stake: React.FC = ({ stake }) => { + const formattedStake = formatUnits(stake, 18); + + return {`${formattedStake} PNK`}; +}; +export default Stake; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx new file mode 100644 index 000000000..d707c9c1d --- /dev/null +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -0,0 +1,22 @@ +import React from "react"; +import DesktopCard from "./DesktopCard"; +import MobileCard from "./MobileCard"; + +interface ICourtCard { + name: string; + stake: bigint; + lockedStake: bigint; +} + +const CourtCard: React.FC = ({ name, stake, lockedStake }) => { + const allProps = { name, stake, lockedStake }; + + return ( + <> + + + + ); +}; + +export default CourtCard; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx deleted file mode 100644 index 1b8c30c9e..000000000 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; - -const Container = styled.div` - display: flex; - justify-content: space-between; - width: 100%; - height: 100%; - background-color: transparent; - padding: 24px; - flex-wrap: wrap; - - ${landscapeStyle( - () => - css` - flex-wrap: nowrap; - gap: 0px; - padding: 23.15px 32px; - ` - )} -`; - -const CourtName = styled.div` - width: 100%; - - ${landscapeStyle(() => css``)} -`; - -const StakesContainer = styled.div` - display: flex; - flex-direction: row; - align-items: center; - - ${landscapeStyle( - () => - css` - width: 206px; - ` - )} -`; - -const Stake = styled.div` - display: flex; - width: 69px; -`; - -const LockedStake = styled.div` - display: flex; - align-items: center; - gap: 8px; - width: 112px; -`; - -const lockedStakeTooltipMsg = - "When a juror is selected to arbitrate a case, part of their stake (PNK) is " + - "locked until the case is resolved. Jurors whose vote is coherent with the " + - "final jury decision have their locked stake released. Jurors whose vote " + - "is not coherent with the final jury decision, lose their locked stake. " + - "The locked stake of incoherent jurors is redistributed as incentives for " + - "the coherent jurors."; - -const Header: React.FC = () => { - return ( - - - - - - - - - - - - - - - - ); -}; - -export default Header; diff --git a/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx new file mode 100644 index 000000000..3d515fb12 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const CourtName = styled.div` + width: 100%; + + ${landscapeStyle(() => css``)} +`; + +const CourtBranch: React.FC = () => { + return ( + + + + ); +}; +export default CourtBranch; diff --git a/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx b/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx new file mode 100644 index 000000000..8deb81edf --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; + +const Container = styled.div` + display: flex; + align-items: center; + width: 110px; + + ${landscapeStyle(() => css``)} +`; + +const StyledLockedStakeLabel = styled.label` + display: flex; + flex-wrap: nowrap; +`; + +const lockedStakeTooltipMsg = + "When a juror is selected to arbitrate a case, part of their stake (PNK) is " + + "locked until the case is resolved. Jurors whose vote is coherent with the " + + "final jury decision have their locked stake released. Jurors whose vote " + + "is not coherent with the final jury decision, lose their locked stake. " + + "The locked stake of incoherent jurors is redistributed as incentives for " + + "the coherent jurors."; + +const LockedStake: React.FC = () => { + return ( + + + Locked Stake + + + ); +}; +export default LockedStake; diff --git a/web/src/pages/Dashboard/Courts/Header/Stake.tsx b/web/src/pages/Dashboard/Courts/Header/Stake.tsx new file mode 100644 index 000000000..4cb10e806 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header/Stake.tsx @@ -0,0 +1,14 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const StyledStakeLabel = styled.label` + display: flex; + + ${landscapeStyle(() => css``)} +`; + +const Stake: React.FC = () => { + return Stake ; +}; +export default Stake; diff --git a/web/src/pages/Dashboard/Courts/Header/index.tsx b/web/src/pages/Dashboard/Courts/Header/index.tsx new file mode 100644 index 000000000..dd83f38d1 --- /dev/null +++ b/web/src/pages/Dashboard/Courts/Header/index.tsx @@ -0,0 +1,53 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import CourtBranch from "./CourtBranch"; +import Stake from "./Stake"; +import LockedStake from "./LockedStake"; + +const Container = styled.div` + display: flex; + justify-content: space-between; + width: 100%; + height: 100%; + background-color: transparent; + padding: 24px; + flex-wrap: wrap; + + ${landscapeStyle( + () => + css` + flex-wrap: nowrap; + gap: 0px; + padding: 23.15px 32px; + ` + )} +`; + +const StakesContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; + + ${landscapeStyle( + () => + css` + gap: 32px; + ` + )} +`; + +const Header: React.FC = () => { + return ( + + + + + + + + ); +}; + +export default Header; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index e7acc3a15..9473f3792 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -25,7 +25,7 @@ const Divider = styled.hr` const CourtCardsContainer = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: 16px; z-index: 0; `; diff --git a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx index 36cd00bf0..29cceceb1 100644 --- a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx +++ b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx @@ -8,12 +8,17 @@ const Container = styled.div` display: flex; align-items: center; gap: 8px; + color: ${({ theme }) => theme.primaryBlue}; &, & * { cursor: pointer; } + &:hover { + text-decoration: underline; + } + svg { path { fill: ${({ theme }) => theme.primaryBlue}; From 176bf737b564bf19ef6379bd22f643b709b5a8b6 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 1 Nov 2023 01:48:54 +0100 Subject: [PATCH 11/31] feat(web): styling for mobile, code optimizations --- .../Courts/CourtCard/CourtBranch.tsx | 16 ++++-- .../Courts/CourtCard/LockedStake.tsx | 5 +- .../Dashboard/Courts/CourtCard/MobileCard.tsx | 43 +++++++++++---- .../Dashboard/Courts/CourtCard/Stake.tsx | 7 ++- .../Dashboard/Courts/Header/CourtBranch.tsx | 15 +---- .../Dashboard/Courts/Header/LockedStake.tsx | 19 ++++++- .../pages/Dashboard/Courts/Header/Stake.tsx | 12 +++- .../pages/Dashboard/Courts/Header/index.tsx | 55 +++++++++++-------- web/src/pages/Dashboard/Courts/index.tsx | 22 ++++---- 9 files changed, 121 insertions(+), 73 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx index 1c07daf21..7c5d2dbb2 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtBranch.tsx @@ -3,12 +3,20 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { Breadcrumb } from "@kleros/ui-components-library"; -const CourtName = styled.div` +const Container = styled.div` + width: 100%; + justify-content: flex-start; + small { height: 100%; } - ${landscapeStyle(() => css``)} + ${landscapeStyle( + () => + css` + width: auto; + ` + )} `; const StyledBreadcrumb = styled(Breadcrumb)` @@ -23,9 +31,9 @@ interface ICourtBranch { const CourtBranch: React.FC = ({ name }) => { return ( - + - + ); }; export default CourtBranch; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx index e3db4483e..2dead33d0 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx @@ -3,10 +3,11 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { formatUnits } from "viem"; -const StyledLockedStakeLabel = styled.label` +const StyledLabel = styled.label` display: flex; justify-content: flex-end; color: ${({ theme }) => theme.primaryText}; + font-size: 16px; ${landscapeStyle( () => css` @@ -22,6 +23,6 @@ interface ILockedStake { const LockedStake: React.FC = ({ lockedStake }) => { const formattedLockedStake = formatUnits(lockedStake, 18); - return {`${formattedLockedStake} PNK`}; + return {`${formattedLockedStake} PNK`}; }; export default LockedStake; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx index d26391a6c..f113b5964 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/MobileCard.tsx @@ -3,6 +3,8 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { Card as _Card } from "@kleros/ui-components-library"; import CourtBranch from "./CourtBranch"; +import HeaderStake from "../Header/Stake"; +import HeaderLockedStake from "../Header/LockedStake"; import Stake from "./Stake"; import LockedStake from "./LockedStake"; @@ -10,13 +12,12 @@ const Container = styled(_Card)` display: flex; flex-direction: column; align-items: center; - justify-content: space-between; height: auto; width: 100%; - padding: 21.5px 32px 21.5px 27px; + padding: 24px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; flex-wrap: wrap; - gap: 20px; + gap: 18px; ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} @@ -28,13 +29,27 @@ const Container = styled(_Card)` )} `; -const StakesContainer = styled.div` +const BottomSide = styled.div` + width: 100%; display: flex; flex-direction: row; - align-items: center; justify-content: space-between; - width: 220px; - gap: 32px; +`; + +const HeaderStakeAndStake = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: 5px; + justify-content: flex-start; +`; + +const HeaderLockedStakeAndLockedStake = styled.div` + display: flex; + flex-direction: column; + width: 100%; + gap: 5px; + justify-content: flex-end; `; interface IMobileCard { @@ -47,10 +62,16 @@ const MobileCard: React.FC = ({ name, stake, lockedStake }) => { return ( - - - - + + + + + + + + + + ); }; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index 87b14c5c4..fdb980e16 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -3,15 +3,16 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { formatUnits } from "viem"; -const StyledStakeLabel = styled.label` +const StyledLabel = styled.label` display: flex; font-weight: 600; color: ${({ theme }) => theme.primaryText}; - justify-content: flex-end; + font-size: 16px; ${landscapeStyle( () => css` width: 140px; + justify-content: flex-end; ` )} `; @@ -23,6 +24,6 @@ interface IStake { const Stake: React.FC = ({ stake }) => { const formattedStake = formatUnits(stake, 18); - return {`${formattedStake} PNK`}; + return {`${formattedStake} PNK`}; }; export default Stake; diff --git a/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx b/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx index 3d515fb12..b3666599c 100644 --- a/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx +++ b/web/src/pages/Dashboard/Courts/Header/CourtBranch.tsx @@ -1,18 +1,7 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; - -const CourtName = styled.div` - width: 100%; - - ${landscapeStyle(() => css``)} -`; const CourtBranch: React.FC = () => { - return ( - - - - ); + return ; }; + export default CourtBranch; diff --git a/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx b/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx index 8deb81edf..55619d278 100644 --- a/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx +++ b/web/src/pages/Dashboard/Courts/Header/LockedStake.tsx @@ -6,14 +6,27 @@ import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` display: flex; align-items: center; - width: 110px; + width: 100%; + justify-content: flex-end; - ${landscapeStyle(() => css``)} + ${landscapeStyle( + () => + css` + width: 110px; + ` + )} `; const StyledLockedStakeLabel = styled.label` display: flex; - flex-wrap: nowrap; + font-size: 12px !important; + + ${landscapeStyle( + () => + css` + font-size: 14px !important; + ` + )} `; const lockedStakeTooltipMsg = diff --git a/web/src/pages/Dashboard/Courts/Header/Stake.tsx b/web/src/pages/Dashboard/Courts/Header/Stake.tsx index 4cb10e806..5897407a2 100644 --- a/web/src/pages/Dashboard/Courts/Header/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/Header/Stake.tsx @@ -2,13 +2,19 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -const StyledStakeLabel = styled.label` +const StyledLabel = styled.label` display: flex; + font-size: 12px !important; - ${landscapeStyle(() => css``)} + ${landscapeStyle( + () => + css` + font-size: 14px !important; + ` + )} `; const Stake: React.FC = () => { - return Stake ; + return Stake; }; export default Stake; diff --git a/web/src/pages/Dashboard/Courts/Header/index.tsx b/web/src/pages/Dashboard/Courts/Header/index.tsx index dd83f38d1..5d62e1c8e 100644 --- a/web/src/pages/Dashboard/Courts/Header/index.tsx +++ b/web/src/pages/Dashboard/Courts/Header/index.tsx @@ -6,6 +6,18 @@ import Stake from "./Stake"; import LockedStake from "./LockedStake"; const Container = styled.div` + display: none; + + ${landscapeStyle( + () => + css` + display: flex; + flex-direction: column; + ` + )} +`; + +const CourtBranchAndStakesContainer = styled.div` display: flex; justify-content: space-between; width: 100%; @@ -13,15 +25,7 @@ const Container = styled.div` background-color: transparent; padding: 24px; flex-wrap: wrap; - - ${landscapeStyle( - () => - css` - flex-wrap: nowrap; - gap: 0px; - padding: 23.15px 32px; - ` - )} + padding: 23.15px 32px; `; const StakesContainer = styled.div` @@ -29,24 +33,31 @@ const StakesContainer = styled.div` flex-direction: row; align-items: center; justify-content: space-between; + gap: 32px; +`; - ${landscapeStyle( - () => - css` - gap: 32px; - ` - )} +const Divider = styled.hr` + display: flex; + border: none; + height: 1px; + background-color: ${({ theme }) => theme.stroke}; + margin: 0; `; const Header: React.FC = () => { return ( - - - - - - - + <> + + + + + + + + + + + ); }; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 9473f3792..186eb34bb 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -1,10 +1,11 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import { useAccount } from "wagmi"; -import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; import Skeleton from "react-loading-skeleton"; import CourtCard from "./CourtCard"; import Header from "./Header"; +import { useJurorStakeDetailsQuery } from "queries/useJurorStakeDetailsQuery"; const Container = styled.div` margin-top: 64px; @@ -14,19 +15,17 @@ const Container = styled.div` } `; -const Divider = styled.hr` - display: flex; - border: none; - height: 1px; - background-color: ${({ theme }) => theme.stroke}; - margin: 0; -`; - const CourtCardsContainer = styled.div` display: flex; flex-direction: column; - gap: 16px; + gap: 12px; z-index: 0; + + ${landscapeStyle( + () => css` + gap: 16px; + ` + )} `; const StyledLabel = styled.label` @@ -46,7 +45,6 @@ const Courts: React.FC = () => { {!isStaked && !isLoading ? You are not staked in any court : null} {isStaked && !isLoading ? ( <> -
{stakeData?.jurorTokensPerCourts From 255f03dbc50d16bfbb85609c0ecefbc290c66026 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 1 Nov 2023 01:52:16 +0100 Subject: [PATCH 12/31] chore(web): code smell --- .../pages/Dashboard/Courts/Header/index.tsx | 22 +++++++++---------- 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/Header/index.tsx b/web/src/pages/Dashboard/Courts/Header/index.tsx index 5d62e1c8e..e58e3e14a 100644 --- a/web/src/pages/Dashboard/Courts/Header/index.tsx +++ b/web/src/pages/Dashboard/Courts/Header/index.tsx @@ -46,18 +46,16 @@ const Divider = styled.hr` const Header: React.FC = () => { return ( - <> - - - - - - - - - - - + + + + + + + + + + ); }; From d16489833449a5181bb98d0fb55ad8e97f67135b Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 1 Nov 2023 13:26:46 +0100 Subject: [PATCH 13/31] fix(web): style adjustment in stake and lockedstake components --- web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx | 1 - web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx | 1 + web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx | 1 - 3 files changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx b/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx index da0edd184..cb6414b8c 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/DesktopCard.tsx @@ -34,7 +34,6 @@ const StakesContainer = styled.div` flex-direction: row; align-items: center; justify-content: space-between; - width: 220px; gap: 32px; `; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx index 2dead33d0..ef0458566 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/LockedStake.tsx @@ -8,6 +8,7 @@ const StyledLabel = styled.label` justify-content: flex-end; color: ${({ theme }) => theme.primaryText}; font-size: 16px; + text-align: right; ${landscapeStyle( () => css` diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index fdb980e16..29052973d 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -11,7 +11,6 @@ const StyledLabel = styled.label` ${landscapeStyle( () => css` - width: 140px; justify-content: flex-end; ` )} From 4543d9933b5361aa0d0f17249d07939ba760670a Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 2 Nov 2023 04:30:30 +0100 Subject: [PATCH 14/31] feat(web): add onboarding mini guides, link it to help component, abstract better, style better --- .../mini-guides/onboarding/how-it-works.svg | 29 +++++ .../mini-guides/onboarding/what-do-i-need.svg | 81 +++++++++++++ web/src/assets/svgs/styled/pnk.svg | 6 +- web/src/components/Popup/MiniGuides/Level.tsx | 20 ++-- .../MiniGuides/Onboarding/HowItWorks.tsx | 8 ++ .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 38 ++++++ .../MiniGuides/Onboarding/WhatDoINeed.tsx | 8 ++ .../Popup/MiniGuides/Onboarding/index.tsx | 108 ++++++++++++++++++ .../components/Popup/MiniGuides/Template.tsx | 88 ++++++++++---- web/src/layout/Header/navbar/Menu/Help.tsx | 33 ++++-- 10 files changed, 372 insertions(+), 47 deletions(-) create mode 100644 web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg create mode 100644 web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx create mode 100644 web/src/components/Popup/MiniGuides/Onboarding/index.tsx diff --git a/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg b/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg new file mode 100644 index 000000000..35c532780 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg new file mode 100644 index 000000000..c7c9ab45c --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/styled/pnk.svg b/web/src/assets/svgs/styled/pnk.svg index 56a546d4c..ec2cf0ae6 100644 --- a/web/src/assets/svgs/styled/pnk.svg +++ b/web/src/assets/svgs/styled/pnk.svg @@ -1,7 +1,7 @@ - - + + - + diff --git a/web/src/components/Popup/MiniGuides/Level.tsx b/web/src/components/Popup/MiniGuides/Level.tsx index 5e9c94ad4..6b51d37cf 100644 --- a/web/src/components/Popup/MiniGuides/Level.tsx +++ b/web/src/components/Popup/MiniGuides/Level.tsx @@ -72,30 +72,33 @@ const userLevelData = [ totalCoherent: 3, totalResolvedDisputes: 10, firstParagraph: - "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated with less than 50% of coherent votes.", + "There's a level for the low-performance/lazy jurors. Level 0: Jurors with ≥ 3 cases arbitrated" + + " with less than 50% of coherent votes.", }, ]; const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const userData = userLevelData[currentPage - 1]; return ( - Juror Level {userLevelData[currentPage - 1].level}: {userLevelData[currentPage - 1].title} + Juror Level {userData.level}: {userData.title} - - + + {userData.secondParagraph ? : null} ); }; const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const userData = userLevelData[currentPage - 1]; return ( - + @@ -117,6 +120,7 @@ const Level: React.FC = ({ toggleIsLevelMiniGuidesOpen }) => { currentPage={currentPage} setCurrentPage={setCurrentPage} numPages={userLevelData.length} + isOnboarding={false} /> ); }; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx new file mode 100644 index 000000000..d2ff803f1 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg"; + +const HowItWorks: React.FC = () => { + return ; +}; + +export default HowItWorks; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx new file mode 100644 index 000000000..6c9f40c71 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import styled from "styled-components"; +import PnkIcon from "tsx:assets/svgs/styled/pnk.svg"; + +const Container = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 32px; + align-items: center; +`; + +const StyledPnkIcon = styled(PnkIcon)` + width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); +`; + +const StyledCourtLabel = styled.label` + font-size: 24px; + background: linear-gradient( + 90deg, + ${({ theme }) => theme.secondaryPurple} 0%, + ${({ theme }) => theme.primaryBlue} 100% + ); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; +`; + +const PnkLogoAndTitle: React.FC = () => { + return ( + + + Court v.2 + + ); +}; +export default PnkLogoAndTitle; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx new file mode 100644 index 000000000..0c53cfccb --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx @@ -0,0 +1,8 @@ +import React from "react"; +import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg"; + +const WhatDoINeed: React.FC = () => { + return ; +}; + +export default WhatDoINeed; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/index.tsx b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx new file mode 100644 index 000000000..d262b6f68 --- /dev/null +++ b/web/src/components/Popup/MiniGuides/Onboarding/index.tsx @@ -0,0 +1,108 @@ +import React, { useState } from "react"; +import styled from "styled-components"; +import Template from "../Template"; +import HowItWorks from "./HowItWorks"; +import PnkLogoAndTitle from "./PnkLogoAndTitle"; +import WhatDoINeed from "./WhatDoINeed"; + +const Title = styled.h1` + margin-bottom: 18px; +`; + +const StyledLabel = styled.label` + color: ${({ theme }) => theme.primaryBlue}; + margin: 0; + cursor: pointer; +`; + +const ParagraphsContainer = styled.div` + display: flex; + gap: 18px; + flex-direction: column; +`; + +const LinksContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const LeftContentContainer = styled.div` + display: flex; + flex-direction: column; +`; + +const leftPageContents = [ + { + title: "Welcome to Kleros Court", + paragraphs: ["The decentralized arbitration service for the disputes of the new economy.", "Learn what’s new"], + links: [], + }, + { + title: "What do I need to start?", + paragraphs: [ + "Do you want to be a juror? If yes, you will need PNK tokens for staking on courts, and ETH for gas fees.", + "I don't want to be a juror. Can I still participate in the Court? Yes, sure. Users can also participate as" + + " contributors by helping fund appeal fees in exchange for rewards, or by submitting evidence." + + " In this case, you will need ETH.", + "I have a case that needs resolution? What do I do? It's simple. Send your case to Kleros and receive" + + " the resolution. You will need a few minutes to fill up the details of your case, and ETH to pay for" + + " Arbitration fees (It's used to pay jurors for their work).", + ], + links: [], + }, + { + title: "Access the Mini Guides", + paragraphs: [], + links: ["1. Staking", "2. Binary Voting", "3. Ranked Voting", "4. Appeal", "5. Juror Levels"], + }, +]; + +const rightPageComponents = [() => , () => , () => ]; + +const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const { title, paragraphs, links } = leftPageContents[currentPage - 1]; + + return ( + + {title} + + {paragraphs.map((paragraph, index) => ( + + ))} + + + {links.map((link, index) => ( + {link} + ))} + + + ); +}; + +const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { + const RightPageComponent = rightPageComponents[currentPage - 1]; + + return ; +}; + +interface IOnboarding { + toggleIsOnboardingMiniGuidesOpen: () => void; +} + +const Onboarding: React.FC = ({ toggleIsOnboardingMiniGuidesOpen }) => { + const [currentPage, setCurrentPage] = useState(1); + + return ( + } + RightContent={} + onClose={toggleIsOnboardingMiniGuidesOpen} + currentPage={currentPage} + setCurrentPage={setCurrentPage} + numPages={leftPageContents.length} + isOnboarding={true} + /> + ); +}; + +export default Onboarding; diff --git a/web/src/components/Popup/MiniGuides/Template.tsx b/web/src/components/Popup/MiniGuides/Template.tsx index c9a454175..9531c7d43 100644 --- a/web/src/components/Popup/MiniGuides/Template.tsx +++ b/web/src/components/Popup/MiniGuides/Template.tsx @@ -15,7 +15,7 @@ const Container = styled.div` width: 82vw; flex-direction: column; - top: 50%; + top: 45%; left: 50%; transform: translate(-50%, -50%); max-height: 80vh; @@ -24,6 +24,7 @@ const Container = styled.div` ${landscapeStyle( () => css` overflow-y: hidden; + top: 50%; width: calc(700px + (900 - 700) * (min(max(100vw, 375px), 1250px) - 375px) / 875); flex-direction: row; height: 500px; @@ -35,8 +36,8 @@ const LeftContainer = styled.div` display: grid; grid-template-rows: auto 1fr auto; width: 82vw; - min-height: 356px; padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + padding-bottom: 44px; background-color: ${({ theme }) => theme.whiteBackground}; border-top-left-radius: 3px; border-bottom-left-radius: 3px; @@ -46,11 +47,17 @@ const LeftContainer = styled.div` overflow-y: hidden; width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875); height: 500px; - min-height: auto; + padding-bottom: 32px; ` )} `; +const LeftContainerHeader = styled.div` + display: flex; + flex-direction: row; + justify-content: space-between; +`; + const HowItWorks = styled.div` display: flex; align-items: center; @@ -62,29 +69,49 @@ const HowItWorks = styled.div` } `; -const StyledCompactPagination = styled(CompactPagination)` +const MobileCompactPagination = styled(CompactPagination)` + display: flex; + align-items: flex-start; + + ${landscapeStyle( + () => css` + display: none; + ` + )} +`; + +const DesktopCompactPagination = styled(CompactPagination)` + display: none; align-self: end; justify-self: end; + + ${landscapeStyle( + () => css` + display: flex; + ` + )} `; const Close = styled.label` - position: absolute; - top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - right: 17px; - display: flex; - align-items: flex-end; - justify-content: flex-end; - cursor: pointer; - - &:hover { - text-decoration: underline; - } - - color: ${({ theme }) => theme.primaryBlue}; + display: none; ${landscapeStyle( () => css` + display: flex; + position: absolute; + top: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + 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}; ` )} `; @@ -100,7 +127,6 @@ const RightContainer = styled.div` background-color: ${({ theme }) => theme.mediumBlue}; border-top-right-radius: 3px; border-bottom-right-radius: 3px; - height: 800px; ${landscapeStyle( () => css` @@ -118,6 +144,7 @@ interface ITemplate { currentPage: number; setCurrentPage: Dispatch>; numPages: number; + isOnboarding: boolean; } const Template: React.FC = ({ @@ -127,6 +154,7 @@ const Template: React.FC = ({ currentPage, setCurrentPage, numPages, + isOnboarding, }) => { const containerRef = useRef(null); useFocusOutside(containerRef, () => { @@ -137,20 +165,30 @@ const Template: React.FC = ({ - - - - - Close + + + + + + + {LeftContent} - - {RightContent} + + Close + {RightContent} + ); diff --git a/web/src/layout/Header/navbar/Menu/Help.tsx b/web/src/layout/Header/navbar/Menu/Help.tsx index cbc9891cc..acddff22b 100644 --- a/web/src/layout/Header/navbar/Menu/Help.tsx +++ b/web/src/layout/Header/navbar/Menu/Help.tsx @@ -1,6 +1,7 @@ import React, { useRef } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { useToggle } from "react-use"; import { useFocusOutside } from "hooks/useFocusOutside"; import Book from "svgs/icons/book-open.svg"; import Guide from "svgs/icons/book.svg"; @@ -10,6 +11,7 @@ import Faq from "svgs/menu-icons/help.svg"; import Telegram from "svgs/socialmedia/telegram.svg"; import { IHelp } from ".."; import Debug from "../Debug"; +import Onboarding from "components/Popup/MiniGuides/Onboarding"; const Container = styled.div` display: flex; @@ -70,7 +72,6 @@ const ITEMS = [ { text: "Onboarding", Icon: Book, - url: "", }, { text: "Get Help", @@ -100,21 +101,31 @@ const ITEMS = [ ]; const Help: React.FC = ({ toggleIsHelpOpen }) => { + const [isOnboardingMiniGuidesOpen, toggleIsOnboardingMiniGuidesOpen] = useToggle(false); + const containerRef = useRef(null); useFocusOutside(containerRef, () => { - toggleIsHelpOpen(); + if (!isOnboardingMiniGuidesOpen) toggleIsHelpOpen(); }); return ( - - {ITEMS.map((item) => ( - - - {item.text} - - ))} - - + <> + + {ITEMS.map((item, index) => ( + toggleIsOnboardingMiniGuidesOpen() : undefined} + > + + {item.text} + + ))} + + + {isOnboardingMiniGuidesOpen && } + ); }; export default Help; From 0d4836973860f2008acbfcfe8dd79f2a770ba624 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 2 Nov 2023 04:39:48 +0100 Subject: [PATCH 15/31] fix(web): padding adjustment in mobile --- web/src/components/Popup/MiniGuides/Template.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/src/components/Popup/MiniGuides/Template.tsx b/web/src/components/Popup/MiniGuides/Template.tsx index 9531c7d43..9a899b6fa 100644 --- a/web/src/components/Popup/MiniGuides/Template.tsx +++ b/web/src/components/Popup/MiniGuides/Template.tsx @@ -37,7 +37,7 @@ const LeftContainer = styled.div` grid-template-rows: auto 1fr auto; width: 82vw; padding: calc(24px + (32 - 24) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - padding-bottom: 44px; + padding-bottom: 32px; background-color: ${({ theme }) => theme.whiteBackground}; border-top-left-radius: 3px; border-bottom-left-radius: 3px; @@ -47,7 +47,6 @@ const LeftContainer = styled.div` overflow-y: hidden; width: calc(350px + (450 - 350) * (min(max(100vw, 375px), 1250px) - 375px) / 875); height: 500px; - padding-bottom: 32px; ` )} `; From dd450c29b2c47b191e1a8ed12d366e67425d5e5e Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 2 Nov 2023 14:09:34 +0100 Subject: [PATCH 16/31] fix(web): style onboarding guides for both dark and light mode --- ...t-works.svg => how-it-works-dark-mode.svg} | 0 .../onboarding/how-it-works-light-mode.svg | 29 +++++++ ...-need.svg => what-do-i-need-dark-mode.svg} | 0 .../onboarding/what-do-i-need-light-mode.svg | 81 +++++++++++++++++++ .../styled/{pnk.svg => dark-mode-pnk.svg} | 0 web/src/assets/svgs/styled/light-mode-pnk.svg | 9 +++ .../MiniGuides/Onboarding/HowItWorks.tsx | 14 +++- .../MiniGuides/Onboarding/PnkLogoAndTitle.tsx | 15 ++-- .../MiniGuides/Onboarding/WhatDoINeed.tsx | 9 ++- 9 files changed, 148 insertions(+), 9 deletions(-) rename web/src/assets/svgs/mini-guides/onboarding/{how-it-works.svg => how-it-works-dark-mode.svg} (100%) create mode 100644 web/src/assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg rename web/src/assets/svgs/mini-guides/onboarding/{what-do-i-need.svg => what-do-i-need-dark-mode.svg} (100%) create mode 100644 web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg rename web/src/assets/svgs/styled/{pnk.svg => dark-mode-pnk.svg} (100%) create mode 100644 web/src/assets/svgs/styled/light-mode-pnk.svg diff --git a/web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg b/web/src/assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg similarity index 100% rename from web/src/assets/svgs/mini-guides/onboarding/how-it-works.svg rename to web/src/assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg diff --git a/web/src/assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg b/web/src/assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg new file mode 100644 index 000000000..7ae53ef79 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg similarity index 100% rename from web/src/assets/svgs/mini-guides/onboarding/what-do-i-need.svg rename to web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg diff --git a/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg new file mode 100644 index 000000000..2b00a41e9 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg @@ -0,0 +1,81 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/styled/pnk.svg b/web/src/assets/svgs/styled/dark-mode-pnk.svg similarity index 100% rename from web/src/assets/svgs/styled/pnk.svg rename to web/src/assets/svgs/styled/dark-mode-pnk.svg diff --git a/web/src/assets/svgs/styled/light-mode-pnk.svg b/web/src/assets/svgs/styled/light-mode-pnk.svg new file mode 100644 index 000000000..3e83c3442 --- /dev/null +++ b/web/src/assets/svgs/styled/light-mode-pnk.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx index d2ff803f1..8a6c1966e 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/HowItWorks.tsx @@ -1,8 +1,18 @@ import React from "react"; -import HowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works.svg"; +import styled, { useTheme } from "styled-components"; +import DarkModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-dark-mode.svg"; +import LightModeHowItWorksImage from "tsx:assets/svgs/mini-guides/onboarding/how-it-works-light-mode.svg"; + +const StyledHowItWorksImage = styled.div` + width: calc(260px + (379 - 260) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + height: calc(200px + (291 - 200) * (min(max(100vw, 375px), 1250px) - 375px) / 875); +`; const HowItWorks: React.FC = () => { - return ; + const theme = useTheme(); + const HowItWorksImage = theme.name === "dark" ? DarkModeHowItWorksImage : LightModeHowItWorksImage; + + return ; }; export default HowItWorks; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx index 6c9f40c71..2b2fa7fc2 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/PnkLogoAndTitle.tsx @@ -1,6 +1,7 @@ import React from "react"; -import styled from "styled-components"; -import PnkIcon from "tsx:assets/svgs/styled/pnk.svg"; +import styled, { useTheme } from "styled-components"; +import DarkModePnkIcon from "tsx:assets/svgs/styled/dark-mode-pnk.svg"; +import LightModePnkIcon from "tsx:assets/svgs/styled/light-mode-pnk.svg"; const Container = styled.div` display: flex; @@ -10,7 +11,7 @@ const Container = styled.div` align-items: center; `; -const StyledPnkIcon = styled(PnkIcon)` +const StyledPnkIcon = styled.div` width: calc(220px + (280 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); height: calc(220px + (252 - 220) * (min(max(100vw, 375px), 1250px) - 375px) / 875); `; @@ -27,12 +28,16 @@ const StyledCourtLabel = styled.label` -webkit-text-fill-color: transparent; `; -const PnkLogoAndTitle: React.FC = () => { +const PnkLogoAndTitle = () => { + const theme = useTheme(); + const PnkIcon = theme.name === "dark" ? DarkModePnkIcon : LightModePnkIcon; + return ( - + Court v.2 ); }; + export default PnkLogoAndTitle; diff --git a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx index 0c53cfccb..afbb04b73 100644 --- a/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx +++ b/web/src/components/Popup/MiniGuides/Onboarding/WhatDoINeed.tsx @@ -1,8 +1,13 @@ import React from "react"; -import WhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need.svg"; +import { useTheme } from "styled-components"; +import DarkModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-dark-mode.svg"; +import LightModeWhatDoINeedImage from "tsx:assets/svgs/mini-guides/onboarding/what-do-i-need-light-mode.svg"; const WhatDoINeed: React.FC = () => { - return ; + const theme = useTheme(); + const WhatDoINeedSVG = theme.name === "dark" ? DarkModeWhatDoINeedImage : LightModeWhatDoINeedImage; + + return ; }; export default WhatDoINeed; From de8a73ee8a0199f4c39c147ce886b442288cadad Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 2 Nov 2023 17:44:01 +0100 Subject: [PATCH 17/31] feat(web): add staking mini guides, howitworks component abstraction, style mobile, light & dark --- .../staking/court-header-dark-mode.svg | 107 +++++++++++++++++ .../staking/court-header-light-mode.svg | 107 +++++++++++++++++ .../staking/juror-rewards-dark-mode.svg | 72 ++++++++++++ .../staking/juror-rewards-light-mode.svg | 72 ++++++++++++ .../staking/notifications-dark-mode.svg | 37 ++++++ .../staking/notifications-light-mode.svg | 37 ++++++ .../staking/staking-section-dark-mode.svg | 39 ++++++ .../staking/staking-section-light-mode.svg | 39 ++++++ .../Header => components}/HowItWorks.tsx | 15 ++- web/src/components/Popup/MiniGuides/Level.tsx | 6 +- .../Popup/MiniGuides/Staking/CourtHeader.tsx | 24 ++++ .../Popup/MiniGuides/Staking/JurorRewards.tsx | 24 ++++ .../MiniGuides/Staking/Notifications.tsx | 24 ++++ .../MiniGuides/Staking/StakingSection.tsx | 24 ++++ .../Popup/MiniGuides/Staking/index.tsx | 111 ++++++++++++++++++ .../components/Popup/MiniGuides/Template.tsx | 2 +- web/src/pages/Courts/CourtDetails/index.tsx | 29 ++++- web/src/pages/Dashboard/JurorInfo/Header.tsx | 14 ++- web/src/pages/Home/TopJurors/Header/index.tsx | 12 +- 19 files changed, 778 insertions(+), 17 deletions(-) create mode 100644 web/src/assets/svgs/mini-guides/staking/court-header-dark-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/court-header-light-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/notifications-dark-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/notifications-light-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/staking-section-dark-mode.svg create mode 100644 web/src/assets/svgs/mini-guides/staking/staking-section-light-mode.svg rename web/src/{pages/Home/TopJurors/Header => components}/HowItWorks.tsx (62%) create mode 100644 web/src/components/Popup/MiniGuides/Staking/CourtHeader.tsx create mode 100644 web/src/components/Popup/MiniGuides/Staking/JurorRewards.tsx create mode 100644 web/src/components/Popup/MiniGuides/Staking/Notifications.tsx create mode 100644 web/src/components/Popup/MiniGuides/Staking/StakingSection.tsx create mode 100644 web/src/components/Popup/MiniGuides/Staking/index.tsx diff --git a/web/src/assets/svgs/mini-guides/staking/court-header-dark-mode.svg b/web/src/assets/svgs/mini-guides/staking/court-header-dark-mode.svg new file mode 100644 index 000000000..1065b58c5 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/court-header-dark-mode.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/court-header-light-mode.svg b/web/src/assets/svgs/mini-guides/staking/court-header-light-mode.svg new file mode 100644 index 000000000..5e825bf1a --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/court-header-light-mode.svg @@ -0,0 +1,107 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg b/web/src/assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg new file mode 100644 index 000000000..49b5e8e36 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/juror-rewards-dark-mode.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg b/web/src/assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg new file mode 100644 index 000000000..72c859c70 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/juror-rewards-light-mode.svg @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/notifications-dark-mode.svg b/web/src/assets/svgs/mini-guides/staking/notifications-dark-mode.svg new file mode 100644 index 000000000..ad8939073 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/notifications-dark-mode.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/notifications-light-mode.svg b/web/src/assets/svgs/mini-guides/staking/notifications-light-mode.svg new file mode 100644 index 000000000..272280430 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/notifications-light-mode.svg @@ -0,0 +1,37 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/staking-section-dark-mode.svg b/web/src/assets/svgs/mini-guides/staking/staking-section-dark-mode.svg new file mode 100644 index 000000000..a5f2d0fd3 --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/staking-section-dark-mode.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/assets/svgs/mini-guides/staking/staking-section-light-mode.svg b/web/src/assets/svgs/mini-guides/staking/staking-section-light-mode.svg new file mode 100644 index 000000000..38794480f --- /dev/null +++ b/web/src/assets/svgs/mini-guides/staking/staking-section-light-mode.svg @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx b/web/src/components/HowItWorks.tsx similarity index 62% rename from web/src/pages/Home/TopJurors/Header/HowItWorks.tsx rename to web/src/components/HowItWorks.tsx index 29cceceb1..6791b400c 100644 --- a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx +++ b/web/src/components/HowItWorks.tsx @@ -1,8 +1,6 @@ import React from "react"; import styled from "styled-components"; -import { useToggle } from "react-use"; import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; -import Level from "components/Popup/MiniGuides/Level"; const Container = styled.div` display: flex; @@ -30,15 +28,20 @@ const StyledLabel = styled.label` color: ${({ theme }) => theme.primaryBlue}; `; -const HowItWorks: React.FC = () => { - const [isLevelMiniGuidesOpen, toggleIsLevelMiniGuidesOpen] = useToggle(false); +interface IHowItWorks { + isMiniGuideOpen: boolean; + toggleMiniGuide: () => void; + MiniGuideComponent: React.ComponentType<{ toggleMiniGuide: () => void }>; +} + +const HowItWorks: React.FC = ({ isMiniGuideOpen, toggleMiniGuide, MiniGuideComponent }) => { return ( <> - toggleIsLevelMiniGuidesOpen()}> + How it works - {isLevelMiniGuidesOpen && } + {isMiniGuideOpen && } ); }; diff --git a/web/src/components/Popup/MiniGuides/Level.tsx b/web/src/components/Popup/MiniGuides/Level.tsx index 6b51d37cf..e9eba7075 100644 --- a/web/src/components/Popup/MiniGuides/Level.tsx +++ b/web/src/components/Popup/MiniGuides/Level.tsx @@ -106,17 +106,17 @@ const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => { }; interface ILevel { - toggleIsLevelMiniGuidesOpen: () => void; + toggleMiniGuide: () => void; } -const Level: React.FC = ({ toggleIsLevelMiniGuidesOpen }) => { +const Level: React.FC = ({ toggleMiniGuide }) => { const [currentPage, setCurrentPage] = useState(1); return (