refactor: removes flyoutDropShadow, adds shallowShadow (#4437)

flyout drop shadow

src/components/Tokens/TokenDetails/ShareButton.tsx

@@ -40,7 +40,7 @@ const ShareActions = styled.div`
   padding: 8px;
   background-color: ${({ theme }) => theme.backgroundSurface};
   border: 0.5px solid ${({ theme }) => theme.backgroundOutline};
-  box-shadow: ${({ theme }) => theme.flyoutDropShadow};
+  box-shadow: ${({ theme }) => theme.deepShadow};
   border-radius: 12px;
 `
 const ShareAction = styled.div`

src/components/Tokens/TokenTable/NetworkFilter.tsx

@@ -47,8 +47,8 @@ const MenuTimeFlyout = styled.span`
   max-height: 350px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
-  box-shadow: ${({ theme }) => theme.flyoutDropShadow};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  border: 0.5px solid ${({ theme }) => theme.backgroundOutline};
   border-radius: 12px;
   padding: 8px;
   display: flex;

src/components/Tokens/TokenTable/TimeSelector.tsx

@@ -59,8 +59,8 @@ const MenuTimeFlyout = styled.span`
   max-height: 300px;
   overflow: auto;
   background-color: ${({ theme }) => theme.backgroundSurface};
-  box-shadow: ${({ theme }) => theme.flyoutDropShadow};
-  border: 1px solid ${({ theme }) => theme.backgroundOutline};
+  box-shadow: ${({ theme }) => theme.deepShadow};
+  border: 0.5px solid ${({ theme }) => theme.backgroundOutline};
   border-radius: 12px;
   padding: 8px;
   display: flex;

src/theme/colors.ts

@@ -222,7 +222,7 @@ export interface Palette {
   chain_10_background: Color
   chain_42161_background: Color
 
-  flyoutDropShadow: Color
+  shallowShadow: Color
   deepShadow: Color
 }
 
@@ -280,7 +280,7 @@ export const colorsLight: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow:
+  shallowShadow:
     '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
   deepShadow:
     '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);',
@@ -340,7 +340,6 @@ export const colorsDark: Palette = {
   chain_10_background: colors.red900,
   chain_42161_background: colors.blue900,
 
-  flyoutDropShadow:
-    '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12);',
+  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);',
   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);',
 }

src/theme/index.tsx

@@ -110,8 +110,7 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
     chain_80001: colorsDark.chain_80001,
 
     blue200: ColorsPalette.blue200,
-    flyoutDropShadow:
-      '0px 24px 32px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.12)',
+    shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
     deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
     hoverState: opacify(24, ColorsPalette.blue200),
     hoverDefault: opacify(8, ColorsPalette.gray200),

src/theme/styled.d.ts

@@ -54,7 +54,7 @@ export interface ThemeColors {
   chain_80001: Color
 
   blue200: Color
-  flyoutDropShadow: Color
+  shallowShadow: Color
   deepShadow: Color
   hoverState: Color
   hoverDefault: Color