design request changes

Kwenta · Oct 9, 2023 · daceab6 · daceab6
1 parent 06a30a9
commit daceab6
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 135 deletions.
diff --git a/packages/app/src/pages/dashboard/history.tsx b/packages/app/src/pages/dashboard/history.tsx
@@ -70,7 +70,7 @@ const TitleContainer = styled.div`
 		margin: 15px 15px 0 15px;
 	`}
 	${media.lessThan('sm')`
-		margin: 130px 15px 0 15px;
+		margin: 15px 15px 0 15px;
 	`}
 `
 

diff --git a/packages/app/src/sections/futures/TraderHistory.tsx b/packages/app/src/sections/futures/TraderHistory.tsx
@@ -15,7 +15,6 @@ import TimeDisplay from 'sections/futures/Trades/TimeDisplay'
 import { selectQueryStatuses } from 'state/futures/selectors'
 import { useAppSelector } from 'state/hooks'
 import { FetchStatus } from 'state/types'
-import { ExternalLink } from 'styles/common'
 import media from 'styles/media'
 
 type PositionData = FuturesPositionHistory & {
@@ -67,117 +66,97 @@ const TraderHistory: FC<TraderHistoryProps> = memo(
 						columns={[
 							{
 								header: () => (
-									<TableTitle>
-										<TitleText onClick={resetSelection}>
-											{t('leaderboard.trader-history.table.back')}
-										</TitleText>
-										<TitleSeparator>&gt;</TitleSeparator>
-										<ExternalLink
-											href={`https://optimistic.etherscan.io/address/${trader}`}
-											hoverUnderline
-										>
-											{traderEns ?? trader}
-										</ExternalLink>
-									</TableTitle>
+									<TableHeader>{t('leaderboard.trader-history.table.timestamp')}</TableHeader>
 								),
