diff --git a/src/nft/components/explore/Table.tsx b/src/nft/components/explore/Table.tsx index b4c5649660..0cdf543af4 100644 --- a/src/nft/components/explore/Table.tsx +++ b/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>({ } return ( - - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column, index) => { - return ( - - - {column.isSorted ? ( - column.isSortedDesc ? ( - - ) : ( - - ) - ) : ( - '' - )} - - - {column.render('Header')} - - - ) - })} - - ))} - - - {rows.map((row, i) => { - prepareRow(row) - - return ( - navigate(`/nfts/collection/${row.original.collection.address}`)} - > - {row.cells.map((cell, cellIndex) => { + +
+ + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column, index) => { return ( - + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) + ) : ( + '' + )} + + + {column.render('Header')} + + ) })} - - ) - })} - -
- {cellIndex === 0 ? ( - - {!isMobile && ( - - {i + 1} - - )} - {cell.render('Cell')} - - ) : ( - cell.render('Cell') - )} -
+ + ))} + + + {rows.map((row, i) => { + prepareRow(row) + + return ( + navigate(`/nfts/collection/${row.original.collection.address}`)} + > + {row.cells.map((cell, cellIndex) => { + return ( + + {cellIndex === 0 ? ( + + {!isMobile && ( + + {i + 1} + + )} + {cell.render('Cell')} + + ) : ( + cell.render('Cell') + )} + + ) + })} + + ) + })} + + + ) } @@ -227,65 +229,67 @@ interface LoadingTableProps { function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) { return ( - - - {headerGroups.map((headerGroup) => ( - - {headerGroup.headers.map((column, index) => { - return ( - - - {column.isSorted ? ( - column.isSortedDesc ? ( - + +
+ + {headerGroups.map((headerGroup) => ( + + {headerGroup.headers.map((column, index) => { + return ( + + + {column.isSorted ? ( + column.isSortedDesc ? ( + + ) : ( + + ) ) : ( - - ) + '' + )} + + + {column.render('Header')} + + + ) + })} + + ))} + + + {[...Array(DEFAULT_TRENDING_TABLE_QUERY_AMOUNT)].map((_, index) => ( + + {[...Array(visibleColumns.length)].map((_, cellIndex) => { + return ( + - ))} - - - {[...Array(DEFAULT_TRENDING_TABLE_QUERY_AMOUNT)].map((_, index) => ( - - {[...Array(visibleColumns.length)].map((_, cellIndex) => { - return ( - - ) - })} - - ))} - -
+ {cellIndex === 0 ? ( + + + + + ) : ( - '' + + + )} - - - {column.render('Header')} - - - ) - })} -
- {cellIndex === 0 ? ( - - - - - - ) : ( - - - - )} -
+ + ) + })} + + ))} + + + ) } diff --git a/src/theme/colors.ts b/src/theme/colors.ts index 444194888f..17ca2ce3c3 100644 --- a/src/theme/colors.ts +++ b/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), } diff --git a/src/theme/components.tsx b/src/theme/components.tsx index aa9ded7625..9647583861 100644 --- a/src/theme/components.tsx +++ b/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}; +` diff --git a/src/theme/index.tsx b/src/theme/index.tsx index 6d73b96d05..2cd3ba667c 100644 --- a/src/theme/index.tsx +++ b/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, diff --git a/src/theme/styled.d.ts b/src/theme/styled.d.ts index 25235fbcdc..bdb4066222 100644 --- a/src/theme/styled.d.ts +++ b/src/theme/styled.d.ts @@ -57,6 +57,7 @@ export interface ThemeColors { shallowShadow: Color deepShadow: Color + networkDefaultShadow: Color hoverState: Color hoverDefault: Color stateOverlayHover: Color