Commit 4caa4849 authored by isstuev's avatar isstuev

some fixes for mobile layout

parent 30f609ca
import { chakra, Icon, Link, Tooltip } from '@chakra-ui/react'; import { chakra, Icon, Link, Tooltip, Hide } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import svgFileIcon from 'icons/files/csv.svg'; import svgFileIcon from 'icons/files/csv.svg';
...@@ -23,7 +23,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => { ...@@ -23,7 +23,7 @@ const AddressCsvExportLink = ({ className, address, type }: Props) => {
href={ link('csv_export', undefined, { type, address }) } href={ link('csv_export', undefined, { type, address }) }
> >
<Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/> <Icon as={ svgFileIcon } boxSize={{ base: '30px', lg: 6 }}/>
{ !isMobile && <chakra.span ml={ 1 }>Download CSV</chakra.span> } <Hide ssr={ false } below="lg"><chakra.span ml={ 1 }>Download CSV</chakra.span></Hide>
</Link> </Link>
</Tooltip> </Tooltip>
); );
......
...@@ -14,6 +14,7 @@ const AddressContractIcon = ({ className }: Props) => { ...@@ -14,6 +14,7 @@ const AddressContractIcon = ({ className }: Props) => {
<Box <Box
className={ className } className={ className }
width="24px" width="24px"
minWidth="24px"
height="24px" height="24px"
borderRadius="12px" borderRadius="12px"
backgroundColor={ bgColor } backgroundColor={ bgColor }
......
import { test, expect, devices } from '@playwright/experimental-ct-react';
import React from 'react';
import * as txMock from 'mocks/txs/tx';
import TestApp from 'playwright/TestApp';
import TxsListItem from './TxsListItem';
test.use({ viewport: devices['iPhone 13 Pro'].viewport });
test('base view +@dark-mode', async({ mount }) => {
const component = await mount(
<TestApp>
<TxsListItem tx={ txMock.base } showBlockInfo/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('with base address', async({ mount }) => {
const component = await mount(
<TestApp>
<TxsListItem tx={ txMock.base } showBlockInfo currentAddress={ txMock.base.from.hash }/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
...@@ -92,7 +92,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: ...@@ -92,7 +92,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
</Box> </Box>
) } ) }
<Flex alignItems="center" height={ 6 } mt={ 6 }> <Flex alignItems="center" height={ 6 } mt={ 6 }>
<Address width={ `calc((100%-${ currentAddress ? TAG_WIDTH : ARROW_WIDTH + 8 }px)/2)` }> <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
<AddressIcon address={ tx.from }/> <AddressIcon address={ tx.from }/>
<AddressLink <AddressLink
type="address" type="address"
...@@ -104,7 +104,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: ...@@ -104,7 +104,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
/> />
</Address> </Address>
{ (isIn || isOut) ? { (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 }/> : ( <InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 }/> : (
<Icon <Icon
as={ rightArrowIcon } as={ rightArrowIcon }
boxSize={ 6 } boxSize={ 6 }
...@@ -112,7 +112,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }: ...@@ -112,7 +112,7 @@ const TxsListItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement }:
color="gray.500" color="gray.500"
/> />
) } ) }
<Address width="calc((100%-40px)/2)"> <Address maxWidth={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }>
<AddressIcon address={ dataTo }/> <AddressIcon address={ dataTo }/>
<AddressLink <AddressLink
type="address" type="address"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment