feat: change structure for continue btn and info box

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -1,4 +1,4 @@
-import { Stack, YStack } from 'tamagui'
+import { Stack, XStack } from 'tamagui'
 import { Button, InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 import { useSelector } from 'react-redux'
@@ -16,6 +16,7 @@ const ContinueButton = ({ continueHandler, activeStep, subStepValidatorSetup }:
   const { isCopyPastedPhrase, mnemonic, validWords, isConfirmPhraseStage } = useSelector(
     (state: RootState) => state.keyGeneration,
   )
+  const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
 
   const isDisabled = () => {
     if (
@@ -27,39 +28,37 @@ const ContinueButton = ({ continueHandler, activeStep, subStepValidatorSetup }:
     return false
   }
 
-  const isActivationValScreen = activeStep === 3 && subStepValidatorSetup === 3
-
   return (
-    <YStack style={{ width: '100%', alignItems: 'center', zIndex: 999, marginTop: '30px' }}>
-      <Stack style={{ width: '100%' }}>
-        {isCopyPastedPhrase && (
+    <XStack
+      style={{
+        width: '100%',
+        justifyContent: isActivationValScreen ? 'space-between' : 'end',
+        alignItems: 'center',
+        zIndex: 1000,
+        marginTop: '10px',
+      }}
+    >
+      {isCopyPastedPhrase && (
+        <Stack style={{ width: '100%', position: 'absolute' }}>
           <InformationBox
             message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
             variant="error"
             icon={<CloseCircleIcon size={20} />}
           />
-        )}
-        {isActivationValScreen && (
-          <LinkWithArrow
-            text="Skip to Dashboard"
-            to="/"
-            arrowRight={true}
-            style={{ fontWeight: 'bold', zIndex: 1000 }}
-          />
-        )}
-      </Stack>
-      <Stack
-        style={{
-          width: '100%',
-          zIndex: 999,
-          alignItems: 'end',
-        }}
-      >
-        <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
-          {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
-        </Button>
-      </Stack>
-    </YStack>
+        </Stack>
+      )}
+      {isActivationValScreen && (
+        <LinkWithArrow
+          text="Skip to Dashboard"
+          to="/"
+          arrowRight={true}
+          style={{ fontWeight: 'bold', zIndex: 999 }}
+        />
+      )}
+      <Button onPress={continueHandler} size={40} disabled={isDisabled()}>
+        {activeStep < 5 ? 'Continue' : 'Continue to Dashboard'}
+      </Button>
+    </XStack>
   )
 }