Added some light theme styling

This commit is contained in:
sam-keen 2022-03-30 08:56:58 +01:00
parent 95e846d6af
commit 75017feada
3 changed files with 13 additions and 7 deletions

View File

@ -40,7 +40,7 @@ export const TableHeader = ({
className, className,
...props ...props
}: TableHeaderProps) => { }: TableHeaderProps) => {
const cellClasses = classnames(className, { const cellClasses = classnames(className, 'pl-4 dark:pl-0', {
'text-left font-normal': props?.scope === 'row', 'text-left font-normal': props?.scope === 'row',
}); });
return ( return (
@ -57,8 +57,10 @@ export const TableRow = ({
...props ...props
}: TableRowProps) => { }: TableRowProps) => {
const cellClasses = classnames(className, { const cellClasses = classnames(className, {
'border-b border-white-40': modifier === 'bordered', 'border-b bg-black-40 border-black-40 dark:border-white-40':
'bg-white-25 border-b-4 border-b-black': modifier === 'background', modifier === 'bordered',
'border-b-4 bg-black-40 border-b-white dark:bg-white-25 dark:border-b-black':
modifier === 'background',
}); });
return ( return (
<tr className={cellClasses} {...props}> <tr className={cellClasses} {...props}>

View File

@ -28,7 +28,7 @@ describe('Table row', () => {
</Table> </Table>
); );
expect(screen.getByTestId('modifier-test')).toHaveClass('border-white-40'); expect(screen.getByTestId('modifier-test')).toHaveClass('border-b');
}); });
}); });

View File

@ -44,8 +44,12 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
<tbody> <tbody>
{decodedBlockData.map(({ TxHash, PubKey, Type }) => { {decodedBlockData.map(({ TxHash, PubKey, Type }) => {
return ( return (
<tr key={TxHash} data-testid="transaction-row"> <tr
<td> key={TxHash}
data-testid="transaction-row"
className="bg-black-40 dark:bg-transparent"
>
<td className="pl-4 dark:pl-0">
<Link to={`/${Routes.TX}/${TxHash}`}> <Link to={`/${Routes.TX}/${TxHash}`}>
<TruncateInline <TruncateInline
text={TxHash} text={TxHash}
@ -66,7 +70,7 @@ export const TxsPerBlock = ({ blockHeight }: TxsPerBlockProps) => {
</Link> </Link>
</td> </td>
<td> <td>
<TxOrderType className="mb-4" orderType={Type} /> <TxOrderType className="my-2" orderType={Type} />
</td> </td>
</tr> </tr>
); );