ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: move favorites to right and fix header highlight (#4402)

Browse Source 
* change favorite style

* more

* fix header

* fix styling

* small fix
This commit is contained in:
Kaylee George 2022-08-18 11:14:43 -07:00 committed by GitHub
parent 801ddc0886
commit c5319b6bea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 9 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Tokens/TokenTable/TokenRow.tsx
View File

@ -48,7 +48,7 @@ const StyledTokenRow = styled.div`
width: 100%; width: 100%;
height: 60px; height: 60px;
display: grid; display: grid;
grid-template-columns: 1.2fr 1fr 7fr 4fr 4fr 4fr 4fr 5fr; grid-template-columns: 1fr 7fr 4fr 4fr 4fr 4fr 5fr 1.2fr;
font-size: 15px; font-size: 15px;
line-height: 24px; line-height: 24px;
@ -61,26 +61,24 @@ const StyledTokenRow = styled.div`
} }
@media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
grid-template-columns: 1.7fr 1fr 6.5fr 4.5fr 4.5fr 4.5fr 4.5fr; grid-template-columns: 1fr 6.5fr 4.5fr 4.5fr 4.5fr 4.5fr 1.7fr;
width: fit-content; width: fit-content;
padding-right: 24px;
} }
@media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${LARGE_MEDIA_BREAKPOINT}) {
grid-template-columns: 1.7fr 1fr 7.5fr 4.5fr 4.5fr 4.5fr; grid-template-columns: 1fr 7.5fr 4.5fr 4.5fr 4.5fr 1.7fr;
width: fit-content; width: fit-content;
} }
@media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${MEDIUM_MEDIA_BREAKPOINT}) {
grid-template-columns: 1.2fr 1fr 10fr 5fr 3fr; grid-template-columns: 1fr 10fr 5fr 5fr 1.2fr;
width: fit-content; width: fit-content;
} }
@media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
grid-template-columns: 4fr 2fr; grid-template-columns: 2fr 3fr;
min-width: unset; min-width: unset;
border-bottom: 0.5px solid ${({ theme }) => theme.backgroundModule}; border-bottom: 0.5px solid ${({ theme }) => theme.backgroundModule};
padding: 0px 12px;
:last-of-type { :last-of-type {
border-bottom: none; border-bottom: none;
@ -129,16 +127,11 @@ const StyledHeaderRow = styled(StyledTokenRow)`
width: 100%; width: 100%;
&:hover { &:hover {
background-color: 'transparent'; background-color: transparent;
}
@media only screen and (max-width: ${MAX_WIDTH_MEDIA_BREAKPOINT}) {
padding-right: 24px;
} }
@media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
justify-content: space-between; justify-content: space-between;
padding: 0px 12px;
} }
` `
const ListNumberCell = styled(Cell)` const ListNumberCell = styled(Cell)`
@ -175,6 +168,7 @@ const PriceCell = styled(DataCell)`
padding-right: 8px; padding-right: 8px;
` `
const PercentChangeCell = styled(DataCell)` const PercentChangeCell = styled(DataCell)`
padding-right: 8px;
@media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) { @media only screen and (max-width: ${SMALL_MEDIA_BREAKPOINT}) {
display: none; display: none;
} }
@ -371,7 +365,6 @@ export function TokenRow({
}) { }) {
const rowCells = ( const rowCells = (
<> <>
<FavoriteCell>{favorited}</FavoriteCell>
<ListNumberCell>{listNumber}</ListNumberCell> <ListNumberCell>{listNumber}</ListNumberCell>
<NameCell>{tokenInfo}</NameCell> <NameCell>{tokenInfo}</NameCell>
<PriceCell sortable={header}>{price}</PriceCell> <PriceCell sortable={header}>{price}</PriceCell>
@ -379,6 +372,7 @@ export function TokenRow({
<MarketCapCell sortable={header}>{marketCap}</MarketCapCell> <MarketCapCell sortable={header}>{marketCap}</MarketCapCell>
<VolumeCell sortable={header}>{volume}</VolumeCell> <VolumeCell sortable={header}>{volume}</VolumeCell>
<SparkLineCell>{sparkLine}</SparkLineCell> <SparkLineCell>{sparkLine}</SparkLineCell>
<FavoriteCell>{favorited}</FavoriteCell>
</> </>
) )
if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow> if (header) return <StyledHeaderRow>{rowCells}</StyledHeaderRow>
@ -495,7 +489,7 @@ export default function LoadedRow({
toggleFavorite() toggleFavorite()
}} }}
> >
<Heart size={24} color={heartColor} fill={heartColor} /> <Heart size={18} color={heartColor} fill={heartColor} />
</ClickFavorited> </ClickFavorited>
} }
listNumber={tokenListIndex + 1} listNumber={tokenListIndex + 1}