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

Author: katspaugh

src/components/PsaBanner/index.tsx

@@ -1,4 +1,4 @@
-import { ReactElement, useEffect, useRef } from 'react'
+import { ReactElement, useEffect } from 'react'
 import { FEATURES } from '@gnosis.pm/safe-react-gateway-sdk'
 import { useSelector } from 'react-redux'
 import Close from '@material-ui/icons/Close'
@@ -79,11 +79,10 @@ const BANNERS = {
 const WARNING_BANNER = 'WARNING_BANNER'
 
 const PsaBanner = (): ReactElement => {
-  const bannerRef = useRef<HTMLDivElement>(null)
   const chainId = useSelector(currentChainId)
   const banner = BANNERS[chainId]
   const isEnabled = hasFeature(WARNING_BANNER as FEATURES)
-  const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`)
+  const [closed = false, setClosed] = useCachedState<boolean>(`${WARNING_BANNER}_${chainId}_closed`, true)
 
   const showBanner = isEnabled && banner && !closed
 
@@ -92,13 +91,12 @@ const PsaBanner = (): ReactElement => {
   }
 
   useEffect(() => {
-    document.body.style.paddingTop = bannerRef.current ? bannerRef.current.clientHeight + 'px' : ''
-  }, [bannerRef])
+    document.body.setAttribute('data-with-banner', showBanner.toString())
+  }, [showBanner])
 
   return (
     showBanner && (
       <div
-        ref={bannerRef}
         style={{
           position: 'fixed',
           zIndex: 10000,
@@ -109,14 +107,21 @@ const PsaBanner = (): ReactElement => {
           color: '#fff',
           padding: '5px 20px',
           fontSize: '16px',
-          height: '80px',
         }}
       >
-        <div style={{ position: 'relative' }}>
+        <div
+          style={{
+            position: 'relative',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            height: '70px',
+          }}
+        >
           <div style={{ maxWidth: '960px', margin: '0 auto', textAlign: 'center', padding: '10px' }}>{banner}</div>
 
           <Close
-            style={{ display: 'none', position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
+            style={{ position: 'absolute', right: '10px', top: '10px', cursor: 'pointer', zIndex: 2 }}
             onClick={onClose}
           />
         </div>

src/components/Root/index.module.scss

@@ -58,3 +58,8 @@ html[class="darkMode"] [class*="networkLabel"] {
 html[class="darkMode"] [class*="networkLabel"] {
   outline: 1px solid #333;
 }
+
+body[data-with-banner="true"],
+body[data-with-banner="true"] [class*="safe-list-sidebar"] {
+  padding-top: 80px;
+}

src/components/SafeListSidebar/index.tsx

@@ -36,7 +36,7 @@ export const SafeListSidebar = ({ children }: Props): ReactElement => {
   return (
     <SafeListSidebarContext.Provider value={{ isOpen, toggleSidebar }}>
       <Drawer
-        classes={{ paper: classes.sidebarPaper }}
+        classes={{ paper: `${classes.sidebarPaper} safe-list-sidebar` }}
         className={classes.sidebar}
         ModalProps={{ onClose: toggleSidebar }}
         onKeyDown={handleEsc}

src/components/SafeListSidebar/style.ts

@@ -7,7 +7,6 @@ const sidebarMarginLeft = '0px'
 const sidebarMarginTop = '0px'
 const sidebarMarginBottom = '0px'
 const sidebarBorderRadius = '0px'
-const bannerHeight = '90px'
 
 const useSidebarStyles = makeStyles({
   sidebar: {
@@ -21,7 +20,7 @@ const useSidebarStyles = makeStyles({
     borderRadius: sidebarBorderRadius,
     marginLeft: sidebarMarginLeft,
     maxHeight: `calc(100vh - ${headerHeight} - ${sidebarMarginTop} - ${sidebarMarginBottom})`,
-    top: `calc(${headerHeight} + ${bannerHeight} + ${sidebarMarginTop})`,
+    top: `calc(${headerHeight} + ${sidebarMarginTop})`,
     width: sidebarWidth,
     maxWidth: `calc(100% - ${sidebarMarginLeft} - ${sidebarMarginLeft})`,
 

src/utils/storage/useCachedState.ts

@@ -1,17 +1,22 @@
 import { useState, useEffect } from 'react'
 import local from './local'
+import session from './session'
 
-const useCachedState = <T>(key: string): [T | undefined, React.Dispatch<React.SetStateAction<T>>] => {
+const useCachedState = <T>(
+  key: string,
+  isSession = false,
+): [T | undefined, React.Dispatch<React.SetStateAction<T>>] => {
   const [cache, setCache] = useState<T>()
+  const storage = isSession ? session : local
 
   useEffect(() => {
-    const saved = local.getItem<T>(key)
+    const saved = storage.getItem<T>(key)
     setCache(saved)
-  }, [key, setCache])
+  }, [key, storage, setCache])
 
   useEffect(() => {
-    local.setItem<T | undefined>(key, cache)
-  }, [key, cache])
+    storage.setItem<T | undefined>(key, cache)
+  }, [key, storage, cache])
 
   return [cache, setCache]
 }