From 26739b803ca565698ef74cec08789e87da33d963 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 4 Nov 2024 14:35:29 +0100 Subject: [PATCH 1/3] feat: tweak in court stake display in dashboard --- web/src/hooks/useNavigateAndScrollTop.ts | 15 ++++++++ .../Dashboard/Courts/CourtCard/CourtName.tsx | 36 ++++++++++++++----- .../Dashboard/Courts/CourtCard/Stake.tsx | 15 ++++++-- .../Dashboard/Courts/CourtCard/index.tsx | 9 ++--- web/src/pages/Dashboard/Courts/index.tsx | 2 +- 5 files changed, 61 insertions(+), 16 deletions(-) create mode 100644 web/src/hooks/useNavigateAndScrollTop.ts diff --git a/web/src/hooks/useNavigateAndScrollTop.ts b/web/src/hooks/useNavigateAndScrollTop.ts new file mode 100644 index 000000000..0929bfa5b --- /dev/null +++ b/web/src/hooks/useNavigateAndScrollTop.ts @@ -0,0 +1,15 @@ +import { useContext } from "react"; +import { useNavigate } from "react-router-dom"; +import { OverlayScrollContext } from "context/OverlayScrollContext"; + +export const useNavigateAndScrollTop = () => { + const navigate = useNavigate(); + const osInstanceRef = useContext(OverlayScrollContext); + + const navigateAndScrollTop = (path) => { + navigate(path); + osInstanceRef?.current?.osInstance().elements().viewport.scroll({ top: 0 }); + }; + + return navigateAndScrollTop; +}; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx index b2742f567..296529004 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx @@ -1,13 +1,18 @@ import React from "react"; import styled, { css } from "styled-components"; -import { Breadcrumb } from "@kleros/ui-components-library"; - import { landscapeStyle } from "styles/landscapeStyle"; +import LightButton from "components/LightButton"; + +import ArrowIcon from "svgs/icons/arrow.svg"; +import { useNavigateAndScrollTop } from "hooks/useNavigateAndScrollTop"; const Container = styled.div` + display: flex; width: 100%; - justify-content: flex-start; + flex-direction: row; + gap: 16px; + align-items: center; small { height: 100%; @@ -17,25 +22,40 @@ const Container = styled.div` ${landscapeStyle( () => css` + justify-content: flex-start; width: auto; ` )} `; -const StyledBreadcrumb = styled(Breadcrumb)` +const StyledButton = styled(LightButton)` display: flex; - align-items: center; - height: 100%; + flex-direction: row-reverse; + gap: 8px; + padding: 0px; + > .button-text { + color: ${({ theme }) => theme.primaryBlue}; + font-size: 14px; + } `; interface ICourtName { name: string; + id: string; } -const CourtName: React.FC = ({ name }) => { +const CourtName: React.FC = ({ name, id }) => { + const navigate = useNavigateAndScrollTop(); + return ( - + {name} + navigate(`/courts/${id?.toString()}`)} + text="Open Court" + Icon={ArrowIcon} + className="reverse-button" + /> ); }; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index de2084617..e1aa1f8dd 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -7,16 +7,18 @@ import { landscapeStyle } from "styles/landscapeStyle"; import NumberDisplay from "components/NumberDisplay"; +import PnkIcon from "svgs/icons/pnk.svg"; + const Container = styled.div` display: flex; flex-direction: row; gap: 16px; - justify-content: space-between; width: 100%; + justify-content: flex-end; ${landscapeStyle( () => css` - justify-content: flex-end; + align-items: center; width: auto; ` )} @@ -31,6 +33,13 @@ const StyledLabel = styled.label` gap: 4px; `; +const StyledPnkIcon = styled(PnkIcon)` + display: inline-block; + width: 16px; + height: 16px; + fill: ${({ theme }) => theme.secondaryPurple}; +`; + interface IStake { stake: string; } @@ -40,7 +49,7 @@ const Stake: React.FC = ({ stake }) => { return ( - + diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx index 369c2a599..d45a5bdc8 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -18,7 +18,7 @@ const Container = styled(_Card)` padding: 21px 24px 25px 19px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; flex-wrap: wrap; - gap: 12px; + gap: 24px; ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} @@ -33,13 +33,14 @@ const Container = styled(_Card)` interface ICourtCard { name: string; stake: string; + id: string; } -const CourtCard: React.FC = ({ name, stake }) => { +const CourtCard: React.FC = ({ name, stake, id }) => { return ( - - + + ); }; diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 31d3981c8..965185b80 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -54,7 +54,7 @@ const Courts: React.FC = () => { {stakeData?.jurorTokensPerCourts ?.filter(({ staked }) => staked > 0) .map(({ court: { id, name }, staked }) => ( - + ))} ) : null} From 13cd3888318cd4fceeff32b02c9393753229ee92 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 4 Nov 2024 15:25:04 +0100 Subject: [PATCH 2/3] fix: position open court at the right, change svg color --- web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx | 7 +++++++ web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx | 4 ++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx index 296529004..6bc7e531c 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/CourtName.tsx @@ -13,6 +13,7 @@ const Container = styled.div` flex-direction: row; gap: 16px; align-items: center; + justify-content: space-between; small { height: 100%; @@ -37,6 +38,12 @@ const StyledButton = styled(LightButton)` color: ${({ theme }) => theme.primaryBlue}; font-size: 14px; } + > .button-svg { + margin-right: 0; + path { + fill: ${({ theme }) => theme.primaryBlue}; + } + } `; interface ICourtName { diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index e1aa1f8dd..21b291642 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -14,11 +14,11 @@ const Container = styled.div` flex-direction: row; gap: 16px; width: 100%; - justify-content: flex-end; + justify-content: flex-start; + align-items: center; ${landscapeStyle( () => css` - align-items: center; width: auto; ` )} From b02432fa743cabe889ef7fc60279d6f792f6cfe7 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Mon, 4 Nov 2024 15:39:37 +0100 Subject: [PATCH 3/3] fix: padding tweaks --- web/src/pages/Dashboard/Courts/CourtCard/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx index d45a5bdc8..79bc7b82c 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -15,17 +15,17 @@ const Container = styled(_Card)` justify-content: space-between; height: auto; width: 100%; - padding: 21px 24px 25px 19px; + padding: 21px 20px 25px 20px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; flex-wrap: wrap; - gap: 24px; + gap: 20px; ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} ${landscapeStyle( () => css` - padding: 21.5px 32px 21.5px 27px; + padding: 21.5px 32px; ` )} `;