feat: nav update to new responsive designs (#4542)

* uppdated mobile nav

* adjust searchbar for new styles
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.tsx

@@ -108,14 +108,14 @@ export const ChainSwitcher = ({ leftAlign }: ChainSwitcherProps) => {
         {!isSupported ? (
           <>
             <TokenWarningRedIcon fill={themeVars.colors.darkGray} width={24} height={24} />
-            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
               Unsupported
             </Box>
           </>
         ) : (
           <>
             <img src={info.logoUrl} alt={info.label} className={styles.Image} />
-            <Box as="span" className={subhead} display={{ sm: 'none', xl: 'flex' }} style={{ lineHeight: '20px' }}>
+            <Box as="span" className={subhead} display={{ sm: 'none', xxl: 'flex' }} style={{ lineHeight: '20px' }}>
               {info.label}
             </Box>
           </>

src/components/NavBar/MenuDropdown.tsx

@@ -130,7 +130,7 @@ export const MenuDropdown = () => {
         </NavIcon>
 
         {isOpen && (
-          <NavDropdown top={{ sm: 'unset', xxl: '56' }} bottom={{ sm: '56', xxl: 'unset' }} right="0">
+          <NavDropdown top={{ sm: 'unset', lg: '56' }} bottom={{ sm: '56', lg: 'unset' }} right="0">
             <Column gap="16">
               <Column paddingX="8" gap="4">
                 {nftFlag === NftVariant.Enabled && (

src/components/NavBar/NavIcon.css.ts

@@ -19,6 +19,6 @@ export const navIcon = style([
     ':hover': {
       background: vars.color.lightGrayOverlay,
     },
-    zIndex: 2,
+    zIndex: 1,
   },
 ])

src/components/NavBar/Navbar.css.ts

@@ -61,7 +61,7 @@ export const middleContainer = style([
     flex: '1',
     flexShrink: '1',
     justifyContent: 'center',
-    display: { sm: 'none', lg: 'flex' },
+    display: { sm: 'none', xl: 'flex' },
   }),
 ])
 
@@ -109,7 +109,7 @@ export const activeMenuItem = style([
 export const mobileBottomBar = style([
   sprinkles({
     position: 'fixed',
-    display: { sm: 'flex', xxl: 'none' },
+    display: { sm: 'flex', lg: 'none' },
     bottom: '0',
     right: '0',
     left: '0',

src/components/NavBar/Navbar.tsx

@@ -72,10 +72,10 @@ const Navbar = () => {
             <Box as="a" href="#/swap" className={styles.logoContainer}>
               <UniIcon width="48" height="48" className={styles.logo} />
             </Box>
-            <Box display={{ sm: 'flex', xxl: 'none' }}>
+            <Box display={{ sm: 'flex', lg: 'none' }}>
               <ChainSwitcher leftAlign={true} />
             </Box>
-            <Row gap="8" display={{ sm: 'none', xxl: 'flex' }}>
+            <Row gap="8" display={{ sm: 'none', lg: 'flex' }}>
               <PageTabs />
             </Row>
           </Box>
@@ -84,13 +84,13 @@ const Navbar = () => {
           </Box>
           <Box className={styles.rightSideContainer}>
             <Row gap="12">
-              <Box display={{ sm: 'flex', lg: 'none' }}>
+              <Box display={{ sm: 'flex', xl: 'none' }}>
                 <SearchBar />
               </Box>
-              <Box display={{ sm: 'none', xxl: 'flex' }}>
+              <Box display={{ sm: 'none', lg: 'flex' }}>
                 <MenuDropdown />
               </Box>
-              <Box display={{ sm: 'none', xxl: 'flex' }}>
+              <Box display={{ sm: 'none', lg: 'flex' }}>
                 <ChainSwitcher />
               </Box>
 

src/components/NavBar/SearchBar.css.ts

@@ -3,7 +3,7 @@ import { buttonTextSmall, subhead, subheadSmall } from 'nft/css/common.css'
 
 import { breakpoints, sprinkles, vars } from '../../nft/css/sprinkles.css'
 
-const DESKTOP_NAVBAR_WIDTH = '360px'
+const DESKTOP_NAVBAR_WIDTH = 360
 
 const baseSearchStyle = style([
   sprinkles({
@@ -15,8 +15,26 @@ const baseSearchStyle = style([
   }),
   {
     '@media': {
-      [`screen and (min-width: ${breakpoints.md}px)`]: {
-        width: DESKTOP_NAVBAR_WIDTH,
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
+        width: `${DESKTOP_NAVBAR_WIDTH}px`,
+      },
+    },
+  },
+])
+
+export const searchBarContainer = style([
+  sprinkles({
+    right: '0',
+    top: '0',
+    zIndex: '3',
+  }),
+  {
+    '@media': {
+      [`screen and (min-width: ${breakpoints.sm}px)`]: {
+        top: '-24px',
+      },
+      [`screen and (min-width: ${breakpoints.lg}px)`]: {
+        right: `-${DESKTOP_NAVBAR_WIDTH / 2}px`,
       },
     },
   },
@@ -48,9 +66,6 @@ export const searchBarInput = style([
 export const searchBarDropdown = style([
   baseSearchStyle,
   sprinkles({
-    position: 'absolute',
-    left: '0',
-    top: '48',
     borderBottomLeftRadius: '12',
     borderBottomRightRadius: '12',
     background: 'lightGray',

src/components/NavBar/SearchBar.tsx

@@ -323,30 +323,29 @@ export const SearchBar = () => {
   const placeholderText = phase1Flag === NftVariant.Enabled ? t`Search tokens and NFT collections` : t`Search tokens`
 
   return (
-    <>
+    <Box position="relative">
       <Box
-        position={{ sm: isOpen ? 'absolute' : 'relative', lg: 'relative' }}
-        top={{ sm: '0', lg: 'unset' }}
-        left={{ sm: '0', lg: 'unset' }}
-        width={{ sm: isOpen ? 'viewWidth' : 'auto', lg: 'auto' }}
+        position={isOpen ? { sm: 'fixed', md: 'absolute' } : 'static'}
+        width={{ sm: isOpen ? 'viewWidth' : 'auto', md: 'auto' }}
         ref={searchRef}
-        style={{ zIndex: '1000' }}
+        className={styles.searchBarContainer}
       >
         <Row
           className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
           borderRadius={isOpen ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
           borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
-          display={{ sm: isOpen ? 'flex' : 'none', lg: 'flex' }}
+          borderBottomWidth={isOpen ? '0px' : '1px'}
+          display={{ sm: isOpen ? 'flex' : 'none', xl: 'flex' }}
           justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
           onFocus={() => !isOpen && toggleOpen()}
           onClick={() => !isOpen && toggleOpen()}
           gap="12"
         >
-          <Box display={{ sm: 'none', lg: 'flex' }}>
+          <Box display={{ sm: 'none', md: 'flex' }}>
             <MagnifyingGlassIcon />
           </Box>
-          <Box display={{ sm: 'flex', lg: 'none' }} color="placeholder" onClick={toggleOpen}>
+          <Box display={{ sm: 'flex', md: 'none' }} color="placeholder" onClick={toggleOpen}>
             <ChevronLeftIcon />
           </Box>
           <Box
@@ -361,7 +360,7 @@ export const SearchBar = () => {
             value={searchValue}
           />
         </Row>
-        <Box display={{ sm: isOpen ? 'none' : 'flex', lg: 'none' }}>
+        <Box display={{ sm: isOpen ? 'none' : 'flex', xl: 'none' }}>
           <NavIcon onClick={toggleOpen}>
             <NavMagnifyingGlassIcon width={28} height={28} />
           </NavIcon>
@@ -379,6 +378,6 @@ export const SearchBar = () => {
           ))}
       </Box>
       {isOpen && <Overlay />}
-    </>
+    </Box>
   )
 }

src/nft/components/modals/Overlay.css.ts

@@ -11,9 +11,9 @@ export const overlay = style([
     position: 'fixed',
     display: 'block',
     background: 'black',
+    zIndex: '2',
   }),
   {
-    zIndex: 10,
     opacity: 0.72,
     overflow: 'hidden',
   },

src/nft/css/sprinkles.css.ts

-import { createGlobalTheme } from '@vanilla-extract/css'
-import { createGlobalThemeContract } from '@vanilla-extract/css'
+import { createGlobalTheme, createGlobalThemeContract } from '@vanilla-extract/css'
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles'
 
 const themeContractValues = {
@@ -231,7 +230,7 @@ const flexAlignment = [
 
 const overflow = ['hidden', 'inherit', 'scroll', 'visible', 'auto'] as const
 
-const borderWidth = ['1px', '1.5px', '2px', '4px']
+const borderWidth = ['0px', '1px', '1.5px', '2px', '4px']
 
 const borderStyle = ['none', 'solid'] as const