feat: Fixed light mode styles and added hover states to navbar (#4449)

* cleanup navbar lightmode

* lightmode and hover states

* move magical gradient to common stlyes

* inherit border radius

* hover transition

* further split common gradient style
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/ChainSwitcher.css.ts

 import { style } from '@vanilla-extract/css'
 
-import { sprinkles } from '../../nft/css/sprinkles.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const ChainSwitcher = style([
   sprinkles({
-    background: 'lightGrayContainer',
     borderRadius: '8',
     paddingY: '8',
     paddingX: '12',
     cursor: 'pointer',
     border: 'none',
+    color: 'blackBlue',
+    background: 'none',
+    transition: '250',
   }),
+  {
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
+  },
 ])
 
 export const ChainSwitcherRow = style([
   sprinkles({
     border: 'none',
-    color: 'blackBlue',
     justifyContent: 'space-between',
     paddingX: '16',
     paddingY: '12',
     cursor: 'pointer',
+    color: 'blackBlue',
   }),
   {
     lineHeight: '24px',

src/components/NavBar/ChainSwitcher.tsx

@@ -29,7 +29,7 @@ const ChainRow = ({
   return (
     <Row
       as="button"
-      background={active ? 'lightGrayContainer' : 'none'}
+      background={active ? 'lightGrayOverlay' : 'none'}
       className={`${styles.ChainSwitcherRow} ${subhead}`}
       onClick={() => onSelectChain(targetChain)}
     >
@@ -76,13 +76,13 @@ export const ChainSwitcher = ({ isMobile }: ChainSwitcherProps) => {
     <Box position="relative" ref={ref}>
       <Row as="button" gap="8" className={styles.ChainSwitcher} onClick={toggleOpen}>
         <img src={info.logoUrl} alt={info.label} className={styles.Image} />
-        <Box as="span" className={subhead} color="explicitWhite" style={{ lineHeight: '20px' }}>
+        <Box as="span" className={subhead} style={{ lineHeight: '20px' }}>
           {info.label}
         </Box>
         {isOpen ? (
-          <NewChevronUpIcon width={16} height={16} color="darkGray" />
+          <NewChevronUpIcon width={16} height={16} color="blackBlue" />
         ) : (
-          <NewChevronDownIcon width={16} height={16} color="darkGray" />
+          <NewChevronDownIcon width={16} height={16} color="blackBlue" />
         )}
       </Row>
       {isOpen && (

src/components/NavBar/NavIcon.css.ts

 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, themeVars } from '../../nft/css/sprinkles.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const navIcon = style([
   sprinkles({
@@ -15,10 +15,11 @@ export const navIcon = style([
     cursor: 'pointer',
     padding: '8',
     borderRadius: '8',
+    transition: '250',
   }),
   {
     ':hover': {
-      background: themeVars.colors.lightGrayContainer,
+      background: vars.color.lightGrayOverlay,
     },
     zIndex: 2,
   },

src/components/NavBar/Navbar.css.ts

 import { style } from '@vanilla-extract/css'
 
 import { subhead } from '../../nft/css/common.css'
-import { sprinkles } from '../../nft/css/sprinkles.css'
+import { sprinkles, vars } from '../../nft/css/sprinkles.css'
 
 export const nav = style([
   sprinkles({
@@ -94,10 +94,14 @@ const baseMenuItem = style([
     paddingX: '16',
     marginY: '4',
     borderRadius: '12',
+    transition: '250',
   }),
   {
     lineHeight: '24px',
     textDecoration: 'none',
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
   },
 ])
 
@@ -119,6 +123,7 @@ export const activeMenuItem = style([
   baseMenuItem,
   sprinkles({
     color: 'blackBlue',
+    background: 'backgroundFloating',
   }),
 ])
 

src/components/NavBar/SearchBar.css.ts

@@ -7,11 +7,11 @@ const DESKTOP_NAVBAR_WIDTH = '360px'
 
 const baseSearchStyle = style([
   sprinkles({
-    borderStyle: 'solid',
-    borderColor: 'lightGrayButton',
-    borderWidth: '1px',
     paddingY: '12',
     width: { mobile: 'viewWidth' },
+    borderStyle: 'solid',
+    borderWidth: '1px',
+    borderColor: 'medGray',
   }),
   {
     '@media': {
@@ -29,6 +29,7 @@ export const searchBar = style([
     color: 'placeholder',
     paddingX: '16',
     cursor: 'pointer',
+    background: 'lightGray',
   }),
 ])
 
@@ -52,7 +53,7 @@ export const searchBarDropdown = style([
     top: '48',
     borderBottomLeftRadius: '12',
     borderBottomRightRadius: '12',
-    background: 'white',
+    background: 'lightGray',
   }),
   {
     borderTop: 'none',
@@ -72,7 +73,7 @@ export const suggestionRow = style([
   {
     ':hover': {
       cursor: 'pointer',
-      background: vars.color.lightGrayButton,
+      background: vars.color.lightGrayOverlay,
     },
     textDecoration: 'none',
   },

src/components/NavBar/SearchBar.tsx

+import clsx from 'clsx'
 import { NftVariant, useNftFlag } from 'featureFlags/flags/nft'
 import useDebounce from 'hooks/useDebounce'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
@@ -6,7 +7,7 @@ import { organizeSearchResults } from 'lib/utils/searchBar'
 import { Box } from 'nft/components/Box'
 import { Column, Row } from 'nft/components/Flex'
 import { Overlay } from 'nft/components/modals/Overlay'
-import { subheadSmall } from 'nft/css/common.css'
+import { magicalGradientOnHover, subheadSmall } from 'nft/css/common.css'
 import { breakpoints } from 'nft/css/sprinkles.css'
 import { useSearchHistory } from 'nft/hooks'
 import { fetchSearchCollections, fetchTrendingCollections } from 'nft/queries'
@@ -330,13 +331,12 @@ export const SearchBar = () => {
         style={{ zIndex: '1000' }}
       >
         <Row
-          className={styles.searchBar}
+          className={clsx(`${styles.searchBar} ${!isOpen && magicalGradientOnHover}`)}
           borderRadius={isOpen ? undefined : '12'}
           borderTopRightRadius={isOpen && !isMobile ? '12' : undefined}
           borderTopLeftRadius={isOpen && !isMobile ? '12' : undefined}
           display={{ mobile: isOpen ? 'flex' : 'none', desktopXl: 'flex' }}
           justifyContent={isOpen || phase1Flag === NftVariant.Enabled ? 'flex-start' : 'center'}
-          background={isOpen ? 'white' : 'lightGrayContainer'}
           onFocus={() => !isOpen && toggleOpen()}
           onClick={() => !isOpen && toggleOpen()}
         >

src/components/NavBar/SuggestionRow.tsx

@@ -56,7 +56,7 @@ export const CollectionRow = ({ collection, isHovered, setHoveredIndex, toggleOp
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
       onMouseLeave={() => isHovered && setHoveredIndex(undefined)}
       className={styles.suggestionRow}
-      style={{ background: isHovered ? vars.color.lightGrayButton : 'none' }}
+      style={{ background: isHovered ? vars.color.lightGrayOverlay : 'none' }}
     >
       <Row style={{ width: '60%' }}>
         {!brokenImage && collection.imageUrl ? (
@@ -129,13 +129,12 @@ export const TokenRow = ({ token, isHovered, setHoveredIndex, toggleOpen, index
 
   return (
     <Link
-      // TODO connect with explore token URI
       to={`/tokens/${token.address}`}
       onClick={handleClick}
       onMouseEnter={() => !isHovered && setHoveredIndex(index)}
       onMouseLeave={() => isHovered && setHoveredIndex(undefined)}
       className={styles.suggestionRow}
-      style={{ background: isHovered ? vars.color.lightGrayButton : 'none' }}
+      style={{ background: isHovered ? vars.color.lightGrayOverlay : 'none' }}
     >
       <Row style={{ width: '65%' }}>
         {!brokenImage && token.logoURI ? (

src/nft/components/collection/Card.css.ts

 import { style } from '@vanilla-extract/css'
-import { breakpoints, sprinkles, themeVars } from 'nft/css/sprinkles.css'
+import { breakpoints, sprinkles, themeVars, vars } from 'nft/css/sprinkles.css'
 
 export const card = style([
   sprinkles({
@@ -15,7 +15,7 @@ export const card = style([
         ':hover': {
           borderColor: themeVars.colors.medGray,
           cursor: 'pointer',
-          background: themeVars.colors.lightGrayOverlay,
+          background: vars.color.lightGrayOverlay,
         },
       },
     },

src/nft/css/common.css.ts

@@ -117,3 +117,40 @@ export const buttonSmall = style([
 export const imageHover = style({
   transform: 'scale(1.25)',
 })
+
+export const magicalGradient = style({
+  selectors: {
+    '&::before': {
+      content: '',
+      position: 'absolute',
+      inset: 0,
+      background: 'linear-gradient(91.46deg, #4673FA 0%, #9646FA 100.13%) border-box',
+      borderColor: 'transparent',
+      WebkitMask: 'linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);',
+      WebkitMaskComposite: 'xor;',
+      maskComposite: 'exclude',
+      borderStyle: 'solid',
+      borderWidth: '1px',
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+    },
+  },
+})
+
+export const magicalGradientOnHover = style([
+  magicalGradient,
+  {
+    selectors: {
+      '&::before': {
+        opacity: '0',
+        WebkitTransition: 'opacity 0.25s ease',
+        MozTransition: 'opacity 0.25s ease',
+        msTransition: 'opacity 0.25s ease',
+        transition: 'opacity 0.25s ease-out',
+      },
+      '&:hover::before': {
+        opacity: '1',
+      },
+    },
+  },
+])

src/nft/css/sprinkles.css.ts

@@ -25,14 +25,13 @@ const themeContractValues = {
     magicGradient: '',
     placeholder: '',
     lightGrayButton: '',
-    lightGrayContainer: ',',
-    lightGrayOverlay: '',
 
-    // Opacities of black and whit
+    // Opacities of black and white
     white95: '',
     white90: '',
     white80: '',
     white08: '',
+    backgroundFloating: '',
   },
 
   shadows: {
@@ -160,6 +159,7 @@ export const vars = createGlobalTheme(':root', {
     grey200: '#B7BED4',
     grey100: '#DDE3F7',
     grey50: '#EDEFF7',
+    lightGrayOverlay: '#99A1BD14',
   },
   border: {
     transculent: '1.5px solid rgba(0, 0, 0, 0.1)',

src/nft/themes/darkTheme.ts

@@ -22,14 +22,13 @@ export const darkTheme: Theme = {
     magicGradient: vars.color.blue400,
     placeholder: vars.color.grey400,
     lightGrayButton: vars.color.grey700,
-    lightGrayContainer: `#99A1BD14`,
-    lightGrayOverlay: '#35373F',
 
     // Opacities of black and white
     white95: '#0E111AF2',
     white90: '#000000E5',
     white80: '#000000CC',
     white08: '#0000000C',
+    backgroundFloating: '0000000C',
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',

src/nft/themes/lightTheme.ts

@@ -15,21 +15,20 @@ export const lightTheme: Theme = {
     blackBlue20: `#0E111A33`,
     darkGray: vars.color.grey500,
     medGray: `#5E68873D`,
-    lightGray: vars.color.grey50,
+    lightGray: '#FFFFFF',
     white: '#FFFFFF',
     darkGray10: `#5E68871A`,
     explicitWhite: '#FFFFFF',
     magicGradient: vars.color.pink400,
     placeholder: vars.color.grey300,
     lightGrayButton: vars.color.grey100,
-    lightGrayContainer: vars.color.grey100,
-    lightGrayOverlay: '#E6E8F0',
 
     // Opacities of black and white
     white95: '#EDEFF7F2',
     white90: '#FFFFFFE5',
     white80: '#FFFFFFCC',
-    white08: '#29324908',
+    white08: '#00000000',
+    backgroundFloating: '#29324908',
   },
   shadows: {
     menu: '0px 10px 30px rgba(0, 0, 0, 0.1)',