feat: add glow to trending table (#5248)

* feat: add glow

* chore: simplify

* chore: move component to theme

src/theme/colors.ts

@@ -242,6 +242,8 @@ export interface Palette {
 
   shallowShadow: Color
   deepShadow: Color
+  networkDefaultShadow: Color
+
   stateOverlayHover: Color
   stateOverlayPressed: Color
 }
@@ -306,6 +308,9 @@ 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);',
+
+  networkDefaultShadow: `0px 40px 120px ${opacify(12, colors.pink400)}`,
+
   stateOverlayHover: opacify(8, colors.gray300),
   stateOverlayPressed: opacify(24, colors.gray200),
 }
@@ -368,6 +373,9 @@ 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);',
+
+  networkDefaultShadow: `0px 40px 120px ${opacify(16, colors.blue400)}`,
+
   stateOverlayHover: opacify(8, colors.gray300),
   stateOverlayPressed: opacify(24, colors.gray200),
 }

src/theme/components.tsx

@@ -468,3 +468,8 @@ export const Separator = styled.div`
   height: 1px;
   background-color: ${({ theme }) => theme.backgroundOutline};
 `
+
+export const GlowEffect = styled.div`
+  border-radius: 32px;
+  box-shadow: ${({ theme }) => theme.networkDefaultShadow};
+`

src/theme/index.tsx

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

src/theme/styled.d.ts

@@ -57,6 +57,7 @@ export interface ThemeColors {
 
   shallowShadow: Color
   deepShadow: Color
+  networkDefaultShadow: Color
   hoverState: Color
   hoverDefault: Color
   stateOverlayHover: Color