status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-02-28 02:50:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix ExecCLientCards to be responsive

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-01-09 14:48:01 +02:00
parent e3ce07001d
commit 14dc82ebb9
5 changed files with 21 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/General/Icon.tsx
View File

@ -1,19 +1,20 @@
import { Image } from '@status-im/components' import { Image } from 'tamagui'
export type IconProps = { export type IconProps = {
src: string src: string
width?: number width?: string
height?: number height?: string
} }
const Icon = ({ src, width = 16, height = 16 }: IconProps) => { const Icon = ({ src, width = '16px', height = '16px' }: IconProps) => {
return ( return (
<Image <Image
src={src} src={src}
source={{ uri: src }} source={{ uri: src }}
width={width} width={'70%'}
height={height} height={100}
style={{ backgroundColor: 'transparent' }} style={{ backgroundColor: 'transparent' }}
minWidth={'110px'}
/> />
) )
} }

3
src/pages/ValidatorOnboarding/FormStepper/FormStepper.tsx
View File

@ -49,6 +49,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
fontSize: '14px', fontSize: '14px',
zIndex: 1, zIndex: 1,
width: '100%', width: '100%',
height: 'fit-content',
padding: 0, padding: 0,
marginBottom: '3rem', marginBottom: '3rem',
overflow: 'hidden', overflow: 'hidden',
@ -59,7 +60,7 @@ const FormStepper = ({ activeStep, windowWidth }: FormStepperProps) => {
return ( return (
<Step <Step
key={originalIndex} key={originalIndex}
label={step.label} label={`${originalIndex + 1}. ${step.label}`}
className="custom-step" className="custom-step"
onClick={() => changeStepOnClickHandler(originalIndex)} onClick={() => changeStepOnClickHandler(originalIndex)}
completed={activeStep > originalIndex - 1} completed={activeStep > originalIndex - 1}

2
src/pages/ValidatorOnboarding/Overview/Overview.tsx
View File

@ -15,7 +15,7 @@ const Overview = () => {
> >
<YStack> <YStack>
<YStack space={'$5'} width="150%"> <YStack space={'$5'} width="150%">
<Text size={27} weight={'semibold'}> <Text size={27} weight={'semibold'} marginTop={'2rem'}>
Overview Overview
</Text> </Text>
<Text size={19}> <Text size={19}>

3
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCard.tsx
View File

@ -30,6 +30,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
padding: '12px 16px', padding: '12px 16px',
width: '19%', width: '19%',
cursor: 'pointer', cursor: 'pointer',
minWidth: '150px',
}} }}
space={'$8'} space={'$8'}
onClick={() => { onClick={() => {
@ -58,7 +59,7 @@ const ExecClientCard = ({ name, icon, isComingSoon }: ExecClientCardProps) => {
</XStack> </XStack>
)} )}
</Stack> </Stack>
<Icon src={icon} width={100} height={100} /> <Icon src={icon} width={'100%'} height={'full'} />
</YStack> </YStack>
) )
} }

11
src/pages/ValidatorOnboarding/ValidatorSetup/ValidatorSetup/ExecClientCards.tsx
View File

@ -10,11 +10,18 @@ const ExecClientCards = () => {
<Stack style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}> <Stack style={{ marginTop: '15px', marginLeft: 0, marginBottom: '15px' }}>
<Text size={27}>Select Execution client</Text> <Text size={27}>Select Execution client</Text>
</Stack> </Stack>
<XStack justifyContent={'space-between'}> <Stack
style={{
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
gap: '8px',
justifyContent: 'space-between',
}}
>
{Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => ( {Object.entries(DOCUMENTATIONS).map(([name, { icon }], index) => (
<ExecClientCard key={index} name={name} icon={icon} /> <ExecClientCard key={index} name={name} icon={icon} />
))} ))}
</XStack> </Stack>
</YStack> </YStack>
) )
} }