From c44195929a4ff0e2cdf7f618c73ee3838633c6ae Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 17 Dec 2024 17:29:06 +0100 Subject: [PATCH 1/8] fix: margin adjustments case overview page --- web/src/components/DisputePreview/DisputeContext.tsx | 8 +++++--- web/src/components/Verdict/FinalDecision.tsx | 1 - web/src/pages/Cases/CaseDetails/index.tsx | 1 + 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 6ef201fd7..19c3841d2 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -27,6 +27,8 @@ const ReactMarkdownWrapper = styled.div` } `; +const QuestionAndDescriptionWrapper = styled.div``; + const VotingOptions = styled.div` display: flex; flex-direction: column; @@ -38,7 +40,7 @@ const AnswersContainer = styled.div` flex-direction: column; `; -const AnswersHeader = styled.h3` +const AnswersHeader = styled.small` margin: 0; `; @@ -66,7 +68,7 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp <> {isUndefined(disputeDetails) ? : (disputeDetails?.title ?? errMsg)} {!isUndefined(disputeDetails) ? ( - <> + {disputeDetails?.question?.trim() ? ( {disputeDetails.question} @@ -77,7 +79,7 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp {disputeDetails.description} ) : null} - + ) : null} {isUndefined(disputeDetails?.frontendUrl) ? null : ( diff --git a/web/src/components/Verdict/FinalDecision.tsx b/web/src/components/Verdict/FinalDecision.tsx index b4b5bd21c..12020a2b8 100644 --- a/web/src/components/Verdict/FinalDecision.tsx +++ b/web/src/components/Verdict/FinalDecision.tsx @@ -53,7 +53,6 @@ const VerdictContainer = styled.div` const JuryDecisionTag = styled.small` font-weight: 400; - line-height: 19px; color: ${({ theme }) => theme.secondaryText}; `; diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index 64cc12424..8515c6265 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -29,6 +29,7 @@ const StyledCard = styled(Card)` width: 100%; height: auto; min-height: 100px; + border-radius: 0 0 3px 3px; `; const HeaderContainer = styled.div` From 26273b21c8fcdb7485de66282715b8d5498f5ac6 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 17 Dec 2024 18:05:04 +0100 Subject: [PATCH 2/8] chore: navbar color change, hero color updates, margin touches --- .../svgs/hero/hero-darkmode-desktop.svg | 83 +++++++++---------- .../assets/svgs/hero/hero-darkmode-mobile.svg | 8 +- .../DisputePreview/DisputeContext.tsx | 3 +- web/src/components/FavoriteCases.tsx | 2 +- web/src/layout/Footer/index.tsx | 2 +- web/src/layout/Header/index.tsx | 2 +- web/src/pages/Dashboard/index.tsx | 2 +- 7 files changed, 51 insertions(+), 51 deletions(-) diff --git a/web/src/assets/svgs/hero/hero-darkmode-desktop.svg b/web/src/assets/svgs/hero/hero-darkmode-desktop.svg index 348292627..1e9ae698f 100644 --- a/web/src/assets/svgs/hero/hero-darkmode-desktop.svg +++ b/web/src/assets/svgs/hero/hero-darkmode-desktop.svg @@ -1,49 +1,49 @@ - - + + - + - - + + - + - - - - + + + + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + - + - - - + + + @@ -51,24 +51,23 @@ - + - + - + - + - + - diff --git a/web/src/assets/svgs/hero/hero-darkmode-mobile.svg b/web/src/assets/svgs/hero/hero-darkmode-mobile.svg index 19e028aa6..31d670c8a 100644 --- a/web/src/assets/svgs/hero/hero-darkmode-mobile.svg +++ b/web/src/assets/svgs/hero/hero-darkmode-mobile.svg @@ -1,7 +1,7 @@ - - - + + + @@ -46,7 +46,7 @@ - + diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 19c3841d2..7fe98fad7 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -64,10 +64,11 @@ interface IDisputeContext { export const DisputeContext: React.FC = ({ disputeDetails, isRpcError = false }) => { const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR; + return ( <> {isUndefined(disputeDetails) ? : (disputeDetails?.title ?? errMsg)} - {!isUndefined(disputeDetails) ? ( + {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? ( {disputeDetails?.question?.trim() ? ( diff --git a/web/src/components/FavoriteCases.tsx b/web/src/components/FavoriteCases.tsx index c90ab4f5b..a826ca100 100644 --- a/web/src/components/FavoriteCases.tsx +++ b/web/src/components/FavoriteCases.tsx @@ -14,7 +14,7 @@ import DisputeView from "components/DisputeView"; import { SkeletonDisputeCard } from "components/StyledSkeleton"; const Container = styled.div` - margin-top: ${responsiveSize(48, 80)}; + margin-top: ${responsiveSize(24, 48)}; `; const Title = styled.h1` diff --git a/web/src/layout/Footer/index.tsx b/web/src/layout/Footer/index.tsx index 4007b781b..472c3c3ff 100644 --- a/web/src/layout/Footer/index.tsx +++ b/web/src/layout/Footer/index.tsx @@ -14,7 +14,7 @@ import { ExternalLink } from "components/ExternalLink"; const Container = styled.div` height: 122px; width: 100%; - background-color: ${({ theme }) => theme.primaryPurple}; + background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)}; display: flex; flex-direction: column; justify-content: center; diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index ac7a0e3de..c181caabc 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -9,7 +9,7 @@ const Container = styled.div` z-index: 10; top: 0; width: 100%; - background-color: ${({ theme }) => theme.primaryPurple}; + background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)}; display: flex; flex-wrap: wrap; diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index e8a890e66..ed619436f 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -32,7 +32,7 @@ const Container = styled.div` `; const StyledCasesDisplay = styled(CasesDisplay)` - margin-top: ${responsiveSize(32, 48)}; + margin-top: ${responsiveSize(24, 48)}; .title { margin-bottom: ${responsiveSize(12, 24)}; From b3bd4b7e4a669c9e6f5b11ae9ffa54f878b212c9 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 17 Dec 2024 19:31:42 +0100 Subject: [PATCH 3/8] feat: blur in navbar, fix bug in extrastats placement, add dom to tsconfig, overlayportal --- web/src/components/OverlayPortal.tsx | 18 ++++++++++++++ web/src/layout/Header/DesktopHeader.tsx | 24 +++++++------------ web/src/layout/Header/index.tsx | 21 +++++++--------- web/src/layout/Header/navbar/index.tsx | 23 +++++++----------- .../pages/Home/CourtOverview/ExtraStats.tsx | 1 - web/src/styles/global-style.ts | 2 +- web/tsconfig.json | 3 ++- 7 files changed, 46 insertions(+), 46 deletions(-) create mode 100644 web/src/components/OverlayPortal.tsx diff --git a/web/src/components/OverlayPortal.tsx b/web/src/components/OverlayPortal.tsx new file mode 100644 index 000000000..b2f3c94d4 --- /dev/null +++ b/web/src/components/OverlayPortal.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import styled from "styled-components"; + +const PortalContainer = styled.div` + position: fixed; + top: 0; + left: 0; + z-index: 9999; + width: 100%; + height: 100%; +`; + +const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => { + return ReactDOM.createPortal({children}, document.body); +}; + +export default OverlayPortal; diff --git a/web/src/layout/Header/DesktopHeader.tsx b/web/src/layout/Header/DesktopHeader.tsx index 5edab822d..73efaa230 100644 --- a/web/src/layout/Header/DesktopHeader.tsx +++ b/web/src/layout/Header/DesktopHeader.tsx @@ -23,6 +23,8 @@ import { MiniguideHashesType } from "components/Popup/MiniGuides/MainStructureTe import Onboarding from "components/Popup/MiniGuides/Onboarding"; import RankedVoting from "components/Popup/MiniGuides/RankedVoting"; import Staking from "components/Popup/MiniGuides/Staking"; +import OverlayPortal from "components/OverlayPortal"; +import { Overlay } from "components/Overlay"; import Logo from "./Logo"; import DappList from "./navbar/DappList"; @@ -86,16 +88,6 @@ const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain } `; -const PopupContainer = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background-color: ${({ theme }) => theme.blackLowOpacity}; -`; - const DesktopHeader: React.FC = () => { const [isDappListOpen, toggleIsDappListOpen] = useToggle(false); const [isHelpOpen, toggleIsHelpOpen] = useToggle(false); @@ -178,11 +170,13 @@ const DesktopHeader: React.FC = () => { {(isDappListOpen || isHelpOpen || isSettingsOpen) && ( - - {isDappListOpen && } - {isHelpOpen && } - {isSettingsOpen && } - + + + {isDappListOpen && } + {isHelpOpen && } + {isSettingsOpen && } + + )} {isJurorLevelsMiniGuideOpen && } {isAppealMiniGuideOpen && } diff --git a/web/src/layout/Header/index.tsx b/web/src/layout/Header/index.tsx index c181caabc..cf319f5b1 100644 --- a/web/src/layout/Header/index.tsx +++ b/web/src/layout/Header/index.tsx @@ -5,28 +5,23 @@ import DesktopHeader from "./DesktopHeader"; import MobileHeader from "./MobileHeader"; const Container = styled.div` + display: flex; + flex-wrap: wrap; position: sticky; + padding: 0 24px; z-index: 10; top: 0; width: 100%; - background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)}; - - display: flex; - flex-wrap: wrap; -`; - -const HeaderContainer = styled.div` - width: 100%; - padding: 0 24px; + background-color: ${({ theme }) => (theme.name === "dark" ? `${theme.lightBlue}A6` : theme.primaryPurple)}; + backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")}; + -webkit-backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")}; // Safari support `; const Header: React.FC = () => { return ( - - - - + + ); }; diff --git a/web/src/layout/Header/navbar/index.tsx b/web/src/layout/Header/navbar/index.tsx index 3480405ff..8dc3a86d9 100644 --- a/web/src/layout/Header/navbar/index.tsx +++ b/web/src/layout/Header/navbar/index.tsx @@ -10,6 +10,7 @@ import { useLockOverlayScroll } from "hooks/useLockOverlayScroll"; import ConnectWallet from "components/ConnectWallet"; import LightButton from "components/LightButton"; +import OverlayPortal from "components/OverlayPortal"; import { Overlay } from "components/Overlay"; import { useOpenContext } from "../MobileHeader"; @@ -69,16 +70,6 @@ const DisconnectWalletButtonContainer = styled.div` align-items: center; `; -const PopupContainer = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 1; - background-color: ${({ theme }) => theme.blackLowOpacity}; -`; - export interface ISettings { toggleIsSettingsOpen: () => void; initialTab?: number; @@ -131,11 +122,13 @@ const NavBar: React.FC = () => { {(isDappListOpen || isHelpOpen || isSettingsOpen) && ( - - {isDappListOpen && } - {isHelpOpen && } - {isSettingsOpen && } - + + + {isDappListOpen && } + {isHelpOpen && } + {isSettingsOpen && } + + )} ); diff --git a/web/src/pages/Home/CourtOverview/ExtraStats.tsx b/web/src/pages/Home/CourtOverview/ExtraStats.tsx index 9786b4f61..75b921706 100644 --- a/web/src/pages/Home/CourtOverview/ExtraStats.tsx +++ b/web/src/pages/Home/CourtOverview/ExtraStats.tsx @@ -21,7 +21,6 @@ const StyledCard = styled.div` `; const StyledLabel = styled.label` - margin-top: 24px; font-size: 14px; font-weight: 600; `; diff --git a/web/src/styles/global-style.ts b/web/src/styles/global-style.ts index 9b1f1d58f..60e5b7f52 100644 --- a/web/src/styles/global-style.ts +++ b/web/src/styles/global-style.ts @@ -17,7 +17,7 @@ export const GlobalStyle = createGlobalStyle` body { font-family: "Open Sans", sans-serif; margin: 0px; - background-color: ${({ theme }) => theme.primaryPurple}; + background-color: ${({ theme }) => theme.lightBlue}; } html { diff --git a/web/tsconfig.json b/web/tsconfig.json index 8b8b98b97..e4683ef39 100644 --- a/web/tsconfig.json +++ b/web/tsconfig.json @@ -67,7 +67,8 @@ "resolveJsonModule": true, "target": "ES2020", "lib": [ - "ESNext.Array" + "ESNext.Array", + "dom" ], "types": [ "vite/client", From 0541466e54fdd1579fda00ec207e9ba198426d64 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Tue, 17 Dec 2024 19:33:46 +0100 Subject: [PATCH 4/8] chore: remove unused styled component --- web/src/components/DisputePreview/DisputeContext.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 7fe98fad7..3c12079ab 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -27,8 +27,6 @@ const ReactMarkdownWrapper = styled.div` } `; -const QuestionAndDescriptionWrapper = styled.div``; - const VotingOptions = styled.div` display: flex; flex-direction: column; @@ -69,7 +67,7 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp <> {isUndefined(disputeDetails) ? : (disputeDetails?.title ?? errMsg)} {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? ( - +
{disputeDetails?.question?.trim() ? ( {disputeDetails.question} @@ -80,7 +78,7 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp {disputeDetails.description} ) : null} - +
) : null} {isUndefined(disputeDetails?.frontendUrl) ? null : ( From 56cc34aa9e23dcab85171e8277420e9ca00485d5 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 18 Dec 2024 02:19:10 +0100 Subject: [PATCH 5/8] feat: mobile responsiveness, font-sizes --- .../src/app/(main)/(homepage)/page.tsx | 2 +- web/src/components/CasesDisplay/index.tsx | 3 +- .../DisputePreview/DisputeContext.tsx | 31 ++++++++++++------- web/src/components/EvidenceCard.tsx | 4 +-- web/src/components/FavoriteCases.tsx | 1 + web/src/components/LatestCases.tsx | 1 + web/src/components/Verdict/Answer.tsx | 13 ++++---- .../pages/Cases/AttachmentDisplay/Header.tsx | 2 +- .../Cases/CaseDetails/Appeal/OptionCard.tsx | 3 +- .../pages/Cases/CaseDetails/Appeal/index.tsx | 3 +- .../Cases/CaseDetails/Evidence/index.tsx | 2 +- .../Cases/CaseDetails/Overview/index.tsx | 2 +- web/src/pages/Cases/CaseDetails/Tabs.tsx | 3 +- web/src/pages/Cases/CaseDetails/Timeline.tsx | 9 ++++++ .../CaseDetails/Voting/VotesDetails/index.tsx | 4 +-- .../CaseDetails/Voting/VotingHistory.tsx | 1 + .../pages/Cases/CaseDetails/Voting/index.tsx | 2 +- web/src/pages/Cases/CaseDetails/index.tsx | 1 + web/src/pages/Cases/index.tsx | 2 +- .../StakePanel/Simulator/index.tsx | 4 ++- web/src/pages/Courts/CourtDetails/index.tsx | 3 +- web/src/pages/Courts/index.tsx | 2 +- web/src/pages/Dashboard/Courts/Header.tsx | 1 + web/src/pages/Dashboard/Courts/index.tsx | 2 +- web/src/pages/Dashboard/JurorInfo/Header.tsx | 30 ++++++------------ web/src/pages/Dashboard/index.tsx | 2 +- web/src/pages/GetPnk/index.tsx | 2 +- web/src/pages/Home/Community/index.tsx | 1 + web/src/pages/Home/CourtOverview/Header.tsx | 2 +- web/src/pages/Home/TopJurors/index.tsx | 1 + web/src/pages/Home/index.tsx | 2 +- 31 files changed, 80 insertions(+), 61 deletions(-) diff --git a/web-devtools/src/app/(main)/(homepage)/page.tsx b/web-devtools/src/app/(main)/(homepage)/page.tsx index 1d4395dca..af318eed5 100644 --- a/web-devtools/src/app/(main)/(homepage)/page.tsx +++ b/web-devtools/src/app/(main)/(homepage)/page.tsx @@ -12,7 +12,7 @@ import Tools from "./Tools"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.klerosUIComponentsLightBackground}; - padding: ${responsiveSize(32, 72)} ${responsiveSize(24, 132)} ${responsiveSize(76, 96)}; + padding: ${responsiveSize(32, 72)} ${responsiveSize(8, 132)} ${responsiveSize(76, 96)}; max-width: 1780px; margin: 0 auto; `; diff --git a/web/src/components/CasesDisplay/index.tsx b/web/src/components/CasesDisplay/index.tsx index 6a3bf8684..39dc25ec4 100644 --- a/web/src/components/CasesDisplay/index.tsx +++ b/web/src/components/CasesDisplay/index.tsx @@ -22,10 +22,11 @@ const TitleContainer = styled.div` const StyledTitle = styled.h1` margin: 0px; + font-size: ${responsiveSize(20, 24)}; `; const StyledLabel = styled.label` - font-size: 16px; + font-size: ${responsiveSize(14, 16)}; `; interface ICasesDisplay extends ICasesGrid { diff --git a/web/src/components/DisputePreview/DisputeContext.tsx b/web/src/components/DisputePreview/DisputeContext.tsx index 3c12079ab..6a93a81ce 100644 --- a/web/src/components/DisputePreview/DisputeContext.tsx +++ b/web/src/components/DisputePreview/DisputeContext.tsx @@ -19,6 +19,8 @@ import { ExternalLink } from "../ExternalLink"; const StyledH1 = styled.h1` margin: 0; word-wrap: break-word; + font-size: ${responsiveSize(18, 24)}; + line-height: 24px; `; const ReactMarkdownWrapper = styled.div` @@ -36,17 +38,25 @@ const VotingOptions = styled.div` const AnswersContainer = styled.div` display: flex; flex-direction: column; + gap: ${responsiveSize(4, 2)}; `; const AnswersHeader = styled.small` margin: 0; `; -const Answer = styled.div` - margin: 0px; - display: flex; - flex-wrap: wrap; - gap: 6px; +export const AnswerTitleAndDescription = styled.div` + display: block; +`; + +export const AnswerTitle = styled.small` + display: inline; +`; + +export const AnswerDescription = styled.small` + display: inline; + font-weight: 400; + color: ${({ theme }) => theme.secondaryText}; `; const AliasesContainer = styled.div` @@ -90,12 +100,11 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp {isUndefined(disputeDetails) ? null : Voting Options} {disputeDetails?.answers?.map((answer: IAnswer, i: number) => ( - - - {answer.title} - {answer.description.trim() ? ` - ${answer.description}` : null} - - + + + {answer.title} + {answer.description.trim() ? ` - ${answer.description}` : null} + ))} diff --git a/web/src/components/EvidenceCard.tsx b/web/src/components/EvidenceCard.tsx index ddd7ba62c..dcc75e456 100644 --- a/web/src/components/EvidenceCard.tsx +++ b/web/src/components/EvidenceCard.tsx @@ -30,8 +30,8 @@ const StyledCard = styled(Card)` const TopContent = styled.div` display: flex; flex-direction: column; - padding: ${responsiveSize(8, 24)}; - gap: ${responsiveSize(4, 8)}; + padding: ${responsiveSize(8, 20)} ${responsiveSize(8, 24)}; + gap: 4px; overflow-wrap: break-word; > * { diff --git a/web/src/components/FavoriteCases.tsx b/web/src/components/FavoriteCases.tsx index a826ca100..51717d4d1 100644 --- a/web/src/components/FavoriteCases.tsx +++ b/web/src/components/FavoriteCases.tsx @@ -19,6 +19,7 @@ const Container = styled.div` const Title = styled.h1` margin-bottom: 4px; + font-size: ${responsiveSize(20, 24)}; `; const DisputeContainer = styled.div` diff --git a/web/src/components/LatestCases.tsx b/web/src/components/LatestCases.tsx index 34f259f35..1ebb7a4b0 100644 --- a/web/src/components/LatestCases.tsx +++ b/web/src/components/LatestCases.tsx @@ -18,6 +18,7 @@ const Container = styled.div` const Title = styled.h1` margin-bottom: ${responsiveSize(12, 24)}; + font-size: ${responsiveSize(20, 24)}; `; const DisputeContainer = styled.div` diff --git a/web/src/components/Verdict/Answer.tsx b/web/src/components/Verdict/Answer.tsx index ba2ba3f0f..b52e6759f 100644 --- a/web/src/components/Verdict/Answer.tsx +++ b/web/src/components/Verdict/Answer.tsx @@ -3,6 +3,8 @@ import styled from "styled-components"; import { Answer } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes"; +import { AnswerDescription, AnswerTitle, AnswerTitleAndDescription } from "../DisputePreview/DisputeContext"; + const Container = styled.div` display: flex; flex-direction: row; @@ -20,13 +22,10 @@ const AnswerDisplay: React.FC = ({ answer, currentRuling }) => { return ( <> {answer ? ( - - - {answer.title} - {answer.description.trim() ? " -" : null} - - {answer.description.trim()} - + + {answer.title} + {answer.description.trim() ? ` - ${answer.description}` : null} + ) : ( {currentRuling !== 0 ? Answer 0x{currentRuling} : Refuse to Arbitrate} diff --git a/web/src/pages/Cases/AttachmentDisplay/Header.tsx b/web/src/pages/Cases/AttachmentDisplay/Header.tsx index 325a368a6..669274e86 100644 --- a/web/src/pages/Cases/AttachmentDisplay/Header.tsx +++ b/web/src/pages/Cases/AttachmentDisplay/Header.tsx @@ -27,7 +27,7 @@ const TitleContainer = styled.div` const Title = styled.h1` margin: 0px; - font-size: ${responsiveSize(16, 24)}; + font-size: ${responsiveSize(20, 24)}; `; const StyledPaperClip = styled(PaperClip)` diff --git a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx index 0ac19f61d..78d5077bd 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/OptionCard.tsx @@ -1,6 +1,7 @@ import React, { useMemo } from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; import { hoverShortTransitionTiming } from "styles/commonStyles"; import { useMeasure } from "react-use"; @@ -15,7 +16,7 @@ import { isUndefined } from "utils/index"; const StyledCard = styled(Card)` ${hoverShortTransitionTiming} width: 100%; - padding: 24px; + padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)}; &:hover { cursor: pointer; diff --git a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx index 04cadb16d..11ebdf704 100644 --- a/web/src/pages/Cases/CaseDetails/Appeal/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Appeal/index.tsx @@ -13,7 +13,7 @@ import AppealHistory from "./AppealHistory"; import Classic from "./Classic"; const Container = styled.div` - padding: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; `; export const AppealHeader = styled.div` @@ -33,6 +33,7 @@ export const AppealHeader = styled.div` export const StyledTitle = styled.h1` margin: 0; + font-size: ${responsiveSize(18, 24)}; `; const Appeal: React.FC<{ currentPeriodIndex: number }> = ({ currentPeriodIndex }) => { diff --git a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx index 40f32dc4f..8541deec3 100644 --- a/web/src/pages/Cases/CaseDetails/Evidence/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Evidence/index.tsx @@ -27,7 +27,7 @@ const Container = styled.div` gap: 16px; align-items: center; - padding: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; `; 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 11967f550..6cdae7044 100644 --- a/web/src/pages/Cases/CaseDetails/Overview/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Overview/index.tsx @@ -25,7 +25,7 @@ const Container = styled.div` display: flex; flex-direction: column; gap: ${responsiveSize(16, 24)}; - padding: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; `; interface IOverview { diff --git a/web/src/pages/Cases/CaseDetails/Tabs.tsx b/web/src/pages/Cases/CaseDetails/Tabs.tsx index 0ec722d98..0260c631e 100644 --- a/web/src/pages/Cases/CaseDetails/Tabs.tsx +++ b/web/src/pages/Cases/CaseDetails/Tabs.tsx @@ -22,10 +22,11 @@ import { useAppealCost } from "queries/useAppealCost"; const StyledTabs = styled(TabsComponent)` width: 100%; - margin-top: ${responsiveSize(12, 24)}; + margin-top: ${responsiveSize(10, 28)}; > * { display: flex; flex-wrap: wrap; + font-size: ${responsiveSize(12, 16)}; > svg { margin-right: 8px !important; } diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index b4aa8ece4..403cc94c5 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -13,6 +13,7 @@ import { secondsToDayHourMinute } from "utils/date"; import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { StyledSkeleton } from "components/StyledSkeleton"; +import { responsiveSize } from "~src/styles/responsiveSize"; const TimeLineContainer = styled(Box)` width: 100%; @@ -27,6 +28,14 @@ const StyledSteps = styled(Steps)` width: 89%; margin: auto; + h2 { + font-size: ${responsiveSize(12, 14)}; + } + + [class*="horizontal-bullet__TextWrapper"] { + margin-top: 2px; + } + ${landscapeStyle( () => css` width: 98%; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx index 340b7ba75..6a6eb0e6b 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotesDetails/index.tsx @@ -27,12 +27,12 @@ const StyledAccordion = styled(CustomAccordion)` } [class*="accordion-button"] { - padding: 11.5px ${responsiveSize(8, 18)} !important; + padding: 12px ${responsiveSize(8, 16)} !important; margin: 4px 0; } [class*="Body"] { - padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 16)}; + padding: ${responsiveSize(6, 10)} ${responsiveSize(4, 16)}; } `; diff --git a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx index 7beedf04c..83a7ea40e 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/VotingHistory.tsx @@ -45,6 +45,7 @@ const Header = styled.div` const StyledTitle = styled.h1` margin-bottom: 0; + font-size: ${responsiveSize(18, 24)}; `; const StyledReactMarkDown = styled(ReactMarkdown)` diff --git a/web/src/pages/Cases/CaseDetails/Voting/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/index.tsx index 75d0226ad..fdfcac398 100644 --- a/web/src/pages/Cases/CaseDetails/Voting/index.tsx +++ b/web/src/pages/Cases/CaseDetails/Voting/index.tsx @@ -27,7 +27,7 @@ import Classic from "./Classic"; import VotingHistory from "./VotingHistory"; const Container = styled.div` - padding: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; padding-bottom: ${responsiveSize(8, 16)}; `; diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index 8515c6265..b4485ac69 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -42,6 +42,7 @@ const HeaderContainer = styled.div` const Header = styled.h1` display: flex; + font-size: ${responsiveSize(20, 24)}; align-items: center; flex: 1; gap: 8px; diff --git a/web/src/pages/Cases/index.tsx b/web/src/pages/Cases/index.tsx index 08a21db95..7783ec823 100644 --- a/web/src/pages/Cases/index.tsx +++ b/web/src/pages/Cases/index.tsx @@ -13,7 +13,7 @@ import CasesFetcher from "./CasesFetcher"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx index 8ebc79bcd..bcf6b7d3d 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx @@ -1,6 +1,8 @@ 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"; @@ -33,7 +35,7 @@ const Container = styled.div` flex-direction: column; background-color: ${({ theme }) => theme.lightBlue}; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); - padding: 20px; + padding: ${responsiveSize(16, 20)}${responsiveSize(8, 20)}; border-radius: 8px; border: 1px solid ${({ theme }) => theme.mediumBlue}; justify-content: center; diff --git a/web/src/pages/Courts/CourtDetails/index.tsx b/web/src/pages/Courts/CourtDetails/index.tsx index 852ffb3dc..dfabb58ea 100644 --- a/web/src/pages/Courts/CourtDetails/index.tsx +++ b/web/src/pages/Courts/CourtDetails/index.tsx @@ -31,6 +31,7 @@ const Container = styled.div``; const CourtHeader = styled.h1` display: flex; flex-direction: row; + font-size: ${responsiveSize(20, 24)}; justify-content: space-between; gap: 8px; flex-wrap: wrap; @@ -58,7 +59,7 @@ const ButtonContainer = styled.div` `; const StyledCard = styled(Card)` - padding: ${responsiveSize(16, 32)}; + padding: ${responsiveSize(16, 32)} ${responsiveSize(8, 32)}; margin-top: 12px; width: 100%; height: auto; diff --git a/web/src/pages/Courts/index.tsx b/web/src/pages/Courts/index.tsx index dea046be9..963f87f57 100644 --- a/web/src/pages/Courts/index.tsx +++ b/web/src/pages/Courts/index.tsx @@ -12,7 +12,7 @@ import TopSearch from "./TopSearch"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index 7244de1dc..f89db6440 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -43,6 +43,7 @@ const LockedPnk = styled.div` const StyledTitle = styled.h1` margin-bottom: 0; + font-size: ${responsiveSize(20, 24)}; `; const StyledLockerIcon = styled(LockerIcon)` diff --git a/web/src/pages/Dashboard/Courts/index.tsx b/web/src/pages/Dashboard/Courts/index.tsx index 2b99b4cb8..aaa17a4bc 100644 --- a/web/src/pages/Dashboard/Courts/index.tsx +++ b/web/src/pages/Dashboard/Courts/index.tsx @@ -32,7 +32,7 @@ const CourtCardsContainer = styled.div` `; const StyledLabel = styled.label` - font-size: 16px; + font-size: ${responsiveSize(14, 16)}; `; const Courts: React.FC = () => { diff --git a/web/src/pages/Dashboard/JurorInfo/Header.tsx b/web/src/pages/Dashboard/JurorInfo/Header.tsx index 907df0015..95c31597d 100644 --- a/web/src/pages/Dashboard/JurorInfo/Header.tsx +++ b/web/src/pages/Dashboard/JurorInfo/Header.tsx @@ -1,49 +1,37 @@ import React from "react"; -import styled, { css } from "styled-components"; +import styled from "styled-components"; + +import { responsiveSize } from "styles/responsiveSize"; import { useToggle } from "react-use"; import XIcon from "svgs/socialmedia/x.svg"; -import { landscapeStyle } from "styles/landscapeStyle"; -import { responsiveSize } from "styles/responsiveSize"; - import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; import { ExternalLink } from "components/ExternalLink"; const Container = styled.div` display: flex; - flex-direction: column; - justify-content: flex-start; + flex-direction: row; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; margin-bottom: ${responsiveSize(16, 24)}; gap: 12px; - - ${landscapeStyle( - () => css` - flex-direction: row; - align-items: center; - justify-content: space-between; - ` - )} `; const StyledTitle = styled.h1` margin-bottom: 0; + font-size: ${responsiveSize(20, 24)}; `; const LinksContainer = styled.div` display: flex; color: ${({ theme }) => theme.primaryBlue}; align-items: center; - gap: 24px; + gap: 8px ${responsiveSize(20, 24)}; flex-wrap: wrap; - - ${landscapeStyle( - () => css` - gap: 32px; - ` - )} `; const StyledXIcon = styled(XIcon)` diff --git a/web/src/pages/Dashboard/index.tsx b/web/src/pages/Dashboard/index.tsx index ed619436f..51fc446ab 100644 --- a/web/src/pages/Dashboard/index.tsx +++ b/web/src/pages/Dashboard/index.tsx @@ -26,7 +26,7 @@ import JurorInfo from "./JurorInfo"; const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: ${responsiveSize(32, 48)} ${responsiveSize(24, 136)} ${responsiveSize(40, 60)}; + padding: ${responsiveSize(32, 48)} ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; diff --git a/web/src/pages/GetPnk/index.tsx b/web/src/pages/GetPnk/index.tsx index d21450262..26eb36651 100644 --- a/web/src/pages/GetPnk/index.tsx +++ b/web/src/pages/GetPnk/index.tsx @@ -19,7 +19,7 @@ const Wrapper = styled.div` const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: 16px ${responsiveSize(24, 132)} ${responsiveSize(40, 60)}; + padding: 16px ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; display: flex; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 27af3020d..961921a96 100644 --- a/web/src/pages/Home/Community/index.tsx +++ b/web/src/pages/Home/Community/index.tsx @@ -15,6 +15,7 @@ const Container = styled.div` h1 { margin-bottom: ${responsiveSize(12, 24)}; + font-size: ${responsiveSize(20, 24)}; } `; diff --git a/web/src/pages/Home/CourtOverview/Header.tsx b/web/src/pages/Home/CourtOverview/Header.tsx index 8c21ecb87..9c233199d 100644 --- a/web/src/pages/Home/CourtOverview/Header.tsx +++ b/web/src/pages/Home/CourtOverview/Header.tsx @@ -18,7 +18,7 @@ const StyledHeader = styled.div` `; const StyledH1 = styled.h1` - font-size: ${responsiveSize(21, 24)}; + font-size: ${responsiveSize(20, 24)}; margin: 0; `; diff --git a/web/src/pages/Home/TopJurors/index.tsx b/web/src/pages/Home/TopJurors/index.tsx index 2a8eb7037..e547db54a 100644 --- a/web/src/pages/Home/TopJurors/index.tsx +++ b/web/src/pages/Home/TopJurors/index.tsx @@ -19,6 +19,7 @@ const Container = styled.div` const Title = styled.h1` margin-bottom: ${responsiveSize(12, 24)}; + font-size: ${responsiveSize(20, 24)}; `; const ListContainer = styled.div` diff --git a/web/src/pages/Home/index.tsx b/web/src/pages/Home/index.tsx index 82f0f2389..65a861ba5 100644 --- a/web/src/pages/Home/index.tsx +++ b/web/src/pages/Home/index.tsx @@ -22,7 +22,7 @@ const Wrapper = styled.div` const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.lightBackground}; - padding: 16px ${responsiveSize(24, 132)} ${responsiveSize(40, 60)}; + padding: 16px ${responsiveSize(8, 132)} ${responsiveSize(40, 60)}; max-width: ${MAX_WIDTH_LANDSCAPE}; margin: 0 auto; `; From 1fef8b131ce9cdbddbe9daedbfa101f32dbb4b07 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 18 Dec 2024 02:25:43 +0100 Subject: [PATCH 6/8] fix: nitpicks --- web/src/pages/Cases/CaseDetails/Timeline.tsx | 2 +- .../pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/pages/Cases/CaseDetails/Timeline.tsx b/web/src/pages/Cases/CaseDetails/Timeline.tsx index 403cc94c5..8c2bf6c2e 100644 --- a/web/src/pages/Cases/CaseDetails/Timeline.tsx +++ b/web/src/pages/Cases/CaseDetails/Timeline.tsx @@ -2,6 +2,7 @@ import React, { useMemo } from "react"; import styled, { css } from "styled-components"; import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; import { Box, Steps } from "@kleros/ui-components-library"; @@ -13,7 +14,6 @@ import { secondsToDayHourMinute } from "utils/date"; import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery"; import { StyledSkeleton } from "components/StyledSkeleton"; -import { responsiveSize } from "~src/styles/responsiveSize"; const TimeLineContainer = styled(Box)` width: 100%; diff --git a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx index bcf6b7d3d..e350dd9d4 100644 --- a/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx +++ b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx @@ -35,7 +35,7 @@ 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: ${responsiveSize(16, 20)} ${responsiveSize(8, 20)}; border-radius: 8px; border: 1px solid ${({ theme }) => theme.mediumBlue}; justify-content: center; From 77a87a20c0729367e68eb588f049562822307577 Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 18 Dec 2024 03:25:12 +0100 Subject: [PATCH 7/8] chore: more adjustments --- web/src/components/DisputePreview/Policies.tsx | 2 +- web/src/components/DisputeView/DisputeCardView.tsx | 2 +- web/src/components/DisputeView/PeriodBanner.tsx | 2 +- web/src/pages/Courts/CourtDetails/Description.tsx | 4 ++++ web/src/pages/Courts/CourtDetails/Stats.tsx | 1 + web/src/pages/Dashboard/Courts/Header.tsx | 10 +++++----- web/src/pages/Home/Community/index.tsx | 2 +- web/src/pages/Home/CourtOverview/Stats.tsx | 13 ++++++++----- .../pages/Home/TopJurors/Header/MobileHeader.tsx | 7 ++++--- .../pages/Home/TopJurors/JurorCard/MobileCard.tsx | 2 +- 10 files changed, 27 insertions(+), 18 deletions(-) diff --git a/web/src/components/DisputePreview/Policies.tsx b/web/src/components/DisputePreview/Policies.tsx index 2eb7f5c2e..b0f856f4f 100644 --- a/web/src/components/DisputePreview/Policies.tsx +++ b/web/src/components/DisputePreview/Policies.tsx @@ -18,7 +18,7 @@ const Container = styled.div` flex-direction: row; flex-wrap: wrap; gap: 8px 16px; - padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)}; + padding: ${responsiveSize(12, 20)} ${responsiveSize(8, 32)}; background-color: ${({ theme }) => theme.mediumBlue}; `; diff --git a/web/src/components/DisputeView/DisputeCardView.tsx b/web/src/components/DisputeView/DisputeCardView.tsx index 602c98f06..8ebffae44 100644 --- a/web/src/components/DisputeView/DisputeCardView.tsx +++ b/web/src/components/DisputeView/DisputeCardView.tsx @@ -25,7 +25,7 @@ const StyledCard = styled(Card)` const CardContainer = styled.div` height: calc(100% - 45px); - padding: ${responsiveSize(20, 24)}; + padding: ${responsiveSize(20, 24)} ${responsiveSize(8, 24)}; display: flex; flex-direction: column; justify-content: space-between; diff --git a/web/src/components/DisputeView/PeriodBanner.tsx b/web/src/components/DisputeView/PeriodBanner.tsx index aa0dac171..722989793 100644 --- a/web/src/components/DisputeView/PeriodBanner.tsx +++ b/web/src/components/DisputeView/PeriodBanner.tsx @@ -20,7 +20,7 @@ const Container = styled.div` align-items: center; gap: 8px; justify-content: space-between; - padding: 0 ${({ isCard }) => (isCard ? "24px" : responsiveSize(8, 24, 900))}; + padding: 0 ${({ isCard }) => (isCard ? responsiveSize(8, 24) : responsiveSize(8, 24, 900))}; flex-shrink: 0; ${({ frontColor, backgroundColor, isCard }) => { return ` diff --git a/web/src/pages/Courts/CourtDetails/Description.tsx b/web/src/pages/Courts/CourtDetails/Description.tsx index f8110bd87..235099dec 100644 --- a/web/src/pages/Courts/CourtDetails/Description.tsx +++ b/web/src/pages/Courts/CourtDetails/Description.tsx @@ -17,6 +17,10 @@ const Container = styled.div` const TextContainer = styled.div` width: 100%; padding: 12px 0; + + p { + word-break: break-word; + } `; const StyledTabs = styled(Tabs)` diff --git a/web/src/pages/Courts/CourtDetails/Stats.tsx b/web/src/pages/Courts/CourtDetails/Stats.tsx index 55bedfc72..5d41d915b 100644 --- a/web/src/pages/Courts/CourtDetails/Stats.tsx +++ b/web/src/pages/Courts/CourtDetails/Stats.tsx @@ -31,6 +31,7 @@ import { StyledSkeleton } from "components/StyledSkeleton"; const StyledAccordion = styled(Accordion)` > * > button { + padding: 12px ${responsiveSize(8, 24)} !important; justify-content: unset; } //adds padding to body container diff --git a/web/src/pages/Dashboard/Courts/Header.tsx b/web/src/pages/Dashboard/Courts/Header.tsx index f89db6440..2fb94c300 100644 --- a/web/src/pages/Dashboard/Courts/Header.tsx +++ b/web/src/pages/Dashboard/Courts/Header.tsx @@ -14,16 +14,16 @@ import NumberDisplay from "components/NumberDisplay"; const Container = styled.div` display: flex; - flex-direction: column; + flex-direction: row; + flex-wrap: wrap; width: 100%; - gap: 4px; - align-items: flex-start; - justify-content: space-between; + gap: 4px 16px; + align-items: center; margin-bottom: ${responsiveSize(16, 24)}; ${landscapeStyle( () => css` - flex-direction: row; + justify-content: space-between; ` )} `; diff --git a/web/src/pages/Home/Community/index.tsx b/web/src/pages/Home/Community/index.tsx index 961921a96..d4c003c51 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: 24px; + padding: ${responsiveSize(12, 24)} ${responsiveSize(8, 24)}; align-items: flex-start; ${landscapeStyle( diff --git a/web/src/pages/Home/CourtOverview/Stats.tsx b/web/src/pages/Home/CourtOverview/Stats.tsx index b194aaf6d..aa756203b 100644 --- a/web/src/pages/Home/CourtOverview/Stats.tsx +++ b/web/src/pages/Home/CourtOverview/Stats.tsx @@ -12,6 +12,7 @@ import JurorIcon from "svgs/icons/user.svg"; import { CoinIds } from "consts/coingecko"; import { useCoinPrice } from "hooks/useCoinPrice"; import { useHomePageContext, HomePageQuery, HomePageQueryDataPoints } from "hooks/useHomePageContext"; +import useIsDesktop from "hooks/useIsDesktop"; import { calculateSubtextRender } from "utils/calculateSubtextRender"; import { formatETH, formatPNK, formatUnitsWei, formatUSD } from "utils/format"; import { isUndefined } from "utils/index"; @@ -24,10 +25,10 @@ import { StyledSkeleton } from "components/StyledSkeleton"; const StyledCard = styled(Card)` width: auto; height: fit-content; - gap: 32px 0; - padding: ${responsiveSize(16, 32)}; + gap: 16px 8px; + padding: ${responsiveSize(16, 24)} ${responsiveSize(8, 24)}; display: grid; - grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); + grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); `; const getLastOrZero = (src: HomePageQuery["counters"], stat: HomePageQueryDataPoints) => @@ -53,7 +54,7 @@ const stats: IStat[] = [ icon: PNKIcon, }, { - title: "ETH Paid to jurors", + title: "ETH Paid", coinId: 1, getText: (counters) => formatETH(getLastOrZero(counters, "paidETH")), getSubtext: (counters, coinPrice) => @@ -88,6 +89,8 @@ const Stats = () => { const { data } = useHomePageContext(); const coinIds = [CoinIds.PNK, CoinIds.ETH]; const { prices: pricesData } = useCoinPrice(coinIds); + const isDesktop = useIsDesktop(); + return ( {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => { @@ -99,7 +102,7 @@ const Stats = () => { {...{ title, color, icon }} text={data ? getText(data["counters"]) : } subtext={calculateSubtextRender(data ? data["counters"] : undefined, getSubtext, coinPrice)} - isSmallDisplay={false} + isSmallDisplay={!isDesktop} /> ); })} diff --git a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx index db98f16e0..5218967de 100644 --- a/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx +++ b/web/src/pages/Home/TopJurors/Header/MobileHeader.tsx @@ -1,9 +1,10 @@ import React from "react"; import styled, { css } from "styled-components"; -import { useToggle } from "react-use"; - import { landscapeStyle } from "styles/landscapeStyle"; +import { responsiveSize } from "styles/responsiveSize"; + +import { useToggle } from "react-use"; import HowItWorks from "components/HowItWorks"; import JurorLevels from "components/Popup/MiniGuides/JurorLevels"; @@ -13,7 +14,7 @@ const Container = styled.div` justify-content: space-between; width: 100%; background-color: ${({ theme }) => theme.lightBlue}; - padding: 24px; + padding: 16px ${responsiveSize(8, 24)}; border 1px solid ${({ theme }) => theme.stroke}; border-top-left-radius: 3px; border-top-right-radius: 3px; diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index 9daf2e90f..b3138c3dc 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -18,7 +18,7 @@ const Container = styled.div` flex-wrap: wrap; width: 100%; background-color: ${({ theme }) => theme.whiteBackground}; - padding: 16px 24px 24px 24px; + padding: 8px 8px 12px; border 1px solid ${({ theme }) => theme.stroke}; border-top: none; align-items: center; From 9eb9a6681c6acdc27958e8c8cd229449254bb1da Mon Sep 17 00:00:00 2001 From: kemuru <102478601+kemuru@users.noreply.github.com> Date: Wed, 18 Dec 2024 03:39:35 +0100 Subject: [PATCH 8/8] chore: more spacious star, css missing semicolon, more responsiveness check juror button --- web/src/components/Verdict/index.tsx | 4 +++- web/src/pages/Cases/CaseDetails/index.tsx | 2 +- web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/web/src/components/Verdict/index.tsx b/web/src/components/Verdict/index.tsx index 08a1a3712..b3ee84d7e 100644 --- a/web/src/components/Verdict/index.tsx +++ b/web/src/components/Verdict/index.tsx @@ -1,13 +1,15 @@ import React from "react"; import styled from "styled-components"; +import { responsiveSize } from "styles/responsiveSize"; + import DisputeTimeline from "./DisputeTimeline"; import FinalDecision from "./FinalDecision"; const Container = styled.div` display: flex; flex-wrap: wrap; - gap: 24px; + gap: ${responsiveSize(16, 24)}; `; interface IVerdict { diff --git a/web/src/pages/Cases/CaseDetails/index.tsx b/web/src/pages/Cases/CaseDetails/index.tsx index b4485ac69..6ff24cc21 100644 --- a/web/src/pages/Cases/CaseDetails/index.tsx +++ b/web/src/pages/Cases/CaseDetails/index.tsx @@ -45,7 +45,7 @@ const Header = styled.h1` font-size: ${responsiveSize(20, 24)}; align-items: center; flex: 1; - gap: 8px; + gap: ${responsiveSize(8, 12)}; margin: 0; `; diff --git a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx index b3138c3dc..d8963bd65 100644 --- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx +++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx @@ -19,7 +19,7 @@ const Container = styled.div` width: 100%; background-color: ${({ theme }) => theme.whiteBackground}; padding: 8px 8px 12px; - border 1px solid ${({ theme }) => theme.stroke}; + border: 1px solid ${({ theme }) => theme.stroke}; border-top: none; align-items: center; gap: 18px;