fix: yellow button redesign, improve add liquidity page readability (#4504)

* init

* add background overlay for hover states

src/components/Button/index.tsx

@@ -176,23 +176,28 @@ export const ButtonOutlined = styled(BaseButton)`
   }
 `
 
-export const ButtonYellow = styled(BaseButton)`
-  background-color: ${({ theme }) => theme.deprecated_yellow3};
-  color: white;
+export const ButtonYellow = styled(BaseButton)<{ redesignFlag?: boolean }>`
+  background-color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3)};
+  color: ${({ theme, redesignFlag }) => (redesignFlag ? theme.accentWarning : 'white')};
   &:focus {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
+    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${theme.deprecated_yellow3}`};
+    background-color: ${({ theme, redesignFlag }) =>
+      redesignFlag ? theme.accentWarningSoft : darken(0.05, theme.deprecated_yellow3)};
   }
   &:hover {
-    background-color: ${({ theme }) => darken(0.05, theme.deprecated_yellow3)};
+    background: ${({ theme, redesignFlag }) => redesignFlag && theme.stateOverlayHover};
+    mix-blend-mode: ${({ redesignFlag }) => redesignFlag && 'normal'};
+    background-color: ${({ theme, redesignFlag }) => !redesignFlag && darken(0.05, theme.deprecated_yellow3)};
   }
   &:active {
-    box-shadow: 0 0 0 1pt ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
-    background-color: ${({ theme }) => darken(0.1, theme.deprecated_yellow3)};
+    box-shadow: ${({ theme, redesignFlag }) => !redesignFlag && `0 0 0 1pt ${darken(0.1, theme.deprecated_yellow3)}`};
+    background-color: ${({ theme, redesignFlag }) =>
+      redesignFlag ? theme.accentWarningSoft : darken(0.1, theme.deprecated_yellow3)};
   }
   &:disabled {
-    background-color: ${({ theme }) => theme.deprecated_yellow3};
-    opacity: 50%;
+    background-color: ${({ theme, redesignFlag }) =>
+      redesignFlag ? theme.accentWarningSoft : theme.deprecated_yellow3};
+    opacity: ${({ redesignFlag }) => (redesignFlag ? '60%' : '50%')};
     cursor: auto;
   }
 `

src/pages/AddLiquidity/index.tsx

@@ -9,6 +9,7 @@ import { TraceEvent } from 'components/AmplitudeAnalytics/TraceEvent'
 import { sendEvent } from 'components/analytics'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import { NavBarVariant, useNavBarFlag } from 'featureFlags/flags/navBar'
+import { RedesignVariant, useRedesignFlag } from 'featureFlags/flags/redesign'
 import useParsedQueryString from 'hooks/useParsedQueryString'
 import { useCallback, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
@@ -90,6 +91,9 @@ export default function AddLiquidity() {
   } = useParams<{ currencyIdA?: string; currencyIdB?: string; feeAmount?: string; tokenId?: string }>()
   const { account, chainId, provider } = useWeb3React()
   const theme = useTheme()
+  const redesignFlag = useRedesignFlag()
+  const redesignFlagEnabled = redesignFlag === RedesignVariant.Enabled
+
   const toggleWalletModal = useToggleWalletModal() // toggle wallet when disconnected
   const expertMode = useIsExpertMode()
   const addTransaction = useTransactionAdder()
@@ -878,6 +882,7 @@ export default function AddLiquidity() {
                                     marginRight="8px"
                                     $borderRadius="8px"
                                     width="auto"
+                                    redesignFlag={redesignFlagEnabled}
                                     onClick={() => {
                                       setShowCapitalEfficiencyWarning(false)
                                       getSetFullRange()

src/theme/colors.ts

@@ -224,6 +224,7 @@ export interface Palette {
 
   shallowShadow: Color
   deepShadow: Color
+  stateOverlayHover: Color
 }
 
 export const colorsLight: Palette = {
@@ -284,6 +285,7 @@ export const colorsLight: Palette = {
     '8px 12px 20px rgba(51, 53, 72, 0.04), 4px 6px 12px rgba(51, 53, 72, 0.02), 4px 4px 8px rgba(51, 53, 72, 0.04);',
   shallowShadow:
     '6px 6px 10px rgba(51, 53, 72, 0.01), 2px 2px 6px rgba(51, 53, 72, 0.02), 1px 2px 2px rgba(51, 53, 72, 0.02);',
+  stateOverlayHover: opacify(8, colors.gray300),
 }
 
 export const colorsDark: Palette = {
@@ -342,4 +344,5 @@ export const colorsDark: Palette = {
 
   deepShadow: '12px 16px 24px rgba(0, 0, 0, 0.24), 12px 8px 12px rgba(0, 0, 0, 0.24), 4px 4px 8px rgba(0, 0, 0, 0.32);',
   shallowShadow: '4px 4px 10px rgba(0, 0, 0, 0.24), 2px 2px 4px rgba(0, 0, 0, 0.12), 1px 2px 2px rgba(0, 0, 0, 0.12);',
+  stateOverlayHover: opacify(8, colors.gray300),
 }

src/theme/index.tsx

@@ -136,6 +136,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
     hoverState: opacify(24, ColorsPalette.blue200),
     hoverDefault: opacify(8, ColorsPalette.gray200),
+    stateOverlayHover: darkMode ? colorsDark.stateOverlayHover : colorsLight.stateOverlayHover,
   }
 }
 

src/theme/styled.d.ts

@@ -58,6 +58,7 @@ export interface ThemeColors {
   deepShadow: Color
   hoverState: Color
   hoverDefault: Color
+  stateOverlayHover: Color
 }
 
 export interface Colors {