style: fix ClickableColumnHeader text style

AstraProtocol · Aug 3, 2023 · 1aa76dc · 1aa76dc
1 parent 1f5f663
commit 1aa76dc
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 45 deletions.
diff --git a/src/views/Info/components/InfoTables/PoolsTable.tsx b/src/views/Info/components/InfoTables/PoolsTable.tsx
@@ -154,47 +154,32 @@ const PoolTable: React.FC<React.PropsWithChildren<PoolTableProps>> = ({ poolData
 					{t('Pair')}
 				</span>
 				<ClickableColumnHeader
-					color="secondary"
-					fontSize="12px"
-					bold
+					className="text text-bold text-xs secondary-color-normal text-uppercase"
 					onClick={() => handleSort(SORT_FIELD.volumeUSD)}
-					textTransform="uppercase"
 				>
 					{t('Volume 24H')} {arrow(SORT_FIELD.volumeUSD)}
 				</ClickableColumnHeader>
 				<ClickableColumnHeader
-					color="secondary"
-					fontSize="12px"
-					bold
+					className="text text-bold text-xs secondary-color-normal text-uppercase"
 					onClick={() => handleSort(SORT_FIELD.volumeUSDWeek)}
-					textTransform="uppercase"
 				>
 					{t('Volume 7D')} {arrow(SORT_FIELD.volumeUSDWeek)}
 				</ClickableColumnHeader>
 				<ClickableColumnHeader
-					color="secondary"
-					fontSize="12px"
-					bold
+					className="text text-bold text-xs secondary-color-normal text-uppercase"
 					onClick={() => handleSort(SORT_FIELD.lpFees24h)}
-					textTransform="uppercase"
 				>
 					{t('LP reward fees 24H')} {arrow(SORT_FIELD.lpFees24h)}
 				</ClickableColumnHeader>
 				<ClickableColumnHeader
-					color="secondary"
-					fontSize="12px"
-					bold
+					className="text text-bold text-xs secondary-color-normal text-uppercase"
 					onClick={() => handleSort(SORT_FIELD.lpApr7d)}
-					textTransform="uppercase"
 				>
 					{t('LP reward APR')} {arrow(SORT_FIELD.lpApr7d)}
 				</ClickableColumnHeader>
 				<ClickableColumnHeader
-					color="secondary"
-					fontSize="12px"
-					bold
+					className="text text-bold text-xs secondary-color-normal text-uppercase"
 					onClick={() => handleSort(SORT_FIELD.liquidityUSD)}
-					textTransform="uppercase"
 				>
 					{t('Liquidity')} {arrow(SORT_FIELD.liquidityUSD)}
 				</ClickableColumnHeader>

diff --git a/src/views/Info/components/InfoTables/TransactionsTable.tsx b/src/views/Info/components/InfoTables/TransactionsTable.tsx
@@ -218,47 +218,32 @@ const TransactionTable: React.FC<
 				<ResponsiveGrid>
 					<span className="text text-xs text-bold text-uppercase secondary-color-normal">{t('Action')}</span>
 					<ClickableColumnHeader
-						color="secondary"
-						fontSize="12px"
-						bold
+						className="text text-bold text-xs secondary-color-normal text-uppercase"
 						onClick={() => handleSort(SORT_FIELD.amountUSD)}
-						textTransform="uppercase"
 					>
 						{t('Total Value')} {arrow(SORT_FIELD.amountUSD)}
 					</ClickableColumnHeader>
 					<ClickableColumnHeader
-						color="secondary"
-						fontSize="12px"
-						bold
+						className="text text-bold text-xs secondary-color-normal text-uppercase"
 						onClick={() => handleSort(SORT_FIELD.amountToken0)}
-						textTransform="uppercase"
 					>
 						{t('Token Amount')} {arrow(SORT_FIELD.amountToken0)}
 					</ClickableColumnHeader>
 					<ClickableColumnHeader
-						color="secondary"
-						fontSize="12px"
-						bold
+						className="text text-bold text-xs secondary-color-normal text-uppercase"
 						onClick={() => handleSort(SORT_FIELD.amountToken1)}
-						textTransform="uppercase"
 					>
 						{t('Token Amount')} {arrow(SORT_FIELD.amountToken1)}
 					</ClickableColumnHeader>
 					<ClickableColumnHeader
-						color="secondary"
-						fontSize="12px"
-						bold
+						className="text text-bold text-xs secondary-color-normal text-uppercase"
 						onClick={() => handleSort(SORT_FIELD.sender)}
-						textTransform="uppercase"
 					>
 						{t('Account')} {arrow(SORT_FIELD.sender)}
 					</ClickableColumnHeader>
 					<ClickableColumnHeader
-						color="secondary"
-						fontSize="12px"
-						bold
+						className="text text-bold text-xs secondary-color-normal text-uppercase"
 						onClick={() => handleSort(SORT_FIELD.timestamp)}
-						textTransform="uppercase"
 					>
 						{t('Time')} {arrow(SORT_FIELD.timestamp)}
 					</ClickableColumnHeader>

diff --git a/src/views/Info/components/InfoTables/shared.tsx b/src/views/Info/components/InfoTables/shared.tsx
@@ -1,28 +1,32 @@
 import clsx from 'clsx'
 import styles from './styles.module.scss'
+import { HTMLAttributes } from 'react'
 
-export const ClickableColumnHeader = ({ children, ...props }) => (
+interface SpanProps extends HTMLAttributes<HTMLSpanElement> {}
+interface DivProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const ClickableColumnHeader = ({ children, ...props }: SpanProps) => (
 	<span {...props} className={clsx(styles.clickableColumnHeader, props.className)}>
 		{children}
 	</span>
 )
 
-export const TableWrapper = ({ children, ...props }) => (
+export const TableWrapper = ({ children, ...props }: DivProps) => (
 	<div {...props} className={clsx(styles.tableWrapper, 'flex', props.className)}>
 		{children}
 	</div>
 )
 
-export const PageButtons = ({ children, ...props }) => (
+export const PageButtons = ({ children, ...props }: DivProps) => (
 	<div {...props} className={clsx(styles.pageButtons, props.className)}>
 		{children}
 	</div>
 )
 
-export const Arrow = ({ children, ...props }) => (
+export const Arrow = ({ children, ...props }: DivProps) => (
 	<div {...props} className={clsx(styles.arrow, props.className)}>
 		{children}
 	</div>
 )
 
-export const Break = ({ ...props }) => <div {...props} className={clsx(styles.break, props.className)} />
+export const Break = ({ ...props }: DivProps) => <div {...props} className={clsx(styles.break, props.className)} />