feat: add glow to trending table (#5248)

* feat: add glow

* chore: simplify

* chore: move component to theme

src/nft/components/explore/Table.tsx

@@ -5,7 +5,7 @@ import { useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table'
 import styled, { useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
+import { GlowEffect, ThemedText } from 'theme'
 
 import { Box } from '../../components/Box'
 import { CollectionTableColumn } from '../../types'
@@ -141,6 +141,7 @@ export function Table<D extends Record<string, unknown>>({
   }
 
   return (
+    <GlowEffect>
       <table {...getTableProps()} className={styles.table}>
         <thead className={styles.thead}>
           {headerGroups.map((headerGroup) => (
@@ -217,6 +218,7 @@ export function Table<D extends Record<string, unknown>>({
           })}
         </tbody>
       </table>
+    </GlowEffect>
   )
 }
 
@@ -227,6 +229,7 @@ interface LoadingTableProps {
 
 function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) {
   return (
+    <GlowEffect>
       <table {...props} className={styles.table}>
         <thead className={styles.thead}>
           {headerGroups.map((headerGroup) => (
@@ -287,5 +290,6 @@ function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTablePr
           ))}
         </tbody>
       </table>
+    </GlowEffect>
   )
 }

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