= ({ 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() ? (
{disputeDetails.question}
@@ -77,7 +88,7 @@ export const DisputeContext: React.FC = ({ disputeDetails, isRp
{disputeDetails.description}
) : null}
-
+
) : null}
{isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -89,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/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/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 c90ab4f5b..51717d4d1 100644
--- a/web/src/components/FavoriteCases.tsx
+++ b/web/src/components/FavoriteCases.tsx
@@ -14,11 +14,12 @@ 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`
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/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/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/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/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/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/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 ac7a0e3de..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.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/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..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";
@@ -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 64cc12424..6ff24cc21 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`
@@ -41,9 +42,10 @@ const HeaderContainer = styled.div`
const Header = styled.h1`
display: flex;
+ font-size: ${responsiveSize(20, 24)};
align-items: center;
flex: 1;
- gap: 8px;
+ gap: ${responsiveSize(8, 12)};
margin: 0;
`;
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/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/StakePanel/Simulator/index.tsx b/web/src/pages/Courts/CourtDetails/StakePanel/Simulator/index.tsx
index 8ebc79bcd..e350dd9d4 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/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/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..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;
`
)}
`;
@@ -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 e8a890e66..51fc446ab 100644
--- a/web/src/pages/Dashboard/index.tsx
+++ b/web/src/pages/Dashboard/index.tsx
@@ -26,13 +26,13 @@ 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;
`;
const StyledCasesDisplay = styled(CasesDisplay)`
- margin-top: ${responsiveSize(32, 48)};
+ margin-top: ${responsiveSize(24, 48)};
.title {
margin-bottom: ${responsiveSize(12, 24)};
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..d4c003c51 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)};
}
`;
@@ -25,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/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/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/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..d8963bd65 100644
--- a/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
+++ b/web/src/pages/Home/TopJurors/JurorCard/MobileCard.tsx
@@ -18,8 +18,8 @@ const Container = styled.div`
flex-wrap: wrap;
width: 100%;
background-color: ${({ theme }) => theme.whiteBackground};
- padding: 16px 24px 24px 24px;
- border 1px solid ${({ theme }) => theme.stroke};
+ padding: 8px 8px 12px;
+ border: 1px solid ${({ theme }) => theme.stroke};
border-top: none;
align-items: center;
gap: 18px;
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;
`;
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",
diff --git a/yarn.lock b/yarn.lock
index 0f5f8b7f0..de4ae4dd2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5516,7 +5516,7 @@ __metadata:
"@graphql-codegen/cli": "npm:^5.0.3"
"@graphql-codegen/client-preset": "npm:^4.5.1"
"@kleros/kleros-sdk": "workspace:^"
- "@kleros/ui-components-library": "npm:^2.15.0"
+ "@kleros/ui-components-library": "npm:^2.19.0"
"@svgr/webpack": "npm:^8.1.0"
"@tanstack/react-query": "npm:^5.61.0"
"@types/node": "npm:^20.17.6"
@@ -5572,7 +5572,7 @@ __metadata:
"@kleros/kleros-v2-eslint-config": "workspace:^"
"@kleros/kleros-v2-prettier-config": "workspace:^"
"@kleros/kleros-v2-tsconfig": "workspace:^"
- "@kleros/ui-components-library": "npm:^2.18.0"
+ "@kleros/ui-components-library": "npm:^2.19.0"
"@lifi/wallet-management": "npm:^3.4.6"
"@lifi/widget": "npm:^3.12.3"
"@sentry/react": "npm:^7.120.0"
@@ -5634,32 +5634,9 @@ __metadata:
languageName: unknown
linkType: soft
-"@kleros/ui-components-library@npm:^2.15.0":
- version: 2.15.0
- resolution: "@kleros/ui-components-library@npm:2.15.0"
- dependencies:
- "@datepicker-react/hooks": "npm:^2.8.4"
- "@swc/helpers": "npm:^0.3.2"
- rc-slider: "npm:^9.7.5"
- react: "npm:^18.0.0"
- react-dom: "npm:^18.0.0"
- react-is: "npm:^18.0.0"
- simplebar: "npm:^5.3.6"
- simplebar-react: "npm:^2.3.6"
- smooth-scroll-into-view-if-needed: "npm:^1.1.33"
- usehooks-ts: "npm:^2.9.1"
- peerDependencies:
- react: ^18.0.0
- react-dom: ^18.0.0
- react-is: ^18.0.0
- styled-components: ^5.3.3
- checksum: 10/7c97e8fe45b1cd002a0aaf7fe4670b8c668a3abbbab82fac9261ef9a8382ccaf7d4a974ee54b8f299f1e8e7b68e58dab1f3f31d7c8b3b60c58a5af8abdf4a783
- languageName: node
- linkType: hard
-
-"@kleros/ui-components-library@npm:^2.18.0":
- version: 2.18.0
- resolution: "@kleros/ui-components-library@npm:2.18.0"
+"@kleros/ui-components-library@npm:^2.19.0":
+ version: 2.19.0
+ resolution: "@kleros/ui-components-library@npm:2.19.0"
dependencies:
"@datepicker-react/hooks": "npm:^2.8.4"
"@swc/helpers": "npm:^0.3.2"
@@ -5676,7 +5653,7 @@ __metadata:
react-dom: ^18.0.0
react-is: ^18.0.0
styled-components: ^5.3.3
- checksum: 10/ef51cd75eaf037c2b2c69a0236a3b2891c657c339c5b357e5aa8ba84d9e1626bbbd76bf954d578f1caad3bbe2bc7d62097eace475ce62a7d8bfaafef5239d0ad
+ checksum: 10/b4c6b4e35812582af48246546ce634e7c6f2bb62281f3deff100897f905c53b54f85e35f2f04ae68cee89d83412750b2005a0791195f33610bffbd78e77846f4
languageName: node
linkType: hard