fix: cleanup styles for overflow modal (#4458)

* improvements to overflow modal

* add active state to overflow modal

* fix right aligned models
Co-authored-by: Charlie <charlie@uniswap.org>

src/components/NavBar/MenuDropdown.css.ts

 import { style } from '@vanilla-extract/css'
 
-import { sprinkles, themeVars } from '../../nft/css/sprinkles.css'
+import { sprinkles, themeVars, vars } from '../../nft/css/sprinkles.css'
+
+export const hover = style([
+  sprinkles({
+    transition: '250',
+    borderRadius: '12',
+  }),
+  {
+    ':hover': {
+      background: vars.color.lightGrayOverlay,
+    },
+  },
+])
 
 export const MenuRow = style([
+  hover,
   sprinkles({
     color: 'blackBlue',
-    paddingY: '12',
-    width: 'max',
-    marginRight: '52',
+    paddingY: '8',
+    paddingX: '8',
+    width: 'full',
+    whiteSpace: 'nowrap',
   }),
   {
     lineHeight: '24px',
@@ -22,8 +36,10 @@ export const PrimaryText = style([
 ])
 
 export const SecondaryText = style([
+  hover,
   sprinkles({
     paddingY: '8',
+    paddingX: '8',
     color: 'darkGray',
   }),
   {
@@ -34,6 +50,7 @@ export const SecondaryText = style([
 export const Separator = style([
   sprinkles({
     height: '0',
+    marginX: '16',
   }),
   {
     borderTop: 'solid',
@@ -45,6 +62,6 @@ export const Separator = style([
 export const IconRow = style([
   sprinkles({
     paddingX: '16',
-    paddingY: '8',
+    marginTop: '4',
   }),
 ])

src/components/NavBar/MenuDropdown.tsx

@@ -124,14 +124,14 @@ export const MenuDropdown = () => {
   return (
     <>
       <Box position="relative" ref={ref}>
-        <NavIcon onClick={toggleOpen}>
+        <NavIcon isActive={isOpen} onClick={toggleOpen}>
           <EllipsisIcon width={28} height={28} />
         </NavIcon>
 
         {isOpen && (
           <NavDropdown top={60}>
-            <Column gap="12">
-              <Column paddingX="16" gap="4">
+            <Column gap="16">
+              <Column paddingX="8" gap="4">
                 {nftFlag === NftVariant.Enabled && (
                   <PrimaryMenuRow to="/nft/sell" close={toggleOpen}>
                     <Icon>
@@ -150,11 +150,11 @@ export const MenuDropdown = () => {
                   <Icon>
                     <BarChartIcon width={24} height={24} />
                   </Icon>
-                  <PrimaryMenuRow.Text>View token analytics ↗</PrimaryMenuRow.Text>
+                  <PrimaryMenuRow.Text>View token analytics</PrimaryMenuRow.Text>
                 </PrimaryMenuRow>
               </Column>
               <Separator />
-              <Column paddingX="16" gap="4">
+              <Column paddingX="8">
                 <SecondaryLinkedText href="https://help.uniswap.org/en/">Help center ↗</SecondaryLinkedText>
                 <SecondaryLinkedText href="https://docs.uniswap.org/">Documentation ↗</SecondaryLinkedText>
                 <SecondaryLinkedText
@@ -162,20 +162,20 @@ export const MenuDropdown = () => {
                     toggleOpen()
                     togglePrivacyPolicy()
                   }}
-                >{`Legal & Privacy`}</SecondaryLinkedText>
+                >{`Legal & Privacy ↗`}</SecondaryLinkedText>
                 {(isDevelopmentEnv() || isStagingEnv()) && (
                   <SecondaryLinkedText onClick={openFeatureFlagsModal}>{`Feature Flags`}</SecondaryLinkedText>
                 )}
               </Column>
               <IconRow>
                 <Icon href="https://discord.com/invite/FCfyBSbCU5">
-                  <DiscordIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <DiscordIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
                 <Icon href="https://twitter.com/Uniswap">
-                  <TwitterIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <TwitterIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
                 <Icon href="https://github.com/Uniswap">
-                  <GithubIconMenu width={24} height={24} color={themeVars.colors.darkGray} />
+                  <GithubIconMenu className={styles.hover} width={24} height={24} color={themeVars.colors.darkGray} />
                 </Icon>
               </IconRow>
             </Column>

src/components/NavBar/MobileSidebar.tsx

@@ -146,7 +146,7 @@ export const MobileSideBar = () => {
 
   return (
     <>
-      <NavIcon onClick={toggleOpen}>
+      <NavIcon isActive={isOpen} onClick={toggleOpen}>
         <HamburgerIcon width={28} height={28} />
       </NavIcon>
       {isOpen && (

src/components/NavBar/NavDropdown.css.ts

@@ -5,11 +5,12 @@ import { sprinkles } from '../../nft/css/sprinkles.css'
 export const NavDropdown = style([
   sprinkles({
     position: 'absolute',
-    background: 'white95',
+    background: 'lightGray',
     borderRadius: '12',
     borderStyle: 'solid',
     borderColor: 'medGray',
-    paddingY: '20',
+    paddingTop: '16',
+    paddingBottom: '24',
     borderWidth: '1px',
   }),
   {

src/components/NavBar/NavDropdown.tsx

@@ -25,7 +25,7 @@ export const NavDropdown = ({
       style={{
         top: `${top}px`,
         left: centerHorizontally ? '50%' : leftAligned ? '0px' : 'auto',
-        right: centerHorizontally || leftAligned ? 'auto' : '10px',
+        right: centerHorizontally || leftAligned ? 'auto' : '0px',
         transform: centerHorizontally ? 'translateX(-50%)' : 'unset',
         zIndex: 3,
       }}

src/components/NavBar/NavIcon.css.ts

@@ -8,7 +8,6 @@ export const navIcon = style([
     display: 'flex',
     flexDirection: 'column',
     color: 'blackBlue',
-    background: 'none',
     border: 'none',
     justifyContent: 'center',
     textAlign: 'center',

src/components/NavBar/NavIcon.tsx

@@ -5,12 +5,13 @@ import * as styles from './NavIcon.css'
 
 interface NavIconProps {
   children: ReactNode
+  isActive?: boolean
   onClick: () => void
 }
 
-export const NavIcon = ({ children, onClick }: NavIconProps) => {
+export const NavIcon = ({ children, isActive, onClick }: NavIconProps) => {
   return (
-    <Box as="button" className={styles.navIcon} onClick={onClick}>
+    <Box as="button" className={styles.navIcon} background={isActive ? 'accentActiveSoft' : 'none'} onClick={onClick}>
       {children}
     </Box>
   )

src/nft/css/sprinkles.css.ts

@@ -146,6 +146,7 @@ export const vars = createGlobalTheme(':root', {
 
     // new uniswap colors:
     blue400: '#4C82FB',
+    blue200: '#ADBCFF30',
     pink400: '#FB118E',
     red700: '#530f10',
     red400: '#FA2C38',
@@ -162,6 +163,7 @@ export const vars = createGlobalTheme(':root', {
     accentActionSoft: 'rgba(76, 130, 251, 0.24)',
     accentTextLightTertiary: 'rgba(255, 255, 255, 0.12)',
     lightGrayOverlay: '#99A1BD14',
+    accentActiveSoft: '#4c82fb3d',
   },
   border: {
     transculent: '1.5px solid rgba(0, 0, 0, 0.1)',