-								accessorKey: 'title',
-								enableSorting: false,
-								columns: [
-									{
-										header: () => (
-											<TableHeader>{t('leaderboard.trader-history.table.timestamp')}</TableHeader>
-										),
-										accessorKey: 'openTimestamp',
-										cell: (cellProps) => {
-											return (
-												<StyledCell>
-													<TimeDisplay value={cellProps.row.original.openTimestamp} />
-												</StyledCell>
-											)
-										},
-										size: 100,
-									},
-									{
-										header: () => (
-											<TableHeader>{t('leaderboard.trader-history.table.market')}</TableHeader>
-										),
-										accessorKey: 'asset',
-										cell: (cellProps) => (
-											<CurrencyInfo>
-												<StyledCurrencyIcon currencyKey={cellProps.row.original.currencyIconKey} />
-												<StyledSubtitle>{cellProps.row.original.marketShortName}</StyledSubtitle>
-											</CurrencyInfo>
-										),
-										size: 150,
-									},
-									{
-										header: () => (
-											<TableHeader>{t('leaderboard.trader-history.table.status')}</TableHeader>
-										),
-										accessorKey: 'status',
-										cell: (cellProps) => {
-											return <Body color="primary">{cellProps.row.original.status}</Body>
-										},
-										size: 30,
-									},
-									{
-										header: () => (
-											<RightAlignedTableHeader>
-												{t('leaderboard.trader-history.table.total-trades')}
-											</RightAlignedTableHeader>
-										),
-										accessorKey: 'trades',
-										cell: (cellProps) => (
-											<RightAlignedContainer>{cellProps.getValue()}</RightAlignedContainer>
-										),
-										size: 130,
-									},
-									{
-										header: () => (
-											<RightAlignedTableHeader>
-												{t('leaderboard.trader-history.table.total-volume')}
-											</RightAlignedTableHeader>
-										),
-										accessorKey: 'totalVolume',
-										cell: (cellProps) => (
-											<RightAlignedContainer>
-												<Currency.Price price={cellProps.getValue()} />
-											</RightAlignedContainer>
-										),
-										size: 130,
-									},
-									{
-										header: () => (
-											<RightAlignedTableHeader>
-												{t('leaderboard.trader-history.table.total-pnl')}
-											</RightAlignedTableHeader>
-										),
-										accessorKey: 'pnl',
-										cell: (cellProps) => (
-											<RightAlignedContainer>
-												<Currency.Price price={cellProps.row.original.pnl} colored />
-												<StyledValue $value={cellProps.row.original.pnl}>
-													{cellProps.row.original.pnlPct}
-												</StyledValue>
-											</RightAlignedContainer>
-										),
-										size: 130,
-									},
-									{
-										header: () => (
-											<RightAlignedTableHeader>
-												{t('leaderboard.trader-history.table.funding')}
-											</RightAlignedTableHeader>
-										),
-										accessorKey: 'funding',
-										cell: (cellProps) => (
-											<RightAlignedContainer>
-												<Currency.Price price={cellProps.getValue()} colored />
-											</RightAlignedContainer>
-										),
-										size: 130,
-									},
-								],
+								accessorKey: 'openTimestamp',
+								cell: (cellProps) => {
+									return (
+										<StyledCell>
+											<TimeDisplay value={cellProps.row.original.openTimestamp} />
+										</StyledCell>
+									)
+								},
+								size: 100,
+							},
+							{
+								header: () => (
+									<TableHeader>{t('leaderboard.trader-history.table.market')}</TableHeader>
+								),
+								accessorKey: 'asset',
+								cell: (cellProps) => (
+									<CurrencyInfo>
+										<StyledCurrencyIcon currencyKey={cellProps.row.original.currencyIconKey} />
+										<StyledSubtitle>{cellProps.row.original.marketShortName}</StyledSubtitle>
+									</CurrencyInfo>
+								),
+								size: 150,
+							},
+							{
+								header: () => (
+									<TableHeader>{t('leaderboard.trader-history.table.status')}</TableHeader>
+								),
+								accessorKey: 'status',
+								cell: (cellProps) => {
+									return <Body color="primary">{cellProps.row.original.status}</Body>
+								},
+								size: 30,
+							},
+							{
+								header: () => (
+									<RightAlignedTableHeader>
+										{t('leaderboard.trader-history.table.total-trades')}
+									</RightAlignedTableHeader>
+								),
+								accessorKey: 'trades',
+								cell: (cellProps) => (
+									<RightAlignedContainer>{cellProps.getValue()}</RightAlignedContainer>
+								),
+								size: 130,
+							},
+							{
+								header: () => (
+									<RightAlignedTableHeader>
+										{t('leaderboard.trader-history.table.total-volume')}
+									</RightAlignedTableHeader>
+								),
+								accessorKey: 'totalVolume',
+								cell: (cellProps) => (
+									<RightAlignedContainer>
+										<Currency.Price price={cellProps.getValue()} />
+									</RightAlignedContainer>
+								),
+								size: 130,
+							},
+							{
+								header: () => (
+									<RightAlignedTableHeader>
+										{t('leaderboard.trader-history.table.total-pnl')}
+									</RightAlignedTableHeader>
+								),
+								accessorKey: 'pnl',
+								cell: (cellProps) => (
+									<RightAlignedContainer>
+										<Currency.Price price={cellProps.row.original.pnl} colored />
+										<StyledValue $value={cellProps.row.original.pnl}>
+											{cellProps.row.original.pnlPct}
+										</StyledValue>
+									</RightAlignedContainer>
+								),
+								size: 130,
+							},
+							{
+								header: () => (
+									<RightAlignedTableHeader>
+										{t('leaderboard.trader-history.table.funding')}
+									</RightAlignedTableHeader>
+								),
+								accessorKey: 'funding',
+								cell: (cellProps) => (
+									<RightAlignedContainer>
+										<Currency.Price price={cellProps.getValue()} colored />
+									</RightAlignedContainer>
+								),
+								size: 130,
 							},
 						]}
 						noResultsMessage={
@@ -251,7 +230,7 @@ const TraderHistory: FC<TraderHistoryProps> = memo(
 								cell: (cellProps) => (
 									<>
 										<TableHeader>{t('leaderboard.trader-history.mobile-table.pnl')}</TableHeader>
-										<FlexDivCol>
+										<FlexDivCol style={{ textAlign: 'right' }}>
 											<Currency.Price price={cellProps.row.original.pnl} colored />
 											<StyledValue $value={cellProps.row.original.pnl}>
 												{cellProps.row.original.pnlPct}
@@ -302,7 +281,7 @@ const StyledTable = styled(Table)<{ compact?: boolean; height?: number }>`
 	`}
 
 	${media.lessThan('md')`
-		margin-bottom: 150px;
+		margin-bottom: 15px;
 	`}
 ` as typeof Table
 

diff --git a/packages/app/src/sections/futures/Trades/Trades.tsx b/packages/app/src/sections/futures/Trades/Trades.tsx
@@ -1,9 +1,8 @@
 import { formatDollars, formatNumber } from '@kwenta/sdk/utils'
-import { wei, WeiSource } from '@synthetixio/wei'
 import { useRouter } from 'next/router'
 import { FC, memo, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 
 import ColoredPrice from 'components/ColoredPrice'
 import Currency from 'components/Currency'
@@ -283,9 +282,6 @@ const Trades: FC<TradesProps> = memo(({ rounded = false, noBottom = true }) => {
 									<TableHeader>{t('futures.market.user.trades.mobile-table.pnl')}</TableHeader>
 									<FlexDivCol style={{ textAlign: 'right' }}>
 										<Currency.Price price={cellProps.row.original.pnl} colored />
-										<StyledValue $value={cellProps.row.original.pnlPct}>
-											{formatNumber(cellProps.row.original.pnlPct)}%
-										</StyledValue>
 									</FlexDivCol>
 								</>
 							),
@@ -360,19 +356,3 @@ const StyledSubtitle = styled(Body)`
 	color: ${(props) => props.theme.colors.selectedTheme.button.text.primary};
 	text-transform: capitalize;
 `
-
-const valueColor = css<{ $value: WeiSource }>`
-	color: ${(props) =>
-		wei(props.$value).gt(0)
-			? props.theme.colors.selectedTheme.green
-			: wei(props.$value).lt(0)
-			? props.theme.colors.selectedTheme.red
-			: props.theme.colors.selectedTheme.button.text.primary};
-`
-
-const StyledValue = styled.div<{ $value: WeiSource }>`
-	font-family: ${(props) => props.theme.fonts.mono};
-	font-size: 13px;
-	margin: 0;
-	${valueColor}
-`