Skip to content

Commit b3bd4b7

Browse files
committed
feat: blur in navbar, fix bug in extrastats placement, add dom to tsconfig, overlayportal
1 parent 26273b2 commit b3bd4b7

File tree

7 files changed

+46
-46
lines changed

7 files changed

+46
-46
lines changed

web/src/components/OverlayPortal.tsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom";
3+
import styled from "styled-components";
4+
5+
const PortalContainer = styled.div`
6+
position: fixed;
7+
top: 0;
8+
left: 0;
9+
z-index: 9999;
10+
width: 100%;
11+
height: 100%;
12+
`;
13+
14+
const OverlayPortal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
15+
return ReactDOM.createPortal(<PortalContainer>{children}</PortalContainer>, document.body);
16+
};
17+
18+
export default OverlayPortal;

web/src/layout/Header/DesktopHeader.tsx

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@ import { MiniguideHashesType } from "components/Popup/MiniGuides/MainStructureTe
2323
import Onboarding from "components/Popup/MiniGuides/Onboarding";
2424
import RankedVoting from "components/Popup/MiniGuides/RankedVoting";
2525
import Staking from "components/Popup/MiniGuides/Staking";
26+
import OverlayPortal from "components/OverlayPortal";
27+
import { Overlay } from "components/Overlay";
2628

2729
import Logo from "./Logo";
2830
import DappList from "./navbar/DappList";
@@ -86,16 +88,6 @@ const ConnectWalletContainer = styled.div<{ isConnected: boolean; isDefaultChain
8688
}
8789
`;
8890

89-
const PopupContainer = styled.div`
90-
position: fixed;
91-
top: 0;
92-
left: 0;
93-
width: 100%;
94-
height: 100%;
95-
z-index: 1;
96-
background-color: ${({ theme }) => theme.blackLowOpacity};
97-
`;
98-
9991
const DesktopHeader: React.FC = () => {
10092
const [isDappListOpen, toggleIsDappListOpen] = useToggle(false);
10193
const [isHelpOpen, toggleIsHelpOpen] = useToggle(false);
@@ -178,11 +170,13 @@ const DesktopHeader: React.FC = () => {
178170
</RightSide>
179171
</Container>
180172
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
181-
<PopupContainer>
182-
{isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
183-
{isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
184-
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
185-
</PopupContainer>
173+
<OverlayPortal>
174+
<Overlay>
175+
{isDappListOpen && <DappList {...{ toggleIsDappListOpen, isDappListOpen }} />}
176+
{isHelpOpen && <Help {...{ toggleIsHelpOpen, isHelpOpen }} />}
177+
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen, isSettingsOpen, initialTab }} />}
178+
</Overlay>
179+
</OverlayPortal>
186180
)}
187181
{isJurorLevelsMiniGuideOpen && <JurorLevels toggleMiniGuide={toggleIsJurorLevelsMiniGuideOpen} />}
188182
{isAppealMiniGuideOpen && <Appeal toggleMiniGuide={toggleIsAppealMiniGuideOpen} />}

web/src/layout/Header/index.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,23 @@ import DesktopHeader from "./DesktopHeader";
55
import MobileHeader from "./MobileHeader";
66

77
const Container = styled.div`
8+
display: flex;
9+
flex-wrap: wrap;
810
position: sticky;
11+
padding: 0 24px;
912
z-index: 10;
1013
top: 0;
1114
width: 100%;
12-
background-color: ${({ theme }) => (theme.name === "dark" ? theme.lightBlue : theme.primaryPurple)};
13-
14-
display: flex;
15-
flex-wrap: wrap;
16-
`;
17-
18-
const HeaderContainer = styled.div`
19-
width: 100%;
20-
padding: 0 24px;
15+
background-color: ${({ theme }) => (theme.name === "dark" ? `${theme.lightBlue}A6` : theme.primaryPurple)};
16+
backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")};
17+
-webkit-backdrop-filter: ${({ theme }) => (theme.name === "dark" ? "blur(12px)" : "none")}; // Safari support
2118
`;
2219

2320
const Header: React.FC = () => {
2421
return (
2522
<Container>
26-
<HeaderContainer>
27-
<DesktopHeader />
28-
<MobileHeader />
29-
</HeaderContainer>
23+
<DesktopHeader />
24+
<MobileHeader />
3025
</Container>
3126
);
3227
};

web/src/layout/Header/navbar/index.tsx

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
1010

1111
import ConnectWallet from "components/ConnectWallet";
1212
import LightButton from "components/LightButton";
13+
import OverlayPortal from "components/OverlayPortal";
1314
import { Overlay } from "components/Overlay";
1415

1516
import { useOpenContext } from "../MobileHeader";
@@ -69,16 +70,6 @@ const DisconnectWalletButtonContainer = styled.div`
6970
align-items: center;
7071
`;
7172

72-
const PopupContainer = styled.div`
73-
position: fixed;
74-
top: 0;
75-
left: 0;
76-
width: 100%;
77-
height: 100%;
78-
z-index: 1;
79-
background-color: ${({ theme }) => theme.blackLowOpacity};
80-
`;
81-
8273
export interface ISettings {
8374
toggleIsSettingsOpen: () => void;
8475
initialTab?: number;
@@ -131,11 +122,13 @@ const NavBar: React.FC = () => {
131122
</StyledOverlay>
132123
</Wrapper>
133124
{(isDappListOpen || isHelpOpen || isSettingsOpen) && (
134-
<PopupContainer>
135-
{isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
136-
{isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
137-
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}
138-
</PopupContainer>
125+
<OverlayPortal>
126+
<Overlay>
127+
{isDappListOpen && <DappList {...{ toggleIsDappListOpen }} />}
128+
{isHelpOpen && <Help {...{ toggleIsHelpOpen }} />}
129+
{isSettingsOpen && <Settings {...{ toggleIsSettingsOpen }} />}
130+
</Overlay>
131+
</OverlayPortal>
139132
)}
140133
</>
141134
);

web/src/pages/Home/CourtOverview/ExtraStats.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ const StyledCard = styled.div`
2121
`;
2222

2323
const StyledLabel = styled.label`
24-
margin-top: 24px;
2524
font-size: 14px;
2625
font-weight: 600;
2726
`;

web/src/styles/global-style.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const GlobalStyle = createGlobalStyle`
1717
body {
1818
font-family: "Open Sans", sans-serif;
1919
margin: 0px;
20-
background-color: ${({ theme }) => theme.primaryPurple};
20+
background-color: ${({ theme }) => theme.lightBlue};
2121
}
2222
2323
html {

web/tsconfig.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,8 @@
6767
"resolveJsonModule": true,
6868
"target": "ES2020",
6969
"lib": [
70-
"ESNext.Array"
70+
"ESNext.Array",
71+
"dom"
7172
],
7273
"types": [
7374
"vite/client",

0 commit comments

Comments
 (0)