diff --git a/src/components/auction/AuctionDetails/index.tsx b/src/components/auction/AuctionDetails/index.tsx index f25aea131..c4a6ff9ad 100644 --- a/src/components/auction/AuctionDetails/index.tsx +++ b/src/components/auction/AuctionDetails/index.tsx @@ -75,6 +75,7 @@ const CellPair = styled.div` ` const Cell = styled(KeyValue)` + height: 100%; .itemKey { color: ${({ theme }) => rgba(theme.text1, 0.9)}; font-size: 15px; @@ -92,12 +93,15 @@ const Cell = styled(KeyValue)` .itemValue { color: ${({ theme }) => theme.text1}; flex-direction: column; - flex-grow: 0; + flex-grow: 1; font-size: 18px; font-weight: 600; line-height: 1.2; margin-bottom: 0; } + @media (min-width: 1024px) { + height: auto; + } ` const BreakCSS = css` @@ -147,7 +151,9 @@ const TokenSymbol = styled.span` line-height: 1.4; margin-bottom: 0; justify-content: center; - white-space: nowrap; + white-space: normal; + flex-direction: column; + text-align: center; .tokenLogo { margin-top: -4px; @@ -156,6 +162,11 @@ const TokenSymbol = styled.span` & > * { margin-right: 0; } + @media (min-width: 768px) { + flex-direction: row; + white-space: nowrap; + text-align: left; + } ` const TokenText = styled.span` diff --git a/src/components/auctions/AllAuctions/index.tsx b/src/components/auctions/AllAuctions/index.tsx index 1d1556312..682bc9e9b 100644 --- a/src/components/auctions/AllAuctions/index.tsx +++ b/src/components/auctions/AllAuctions/index.tsx @@ -533,7 +533,6 @@ const AllAuctions = (props: Props) => { previousPage() sectionHead.current.scrollIntoView() } - return ( Auctions @@ -611,15 +610,20 @@ const AllAuctions = (props: Props) => { key={i} to={row.original['url'] ? row.original['url'] : '#'} > - {row.cells.map( - (cell, j) => + {row.cells.map((cell, j) => { + return ( cell.render('show') && ( - {cell.render('Cell')} + + {cell.column.Header === 'Selling' || cell.column.Header === 'Buying' + ? cell.value.slice(0, 7) + : cell.value} + {cell.render('Header')} - ), - )} + ) + ) + })} ) })} diff --git a/src/components/auctions/AuctionInfoCard/index.tsx b/src/components/auctions/AuctionInfoCard/index.tsx index 2253d80ba..732fe5692 100644 --- a/src/components/auctions/AuctionInfoCard/index.tsx +++ b/src/components/auctions/AuctionInfoCard/index.tsx @@ -49,7 +49,7 @@ const Tokens = styled.span` line-height: 1.2; margin: 0; text-transform: uppercase; - white-space: nowrap; + white-space: normal; ` const Badge = styled.span` @@ -213,7 +213,9 @@ const AuctionInfoCard: React.FC = (props) => { }, 1000) return () => clearInterval(interval) }, [endTimeTimestamp]) - + const sliceLabel = (label) => { + return label.slice(0, 7) + } return ( = (props) => { > - {auctionInfo.symbolAuctioningToken} / {auctionInfo.symbolBiddingToken} + {sliceLabel(auctionInfo.symbolAuctioningToken)} /  + {sliceLabel(auctionInfo.symbolBiddingToken)} {timeLeft && timeLeft > -1 ? formatSeconds(timeLeft) : '-'} @@ -244,13 +247,13 @@ const AuctionInfoCard: React.FC = (props) => { {abbreviation(auctionInfo.order.volume.toFixed(2)) + ` `} - {auctionInfo.symbolAuctioningToken} + {sliceLabel(auctionInfo.symbolAuctioningToken)} Current price:{' '} - {`${abbreviation(auctionInfo.currentClearingPrice.toString())} ${ - auctionInfo.symbolBiddingToken - } per ${auctionInfo.symbolAuctioningToken}`} + {`${abbreviation(auctionInfo.currentClearingPrice.toString())} ${sliceLabel( + auctionInfo.symbolBiddingToken, + )} per ${sliceLabel(auctionInfo.symbolAuctioningToken)}`} diff --git a/src/components/token/UnregisteredToken/index.tsx b/src/components/token/UnregisteredToken/index.tsx index 30accb709..0f5f0d9e8 100644 --- a/src/components/token/UnregisteredToken/index.tsx +++ b/src/components/token/UnregisteredToken/index.tsx @@ -47,7 +47,9 @@ export const UnregisteredToken: React.FC = (props) => { const { size, symbol, ...restProps } = props const timestamp = React.useMemo(() => Date.now(), []) const tooltipId = `tooltip_${symbol}_${size}_${timestamp}` - + const sliceLabel = (label) => { + return label.slice(0, 7) + } return ( = (props) => { {...restProps} > - {symbol} + {sliceLabel(symbol)}