From d93e2ffac9b7e6424dda0a0e13ba19baa617284a Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Thu, 19 Dec 2024 11:16:06 +0100 Subject: [PATCH] fix: better mobile margins, more hovers, cosmetic changes, slight bug fixes --- web/src/assets/svgs/icons/law-balance.svg | 2 +- .../components/DisputePreview/Policies.tsx | 14 +++++--- .../DisputeView/CardLabels/index.tsx | 2 +- .../DisputeView/DisputeCardView.tsx | 22 +++++++++---- .../DisputeInfo/DisputeInfoCard.tsx | 1 - .../components/DisputeView/PeriodBanner.tsx | 9 ++++- web/src/components/EvidenceCard.tsx | 17 ++++++++-- web/src/components/FavoriteCases.tsx | 22 ++++++++++--- web/src/components/Verdict/FinalDecision.tsx | 16 ++++++--- web/src/layout/Footer/index.tsx | 8 ++--- .../pages/Cases/AttachmentDisplay/Header.tsx | 2 +- .../Cases/CaseDetails/Appeal/OptionCard.tsx | 27 +++++++++------ .../pages/Cases/CaseDetails/Appeal/index.tsx | 8 ++++- .../Cases/CaseDetails/Evidence/index.tsx | 16 ++++++--- .../Cases/CaseDetails/Overview/index.tsx | 15 ++++++--- .../CaseDetails/Voting/PendingVotesBox.tsx | 2 +- .../CaseDetails/Voting/VotesDetails/index.tsx | 33 ++++++++++++++++--- .../pages/Cases/CaseDetails/Voting/index.tsx | 12 +++++-- web/src/pages/Cases/index.tsx | 16 ++++++--- .../StakePanel/Simulator/index.tsx | 9 +++-- web/src/pages/Courts/CourtDetails/Stats.tsx | 7 ++-- web/src/pages/Courts/CourtDetails/index.tsx | 8 ++++- web/src/pages/Courts/index.tsx | 12 +++++-- .../Dashboard/Courts/CourtCard/Stake.tsx | 3 +- .../Dashboard/Courts/CourtCard/index.tsx | 17 ++++++---- web/src/pages/Dashboard/Courts/index.tsx | 2 +- web/src/pages/Dashboard/index.tsx | 12 +++++-- web/src/pages/GetPnk/index.tsx | 12 +++++-- web/src/pages/Home/Community/index.tsx | 2 +- .../pages/Home/CourtOverview/ExtraStats.tsx | 15 ++++++--- web/src/pages/Home/CourtOverview/Stats.tsx | 22 ++++++++----- .../pages/Home/TopJurors/Header/Coherence.tsx | 12 +++---- .../Home/TopJurors/Header/MobileHeader.tsx | 4 +-- .../pages/Home/TopJurors/Header/Rewards.tsx | 31 +++++++++-------- .../Home/TopJurors/JurorCard/DesktopCard.tsx | 6 ++++ .../Home/TopJurors/JurorCard/MobileCard.tsx | 14 +++++--- .../Home/TopJurors/JurorCard/Rewards.tsx | 9 ++++- web/src/pages/Home/index.tsx | 12 +++++-- 38 files changed, 322 insertions(+), 131 deletions(-) diff --git a/web/src/assets/svgs/icons/law-balance.svg b/web/src/assets/svgs/icons/law-balance.svg index c8a97deec..473e946a3 100644 --- a/web/src/assets/svgs/icons/law-balance.svg +++ b/web/src/assets/svgs/icons/law-balance.svg @@ -1,4 +1,4 @@ - + diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index b0f856f4f..a2d0774c9 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import PaperclipIcon from "svgs/icons/paperclip.svg"; import PolicyIcon from "svgs/icons/policy.svg"; @@ -7,8 +7,8 @@ import PolicyIcon from "svgs/icons/policy.svg"; import { getIpfsUrl } from "utils/getIpfsUrl"; import { isUndefined } from "utils/index"; -import { responsiveSize } from "styles/responsiveSize"; import { hoverShortTransitionTiming } from "styles/commonStyles"; +import { landscapeStyle } from "styles/landscapeStyle"; import { InternalLink } from "components/InternalLink"; @@ -17,9 +17,15 @@ const Container = styled.div` align-items: center; flex-direction: row; flex-wrap: wrap; - gap: 8px 16px; - padding: ${responsiveSize(12, 20)} ${responsiveSize(8, 32)}; + gap: 12px 16px; + padding: 12px 16px 20px; background-color: ${({ theme }) => theme.mediumBlue}; + + ${landscapeStyle( + () => css` + padding: 20px 32px; + ` + )} `; const StyledP = styled.p` diff --git a/web/src/components/DisputeView/CardLabels/index.tsx b/web/src/components/DisputeView/CardLabels/index.tsx index 6595bbf34..523539ddf 100644 --- a/web/src/components/DisputeView/CardLabels/index.tsx +++ b/web/src/components/DisputeView/CardLabels/index.tsx @@ -30,7 +30,7 @@ const Container = styled.div<{ isList: boolean }>` ${({ isList }) => !isList && css` - margin-top: 16px; + margin-top: 24px; width: 100%; flex-wrap: wrap; flex-direction: row; diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 8ebffae44..3cb231c5a 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { Link } from "react-router-dom"; @@ -7,8 +7,8 @@ import { Card } from "@kleros/ui-components-library"; import { Periods } from "consts/periods"; -import { responsiveSize } from "styles/responsiveSize"; import { hoverShortTransitionTiming } from "styles/commonStyles"; +import { landscapeStyle } from "styles/landscapeStyle"; import { StyledSkeleton } from "components/StyledSkeleton"; @@ -19,26 +19,36 @@ const StyledCard = styled(Card)` ${hoverShortTransitionTiming} width: 100%; height: 100%; - max-height: 335px; min-height: 290px; `; const CardContainer = styled.div` height: calc(100% - 45px); - padding: ${responsiveSize(20, 24)} ${responsiveSize(8, 24)}; + padding: 20px 16px; display: flex; flex-direction: column; justify-content: space-between; + + ${landscapeStyle( + () => css` + padding: 20px 24px; + ` + )} +`; + +const StyledCaseCardTitle = styled.h3` + margin-bottom: 20px; `; const StyledCaseCardTitleSkeleton = styled(StyledSkeleton)` - margin-bottom: 16px; + margin-bottom: 20px; `; const TruncatedTitle = ({ text, maxLength }) => { const truncatedText = text.length <= maxLength ? text : text.slice(0, maxLength) + "…"; - return

{truncatedText}

; + return {truncatedText}; }; + interface IDisputeCardView { title: string; disputeID?: string; diff --git a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx index 68d729164..6bc83242d 100644 --- a/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx +++ b/web/src/components/DisputeView/DisputeInfo/DisputeInfoCard.tsx @@ -12,7 +12,6 @@ import { FieldItem, IDisputeInfo } from "./index"; const Container = styled.div` display: flex; width: 100%; - gap: 8px; flex-direction: column; justify-content: flex-end; `; diff --git a/web/src/components/DisputeView/PeriodBanner.tsx b/web/src/components/DisputeView/PeriodBanner.tsx index 722989793..6a5287afa 100644 --- a/web/src/components/DisputeView/PeriodBanner.tsx +++ b/web/src/components/DisputeView/PeriodBanner.tsx @@ -4,6 +4,7 @@ import styled, { Theme, css, useTheme } from "styled-components"; import { Periods } from "consts/periods"; import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; interface IContainer { isCard: boolean; @@ -20,7 +21,7 @@ const Container = styled.div` align-items: center; gap: 8px; justify-content: space-between; - padding: 0 ${({ isCard }) => (isCard ? responsiveSize(8, 24) : responsiveSize(8, 24, 900))}; + padding: 0 ${({ isCard }) => (isCard ? "16px" : "24px")}; flex-shrink: 0; ${({ frontColor, backgroundColor, isCard }) => { return ` @@ -28,6 +29,12 @@ const Container = styled.div` ${isCard && `background-color: ${backgroundColor};`}; `; }}; + + ${landscapeStyle( + () => css` + padding: 0 24px; + ` + )} `; const StyledLabel = styled.label<{ frontColor: string; withDot?: boolean; isCard?: boolean }>` diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index dcc75e456..f84334695 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -30,7 +30,7 @@ const StyledCard = styled(Card)` const TopContent = styled.div` display: flex; flex-direction: column; - padding: ${responsiveSize(8, 20)} ${responsiveSize(8, 24)}; + padding: 16px; gap: 4px; overflow-wrap: break-word; @@ -45,6 +45,12 @@ const TopContent = styled.div` display: inline-block; margin: 0; } + + ${landscapeStyle( + () => css` + padding: 20px 24px; + ` + )} `; const IndexAndName = styled.div` @@ -72,16 +78,23 @@ const StyledReactMarkdown = styled(ReactMarkdown)` const BottomShade = styled.div` background-color: ${({ theme }) => theme.lightBlue}; + border-top: 1px solid ${({ theme }) => theme.stroke}; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; - padding: 12px ${responsiveSize(8, 24)}; + padding: 16px; > * { flex-basis: 1; flex-shrink: 0; margin: 0; } + + ${landscapeStyle( + () => css` + padding: 16px 24px; + ` + )} `; const BottomLeftContent = styled.div` diff --git a/web/src/components/FavoriteCases.tsx b/web/src/components/FavoriteCases.tsx index 51717d4d1..a742b7b96 100644 --- a/web/src/components/FavoriteCases.tsx +++ b/web/src/components/FavoriteCases.tsx @@ -9,6 +9,7 @@ import { isUndefined } from "utils/index"; import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard } from "components/StyledSkeleton"; @@ -18,7 +19,7 @@ const Container = styled.div` `; const Title = styled.h1` - margin-bottom: 4px; + margin: 0; font-size: ${responsiveSize(20, 24)}; `; @@ -30,11 +31,20 @@ const DisputeContainer = styled.div` gap: var(--gap); `; +const TitleAndClearLabel = styled.div` + display: flex; + flex-direction: row; + gap: 12px; + align-items: center; + margin-bottom: ${responsiveSize(12, 24)}; +`; + const StyledLabel = styled.label` - display: block; + ${hoverShortTransitionTiming} color: ${({ theme }) => theme.primaryBlue}; cursor: pointer; - margin-bottom: ${responsiveSize(12, 16)}; + margin-top: 6px; + :hover { color: ${({ theme }) => theme.secondaryBlue}; } @@ -61,8 +71,10 @@ const FavoriteCases: React.FC = () => { return starredCaseIds.length > 0 && (isUndefined(disputes) || disputes.length > 0) ? ( - Favorite Cases - Clear all + + Favorite Cases + Clear all + {isUndefined(disputes) ? Array.from({ length: 3 }).map((_, index) => ) diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index 12020a2b8..40729df8e 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Skeleton from "react-loading-skeleton"; import { useParams } from "react-router-dom"; @@ -19,7 +19,7 @@ import { isUndefined } from "utils/index"; import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators"; import AnswerDisplay from "./Answer"; @@ -35,7 +35,7 @@ const JuryContainer = styled.div` flex-direction: row; flex-wrap: wrap; align-items: center; - gap: 4px 7px; + gap: 5px 7px; h3 { line-height: 21px; @@ -48,7 +48,7 @@ const VerdictContainer = styled.div` flex-direction: row; align-items: center; flex-wrap: wrap; - gap: ${responsiveSize(6, 8)}; + gap: 8px; `; const JuryDecisionTag = styled.small` @@ -57,7 +57,13 @@ const JuryDecisionTag = styled.small` `; const StyledDivider = styled(Divider)` - margin: ${responsiveSize(16, 24)} 0px; + margin: 16px 0px; + + ${landscapeStyle( + () => css` + margin: 24px 0px; + ` + )} `; const ReStyledArrowLink = styled(StyledArrowLink)` diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx index 472c3c3ff..bebb00c29 100644 --- a/web/src/layout/Footer/index.tsx +++ b/web/src/layout/Footer/index.tsx @@ -12,22 +12,22 @@ import LightButton from "components/LightButton"; import { ExternalLink } from "components/ExternalLink"; const Container = styled.div` - height: 122px; + height: 114px; width: 100%; background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)}; display: flex; flex-direction: column; justify-content: center; align-items: center; - padding: 0 32px 8px 32px; - gap: 24px; + padding: 8px; + gap: 16px; ${landscapeStyle( () => css` height: 64px; flex-direction: row; justify-content: space-between; - padding-bottom: 0; + padding: 0 32px; ` )} `; diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx index 669274e86..4f5c87ad7 100644 --- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/Header.tsx @@ -34,7 +34,7 @@ const StyledPaperClip = styled(PaperClip)` width: ${responsiveSize(16, 24)}; height: ${responsiveSize(16, 24)}; path { - fill: ${({ theme }) => theme.primaryPurple}; + fill: ${({ theme }) => theme.secondaryPurple}B0; } `; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx index 78d5077bd..1fa2ec2d9 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx @@ -1,26 +1,32 @@ import React, { useMemo } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; import { hoverShortTransitionTiming } from "styles/commonStyles"; +import { landscapeStyle } from "styles/landscapeStyle"; + +import { Card, Radio, LinearProgress } from "@kleros/ui-components-library"; import { useMeasure } from "react-use"; import { formatEther } from "viem"; -import { Card, Radio, LinearProgress } from "@kleros/ui-components-library"; +import { isUndefined } from "utils/index"; import Gavel from "svgs/icons/gavel.svg"; -import { isUndefined } from "utils/index"; - -const StyledCard = styled(Card)` +const StyledCard = styled(Card)<{ canBeSelected: boolean }>` ${hoverShortTransitionTiming} width: 100%; - padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)}; + padding: 16px; - &:hover { - cursor: pointer; + :hover { + cursor: ${({ canBeSelected }) => (canBeSelected ? "pointer" : "auto")}; } + + ${landscapeStyle( + () => css` + padding: 24px; + ` + )} `; const WinnerLabel = styled.label<{ winner: boolean }>` @@ -97,8 +103,9 @@ const OptionCard: React.FC = ({ else if (funding > 0n) return [`Funded with ${formatEther(funding)} ETH.`, 30]; else return ["0 ETH contributed to this option", 0]; }, [funding, required]); + return ( - + {text} diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx index 11ebdf704..b50a217f1 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx @@ -13,7 +13,13 @@ import AppealHistory from "./AppealHistory"; import Classic from "./Classic"; const Container = styled.div` - padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; + padding: 16px; + + ${landscapeStyle( + () => css` + padding: 32px; + ` + )} `; export const AppealHeader = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 8541deec3..47746919a 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -1,5 +1,5 @@ import React, { useCallback, useMemo, useRef, useState } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { useParams } from "react-router-dom"; import { useDebounce } from "react-use"; @@ -8,26 +8,32 @@ import { Button } from "@kleros/ui-components-library"; import DownArrow from "svgs/icons/arrow-down.svg"; +import { spamEvidencesIds } from "consts/index"; + import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { useEvidences } from "queries/useEvidences"; -import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import EvidenceCard from "components/EvidenceCard"; import { SkeletonEvidenceCard } from "components/StyledSkeleton"; import EvidenceSearch from "./EvidenceSearch"; import { Divider } from "components/Divider"; -import { spamEvidencesIds } from "src/consts"; const Container = styled.div` width: 100%; display: flex; flex-direction: column; gap: 16px; - align-items: center; - padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; + padding: 16px; + + ${landscapeStyle( + () => css` + padding: 32px; + ` + )} `; const StyledLabel = styled.label` diff --git a/web/src/pages/Cases/CaseDetails/Overview/index.tsx b/web/src/pages/Cases/CaseDetails/Overview/index.tsx index 6cdae7044..8cfa1f26b 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { useParams } from "react-router-dom"; import { formatEther } from "viem"; @@ -11,7 +11,7 @@ import { getLocalRounds } from "utils/getLocalRounds"; import { useCourtPolicy } from "queries/useCourtPolicy"; import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; -import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import { DisputeContext } from "components/DisputePreview/DisputeContext"; import { Policies } from "components/DisputePreview/Policies"; @@ -24,8 +24,15 @@ const Container = styled.div` height: auto; display: flex; flex-direction: column; - gap: ${responsiveSize(16, 24)}; - padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; + gap: 16px; + padding: 16px; + + ${landscapeStyle( + () => css` + padding: 32px; + gap: 24px; + ` + )} `; interface IOverview { diff --git a/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx b/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx index 3635a56d2..397140329 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/PendingVotesBox.tsx @@ -12,7 +12,7 @@ const StyledBox = styled(Box)` border-radius: 3px; padding: 16px; display: flex; - gap: 8px; + gap: 10px; align-items: center; margin-bottom: -4px; > p { diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx index 6a6eb0e6b..99cc657e9 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { Card, CustomAccordion } from "@kleros/ui-components-library"; @@ -8,7 +8,8 @@ import { DrawnJuror } from "utils/getDrawnJurorsWithCount"; import { getVoteChoice } from "utils/getVoteChoice"; import { isUndefined } from "utils/index"; -import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; +import { landscapeStyle } from "styles/landscapeStyle"; import InfoCard from "components/InfoCard"; @@ -27,21 +28,43 @@ const StyledAccordion = styled(CustomAccordion)` } [class*="accordion-button"] { - padding: 12px ${responsiveSize(8, 16)} !important; + padding: 16px !important; margin: 4px 0; } [class*="Body"] { - padding: ${responsiveSize(6, 10)} ${responsiveSize(4, 16)}; + padding: 8px; } + + ${landscapeStyle( + () => css` + [class*="accordion-button"] { + padding: 12px 16px !important; + } + [class*="Body"] { + padding: 12px 16px; + } + ` + )} `; const StyledCard = styled(Card)` + ${hoverShortTransitionTiming} width: 100%; height: auto; - padding: 11.5px ${responsiveSize(8, 18)}; + padding: 16px; border: 1px solid ${({ theme }) => theme.stroke}; margin: 4px 0; + + :hover { + background-color: ${({ theme }) => theme.lightGrey}BB; + } + + ${landscapeStyle( + () => css` + padding: 12px 16px; + ` + )} `; const AccordionContentContainer = styled.div` diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index fdfcac398..e73094054 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import Skeleton from "react-loading-skeleton"; import { useParams } from "react-router-dom"; @@ -18,6 +18,7 @@ import { useAppealCost } from "queries/useAppealCost"; import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import { getPeriodEndTimestamp } from "components/DisputeView"; import InfoCard from "components/InfoCard"; @@ -27,8 +28,13 @@ import Classic from "./Classic"; import VotingHistory from "./VotingHistory"; const Container = styled.div` - padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; - padding-bottom: ${responsiveSize(8, 16)}; + padding: 16px; + + ${landscapeStyle( + () => css` + padding: 32px 32px 16px; + ` + )} `; const InfoCardContainer = styled.div` diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 7783ec823..dc7bacd9c 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -1,11 +1,11 @@ import React from "react"; -import styled from "styled-components"; -import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; - -import { Routes, Route } from "react-router-dom"; +import styled, { css } from "styled-components"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { Routes, Route } from "react-router-dom"; + import AttachmentDisplay from "./AttachmentDisplay"; import CaseDetails from "./CaseDetails"; import CasesFetcher from "./CasesFetcher"; @@ -13,9 +13,15 @@ import CasesFetcher from "./CasesFetcher"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; + padding: 32px 16px 40px; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; + + ${landscapeStyle( + () => css` + padding: 48px ${responsiveSize(0, 132)} 60px; + ` + )} `; const Cases: React.FC = () => ( diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx index e350dd9d4..77aff9496 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx @@ -2,7 +2,6 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; import { useParams } from "react-router-dom"; import Skeleton from "react-loading-skeleton"; @@ -35,10 +34,16 @@ const Container = styled.div` flex-direction: column; background-color: ${({ theme }) => theme.lightBlue}; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); - padding: ${responsiveSize(16, 20)} ${responsiveSize(8, 20)}; + padding: 16px; border-radius: 8px; border: 1px solid ${({ theme }) => theme.mediumBlue}; justify-content: center; + + ${landscapeStyle( + () => css` + padding: 20px; + ` + )} `; const ItemsContainer = styled.div` diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 5d41d915b..9f292cb6c 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -31,12 +31,12 @@ import { StyledSkeleton } from "components/StyledSkeleton"; const StyledAccordion = styled(Accordion)` > * > button { - padding: 12px ${responsiveSize(8, 24)} !important; + padding: 12px 16px !important; justify-content: unset; } //adds padding to body container > * > div > div { - padding: 0; + padding: 0 8px 8px; } [class*="accordion-item"] { margin: 0; @@ -47,6 +47,9 @@ const StyledAccordion = styled(Accordion)` > * > div > div { padding: 0 24px; } + > * > button { + padding: 12px 24px !important; + } ` )} `; diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index dfabb58ea..fd3f3d610 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -59,11 +59,17 @@ const ButtonContainer = styled.div` `; const StyledCard = styled(Card)` - padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; + padding: 16px; margin-top: 12px; width: 100%; height: auto; min-height: 100px; + + ${landscapeStyle( + () => css` + padding: 32px; + ` + )} `; const StyledBreadcrumb = styled(Breadcrumb)` diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index 963f87f57..fb0419bcc 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -1,8 +1,8 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; -import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; import { Routes, Route, Navigate } from "react-router-dom"; @@ -12,9 +12,15 @@ import TopSearch from "./TopSearch"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; + padding: 32px 16px 40px; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; + + ${landscapeStyle( + () => css` + padding: 48px ${responsiveSize(0, 132)} 60px; + ` + )} `; const Courts: React.FC = () => { diff --git a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx index 21b291642..c1617b621 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/Stake.tsx @@ -12,7 +12,7 @@ import PnkIcon from "svgs/icons/pnk.svg"; const Container = styled.div` display: flex; flex-direction: row; - gap: 16px; + gap: 8px; width: 100%; justify-content: flex-start; align-items: center; @@ -20,6 +20,7 @@ const Container = styled.div` ${landscapeStyle( () => css` width: auto; + gap: 12px; ` )} `; diff --git a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx index 79bc7b82c..360f97ca6 100644 --- a/web/src/pages/Dashboard/Courts/CourtCard/index.tsx +++ b/web/src/pages/Dashboard/Courts/CourtCard/index.tsx @@ -15,18 +15,21 @@ const Container = styled(_Card)` justify-content: space-between; height: auto; width: 100%; - padding: 21px 20px 25px 20px; + padding: 20px 16px 24px; border-left: 5px solid ${({ theme }) => theme.secondaryPurple}; flex-wrap: wrap; - gap: 20px; + gap: 16px; + + :hover { + cursor: auto; + } ${({ theme }) => (theme.name === "light" ? `box-shadow: 0px 2px 3px 0px ${theme.stroke};` : "")} ${landscapeStyle( - () => - css` - padding: 21.5px 32px; - ` + () => css` + padding: 21.5px 32px; + ` )} `; @@ -38,7 +41,7 @@ interface ICourtCard { const CourtCard: React.FC = ({ name, stake, id }) => { return ( - + diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index aaa17a4bc..c74dabfd4 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -21,7 +21,7 @@ const Container = styled.div` const CourtCardsContainer = styled.div` display: flex; flex-direction: column; - gap: 4px; + gap: 12px; z-index: 0; ${landscapeStyle( diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index 51fc446ab..bdf806288 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { useNavigate, useParams } from "react-router-dom"; import { useAccount } from "wagmi"; @@ -12,7 +12,7 @@ import { useUserQuery } from "queries/useUser"; import { OrderDirection } from "src/graphql/graphql"; -import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import CasesDisplay from "components/CasesDisplay"; @@ -26,9 +26,15 @@ import JurorInfo from "./JurorInfo"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; + padding: 32px 16px 40px; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; + + ${landscapeStyle( + () => css` + padding: 48px ${responsiveSize(0, 132)} 60px; + ` + )} `; const StyledCasesDisplay = styled(CasesDisplay)` diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index 26eb36651..6ea2f3268 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -1,7 +1,7 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; -import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import { isProductionDeployment } from "consts/index"; @@ -19,7 +19,7 @@ const Wrapper = styled.div` const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: 16px ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; + padding: 16px 16px 40px; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; display: flex; @@ -27,6 +27,12 @@ const Container = styled.div` align-items: center; justify-content: center; gap: 24px; + + ${landscapeStyle( + () => css` + padding: 16px ${responsiveSize(0, 132)} 60px; + ` + )} `; const GetPnk: React.FC = () => ( diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index d4c003c51..0127fb9e0 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -26,7 +26,7 @@ const StyledCard = styled(Card)` gap: 12px; flex-direction: column; flex-wrap: wrap; - padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)}; + padding: 16px; align-items: flex-start; ${landscapeStyle( diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx index 75b921706..3ecafc8fc 100644 --- a/web/src/pages/Home/CourtOverview/ExtraStats.tsx +++ b/web/src/pages/Home/CourtOverview/ExtraStats.tsx @@ -1,7 +1,7 @@ import React, { useState } from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; -import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import { DropdownSelect } from "@kleros/ui-components-library"; @@ -15,9 +15,16 @@ import ExtraStatsDisplay from "components/ExtraStatsDisplay"; const StyledCard = styled.div` display: flex; flex-wrap: wrap; - gap: 12px 24px; + gap: 12px 16px; justify-content: center; - margin-top: ${responsiveSize(12, 16)}; + margin-top: 12px; + + ${landscapeStyle( + () => css` + margin-top: 16px; + gap: 16px 24px; + ` + )} `; const StyledLabel = styled.label` diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index aa756203b..503bd6a70 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -1,5 +1,5 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import { Card } from "@kleros/ui-components-library"; @@ -17,18 +17,24 @@ import { calculateSubtextRender } from "utils/calculateSubtextRender"; import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; import { isUndefined } from "utils/index"; -import { responsiveSize } from "styles/responsiveSize"; +import { landscapeStyle } from "styles/landscapeStyle"; import StatDisplay, { IStatDisplay } from "components/StatDisplay"; import { StyledSkeleton } from "components/StyledSkeleton"; const StyledCard = styled(Card)` + display: grid; + grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); width: auto; height: fit-content; gap: 16px 8px; - padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 24)}; - display: grid; - grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); + padding: 16px; + + ${landscapeStyle( + () => css` + padding: 24px; + ` + )} `; const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) => @@ -45,7 +51,7 @@ interface IStat { const stats: IStat[] = [ { - title: "PNK staked", + title: "PNK Staked", coinId: 0, getText: (counters) => formatPNK(getLastOrZero(counters, "stakedPNK")), getSubtext: (counters, coinPrice) => @@ -63,7 +69,7 @@ const stats: IStat[] = [ icon: EthereumIcon, }, { - title: "PNK redistributed", + title: "PNK Redistributed", coinId: 0, getText: (counters) => formatPNK(getLastOrZero(counters, "redistributedPNK")), getSubtext: (counters, coinPrice) => @@ -72,7 +78,7 @@ const stats: IStat[] = [ icon: PNKRedistributedIcon, }, { - title: "Active jurors", + title: "Active Jurors", getText: (counters) => getLastOrZero(counters, "activeJurors"), color: "green", icon: JurorIcon, diff --git a/web/src/pages/Home/TopJurors/Header/Coherence.tsx b/web/src/pages/Home/TopJurors/Header/Coherence.tsx index 23d6c6d6b..b4823abcb 100644 --- a/web/src/pages/Home/TopJurors/Header/Coherence.tsx +++ b/web/src/pages/Home/TopJurors/Header/Coherence.tsx @@ -1,9 +1,9 @@ import React from "react"; import styled, { css } from "styled-components"; -import { useWindowSize } from "react-use"; +import { landscapeStyle } from "styles/landscapeStyle"; -import { BREAKPOINT_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; +import useIsDesktop from "hooks/useIsDesktop"; import WithHelpTooltip from "components/WithHelpTooltip"; @@ -32,13 +32,11 @@ const coherentVotesTooltipMsg = "the juror voted"; const Coherence: React.FC = () => { - const { width } = useWindowSize(); + const isDesktop = useIsDesktop(); + return ( - BREAKPOINT_LANDSCAPE ? "top" : "left"} - tooltipMsg={coherentVotesTooltipMsg} - > + ); }; diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx index 5218967de..17ac929a7 100644 --- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx @@ -2,7 +2,6 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; import { useToggle } from "react-use"; @@ -14,7 +13,7 @@ const Container = styled.div` justify-content: space-between; width: 100%; background-color: ${({ theme }) => theme.lightBlue}; - padding: 16px ${responsiveSize(8, 24)}; + padding: 16px; border 1px solid ${({ theme }) => theme.stroke}; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -23,6 +22,7 @@ const Container = styled.div` ${landscapeStyle( () => css` display: none; + padding: 16px 24px; ` )} `; diff --git a/web/src/pages/Home/TopJurors/Header/Rewards.tsx b/web/src/pages/Home/TopJurors/Header/Rewards.tsx index 5365c3c7b..29f493d03 100644 --- a/web/src/pages/Home/TopJurors/Header/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/Header/Rewards.tsx @@ -3,6 +3,8 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import useIsDesktop from "hooks/useIsDesktop"; + import WithHelpTooltip from "components/WithHelpTooltip"; const Container = styled.div` @@ -16,14 +18,13 @@ const Container = styled.div` } ${landscapeStyle( - () => - css` - font-size: 14px !important; - justify-content: center; - &::before { - content: "Total Rewards"; - } - ` + () => css` + font-size: 14px !important; + justify-content: center; + &::before { + content: "Total Rewards"; + } + ` )} `; @@ -33,10 +34,14 @@ const totalRewardsTooltipMsg = "is coherent with the final ruling receive the Juror Rewards composed of " + "arbitration fees (ETH) + PNK redistribution between jurors."; -const Rewards: React.FC = () => ( - - - -); +const Rewards: React.FC = () => { + const isDesktop = useIsDesktop(); + + return ( + + + + ); +}; export default Rewards; diff --git a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx index 7e1785965..4185b988a 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/DesktopCard.tsx @@ -3,6 +3,7 @@ import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import Coherence from "./Coherence"; import JurorLevel from "./JurorLevel"; @@ -11,6 +12,7 @@ import Rank from "./Rank"; import Rewards from "./Rewards"; const Container = styled.div` + ${hoverShortTransitionTiming} display: none; width: 100%; background-color: ${({ theme }) => theme.whiteBackground}; @@ -28,6 +30,10 @@ const Container = styled.div` column-gap: ${responsiveSize(12, 28, 900)}; ` )} + + :hover { + background-color: ${({ theme }) => theme.lightGrey}BB; + } `; interface IDesktopCard { diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index d8963bd65..7bf467191 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -2,6 +2,7 @@ import React from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { hoverShortTransitionTiming } from "styles/commonStyles"; import HeaderCoherence from "../Header/Coherence"; import HeaderRewards from "../Header/Rewards"; @@ -13,22 +14,27 @@ import Rank from "./Rank"; import Rewards from "./Rewards"; const Container = styled.div` + ${hoverShortTransitionTiming} display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; background-color: ${({ theme }) => theme.whiteBackground}; - padding: 8px 8px 12px; + padding: 8px 16px 12px; border: 1px solid ${({ theme }) => theme.stroke}; border-top: none; align-items: center; - gap: 18px; + gap: 16px; ${landscapeStyle( () => css` display: none; ` )} + + :hover { + background-color: ${({ theme }) => theme.lightGrey}BB; + } `; const TopSide = styled.div` @@ -50,7 +56,7 @@ const HeaderRewardsAndRewards = styled.div` display: flex; flex-direction: column; width: 100%; - gap: 5px; + gap: 8px; `; const BottomSide = styled.div` @@ -64,7 +70,7 @@ const HeaderCoherenceAndCoherence = styled.div` display: flex; flex-direction: column; align-items: flex-end; - gap: 5px; + gap: 8px; svg { margin-right: 0; diff --git a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx index 90aa61b10..59ba64f6c 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/Rewards.tsx @@ -5,6 +5,7 @@ import EthIcon from "svgs/icons/eth.svg"; import PnkIcon from "svgs/icons/kleros.svg"; import { useUserQuery } from "hooks/queries/useUser"; +import useIsDesktop from "hooks/useIsDesktop"; import { getFormattedRewards } from "utils/jurorRewardConfig"; import { landscapeStyle } from "styles/landscapeStyle"; @@ -48,11 +49,17 @@ const Rewards: React.FC = ({ address }) => { const formattedRewards = getFormattedRewards(userData, {}); const ethReward = formattedRewards.find((r) => r.token === "ETH")?.amount; const pnkReward = formattedRewards.find((r) => r.token === "PNK")?.amount; + const isDesktop = useIsDesktop(); return ( - + + diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 65a861ba5..da6f92fbe 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -1,7 +1,7 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; -import { MAX_WIDTH_LANDSCAPE } from "styles/landscapeStyle"; +import { MAX_WIDTH_LANDSCAPE, landscapeStyle } from "styles/landscapeStyle"; import { responsiveSize } from "styles/responsiveSize"; import { HomePageProvider } from "hooks/useHomePageContext"; @@ -22,9 +22,15 @@ const Wrapper = styled.div` const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: 16px ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; + padding: 16px 16px 40px; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; + + ${landscapeStyle( + () => css` + padding: 16px ${responsiveSize(0, 132)} 60px; + ` + )} `; const Home: React.FC = () => (