diff --git a/packages/page-preimages/src/Preimages/Preimage.tsx b/packages/page-preimages/src/Preimages/Preimage.tsx index 032c4a4005..9c15d63f3e 100644 --- a/packages/page-preimages/src/Preimages/Preimage.tsx +++ b/packages/page-preimages/src/Preimages/Preimage.tsx @@ -21,21 +21,19 @@ function Preimage ({ className, value }: Props): React.ReactElement { const info = usePreimage(value); return ( - + - + {info?.bytes && formatNumber(info.bytes.length)} - - {info?.status?.type} + +
{info?.status?.type}
+ {info && } {info && info.count !== 0 && formatNumber(info.count)} - - {info && } - ); } diff --git a/packages/page-preimages/src/Preimages/index.tsx b/packages/page-preimages/src/Preimages/index.tsx index 7e8a406d6e..019cc93f1b 100644 --- a/packages/page-preimages/src/Preimages/index.tsx +++ b/packages/page-preimages/src/Preimages/index.tsx @@ -4,6 +4,7 @@ import type { SubmittableExtrinsicFunction } from '@polkadot/api/types'; import React, { useRef } from 'react'; +import styled from 'styled-components'; import { Button, Table } from '@polkadot/react-components'; @@ -26,10 +27,9 @@ function Hashes ({ className }: Props): React.ReactElement { const headerRef = useRef([ [t('preimages'), 'start', 2], [undefined, 'media--1300'], - [t('size')], - [t('status')], - [t('count'), 'media--1400'], - [] + [t('size'), 'media--1000'], + [t('status'), 'start media--1200'], + [t('count'), 'media--1400'] ]); return ( @@ -54,4 +54,10 @@ function Hashes ({ className }: Props): React.ReactElement { ); } -export default React.memo(Hashes); +export default React.memo(styled(Hashes)` + td.preimage-status { + div+.ui--Button { + margin-top: 0.25rem; + } + } +`);