Merge pull request #1800 from kleros/feat/new-navbar-color-and-blur-a…

…nd-other-adjustments fix: new navbar color with blur in dark mode, mobile responsiveness and other adjustments
kleros · Dec 18, 2024 · 7a27eed · 7a27eed
2 parents 20ac82c + 9eb9a66
commit 7a27eed
Show file tree

Hide file tree

Showing 51 changed files with 212 additions and 182 deletions.
diff --git 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/assets/svgs/hero/hero-darkmode-desktop.svg b/web/src/assets/svgs/hero/hero-darkmode-desktop.svg
diff --git a/web/src/assets/svgs/hero/hero-darkmode-mobile.svg b/web/src/assets/svgs/hero/hero-darkmode-mobile.svg
diff --git 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
@@ -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>

diff --git 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
@@ -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
@@ -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 `

diff --git 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
@@ -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
@@ -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
@@ -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;
diff --git 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<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>}

diff --git 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
@@ -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
@@ -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;