status-im
/
nimbus-gui
mirror of https://github.com/status-im/nimbus-gui.git
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix: Make the Paired device card full width for mobile

This commit is contained in:
Hristo Nedelkov 2024-01-25 15:23:14 +02:00
parent 458b5ec1bc
commit 4ac624dd86
1 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/pages/ValidatorOnboarding/ValidatorSetup/ConsensusClient/PairedDeviceCard.tsx
View File

@ -1,8 +1,10 @@
import { XStack, YStack } from 'tamagui' import { XStack, YStack } from 'tamagui'
import { InfoBadgeIcon } from '@status-im/icons' import { InfoBadgeIcon } from '@status-im/icons'
import { Avatar, Text } from '@status-im/components' import { Avatar, Text } from '@status-im/components'
import { useWindowSize } from '../../../../hooks/useWindowSize'
const PairedDeviceCard = () => { const PairedDeviceCard = () => {
const windowSize = useWindowSize()
return ( return (
<XStack <XStack
space={'$7'} space={'$7'}
@ -10,11 +12,13 @@ const PairedDeviceCard = () => {
padding: '6px 12px', padding: '6px 12px',
border: '1px solid #DCE0E5', border: '1px solid #DCE0E5',
borderRadius: '10px', borderRadius: '10px',
marginBottom:'20px' marginBottom: '20px',
width: windowSize.width < 580 ? '100%' : 'auto',
}} }}
justifyContent="space-between"
alignItems={'center'} alignItems={'center'}
> >
<XStack space={'$3'} alignItems={'center'}> <XStack space={'$3'}>
<Avatar <Avatar
backgroundColor="pink" backgroundColor="pink"
type="icon" type="icon"