From 30a7b60c456410b4a9aca4529bfb23a6466e3531 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 28 Nov 2023 12:03:12 +0530 Subject: [PATCH 1/4] refactor(web): top-juror-component-refactor --- .../Home/TopJurors/Header/DesktopHeader.tsx | 60 +++++++++++++++ .../Home/TopJurors/Header/JurorTitle.tsx | 9 --- .../Home/TopJurors/Header/MobileHeader.tsx | 43 +++++++++++ web/src/pages/Home/TopJurors/Header/Rank.tsx | 10 --- .../pages/Home/TopJurors/Header/Rewards.tsx | 2 - web/src/pages/Home/TopJurors/Header/index.tsx | 75 ++----------------- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 33 +++----- .../{HowItWorks.tsx => JurorLevel.tsx} | 7 +- .../Home/TopJurors/JurorCard/JurorTitle.tsx | 9 +-- .../Home/TopJurors/JurorCard/MobileCard.tsx | 6 +- .../pages/Home/TopJurors/JurorCard/Rank.tsx | 4 +- .../Home/TopJurors/JurorCard/Rewards.tsx | 10 +-- web/src/pages/Home/TopJurors/index.tsx | 10 ++- 13 files changed, 141 insertions(+), 137 deletions(-) create mode 100644 web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx delete mode 100644 web/src/pages/Home/TopJurors/Header/JurorTitle.tsx create mode 100644 web/src/pages/Home/TopJurors/Header/MobileHeader.tsx delete mode 100644 web/src/pages/Home/TopJurors/Header/Rank.tsx rename web/src/pages/Home/TopJurors/JurorCard/{HowItWorks.tsx => JurorLevel.tsx} (86%) diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx new file mode 100644 index 000000000..34bf66c2d --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -0,0 +1,60 @@ +import React from "react"; +import { useToggle } from "react-use"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import Rewards from "./Rewards"; +import Coherency from "./Coherency"; +import HowItWorks from "components/HowItWorks"; +import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; + +const Container = styled.div` + display: none; + width: 100%; + background-color: ${({ theme }) => theme.lightBlue}; + border 1px solid ${({ theme }) => theme.stroke}; + border-top-left-radius: 3px; + border-top-right-radius: 3px; + border-bottom: 1px solid ${({ theme }) => theme.stroke}; + padding: 18.6px 32px; + + ${landscapeStyle( + () => + css` + display: grid; + grid-template-columns: + min-content repeat(2, calc(80px + (210 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) + max-content auto; + column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + align-items: center; + ` + )} +`; + +const StyledLabel = styled.label` + font-size: 16px; +`; + +const HowItWorksContainer = styled.div` + display: flex; + justify-content: end; +`; + +export const DesktopHeader: React.FC = () => { + const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false); + + return ( + + # + Juror + + + + + + + ); +}; diff --git a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx b/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx deleted file mode 100644 index ad7ed62e1..000000000 --- a/web/src/pages/Home/TopJurors/Header/JurorTitle.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -const StyledLabel = styled.label` - width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); -`; - -const JurorTitle: React.FC = () => Juror; -export default JurorTitle; diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx new file mode 100644 index 000000000..32de5c257 --- /dev/null +++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx @@ -0,0 +1,43 @@ +import React from "react"; +import { useToggle } from "react-use"; +import styled, { css } from "styled-components"; +import { landscapeStyle } from "styles/landscapeStyle"; +import HowItWorks from "components/HowItWorks"; +import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; + +const Container = styled.div` +display: flex; +justify-content: space-between; +width: 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` + display: none; + ` +)} +`; + +const StyledLabel = styled.label` + font-size: 16px; +`; + +export const MobileHeader: React.FC = () => { + const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false); + return ( + + Ranking + + + ); +}; diff --git a/web/src/pages/Home/TopJurors/Header/Rank.tsx b/web/src/pages/Home/TopJurors/Header/Rank.tsx deleted file mode 100644 index e4f279a8f..000000000 --- a/web/src/pages/Home/TopJurors/Header/Rank.tsx +++ /dev/null @@ -1,10 +0,0 @@ -import React from "react"; -import styled from "styled-components"; - -const StyledLabel = styled.label` - width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); -`; - -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 6f55edfae..c0a869e45 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -16,8 +16,6 @@ const Container = styled.div` ${landscapeStyle( () => css` - width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - font-size: 14px !important; &::before { content: "Total Rewards"; diff --git a/web/src/pages/Home/TopJurors/Header/index.tsx b/web/src/pages/Home/TopJurors/Header/index.tsx index 5a061ad3c..cd703ef67 100644 --- a/web/src/pages/Home/TopJurors/Header/index.tsx +++ b/web/src/pages/Home/TopJurors/Header/index.tsx @@ -1,76 +1,13 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { useToggle } from "react-use"; -import Rank from "./Rank"; -import JurorTitle from "./JurorTitle"; -import Rewards from "./Rewards"; -import Coherency from "./Coherency"; -import HowItWorks from "components/HowItWorks"; -import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; - -const Container = styled.div` - display: flex; - justify-content: space-between; - width: 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` - border-bottom: 1px solid ${({ theme }) => theme.stroke}; - padding: 18.6px 32px; - ` - )} -`; - -const PlaceAndTitleAndRewardsAndCoherency = styled.div` - display: none; - - ${landscapeStyle( - () => - css` - display: flex; - flex-direction: row; - gap: calc(20px + (28 - 20) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - align-items: center; - ` - )} -`; - -const StyledLabel = styled.label` - ${landscapeStyle( - () => - css` - display: none; - ` - )} -`; +import { MobileHeader } from "./MobileHeader"; +import { DesktopHeader } from "./DesktopHeader"; const Header: React.FC = () => { - const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false); - return ( - - Ranking - - - - - - - - + <> + + + ); }; diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index 66079c866..b13a8475f 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -5,13 +5,10 @@ import Rank from "./Rank"; import JurorTitle from "./JurorTitle"; import Rewards from "./Rewards"; import Coherency from "./Coherency"; -import HowItWorks from "./HowItWorks"; +import JurorLevel from "./JurorLevel"; 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}; @@ -19,23 +16,17 @@ const Container = styled.div` align-items: center; padding: 15.55px 32px; - label { - font-size: 16px; - } - ${landscapeStyle( () => css` - display: flex; + display: grid; + grid-template-columns: + min-content repeat(2, calc(80px + (210 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) + min-content auto; + column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); ` )} `; -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; @@ -53,13 +44,11 @@ const DesktopCard: React.FC = ({ }) => { return ( - - - - - - - + + + + + ); }; diff --git a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx similarity index 86% rename from web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx rename to web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx index bb92948f3..74047484c 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/HowItWorks.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorLevel.tsx @@ -12,6 +12,7 @@ const Container = styled.div` ${landscapeStyle( () => css` gap: 16px; + justify-content: end; ` )} `; @@ -34,11 +35,11 @@ const StyledLabel = styled.label` )} `; -interface IHowItWorks { +interface IJurorLevel { coherenceScore: number; } -const HowItWorks: React.FC = ({ coherenceScore }) => { +const JurorLevel: React.FC = ({ coherenceScore }) => { const userLevelData = getUserLevelData(coherenceScore); const level = userLevelData.level; @@ -49,4 +50,4 @@ const HowItWorks: React.FC = ({ coherenceScore }) => { ); }; -export default HowItWorks; +export default JurorLevel; diff --git a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx index 62624909e..3e8831375 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/JurorTitle.tsx @@ -1,6 +1,5 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; +import styled from "styled-components"; import { IdenticonOrAvatar, AddressOrName } from "components/ConnectWallet/AccountDisplay"; const Container = styled.div` @@ -17,12 +16,6 @@ const Container = styled.div` height: 20px; border-radius: 10%; } - - ${landscapeStyle( - () => css` - width: calc(40px + (220 - 40) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - ` - )} `; interface IJurorTitle { diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index 479006212..ad9ec48e0 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import Coherency from "./Coherency"; -import HowItWorks from "./HowItWorks"; +import JurorLevel from "./JurorLevel"; import JurorTitle from "./JurorTitle"; import Rank from "./Rank"; import Rewards from "./Rewards"; @@ -61,7 +61,7 @@ const HeaderCoherencyAndCoherency = styled.div` display: flex; flex-direction: column; align-items: flex-end; - gap: 3px; + gap: 5px; svg { margin-right: 0; @@ -84,7 +84,7 @@ const MobileCard: React.FC = ({ rank, address, coherenceScore, tota - + diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx index 8fd80b5d8..3c423c0c4 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rank.tsx @@ -12,7 +12,9 @@ const Container = styled.div` ${landscapeStyle( () => css` - width: calc(16px + (24 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + display: flex; + align-items: center; + justify-content: start; &::before { display: none; } diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index bdf6b7d2a..cbccf1316 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -1,6 +1,5 @@ import React from "react"; -import styled, { css } from "styled-components"; -import { landscapeStyle } from "styles/landscapeStyle"; +import styled from "styled-components"; import { getFormattedRewards } from "utils/jurorRewardConfig"; import EthIcon from "assets/svgs/icons/eth.svg"; import PnkIcon from "assets/svgs/icons/kleros.svg"; @@ -11,13 +10,6 @@ const Container = styled.div` gap: 8px; align-items: center; flex-wrap: wrap; - - ${landscapeStyle( - () => - css` - width: calc(60px + (240 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875); - ` - )} `; const StyledIcon = styled.div` diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index c0d77ea43..c7b2fee4f 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -1,10 +1,11 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { SkeletonDisputeListItem } from "components/StyledSkeleton"; import Header from "./Header"; import JurorCard from "./JurorCard"; import { isUndefined } from "utils/index"; import { useTopUsersByCoherenceScore } from "queries/useTopUsersByCoherenceScore"; +import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875); @@ -18,6 +19,13 @@ const ListContainer = styled.div` display: flex; flex-direction: column; justify-content: center; + + ${landscapeStyle( + () => css` + display: grid; + grid-template-columns: 1fr; + ` + )} `; const TopJurors: React.FC = () => { From 7e0dd17b34d1d988beb18e1dc945749c51246c45 Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 28 Nov 2023 12:57:50 +0530 Subject: [PATCH 2/4] fix(web): top-juror-heading-width --- web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx | 2 +- web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx index 34bf66c2d..65e921b6f 100644 --- a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -22,7 +22,7 @@ const Container = styled.div` css` display: grid; grid-template-columns: - min-content repeat(2, calc(80px + (210 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) + min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) max-content auto; column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); align-items: center; diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index b13a8475f..a7c7cc8b2 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -20,7 +20,7 @@ const Container = styled.div` () => css` display: grid; grid-template-columns: - min-content repeat(2, calc(80px + (210 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) + min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) min-content auto; column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); ` From c1c6553a38f2c4de4c303a83508ae0c6a8befe8a Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 28 Nov 2023 18:25:16 +0530 Subject: [PATCH 3/4] refactor(web): move-WithHelpTooltip-to-components --- .../CasesDisplay/CasesListHeader.tsx | 2 +- .../WithHelpTooltip.tsx | 0 .../pages/Dashboard/JurorInfo/Coherency.tsx | 2 +- .../Dashboard/JurorInfo/JurorRewards.tsx | 2 +- .../Dashboard/JurorInfo/StakingRewards.tsx | 2 +- .../pages/Home/TopJurors/Header/Coherency.tsx | 2 +- .../Home/TopJurors/Header/MobileHeader.tsx | 27 +++++++++---------- .../pages/Home/TopJurors/Header/Rewards.tsx | 2 +- 8 files changed, 19 insertions(+), 20 deletions(-) rename web/src/{pages/Dashboard => components}/WithHelpTooltip.tsx (100%) diff --git a/web/src/components/CasesDisplay/CasesListHeader.tsx b/web/src/components/CasesDisplay/CasesListHeader.tsx index 780f6ca20..bf5967a1b 100644 --- a/web/src/components/CasesDisplay/CasesListHeader.tsx +++ b/web/src/components/CasesDisplay/CasesListHeader.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/WithHelpTooltip.tsx b/web/src/components/WithHelpTooltip.tsx similarity index 100% rename from web/src/pages/Dashboard/WithHelpTooltip.tsx rename to web/src/components/WithHelpTooltip.tsx diff --git a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx index 548c03901..eb869b498 100644 --- a/web/src/pages/Dashboard/JurorInfo/Coherency.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Coherency.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { CircularProgress } from "@kleros/ui-components-library"; -import WithHelpTooltip from "../WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx index 2c8653e5a..23ddd0c73 100644 --- a/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/JurorRewards.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { useAccount } from "wagmi"; import TokenRewards from "./TokenRewards"; -import WithHelpTooltip from "../WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; import { getFormattedRewards } from "utils/jurorRewardConfig"; import { CoinIds } from "consts/coingecko"; import { useUserQuery } from "queries/useUser"; diff --git a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx index 119d1d3e0..7a613f2ba 100644 --- a/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx +++ b/web/src/pages/Dashboard/JurorInfo/StakingRewards.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled from "styled-components"; import { Box as _Box, Button } from "@kleros/ui-components-library"; import TokenRewards from "./TokenRewards"; -import WithHelpTooltip from "../WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; import { EnsureChain } from "components/EnsureChain"; const Container = styled.div` diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index 832793291..b3c8a4712 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -2,7 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { useWindowSize } from "react-use"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` display: flex; diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx index 32de5c257..67cd7b3a9 100644 --- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx @@ -6,22 +6,21 @@ import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; const Container = styled.div` -display: flex; -justify-content: space-between; -width: 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` + display: flex; + justify-content: space-between; + width: 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` display: none; ` -)} + )} `; const StyledLabel = styled.label` diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index c0a869e45..e48516c0e 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -1,7 +1,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import WithHelpTooltip from "pages/Dashboard/WithHelpTooltip"; +import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` display: flex; From 517b1d0e61eb9a9f4ea59a0854f80f00e5e3d4cd Mon Sep 17 00:00:00 2001 From: Harman-singh-waraich Date: Tue, 28 Nov 2023 18:59:41 +0530 Subject: [PATCH 4/4] refactor(web): center-top-juror-column-content --- web/src/pages/Home/TopJurors/Header/Coherency.tsx | 1 + web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx | 6 +++--- web/src/pages/Home/TopJurors/Header/Rewards.tsx | 1 + web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx | 1 + web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx | 6 +++--- web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx | 9 ++++++++- 6 files changed, 17 insertions(+), 7 deletions(-) diff --git a/web/src/pages/Home/TopJurors/Header/Coherency.tsx b/web/src/pages/Home/TopJurors/Header/Coherency.tsx index b3c8a4712..2ad5bce5c 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherency.tsx @@ -17,6 +17,7 @@ const Container = styled.div` () => css` font-size: 14px !important; + justify-content: center; &::before { content: "Coherent Votes"; } diff --git a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx index 65e921b6f..937686535 100644 --- a/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/DesktopHeader.tsx @@ -22,9 +22,9 @@ const Container = styled.div` css` display: grid; grid-template-columns: - min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) - max-content auto; - column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) + auto; + column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); align-items: center; ` )} diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index e48516c0e..9a9deb147 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -17,6 +17,7 @@ const Container = styled.div` () => css` font-size: 14px !important; + justify-content: center; &::before { content: "Total Rewards"; } diff --git a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx index e2b02d044..7b3b19448 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Coherency.tsx @@ -7,6 +7,7 @@ const Container = styled.div` font-weight: 600; color: ${({ theme }) => theme.primaryText}; flex-wrap: wrap; + justify-content: center; `; interface ICoherency { diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index a7c7cc8b2..cd8aa3ebc 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -20,9 +20,9 @@ const Container = styled.div` () => css` display: grid; grid-template-columns: - min-content repeat(2, calc(80px + (200 - 60) * (min(max(100vw, 375px), 1250px) - 375px) / 875)) - min-content auto; - column-gap: calc(16px + (28 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875); + min-content repeat(3, calc(160px + (180 - 160) * (min(max(100vw, 900px), 1250px) - 900px) / 350)) + auto; + column-gap: calc(12px + (28 - 12) * (min(max(100vw, 900px), 1250px) - 900px) / 350); ` )} `; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index cbccf1316..71228f581 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -1,15 +1,22 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; 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"; +import { landscapeStyle } from "styles/landscapeStyle"; const Container = styled.div` display: flex; gap: 8px; align-items: center; flex-wrap: wrap; + + ${landscapeStyle( + () => css` + justify-content: center; + ` + )} `; const StyledIcon = styled.div`