status-im/nimbus-gui
2
0
Fork 0
mirror of https://github.com/status-im/nimbus-gui.git synced 2025-01-21 00:40:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(validator onboarding): style back button

Browse Source
This commit is contained in:
Hristo Nedelkov 2024-02-07 14:00:29 +02:00 committed by Emil Ivanichkov
parent d6daf9d84f
commit f542722604
1 changed files with 24 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx
View File

@ -9,16 +9,40 @@ type BackButtonProps = {
const BackButton = ({ prevPage }: BackButtonProps) => {
const [buttonState, setButtonState] = useState('enabled')
const buttonStyle = {
color:
buttonState === 'enabled'
? '09101C'
: buttonState == 'disabled'
? 'CED4DB'
: 'fff',
fill: buttonState === 'pressed' ? '2A4AF5' : '',
textColor: buttonState === 'disabled' ? 'CED4DB' : '09101C',
}
return (
<XStack
alignItems="center"
space="$3"
cursor={buttonState === 'pressed' ? 'pointer' : ''}
onClick={() => console.log('gosho')}
onMouseEnter={() => setButtonState('pressed')}
onMouseLeave={() => setButtonState('enabled')}
>
<Stack
style={{
border: `1px solid #${buttonStyle.color}`,
borderRadius: '8px',
padding: '10px',
backgroundColor: `#${buttonStyle.fill}`,
background: `#${buttonStyle.fill}`,
}}
>
<ArrowLeftIcon
size={16}
color={`#${buttonStyle.color}`}
></ArrowLeftIcon>
</Stack>
<Text size={15} color={`#${buttonStyle.textColor}`} weight={'regular'}>
{prevPage}
</Text>
</XStack>