From f542722604ffb71a70eef22e9a4a8fb9e53467af Mon Sep 17 00:00:00 2001
From: Hristo Nedelkov <hristo.nedelkow@gmail.com>
Date: Wed, 7 Feb 2024 14:00:29 +0200
Subject: [PATCH] feat(validator onboarding): style back button

---
 .../ValidatorSetup/BackButton.tsx             | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx b/src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx
index 3e345076..f1458f1d 100644
--- a/src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx
+++ b/src/pages/ValidatorOnboarding/ValidatorSetup/BackButton.tsx
@@ -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>