From 38f61bce7266bdc84df1bb8a27374b4fec7d4ac7 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Thu, 26 Oct 2023 01:27:33 +0200 Subject: [PATCH] feat(web): mobile version top jurors + bunch of code refactors --- web/src/assets/svgs/menu-icons/help.svg | 4 +- web/src/pages/Dashboard/WithHelpTooltip.tsx | 14 ++- .../pages/Home/TopJurors/Header/Coherency.tsx | 44 ++++++-- .../Home/TopJurors/Header/JurorTitle.tsx | 14 +-- web/src/pages/Home/TopJurors/Header/Rank.tsx | 21 +--- .../pages/Home/TopJurors/Header/Rewards.tsx | 17 ++- web/src/pages/Home/TopJurors/Header/index.tsx | 22 ++-- .../Home/TopJurors/JurorCard/Coherency.tsx | 1 + .../Home/TopJurors/JurorCard/DesktopCard.tsx | 66 +++++++++++ .../Home/TopJurors/JurorCard/HowItWorks.tsx | 28 ++++- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 28 ++--- .../Home/TopJurors/JurorCard/MobileCard.tsx | 104 ++++++++++++++++++ .../pages/Home/TopJurors/JurorCard/Rank.tsx | 5 +- .../Home/TopJurors/JurorCard/Rewards.tsx | 11 +- .../pages/Home/TopJurors/JurorCard/index.tsx | 64 ++--------- web/src/pages/Home/TopJurors/index.tsx | 2 +- 16 files changed, 308 insertions(+), 137 deletions(-) create mode 100644 web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx diff --git a/web/src/assets/svgs/menu-icons/help.svg b/web/src/assets/svgs/menu-icons/help.svg index 71c5d151e..1c89e1fcf 100644 --- a/web/src/assets/svgs/menu-icons/help.svg +++ b/web/src/assets/svgs/menu-icons/help.svg @@ -1,3 +1,3 @@ - - + + diff --git a/web/src/pages/Dashboard/WithHelpTooltip.tsx b/web/src/pages/Dashboard/WithHelpTooltip.tsx index 976d85b4b..3a4fddb39 100644 --- a/web/src/pages/Dashboard/WithHelpTooltip.tsx +++ b/web/src/pages/Dashboard/WithHelpTooltip.tsx @@ -1,5 +1,6 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import { Tooltip } from "@kleros/ui-components-library"; import _HelpIcon from "svgs/menu-icons/help.svg"; @@ -9,8 +10,17 @@ const Container = styled.div` `; const HelpIcon = styled(_HelpIcon)` + height: 12px; + width: 12px; fill: ${({ theme }) => theme.secondaryText}; - margin: 4px; + margin: 4px 4px 6px 8px; + + ${landscapeStyle( + () => css` + height: 14px; + width: 14px; + ` + )} `; interface IWithHelpTooltip { diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index d190805fb..3c8643fd6 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -1,8 +1,31 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; +import { useWindowSize } from "react-use"; import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; -const Container = styled.div``; +const Container = styled.div` + label { + font-size: 12px !important; + &::before { + content: "Votes"; + } + } + + ${landscapeStyle( + () => + css` + display: flex; + + label { + font-size: 14px !important; + &::before { + content: "Coherent Votes"; + } + } + ` + )} +`; const coherentVotesTooltipMsg = "This is the ratio of coherent votes made by a juror: " + @@ -10,11 +33,14 @@ const coherentVotesTooltipMsg = "voted coherently and the number in the right is the total number of times " + "the juror voted"; -const Coherency: React.FC = () => ( - - - - - -); +const Coherency: React.FC = () => { + const { width } = useWindowSize(); + return ( + + BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}> + + + + ); +}; export default Coherency; diff --git a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx index ff402fa2f..6ee0b4ba5 100644 --- a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx @@ -1,11 +1,11 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; +import styled from "styled-components"; const Container = styled.div` display: flex; - gap: 16px; align-items: center; + width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + gap: 36px; label { font-weight: 400; @@ -13,14 +13,6 @@ const Container = styled.div` line-height: 19px; color: ${({ theme }) => theme.secondaryText} !important; } - - ${landscapeStyle( - () => - css` - width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - gap: 36px; - ` - )} `; const JurorTitle: React.FC = () => ( diff --git a/web/src/pages/Home/TopJurors/Header/Rank.tsx b/web/src/pages/Home/TopJurors/Header/Rank.tsx index 40753e0f8..d6542db51 100644 --- a/web/src/pages/Home/TopJurors/Header/Rank.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rank.tsx @@ -1,29 +1,14 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; +import styled from "styled-components"; const Container = styled.div` - width: 50%; + width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); label { &::before { - content: "Ranking"; - visibility: visible; + content: "#"; } } - - ${landscapeStyle( - () => - css` - width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - - label { - &::before { - content: "#"; - } - } - ` - )} `; const Rank: React.FC = () => ( diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 877b457dd..2591b547a 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -4,10 +4,25 @@ import { landscapeStyle } from "styles/landscapeStyle"; import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` + label { + font-size: 12px !important; + &::before { + content: "Rewards"; + } + } + ${landscapeStyle( () => css` + display: flex; width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + + label { + font-size: 14px !important; + &::before { + content: "Total Rewards"; + } + } ` )} `; @@ -21,7 +36,7 @@ const totalRewardsTooltipMsg = const Rewards: React.FC = () => ( - + ); diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx index be2f23eaa..a4c28003f 100644 --- a/web/src/pages/Home/TopJurors/Header/index.tsx +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -11,34 +11,41 @@ const Container = styled.div` display: flex; justify-content: space-between; width: 100%; - height: 100%; background-color: ${({ theme }) => theme.lightBlue}; padding: 24px; border 1px solid ${({ theme }) => theme.stroke}; border-top-left-radius: 3px; border-top-right-radius: 3px; + border-bottom: none; flex-wrap: wrap; ${landscapeStyle( () => css` - flex-wrap: nowrap; - gap: 0px; + border-bottom: 1px solid ${({ theme }) => theme.stroke}; padding: 18.6px 32px; ` )} `; const PlaceAndTitleAndRewardsAndCoherency = styled.div` - display: flex; - flex-direction: column; - gap: 8px; + display: none; ${landscapeStyle( () => css` + display: flex; flex-direction: row; - gap: 32px; + gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ` + )} +`; + +const StyledLabel = styled.label` + ${landscapeStyle( + () => + css` + display: none; ` )} `; @@ -46,6 +53,7 @@ const PlaceAndTitleAndRewardsAndCoherency = styled.div` const Header: React.FC = () => { return ( + Ranking diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx index 05adf7416..bb26fe9f4 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx @@ -6,6 +6,7 @@ const Container = styled.div` align-items: center; label { font-weight: 600; + color: ${({ theme }) => theme.primaryText}; } flex-wrap: wrap; `; diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx new file mode 100644 index 000000000..66079c866 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -0,0 +1,66 @@ +import React from "react"; +import { landscapeStyle } from "styles/landscapeStyle"; +import styled, { css } from "styled-components"; +import Rank from "./Rank"; +import JurorTitle from "./JurorTitle"; +import Rewards from "./Rewards"; +import Coherency from "./Coherency"; +import HowItWorks from "./HowItWorks"; + +const Container = styled.div` + display: none; + + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: ${({ theme }) => theme.whiteBackground}; + border: 1px solid ${({ theme }) => theme.stroke}; + border-top: none; + align-items: center; + padding: 15.55px 32px; + + label { + font-size: 16px; + } + + ${landscapeStyle( + () => css` + display: flex; + ` + )} +`; + +const PlaceAndTitleAndRewardsAndCoherency = styled.div` + display: flex; + flex-direction: row; + gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875); +`; + +interface IDesktopCard { + rank: number; + address: string; + totalCoherent: number; + totalResolvedDisputes: number; + coherenceScore: number; +} + +const DesktopCard: React.FC = ({ + rank, + address, + totalCoherent, + totalResolvedDisputes, + coherenceScore, +}) => { + return ( + + + + + + + + + + ); +}; +export default DesktopCard; diff --git a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx index 3520e1649..caa3e4cad 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx @@ -1,12 +1,34 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; import { getUserLevelData } from "utils/userLevelCalculation"; const Container = styled.div` display: flex; align-items: center; - gap: 16px; + gap: 8px; + + label { + font-size: 12px !important; + + &::before { + content: "Lv. "; + } + } + + ${landscapeStyle( + () => css` + gap: 16px; + label { + font-size: 16px !important; + + &::before { + content: "Level "; + } + } + ` + )} `; interface IHowItWorks { @@ -19,7 +41,7 @@ const HowItWorks: React.FC = ({ coherenceScore }) => { return ( - + ); diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 733be29b9..b56190787 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -5,21 +5,7 @@ import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/Accou const Container = styled.div` display: flex; - gap: 16px; - align-items: center; - justify-content: flex-start; - - ${landscapeStyle( - () => css` - width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - gap: 36px; - ` - )} -`; - -const LogoAndAddress = styled.div` - display: flex; - gap: 10px; + gap: 8px; align-items: center; canvas { @@ -27,6 +13,12 @@ const LogoAndAddress = styled.div` height: 20px; border-radius: 10%; } + + ${landscapeStyle( + () => css` + width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ` + )} `; interface IJurorTitle { @@ -36,10 +28,8 @@ interface IJurorTitle { const JurorTitle: React.FC = ({ address }) => { return ( - - - - + + ); }; diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx new file mode 100644 index 000000000..c97a441e3 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -0,0 +1,104 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import Coherency from "./Coherency"; +import HowItWorks from "./HowItWorks"; +import JurorTitle from "./JurorTitle"; +import Rank from "./Rank"; +import Rewards from "./Rewards"; +import HeaderRewards from "../Header/Rewards"; +import HeaderCoherency from "../Header/Coherency"; + +const Container = styled.div` + display: flex; + justify-content: space-between; + flex-wrap: wrap; + width: 100%; + background-color: ${({ theme }) => theme.whiteBackground}; + padding: 16px 24px 24px 24px; + border 1px solid ${({ theme }) => theme.stroke}; + border-top: none; + align-items: center; + gap: 20px; + + label { + font-size: 16px; + } + + ${landscapeStyle( + () => css` + display: none; + ` + )} +`; + +const TopSide = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + + align-items: center; +`; + +const RankAndTitle = styled.div` + display: flex; + flex-direction: row; + gap: 8px; +`; + +const HeaderRewardsAndRewards = styled.div` + display: flex; + flex-direction: column; + width: 100%; +`; + +const BottomSide = styled.div` + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; +`; + +const HeaderCoherencyAndCoherency = styled.div` + display: flex; + flex-direction: column; + align-items: flex-end; + + svg { + margin-right: 0; + } +`; + +interface IMobileCard { + rank: number; + address: string; + coherenceScore: number; + totalCoherent: number; + totalResolvedDisputes: number; +} + +const MobileCard: React.FC = ({ rank, address, coherenceScore, totalCoherent, totalResolvedDisputes }) => { + return ( + + + + + + + + + + + + + + + + + + + + ); +}; +export default MobileCard; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx index ce7c64899..9de83aa0f 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx @@ -3,8 +3,9 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` - width: 100%; - + label { + color: ${({ theme }) => theme.primaryText}; + } label::before { content: "#"; display: inline; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index a2dc84225..c2b519664 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -4,6 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle"; import { getFormattedRewards } from "utils/jurorRewardConfig"; import EthIcon from "assets/svgs/icons/eth.svg"; import PnkIcon from "assets/svgs/icons/kleros.svg"; +import { useUserQuery } from "hooks/queries/useUser"; const Container = styled.div` display: flex; @@ -11,8 +12,8 @@ const Container = styled.div` align-items: center; label { font-weight: 600; + color: ${({ theme }) => theme.primaryText}; } - width: 164px; flex-wrap: wrap; ${landscapeStyle( @@ -33,12 +34,12 @@ const StyledIcon = styled.div` `; interface IRewards { - data: any; + address: string; } -const Rewards: React.FC = ({ data }) => { - const formattedRewards = getFormattedRewards(data, {}); - console.log(data); +const Rewards: React.FC = ({ address }) => { + const { data: userData } = useUserQuery(address?.toLowerCase()); + const formattedRewards = getFormattedRewards(userData, {}); const ethReward = formattedRewards.find((r) => r.token === "ETH")?.amount; const pnkReward = formattedRewards.find((r) => r.token === "PNK")?.amount; diff --git a/web/src/pages/Home/TopJurors/JurorCard/index.tsx b/web/src/pages/Home/TopJurors/JurorCard/index.tsx index c90f4627a..2b2dfe6a2 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/index.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/index.tsx @@ -1,51 +1,6 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import Rank from "./Rank"; -import JurorTitle from "./JurorTitle"; -import { useUserQuery } from "hooks/queries/useUser"; -import Rewards from "./Rewards"; -import Coherency from "./Coherency"; -import HowItWorks from "./HowItWorks"; - -const Container = styled.div` - display: flex; - justify-content: space-between; - flex-wrap: wrap; - width: 100%; - height: 100%; - background-color: ${({ theme }) => theme.whiteBackground}; - padding: 24px; - border 1px solid ${({ theme }) => theme.stroke}; - border-top: none; - align-items: center; - - label { - font-size: 16px; - } - - ${landscapeStyle( - () => css` - gap: 0px; - padding: 15.55px 32px; - flex-wrap: nowrap; - ` - )} -`; - -const PlaceAndTitleAndRewardsAndCoherency = styled.div` - display: flex; - flex-direction: column; - gap: 12px; - - ${landscapeStyle( - () => - css` - flex-direction: row; - gap: 32px; - ` - )} -`; +import DesktopCard from "./DesktopCard"; +import MobileCard from "./MobileCard"; interface IJurorCard { rank: number; @@ -56,18 +11,13 @@ interface IJurorCard { } const JurorCard: React.FC = ({ rank, address, coherenceScore, totalCoherent, totalResolvedDisputes }) => { - const { data } = useUserQuery(address?.toLowerCase()); + const allProps = { rank, address, coherenceScore, totalCoherent, totalResolvedDisputes }; return ( - - - - - - - - - + <> + + + ); }; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index e7e623ace..c0d77ea43 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -1,9 +1,9 @@ import React from "react"; import styled from "styled-components"; import { SkeletonDisputeListItem } from "components/StyledSkeleton"; -import { isUndefined } from "utils/index"; import Header from "./Header"; import JurorCard from "./JurorCard"; +import { isUndefined } from "utils/index"; import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; const Container = styled.div`