Skip to content
This repository was archived by the owner on Nov 10, 2023. It is now read-only.

Commit f870a52

Browse files
authored
Fix: close banner only for the session; shift sidebar drawer (#4093)
* Revert "style: push Sidebar down the banner height (#4091)" This reverts commit 35459eb. * Fix: close banner only for the session; shift sidebar drawer
1 parent 35459eb commit f870a52

File tree

5 files changed

+31
-17
lines changed

5 files changed

+31
-17
lines changed

src/components/PsaBanner/index.tsx

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ReactElement, useEffect, useRef } from 'react'
1+
import { ReactElement, useEffect } from 'react'
22
import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk'
33
import { useSelector } from 'react-redux'
44
import Close from '@material-ui/icons/Close'
@@ -79,11 +79,10 @@ const BANNERS = {
7979
const WARNING_BANNER = 'WARNING_BANNER'
8080

8181
const PsaBanner = (): ReactElement => {
82-
const bannerRef = useRef<HTMLDivElement>(null)
8382
const chainId = useSelector(currentChainId)
8483
const banner = BANNERS[chainId]
8584
const isEnabled = hasFeature(WARNING_BANNER as FEATURES)
86-
const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`)
85+
const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`, true)
8786

8887
const showBanner = isEnabled && banner && !closed
8988

@@ -92,13 +91,12 @@ const PsaBanner = (): ReactElement => {
9291
}
9392

9493
useEffect(() => {
95-
document.body.style.paddingTop = bannerRef.current ? bannerRef.current.clientHeight + 'px' : ''
96-
}, [bannerRef])
94+
document.body.setAttribute('data-with-banner', showBanner.toString())
95+
}, [showBanner])
9796

9897
return (
9998
showBanner && (
10099
<div
101-
ref={bannerRef}
102100
style={{
103101
position: 'fixed',
104102
zIndex: 10000,
@@ -109,14 +107,21 @@ const PsaBanner = (): ReactElement => {
109107
color: '#fff',
110108
padding: '5px 20px',
111109
fontSize: '16px',
112-
height: '80px',
113110
}}
114111
>
115-
<div style={{ position: 'relative' }}>
112+
<div
113+
style={{
114+
position: 'relative',
115+
display: 'flex',
116+
flexDirection: 'column',
117+
alignItems: 'center',
118+
height: '70px',
119+
}}
120+
>
116121
<div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center', padding: '10px' }}>{banner}</div>
117122

118123
<Close
119-
style={{ display: 'none', position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
124+
style={{ position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
120125
onClick={onClose}
121126
/>
122127
</div>

src/components/Root/index.module.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,3 +58,8 @@ html[class="darkMode"] [class*="networkLabel"] {
5858
html[class="darkMode"] [class*="networkLabel"] {
5959
outline: 1px solid #333;
6060
}
61+
62+
body[data-with-banner="true"],
63+
body[data-with-banner="true"] [class*="safe-list-sidebar"] {
64+
padding-top: 80px;
65+
}

src/components/SafeListSidebar/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const SafeListSidebar = ({ children }: Props): ReactElement => {
3636
return (
3737
<SafeListSidebarContext.Provider value={{ isOpen, toggleSidebar }}>
3838
<Drawer
39-
classes={{ paper: classes.sidebarPaper }}
39+
classes={{ paper: `${classes.sidebarPaper} safe-list-sidebar` }}
4040
className={classes.sidebar}
4141
ModalProps={{ onClose: toggleSidebar }}
4242
onKeyDown={handleEsc}

src/components/SafeListSidebar/style.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ const sidebarMarginLeft = '0px'
77
const sidebarMarginTop = '0px'
88
const sidebarMarginBottom = '0px'
99
const sidebarBorderRadius = '0px'
10-
const bannerHeight = '90px'
1110

1211
const useSidebarStyles = makeStyles({
1312
sidebar: {
@@ -21,7 +20,7 @@ const useSidebarStyles = makeStyles({
2120
borderRadius: sidebarBorderRadius,
2221
marginLeft: sidebarMarginLeft,
2322
maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
24-
top: `calc(${headerHeight} + ${bannerHeight} + ${sidebarMarginTop})`,
23+
top: `calc(${headerHeight} + ${sidebarMarginTop})`,
2524
width: sidebarWidth,
2625
maxWidth: `calc(100% - ${sidebarMarginLeft} - ${sidebarMarginLeft})`,
2726

src/utils/storage/useCachedState.ts

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
11
import { useState, useEffect } from 'react'
22
import local from './local'
3+
import session from './session'
34

4-
const useCachedState = <T>(key: string): [T | undefined, React.Dispatch<React.SetStateAction<T>>] => {
5+
const useCachedState = <T>(
6+
key: string,
7+
isSession = false,
8+
): [T | undefined, React.Dispatch<React.SetStateAction<T>>] => {
59
const [cache, setCache] = useState<T>()
10+
const storage = isSession ? session : local
611

712
useEffect(() => {
8-
const saved = local.getItem<T>(key)
13+
const saved = storage.getItem<T>(key)
914
setCache(saved)
10-
}, [key, setCache])
15+
}, [key, storage, setCache])
1116

1217
useEffect(() => {
13-
local.setItem<T | undefined>(key, cache)
14-
}, [key, cache])
18+
storage.setItem<T | undefined>(key, cache)
19+
}, [key, storage, cache])
1520

1621
return [cache, setCache]
1722
}

0 commit comments

Comments
 (0)