feat: blur in navbar, fix bug in extrastats placement, add dom to tsconfig, overlayportal

Author: kemuru

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