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

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;
 `;
 
@@ -62,11 +64,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() ? (
+        <QuestionAndDescriptionWrapper>
           {disputeDetails?.question?.trim() ? (
             <ReactMarkdownWrapper>
               <ReactMarkdown>{disputeDetails.question}</ReactMarkdown>
@@ -77,7 +80,7 @@ export const DisputeContext: React.FC<IDisputeContext> = ({ disputeDetails, isRp
               <ReactMarkdown>{disputeDetails.description}</ReactMarkdown>
             </ReactMarkdownWrapper>
           ) : null}
-        </>
+        </QuestionAndDescriptionWrapper>
       ) : null}
 
       {isUndefined(disputeDetails?.frontendUrl) ? null : (

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`

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

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

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/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",