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,82 +141,84 @@ export function Table<D extends Record<string, unknown>>({
   }
 
   return (
-    <table {...getTableProps()} className={styles.table}>
-      <thead className={styles.thead}>
-        {headerGroups.map((headerGroup) => (
-          <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
-            {headerGroup.headers.map((column, index) => {
-              return (
-                <StyledHeader
-                  className={styles.th}
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  style={{
-                    textAlign: index === 0 ? 'left' : 'right',
-                    paddingLeft: index === 0 ? (isMobile ? '16px' : '52px') : 0,
-                  }}
-                  disabled={column.disableSortBy}
-                  key={index}
-                >
-                  <Box as="span" color="accentAction" position="relative">
-                    {column.isSorted ? (
-                      column.isSortedDesc ? (
-                        <ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} />
-                      ) : (
-                        <ArrowRightIcon style={{ transform: 'rotate(-90deg)', position: 'absolute' }} />
-                      )
-                    ) : (
-                      ''
-                    )}
-                  </Box>
-                  <Box as="span" paddingLeft={column.isSorted ? '18' : '0'}>
-                    {column.render('Header')}
-                  </Box>
-                </StyledHeader>
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
-      <tbody {...getTableBodyProps()}>
-        {rows.map((row, i) => {
-          prepareRow(row)
-
-          return (
-            <StyledRow
-              {...row.getRowProps()}
-              key={row.id}
-              onClick={() => navigate(`/nfts/collection/${row.original.collection.address}`)}
-            >
-              {row.cells.map((cell, cellIndex) => {
+    <GlowEffect>
+      <table {...getTableProps()} className={styles.table}>
+        <thead className={styles.thead}>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+              {headerGroup.headers.map((column, index) => {
                 return (
-                  <td
-                    className={styles.td}
-                    {...cell.getCellProps()}
-                    key={cellIndex}
+                  <StyledHeader
+                    className={styles.th}
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
                     style={{
-                      maxWidth: cellIndex === 0 ? (isMobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH) : CELL_WIDTH,
+                      textAlign: index === 0 ? 'left' : 'right',
+                      paddingLeft: index === 0 ? (isMobile ? '16px' : '52px') : 0,
                     }}
+                    disabled={column.disableSortBy}
+                    key={index}
                   >
-                    {cellIndex === 0 ? (
-                      <RankCellContainer>
-                        {!isMobile && (
-                          <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
-                            {i + 1}
-                          </ThemedText.BodySecondary>
-                        )}
-                        {cell.render('Cell')}
-                      </RankCellContainer>
-                    ) : (
-                      cell.render('Cell')
-                    )}
-                  </td>
+                    <Box as="span" color="accentAction" position="relative">
+                      {column.isSorted ? (
+                        column.isSortedDesc ? (
+                          <ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} />
+                        ) : (
+                          <ArrowRightIcon style={{ transform: 'rotate(-90deg)', position: 'absolute' }} />
+                        )
+                      ) : (
+                        ''
+                      )}
+                    </Box>
+                    <Box as="span" paddingLeft={column.isSorted ? '18' : '0'}>
+                      {column.render('Header')}
+                    </Box>
+                  </StyledHeader>
                 )
               })}
-            </StyledRow>
-          )
-        })}
-      </tbody>
-    </table>
+            </tr>
+          ))}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row, i) => {
+            prepareRow(row)
+
+            return (
+              <StyledRow
+                {...row.getRowProps()}
+                key={row.id}
+                onClick={() => navigate(`/nfts/collection/${row.original.collection.address}`)}
+              >
+                {row.cells.map((cell, cellIndex) => {
+                  return (
+                    <td
+                      className={styles.td}
+                      {...cell.getCellProps()}
+                      key={cellIndex}
+                      style={{
+                        maxWidth: cellIndex === 0 ? (isMobile ? MOBILE_CELL_WIDTH : DESKTOP_CELL_WIDTH) : CELL_WIDTH,
+                      }}
+                    >
+                      {cellIndex === 0 ? (
+                        <RankCellContainer>
+                          {!isMobile && (
+                            <ThemedText.BodySecondary fontSize="14px" lineHeight="20px">
+                              {i + 1}
+                            </ThemedText.BodySecondary>
+                          )}
+                          {cell.render('Cell')}
+                        </RankCellContainer>
+                      ) : (
+                        cell.render('Cell')
+                      )}
+                    </td>
+                  )
+                })}
+              </StyledRow>
+            )
+          })}
+        </tbody>
+      </table>
+    </GlowEffect>
   )
 }
 
@@ -227,65 +229,67 @@ interface LoadingTableProps {
 
 function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) {
   return (
-    <table {...props} className={styles.table}>
-      <thead className={styles.thead}>
-        {headerGroups.map((headerGroup) => (
-          <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
-            {headerGroup.headers.map((column, index) => {
-              return (
-                <StyledHeader
-                  className={styles.th}
-                  {...column.getHeaderProps(column.getSortByToggleProps())}
-                  style={{
-                    textAlign: index === 0 ? 'left' : 'right',
-                    paddingLeft: index === 0 ? '52px' : 0,
-                  }}
-                  disabled={index === 0}
-                  key={index}
-                >
-                  <Box as="span" color="accentAction" position="relative">
-                    {column.isSorted ? (
-                      column.isSortedDesc ? (
-                        <ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} />
+    <GlowEffect>
+      <table {...props} className={styles.table}>
+        <thead className={styles.thead}>
+          {headerGroups.map((headerGroup) => (
+            <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
+              {headerGroup.headers.map((column, index) => {
+                return (
+                  <StyledHeader
+                    className={styles.th}
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                    style={{
+                      textAlign: index === 0 ? 'left' : 'right',
+                      paddingLeft: index === 0 ? '52px' : 0,
+                    }}
+                    disabled={index === 0}
+                    key={index}
+                  >
+                    <Box as="span" color="accentAction" position="relative">
+                      {column.isSorted ? (
+                        column.isSortedDesc ? (
+                          <ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} />
+                        ) : (
+                          <ArrowRightIcon style={{ transform: 'rotate(-90deg)', position: 'absolute' }} />
+                        )
                       ) : (
-                        <ArrowRightIcon style={{ transform: 'rotate(-90deg)', position: 'absolute' }} />
-                      )
+                        ''
+                      )}
+                    </Box>
+                    <Box as="span" paddingLeft={column.isSorted ? '18' : '0'}>
+                      {column.render('Header')}
+                    </Box>
+                  </StyledHeader>
+                )
+              })}
+            </tr>
+          ))}
+        </thead>
+        <tbody {...props}>
+          {[...Array(DEFAULT_TRENDING_TABLE_QUERY_AMOUNT)].map((_, index) => (
+            <StyledLoadingRow key={index}>
+              {[...Array(visibleColumns.length)].map((_, cellIndex) => {
+                return (
+                  <td className={styles.loadingTd} key={cellIndex}>
+                    {cellIndex === 0 ? (
+                      <StyledCollectionNameHolder>
+                        <StyledRankHolder />
+                        <StyledImageHolder />
+                        <LoadingBubble />
+                      </StyledCollectionNameHolder>
                     ) : (
-                      ''
+                      <StyledLoadingHolder>
+                        <LoadingBubble />
+                      </StyledLoadingHolder>
                     )}
-                  </Box>
-                  <Box as="span" paddingLeft={column.isSorted ? '18' : '0'}>
-                    {column.render('Header')}
-                  </Box>
-                </StyledHeader>
-              )
-            })}
-          </tr>
-        ))}
-      </thead>
-      <tbody {...props}>
-        {[...Array(DEFAULT_TRENDING_TABLE_QUERY_AMOUNT)].map((_, index) => (
-          <StyledLoadingRow key={index}>
-            {[...Array(visibleColumns.length)].map((_, cellIndex) => {
-              return (
-                <td className={styles.loadingTd} key={cellIndex}>
-                  {cellIndex === 0 ? (
-                    <StyledCollectionNameHolder>
-                      <StyledRankHolder />
-                      <StyledImageHolder />
-                      <LoadingBubble />
-                    </StyledCollectionNameHolder>
-                  ) : (
-                    <StyledLoadingHolder>
-                      <LoadingBubble />
-                    </StyledLoadingHolder>
-                  )}
-                </td>
-              )
-            })}
-          </StyledLoadingRow>
-        ))}
-      </tbody>
-    </table>
+                  </td>
+                )
+              })}
+            </StyledLoadingRow>
+          ))}
+        </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