fix: new navbar color with blur in dark mode, mobile responsiveness and other adjustments

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;
 `;

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 {

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.h3`
+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`
@@ -62,11 +72,12 @@ interface IDisputeContext {
 
 export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRpcError = false }) => {
   const errMsg = isRpcError ? RPC_ERROR : INVALID_DISPUTE_DATA_ERROR;
+
   return (
     <>
       <StyledH1>{isUndefined(disputeDetails) ? <StyledSkeleton /> : (disputeDetails?.title ?? errMsg)}</StyledH1>
-      {!isUndefined(disputeDetails) ? (
-        <>
+      {disputeDetails?.question?.trim() || disputeDetails?.description?.trim() ? (
+        <div>
           {disputeDetails?.question?.trim() ? (
             <ReactMarkdownWrapper>
               <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
@@ -77,7 +88,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
               <ReactMarkdown>{disputeDetails.description}</ReactMarkdown>
             </ReactMarkdownWrapper>
           ) : null}
-        </>
+        </div>
       ) : null}
 
       {isUndefined(disputeDetails?.frontendUrl) ? null : (
@@ -89,12 +100,11 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
         {isUndefined(disputeDetails) ? null : <AnswersHeader>Voting Options</AnswersHeader>}
         <AnswersContainer>
           {disputeDetails?.answers?.map((answer: IAnswer, i: number) => (
-            <Answer key={answer.title}>
-              <small>
-                <label>{i + 1}.</label> {answer.title}
-                {answer.description.trim() ? ` - ${answer.description}` : null}
-              </small>
-            </Answer>
+            <AnswerTitleAndDescription key={answer.title}>
+              <label>{i + 1}. </label>
+              <AnswerTitle>{answer.title}</AnswerTitle>
+              <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
+            </AnswerTitleAndDescription>
           ))}
         </AnswersContainer>
       </VotingOptions>

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};
 `;
 

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;

web/src/components/DisputeView/PeriodBanner.tsx

@@ -20,7 +20,7 @@ const Container = styled.div<IContainer>`
   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 `

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;
 
   > * {

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`

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`

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(<PortalContainer>{children}</PortalContainer>, document.body);
+};
+
+export default OverlayPortal;

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<IAnswer> = ({ answer, currentRuling }) => {
   return (
     <>
       {answer ? (
-        <Container>
-          <small>
-            {answer.title}
-            {answer.description.trim() ? " -" : null}
-          </small>
-          <small>{answer.description.trim()}</small>
-        </Container>
+        <AnswerTitleAndDescription>
+          <AnswerTitle>{answer.title}</AnswerTitle>
+          <AnswerDescription>{answer.description.trim() ? ` - ${answer.description}` : null}</AnswerDescription>
+        </AnswerTitleAndDescription>
       ) : (
         <Container>
           {currentRuling !== 0 ? <small>Answer 0x{currentRuling}</small> : <small>Refuse to Arbitrate</small>}

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};
 `;
 

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 {

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;

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 = () => {
         </RightSide>
       </Container>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
-        <PopupContainer>
-          {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
-          {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
-        </PopupContainer>
+        <OverlayPortal>
+          <Overlay>
+            {isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
+            {isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
+            {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
+          </Overlay>
+        </OverlayPortal>
       )}
       {isJurorLevelsMiniGuideOpen && <JurorLevels toggleMiniGuide={toggleIsJurorLevelsMiniGuideOpen} />}
       {isAppealMiniGuideOpen && <Appeal toggleMiniGuide={toggleIsAppealMiniGuideOpen} />}

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 (
     <Container>
-      <HeaderContainer>
-        <DesktopHeader />
-        <MobileHeader />
-      </HeaderContainer>
+      <DesktopHeader />
+      <MobileHeader />
     </Container>
   );
 };

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 = () => {
         </StyledOverlay>
       </Wrapper>
       {(isDappListOpen || isHelpOpen || isSettingsOpen) && (
-        <PopupContainer>
-          {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
-          {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
-          {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}
-        </PopupContainer>
+        <OverlayPortal>
+          <Overlay>
+            {isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
+            {isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
+            {isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}
+          </Overlay>
+        </OverlayPortal>
       )}
     </>
   );

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)`

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;

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 }) => {

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`

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 {

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;
     }

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%;

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)};
   }
 `;
 

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)`

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)};
 `;
 

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;
 `;
 

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;
 `;

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)`

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;

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

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;

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;
 `;

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)`

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 = () => {

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)`

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)};

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;

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(

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;
 `;

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;
 `;
 

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 (
     <StyledCard>
       {stats.map(({ title, coinId, getText, getSubtext, color, icon }, i) => {
@@ -99,7 +102,7 @@ const Stats = () => {
             {...{ title, color, icon }}
             text={data ? getText(data["counters"]) : <StyledSkeleton />}
             subtext={calculateSubtextRender(data ? data["counters"] : undefined, getSubtext, coinPrice)}
-            isSmallDisplay={false}
+            isSmallDisplay={!isDesktop}
           />
         );
       })}

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;

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;

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`

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;
 `;

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 {

web/tsconfig.json

@@ -67,7 +67,8 @@
     "resolveJsonModule": true,
     "target": "ES2020",
     "lib": [
-      "ESNext.Array"
+      "ESNext.Array",
+      "dom"
     ],
     "types": [
       "vite/client",