From 8e45aa7af89b3fe61bed99ffd73021c27bba1494 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Wed, 25 Oct 2023 20:10:29 +0200 Subject: [PATCH 1/3] refactor(web): top jurors components modularization --- .../pages/Home/TopJurors/Header/Coherency.tsx | 20 ++ .../Home/TopJurors/Header/HowItWorks.tsx | 27 +++ .../Home/TopJurors/Header/JurorTitle.tsx | 31 +++ web/src/pages/Home/TopJurors/Header/Rank.tsx | 34 ++++ .../pages/Home/TopJurors/Header/Rewards.tsx | 28 +++ web/src/pages/Home/TopJurors/Header/index.tsx | 60 ++++++ web/src/pages/Home/TopJurors/JurorCard.tsx | 188 ------------------ .../Home/TopJurors/JurorCard/Coherency.tsx | 27 +++ .../Home/TopJurors/JurorCard/HowItWorks.tsx | 27 +++ .../Home/TopJurors/JurorCard/JurorTitle.tsx | 46 +++++ .../pages/Home/TopJurors/JurorCard/Rank.tsx | 34 ++++ .../Home/TopJurors/JurorCard/Rewards.tsx | 55 +++++ .../pages/Home/TopJurors/JurorCard/index.tsx | 74 +++++++ .../pages/Home/TopJurors/TopJurorsHeader.tsx | 156 --------------- web/src/pages/Home/TopJurors/index.tsx | 4 +- 15 files changed, 465 insertions(+), 346 deletions(-) create mode 100644 web/src/pages/Home/TopJurors/Header/Coherency.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/HowItWorks.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/JurorTitle.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/Rank.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/Rewards.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/index.tsx delete mode 100644 web/src/pages/Home/TopJurors/JurorCard.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/Rank.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx create mode 100644 web/src/pages/Home/TopJurors/JurorCard/index.tsx delete mode 100644 web/src/pages/Home/TopJurors/TopJurorsHeader.tsx diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx new file mode 100644 index 000000000..d190805fb --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import styled from "styled-components"; +import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; + +const Container = styled.div``; + +const coherentVotesTooltipMsg = + "This is the ratio of coherent votes made by a juror: " + + "the number in the left is the number of times where the juror " + + "voted coherently and the number in the right is the total number of times " + + "the juror voted"; + +const Coherency: React.FC = () => ( + + + + + +); +export default Coherency; diff --git a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx new file mode 100644 index 000000000..95c8923c0 --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "styled-components"; +import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; + +const Container = styled.div` + display: flex; + align-items: center; + gap: 8px; + + label { + color: ${({ theme }) => theme.primaryBlue}; + } + + svg { + path { + fill: ${({ theme }) => theme.primaryBlue}; + } + } +`; + +const Rewards: React.FC = () => ( + + + + +); +export default Rewards; diff --git a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx new file mode 100644 index 000000000..ff402fa2f --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx @@ -0,0 +1,31 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const Container = styled.div` + display: flex; + gap: 16px; + align-items: center; + + label { + font-weight: 400; + font-size: 14px; + 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 = () => ( + + + +); +export default JurorTitle; diff --git a/web/src/pages/Home/TopJurors/Header/Rank.tsx b/web/src/pages/Home/TopJurors/Header/Rank.tsx new file mode 100644 index 000000000..40753e0f8 --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/Rank.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const Container = styled.div` + width: 50%; + + label { + &::before { + content: "Ranking"; + visibility: visible; + } + } + + ${landscapeStyle( + () => + css` + width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + + label { + &::before { + content: "#"; + } + } + ` + )} +`; + +const Rank: React.FC = () => ( + + + +); +export default Rank; diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx new file mode 100644 index 000000000..877b457dd --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -0,0 +1,28 @@ +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` + ${landscapeStyle( + () => + css` + width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ` + )} +`; + +const totalRewardsTooltipMsg = + "Users have an economic interest in serving as jurors in Kleros: " + + "collecting the Juror Rewards in exchange for their work. Each juror who " + + "is coherent with the final ruling receive the Juror Rewards composed of " + + "arbitration fees (ETH) + PNK redistribution between jurors."; + +const Rewards: React.FC = () => ( + + + + + +); +export default Rewards; diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx new file mode 100644 index 000000000..be2f23eaa --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +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: 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; + flex-wrap: wrap; + + ${landscapeStyle( + () => + css` + flex-wrap: nowrap; + gap: 0px; + padding: 18.6px 32px; + ` + )} +`; + +const PlaceAndTitleAndRewardsAndCoherency = styled.div` + display: flex; + flex-direction: column; + gap: 8px; + + ${landscapeStyle( + () => + css` + flex-direction: row; + gap: 32px; + ` + )} +`; + +const Header: React.FC = () => { + return ( + + + + + + + + + + ); +}; + +export default Header; diff --git a/web/src/pages/Home/TopJurors/JurorCard.tsx b/web/src/pages/Home/TopJurors/JurorCard.tsx deleted file mode 100644 index 558212f5e..000000000 --- a/web/src/pages/Home/TopJurors/JurorCard.tsx +++ /dev/null @@ -1,188 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; -import EthIcon from "assets/svgs/icons/eth.svg"; -import PnkIcon from "assets/svgs/icons/kleros.svg"; -import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; -import { getFormattedRewards } from "utils/jurorRewardConfig"; -import { getUserLevelData } from "utils/userLevelCalculation"; -import { useUserQuery } from "hooks/queries/useUser"; - -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 LogoAndAddress = styled.div` - display: flex; - gap: 10px; - align-items: center; - - canvas { - width: 20px; - height: 20px; - border-radius: 10%; - } -`; - -const PlaceAndTitleAndRewardsAndCoherency = styled.div` - display: flex; - flex-direction: column; - gap: 12px; - - ${landscapeStyle( - () => - css` - flex-direction: row; - gap: 32px; - ` - )} -`; - -const JurorPlace = styled.div` - width: 100%; - - label::before { - content: "#"; - display: inline; - } - - ${landscapeStyle( - () => css` - width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - label::before { - display: none; - } - ` - )} -`; - -const JurorTitle = 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 Rewards = styled.div` - display: flex; - gap: 8px; - align-items: center; - label { - font-weight: 600; - } - width: 164px; - flex-wrap: wrap; - - ${landscapeStyle( - () => - css` - width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - ` - )} -`; - -const Coherency = styled.div` - display: flex; - align-items: center; - label { - font-weight: 600; - } - flex-wrap: wrap; -`; - -const StyledIcon = styled.div` - width: 16px; - height: 16px; - - path { - fill: ${({ theme }) => theme.secondaryPurple}; - } -`; - -const HowItWorks = styled.div` - display: flex; - align-items: center; - gap: 16px; -`; - -const StyledIdenticonOrAvatar = styled(IdenticonOrAvatar)``; - -interface IJurorCard { - rank: number; - address: `0x${string}`; - coherenceScore: number; - totalCoherent: number; - totalResolvedDisputes: number; -} - -const JurorCard: React.FC = ({ rank, address, coherenceScore, totalCoherent, totalResolvedDisputes }) => { - const { data } = useUserQuery(address?.toLowerCase()); - - const coherenceRatio = `${totalCoherent}/${totalResolvedDisputes}`; - const userLevelData = getUserLevelData(coherenceScore); - - const formattedRewards = getFormattedRewards(data, {}); - const ethReward = formattedRewards.find((r) => r.token === "ETH")?.amount; - const pnkReward = formattedRewards.find((r) => r.token === "PNK")?.amount; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default JurorCard; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx new file mode 100644 index 000000000..05adf7416 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "styled-components"; + +const Container = styled.div` + display: flex; + align-items: center; + label { + font-weight: 600; + } + flex-wrap: wrap; +`; + +interface ICoherency { + totalCoherent: number; + totalResolvedDisputes: number; +} + +const Coherency: React.FC = ({ totalCoherent, totalResolvedDisputes }) => { + const coherenceRatio = `${totalCoherent}/${totalResolvedDisputes}`; + + return ( + + + + ); +}; +export default Coherency; diff --git a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx new file mode 100644 index 000000000..3520e1649 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx @@ -0,0 +1,27 @@ +import React from "react"; +import styled from "styled-components"; +import PixelArt from "pages/Dashboard/JurorInfo/PixelArt"; +import { getUserLevelData } from "utils/userLevelCalculation"; + +const Container = styled.div` + display: flex; + align-items: center; + gap: 16px; +`; + +interface IHowItWorks { + coherenceScore: number; +} + +const HowItWorks: React.FC = ({ coherenceScore }) => { + const userLevelData = getUserLevelData(coherenceScore); + const level = userLevelData.level; + + return ( + + + + + ); +}; +export default HowItWorks; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx new file mode 100644 index 000000000..733be29b9 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -0,0 +1,46 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; + +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; + align-items: center; + + canvas { + width: 20px; + height: 20px; + border-radius: 10%; + } +`; + +interface IJurorTitle { + address: string; +} + +const JurorTitle: React.FC = ({ address }) => { + return ( + + + + + + + ); +}; +export default JurorTitle; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx new file mode 100644 index 000000000..ce7c64899 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx @@ -0,0 +1,34 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; + +const Container = styled.div` + width: 100%; + + label::before { + content: "#"; + display: inline; + } + + ${landscapeStyle( + () => css` + width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + label::before { + display: none; + } + ` + )} +`; + +interface IRank { + rank: number; +} + +const Rank: React.FC = ({ rank }) => { + return ( + + + + ); +}; +export default Rank; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx new file mode 100644 index 000000000..a2dc84225 --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import styled, { css } from "styled-components"; +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"; + +const Container = styled.div` + display: flex; + gap: 8px; + align-items: center; + label { + font-weight: 600; + } + width: 164px; + flex-wrap: wrap; + + ${landscapeStyle( + () => + css` + width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + ` + )} +`; + +const StyledIcon = styled.div` + width: 16px; + height: 16px; + + path { + fill: ${({ theme }) => theme.secondaryPurple}; + } +`; + +interface IRewards { + data: any; +} + +const Rewards: React.FC = ({ data }) => { + const formattedRewards = getFormattedRewards(data, {}); + console.log(data); + const ethReward = formattedRewards.find((r) => r.token === "ETH")?.amount; + const pnkReward = formattedRewards.find((r) => r.token === "PNK")?.amount; + + return ( + + + + + + + + ); +}; +export default Rewards; diff --git a/web/src/pages/Home/TopJurors/JurorCard/index.tsx b/web/src/pages/Home/TopJurors/JurorCard/index.tsx new file mode 100644 index 000000000..c90f4627a --- /dev/null +++ b/web/src/pages/Home/TopJurors/JurorCard/index.tsx @@ -0,0 +1,74 @@ +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; + ` + )} +`; + +interface IJurorCard { + rank: number; + address: `0x${string}`; + coherenceScore: number; + totalCoherent: number; + totalResolvedDisputes: number; +} + +const JurorCard: React.FC = ({ rank, address, coherenceScore, totalCoherent, totalResolvedDisputes }) => { + const { data } = useUserQuery(address?.toLowerCase()); + + return ( + + + + + + + + + + ); +}; + +export default JurorCard; diff --git a/web/src/pages/Home/TopJurors/TopJurorsHeader.tsx b/web/src/pages/Home/TopJurors/TopJurorsHeader.tsx deleted file mode 100644 index 1130b8580..000000000 --- a/web/src/pages/Home/TopJurors/TopJurorsHeader.tsx +++ /dev/null @@ -1,156 +0,0 @@ -import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; -import BookOpenIcon from "tsx:assets/svgs/icons/book-open.svg"; - -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; - flex-wrap: wrap; - - ${landscapeStyle( - () => - css` - flex-wrap: nowrap; - gap: 0px; - padding: 18.6px 32px; - ` - )} -`; - -const PlaceAndTitleAndRewardsAndCoherency = styled.div` - display: flex; - flex-direction: column; - gap: 8px; - - ${landscapeStyle( - () => - css` - flex-direction: row; - gap: 32px; - ` - )} -`; - -const JurorPlace = styled.div` - width: 100%; - - label { - &::before { - content: "# Rank"; - visibility: visible; - } - } - - ${landscapeStyle( - () => - css` - width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - - label { - &::before { - content: "#"; - } - } - ` - )} -`; - -const JurorTitle = styled.div` - display: flex; - gap: 16px; - align-items: center; - - label { - font-weight: 400; - font-size: 14px; - 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 Rewards = styled.div` - ${landscapeStyle( - () => - css` - width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - ` - )} -`; - -const Coherency = styled.div``; - -const HowItWorks = styled.div` - display: flex; - align-items: center; - gap: 8px; - - label { - color: ${({ theme }) => theme.primaryBlue}; - } - - svg { - path { - fill: ${({ theme }) => theme.primaryBlue}; - } - } -`; - -const totalRewardsTooltipMsg = - "Users have an economic interest in serving as jurors in Kleros: " + - "collecting the Juror Rewards in exchange for their work. Each juror who " + - "is coherent with the final ruling receive the Juror Rewards composed of " + - "arbitration fees (ETH) + PNK redistribution between jurors."; - -const coherentVotesTooltipMsg = - "This is the ratio of coherent votes made by a juror: " + - "the number in the left is the number of times where the juror " + - "voted coherently and the number in the right is the total number of times " + - "the juror voted"; - -const TopJurorsHeader: React.FC = () => { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -export default TopJurorsHeader; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index 043912bbd..e7e623ace 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { SkeletonDisputeListItem } from "components/StyledSkeleton"; import { isUndefined } from "utils/index"; -import TopJurorsHeader from "./TopJurorsHeader"; +import Header from "./Header"; import JurorCard from "./JurorCard"; import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; @@ -32,7 +32,7 @@ const TopJurors: React.FC = () => { Top Jurors - +
{!isUndefined(topJurors) ? topJurors.map((juror) => ) : [...Array(5)].map((_, i) => )} 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 2/3] 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` From e5ded92ff96fd3f012d27329d6ece33270b8ada9 Mon Sep 17 00:00:00 2001 From: marino <102478601+kemuru@users.noreply.github.com> Date: Mon, 30 Oct 2023 20:18:57 +0100 Subject: [PATCH 3/3] fix(web): resolve changes requested --- .../pages/Home/TopJurors/Header/Coherency.tsx | 28 +++++++++---------- .../Home/TopJurors/Header/HowItWorks.tsx | 10 +++---- .../Home/TopJurors/Header/JurorTitle.tsx | 18 ++---------- web/src/pages/Home/TopJurors/Header/Rank.tsx | 15 ++-------- .../pages/Home/TopJurors/Header/Rewards.tsx | 25 ++++++++--------- web/src/pages/Home/TopJurors/Header/index.tsx | 1 + .../Home/TopJurors/JurorCard/Coherency.tsx | 13 +++------ .../Home/TopJurors/JurorCard/HowItWorks.tsx | 27 ++++++++++-------- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 4 +++ .../Home/TopJurors/JurorCard/MobileCard.tsx | 4 --- .../pages/Home/TopJurors/JurorCard/Rank.tsx | 15 ++++------ .../Home/TopJurors/JurorCard/Rewards.tsx | 16 ++++++----- 12 files changed, 72 insertions(+), 104 deletions(-) diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index 3c8643fd6..832793291 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -5,23 +5,20 @@ import { useWindowSize } from "react-use"; import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` - label { - font-size: 12px !important; - &::before { - content: "Votes"; - } + display: flex; + font-size: 12px !important; + &::before { + content: "Votes"; } + color: ${({ theme }) => theme.secondaryText}; + align-items: center; ${landscapeStyle( () => css` - display: flex; - - label { - font-size: 14px !important; - &::before { - content: "Coherent Votes"; - } + font-size: 14px !important; + &::before { + content: "Coherent Votes"; } ` )} @@ -37,9 +34,10 @@ const Coherency: React.FC = () => { const { width } = useWindowSize(); return ( - BREAKPOINT_LANDSCAPE ? "top" : "left"} tooltipMsg={coherentVotesTooltipMsg}> - - + BREAKPOINT_LANDSCAPE ? "top" : "left"} + tooltipMsg={coherentVotesTooltipMsg} + > ); }; diff --git a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx index 95c8923c0..e2e31b18e 100644 --- a/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx +++ b/web/src/pages/Home/TopJurors/Header/HowItWorks.tsx @@ -7,10 +7,6 @@ const Container = styled.div` align-items: center; gap: 8px; - label { - color: ${({ theme }) => theme.primaryBlue}; - } - svg { path { fill: ${({ theme }) => theme.primaryBlue}; @@ -18,10 +14,14 @@ const Container = styled.div` } `; +const StyledLabel = styled.label` + color: ${({ theme }) => theme.primaryBlue}; +`; + const Rewards: React.FC = () => ( - + How it works ); export default Rewards; diff --git a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx index 6ee0b4ba5..ad7ed62e1 100644 --- a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx @@ -1,23 +1,9 @@ import React from "react"; import styled from "styled-components"; -const Container = styled.div` - display: flex; - align-items: center; +const StyledLabel = styled.label` width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - gap: 36px; - - label { - font-weight: 400; - font-size: 14px; - line-height: 19px; - color: ${({ theme }) => theme.secondaryText} !important; - } `; -const JurorTitle: React.FC = () => ( - - - -); +const JurorTitle: React.FC = () => Juror; export default JurorTitle; diff --git a/web/src/pages/Home/TopJurors/Header/Rank.tsx b/web/src/pages/Home/TopJurors/Header/Rank.tsx index d6542db51..e4f279a8f 100644 --- a/web/src/pages/Home/TopJurors/Header/Rank.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rank.tsx @@ -1,19 +1,10 @@ import React from "react"; import styled from "styled-components"; -const Container = styled.div` +const StyledLabel = styled.label` width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - - label { - &::before { - content: "#"; - } - } `; -const Rank: React.FC = () => ( - - - -); +const Rank: React.FC = () => #; + export default Rank; diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 2591b547a..02b062e87 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -4,24 +4,22 @@ import { landscapeStyle } from "styles/landscapeStyle"; import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; const Container = styled.div` - label { - font-size: 12px !important; - &::before { - content: "Rewards"; - } + display: flex; + font-size: 12px !important; + &::before { + content: "Rewards"; } + color: ${({ theme }) => theme.secondaryText}; + align-items: center; ${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"; - } + font-size: 14px !important; + &::before { + content: "Total Rewards"; } ` )} @@ -35,9 +33,8 @@ const totalRewardsTooltipMsg = const Rewards: React.FC = () => ( - - - + ); + export default Rewards; diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx index a4c28003f..8a8ff1ec7 100644 --- a/web/src/pages/Home/TopJurors/Header/index.tsx +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -37,6 +37,7 @@ const PlaceAndTitleAndRewardsAndCoherency = styled.div` display: flex; flex-direction: row; gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + align-items: center; ` )} `; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx index bb26fe9f4..e2b02d044 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx @@ -4,10 +4,8 @@ import styled from "styled-components"; const Container = styled.div` display: flex; align-items: center; - label { - font-weight: 600; - color: ${({ theme }) => theme.primaryText}; - } + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; flex-wrap: wrap; `; @@ -19,10 +17,7 @@ interface ICoherency { const Coherency: React.FC = ({ totalCoherent, totalResolvedDisputes }) => { const coherenceRatio = `${totalCoherent}/${totalResolvedDisputes}`; - return ( - - - - ); + return {coherenceRatio}; }; + export default Coherency; diff --git a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx index caa3e4cad..bb92948f3 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx @@ -9,23 +9,26 @@ const Container = styled.div` align-items: center; gap: 8px; - label { - font-size: 12px !important; + ${landscapeStyle( + () => css` + gap: 16px; + ` + )} +`; - &::before { - content: "Lv. "; - } +const StyledLabel = styled.label` + font-size: 12px !important; + + &::before { + content: "Lv. "; } ${landscapeStyle( () => css` - gap: 16px; - label { - font-size: 16px !important; + font-size: 16px !important; - &::before { - content: "Level "; - } + &::before { + content: "Level "; } ` )} @@ -41,7 +44,7 @@ const HowItWorks: React.FC = ({ coherenceScore }) => { return ( - + {level} ); diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index b56190787..62624909e 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -8,6 +8,10 @@ const Container = styled.div` gap: 8px; align-items: center; + label { + font-size: 16px; + } + canvas { width: 20px; height: 20px; diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index c97a441e3..910c5595b 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -21,10 +21,6 @@ const Container = styled.div` align-items: center; gap: 20px; - label { - font-size: 16px; - } - ${landscapeStyle( () => css` display: none; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx index 9de83aa0f..8fd80b5d8 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx @@ -3,10 +3,9 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` - label { - color: ${({ theme }) => theme.primaryText}; - } - label::before { + color: ${({ theme }) => theme.primaryText}; + + &::before { content: "#"; display: inline; } @@ -14,7 +13,7 @@ const Container = styled.div` ${landscapeStyle( () => css` width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - label::before { + &::before { display: none; } ` @@ -26,10 +25,6 @@ interface IRank { } const Rank: React.FC = ({ rank }) => { - return ( - - - - ); + return {rank}; }; export default Rank; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index c2b519664..bdf6b7d2a 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -10,10 +10,6 @@ const Container = styled.div` display: flex; gap: 8px; align-items: center; - label { - font-weight: 600; - color: ${({ theme }) => theme.primaryText}; - } flex-wrap: wrap; ${landscapeStyle( @@ -33,6 +29,12 @@ const StyledIcon = styled.div` } `; +const StyledLabel = styled.label` + font-size: 16px; + font-weight: 600; + color: ${({ theme }) => theme.primaryText}; +`; + interface IRewards { address: string; } @@ -45,10 +47,10 @@ const Rewards: React.FC = ({ address }) => { return ( - + {ethReward} - - + + + {pnkReward} );