Skip to content

I
interface
Commit 5696c613 authored by Mike Grabowski's avatar Mike Grabowski Committed by GitHub
Browse files
Options

feat: add glow to trending table (#5248) 

* feat: add glow

* chore: simplify

* chore: move component to theme
parent b30679c9
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 128 deletions
src/nft/components/explore/Table.tsx
View file @ 5696c613
...@@ -5,7 +5,7 @@ import { useEffect } from 'react' ...@@ -5,7 +5,7 @@ import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table' import { Column, ColumnInstance, HeaderGroup, IdType, useSortBy, useTable } from 'react-table'
import styled, { useTheme } from 'styled-components/macro' import styled, { useTheme } from 'styled-components/macro'
import { ThemedText } from 'theme' import { GlowEffect, ThemedText } from 'theme'
import { Box } from '../../components/Box' import { Box } from '../../components/Box'
import { CollectionTableColumn } from '../../types' import { CollectionTableColumn } from '../../types'
...@@ -141,82 +141,84 @@ export function Table<D extends Record<string, unknown>>({ ...@@ -141,82 +141,84 @@ export function Table<D extends Record<string, unknown>>({
} }
return ( return (
<table {...getTableProps()} className={styles.table}> <GlowEffect>
<thead className={styles.thead}> <table {...getTableProps()} className={styles.table}>
{headerGroups.map((headerGroup) => ( <thead className={styles.thead}>
<tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}> {headerGroups.map((headerGroup) => (
{headerGroup.headers.map((column, index) => { <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
return ( {headerGroup.headers.map((column, index) => {
<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) => {
return ( return (
<td <StyledHeader
className={styles.td} className={styles.th}
{...cell.getCellProps()} {...column.getHeaderProps(column.getSortByToggleProps())}
key={cellIndex}
style={{ 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 ? ( <Box as="span" color="accentAction" position="relative">
<RankCellContainer> {column.isSorted ? (
{!isMobile && ( column.isSortedDesc ? (
<ThemedText.BodySecondary fontSize="14px" lineHeight="20px"> <ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} />
{i + 1} ) : (
</ThemedText.BodySecondary> <ArrowRightIcon style={{ transform: 'rotate(-90deg)', position: 'absolute' }} />
)} )
{cell.render('Cell')} ) : (
</RankCellContainer> ''
) : ( )}
cell.render('Cell') </Box>
)} <Box as="span" paddingLeft={column.isSorted ? '18' : '0'}>
</td> {column.render('Header')}
</Box>
</StyledHeader>
) )
})} })}
</StyledRow> </tr>
) ))}
})} </thead>
</tbody> <tbody {...getTableBodyProps()}>
</table> {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 { ...@@ -227,65 +229,67 @@ interface LoadingTableProps {
function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) { function LoadingTable({ headerGroups, visibleColumns, ...props }: LoadingTableProps) {
return ( return (
<table {...props} className={styles.table}> <GlowEffect>
<thead className={styles.thead}> <table {...props} className={styles.table}>
{headerGroups.map((headerGroup) => ( <thead className={styles.thead}>
<tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}> {headerGroups.map((headerGroup) => (
{headerGroup.headers.map((column, index) => { <tr {...headerGroup.getHeaderGroupProps()} key={headerGroup.id}>
return ( {headerGroup.headers.map((column, index) => {
<StyledHeader return (
className={styles.th} <StyledHeader
{...column.getHeaderProps(column.getSortByToggleProps())} className={styles.th}
style={{ {...column.getHeaderProps(column.getSortByToggleProps())}
textAlign: index === 0 ? 'left' : 'right', style={{
paddingLeft: index === 0 ? '52px' : 0, textAlign: index === 0 ? 'left' : 'right',
}} paddingLeft: index === 0 ? '52px' : 0,
disabled={index === 0} }}
key={index} disabled={index === 0}
> key={index}
<Box as="span" color="accentAction" position="relative"> >
{column.isSorted ? ( <Box as="span" color="accentAction" position="relative">
column.isSortedDesc ? ( {column.isSorted ? (
<ArrowRightIcon style={{ transform: 'rotate(90deg)', position: 'absolute' }} /> 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> </td>
<Box as="span" paddingLeft={column.isSorted ? '18' : '0'}> )
{column.render('Header')} })}
</Box> </StyledLoadingRow>
</StyledHeader> ))}
) </tbody>
})} </table>
</tr> </GlowEffect>
))}
</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>
) )
} }
src/theme/colors.ts
View file @ 5696c613
...@@ -242,6 +242,8 @@ export interface Palette { ...@@ -242,6 +242,8 @@ export interface Palette {
shallowShadow: Color shallowShadow: Color
deepShadow: Color deepShadow: Color
networkDefaultShadow: Color
stateOverlayHover: Color stateOverlayHover: Color
stateOverlayPressed: Color stateOverlayPressed: Color
} }
...@@ -306,6 +308,9 @@ export const colorsLight: Palette = { ...@@ -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);', '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: 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);', '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), stateOverlayHover: opacify(8, colors.gray300),
stateOverlayPressed: opacify(24, colors.gray200), stateOverlayPressed: opacify(24, colors.gray200),
} }
...@@ -368,6 +373,9 @@ export const colorsDark: Palette = { ...@@ -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);', 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);', 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), stateOverlayHover: opacify(8, colors.gray300),
stateOverlayPressed: opacify(24, colors.gray200), stateOverlayPressed: opacify(24, colors.gray200),
} }
src/theme/components.tsx
View file @ 5696c613
...@@ -468,3 +468,8 @@ export const Separator = styled.div` ...@@ -468,3 +468,8 @@ export const Separator = styled.div`
height: 1px; height: 1px;
background-color: ${({ theme }) => theme.backgroundOutline}; background-color: ${({ theme }) => theme.backgroundOutline};
` `
export const GlowEffect = styled.div`
border-radius: 32px;
box-shadow: ${({ theme }) => theme.networkDefaultShadow};
`
src/theme/index.tsx
View file @ 5696c613
...@@ -125,6 +125,8 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors { ...@@ -125,6 +125,8 @@ function uniswapThemeColors(darkMode: boolean): ThemeColors {
shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow, shallowShadow: darkMode ? colorsDark.shallowShadow : colorsLight.shallowShadow,
deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow, deepShadow: darkMode ? colorsDark.deepShadow : colorsLight.deepShadow,
networkDefaultShadow: darkMode ? colorsDark.networkDefaultShadow : colorsLight.networkDefaultShadow,
hoverState: opacify(24, ColorsPalette.blue200), hoverState: opacify(24, ColorsPalette.blue200),
hoverDefault: opacify(8, ColorsPalette.gray200), hoverDefault: opacify(8, ColorsPalette.gray200),
stateOverlayHover: darkMode ? colorsDark.stateOverlayHover : colorsLight.stateOverlayHover, stateOverlayHover: darkMode ? colorsDark.stateOverlayHover : colorsLight.stateOverlayHover,
......
src/theme/styled.d.ts
View file @ 5696c613
...@@ -57,6 +57,7 @@ export interface ThemeColors { ...@@ -57,6 +57,7 @@ export interface ThemeColors {
shallowShadow: Color shallowShadow: Color
deepShadow: Color deepShadow: Color
networkDefaultShadow: Color
hoverState: Color hoverState: Color
hoverDefault: Color hoverDefault: Color
stateOverlayHover: Color stateOverlayHover: Color
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment