feat: make bag more distinctive from the nav bar (#5426)

* feat: initial commit

* chore: tweaks

* chore: remove modalOverTooltip

* chore: tweaks

* not needed

* one more tweak

* chore: fix issue on mobile

* chore: simplify

* chore: fix lint issues after rebase

src/nft/components/bag/Bag.css.ts

 import { style } from '@vanilla-extract/css'
-import { breakpoints, sprinkles } from 'nft/css/sprinkles.css'
-
-export const bagContainer = style([
-  sprinkles({
-    position: 'fixed',
-    top: { sm: '0', md: '72' },
-    width: 'full',
-    height: 'full',
-    right: '0',
-    background: 'backgroundSurface',
-    borderLeftStyle: 'solid',
-    borderColor: 'backgroundOutline',
-    borderWidth: '1px',
-    color: 'textPrimary',
-  }),
-  {
-    '@media': {
-      [`(min-width: ${breakpoints.md}px)`]: {
-        width: '360px',
-        height: 'calc(100vh - 72px)',
-      },
-    },
-  },
-])
+import { sprinkles } from 'nft/css/sprinkles.css'
 
 export const assetsContainer = style([
   sprinkles({

src/nft/components/bag/Bag.tsx

@@ -30,6 +30,7 @@ import { combineBuyItemsWithTxRoute } from 'nft/utils/txRoute/combineItemsWithTx
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useQuery, useQueryClient } from 'react-query'
 import styled from 'styled-components/macro'
+import { Z_INDEX } from 'theme/zIndex'
 import shallow from 'zustand/shallow'
 
 import * as styles from './Bag.css'
@@ -46,12 +47,33 @@ interface SeparatorProps {
 const DetailsPageBackground = styled.div`
   position: fixed;
   background: rgba(0, 0, 0, 0.7);
-  backdrop-filter: blur(12px);
   top: 72px;
   width: 100%;
   height: 100%;
 `
 
+const BagContainer = styled.div`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  right: 0px;
+  background: ${({ theme }) => theme.backgroundSurface};
+  border-left-style: solid;
+  border-color: ${({ theme }) => theme.backgroundOutline};
+  border-width: 1px;
+  color: ${({ theme }) => theme.textPrimary};
+  z-index: ${Z_INDEX.fixed};
+
+  @media screen and (min-width: ${({ theme }) => theme.breakpoint.md}px) {
+    width: 360px;
+    border-top-style: solid;
+    top: 72px;
+  }
+`
+
 const ScrollingIndicator = ({ top, show }: SeparatorProps) => (
   <Box
     marginX="16"
@@ -282,7 +304,7 @@ const Bag = () => {
 
   return (
     <Portal>
-      <Column zIndex={isMobile || isOpen ? 'modalOverTooltip' : '3'} className={styles.bagContainer}>
+      <BagContainer>
         {!(isProfilePage && profilePageState === ProfilePageStateType.LISTING) ? (
           <>
             <BagHeader
@@ -326,7 +348,7 @@ const Bag = () => {
         ) : (
           <ListingModal />
         )}
-      </Column>
+      </BagContainer>
       {isDetailsPage ? (
         <DetailsPageBackground onClick={toggleBag} />
       ) : (

src/pages/App.tsx

@@ -8,6 +8,7 @@ import ApeModeQueryParamReader from 'hooks/useApeModeQueryParamReader'
 import { CollectionPageSkeleton } from 'nft/components/collection/CollectionPageSkeleton'
 import { AssetDetailsLoading } from 'nft/components/details/AssetDetailsLoading'
 import { ProfilePageLoadingSkeleton } from 'nft/components/profile/view/ProfilePageLoadingSkeleton'
+import { useBag } from 'nft/hooks'
 import { lazy, Suspense, useEffect, useState } from 'react'
 import { Navigate, Route, Routes, useLocation } from 'react-router-dom'
 import { useIsDarkMode } from 'state/user/hooks'
@@ -78,10 +79,10 @@ const BodyWrapper = styled.div`
   `};
 `
 
-const HeaderWrapper = styled.div<{ scrolledState?: boolean }>`
+const HeaderWrapper = styled.div<{ transparent?: boolean }>`
   ${flexRowNoWrap};
-  background-color: ${({ theme, scrolledState }) => scrolledState && theme.backgroundSurface};
-  border-bottom: ${({ theme, scrolledState }) => scrolledState && `1px solid ${theme.backgroundOutline}`};
+  background-color: ${({ theme, transparent }) => !transparent && theme.backgroundSurface};
+  border-bottom: ${({ theme, transparent }) => !transparent && `1px solid ${theme.backgroundOutline}`};
   width: 100%;
   justify-content: space-between;
   position: fixed;
@@ -142,14 +143,6 @@ export default function App() {
 
   useAnalyticsReporter()
 
-  const scrollListener = (e: Event) => {
-    if (window.scrollY > 0) {
-      setScrolledState(true)
-    } else {
-      setScrolledState(false)
-    }
-  }
-
   useEffect(() => {
     window.scrollTo(0, 0)
     setScrolledState(false)
@@ -176,16 +169,24 @@ export default function App() {
   }, [isExpertMode])
 
   useEffect(() => {
+    const scrollListener = (e: Event) => {
+      setScrolledState(window.scrollY > 0)
+    }
     window.addEventListener('scroll', scrollListener)
+    return () => window.removeEventListener('scroll', scrollListener)
   }, [])
 
+  const isBagExpanded = useBag((state) => state.bagExpanded)
+
+  const isHeaderTransparent = !scrolledState && !isBagExpanded
+
   return (
     <ErrorBoundary>
       <DarkModeQueryParamReader />
       <ApeModeQueryParamReader />
       <AppWrapper>
         <Trace page={currentPage}>
-          <HeaderWrapper scrolledState={scrolledState}>
+          <HeaderWrapper transparent={isHeaderTransparent}>
             <NavBar />
           </HeaderWrapper>
           <BodyWrapper>