feat: move pasted notification above the btn for small screen

src/pages/ValidatorOnboarding/ContinueButton.tsx

@@ -1,4 +1,4 @@
-import { Stack, XStack } from 'tamagui'
+import { Stack, XStack, YStack } from 'tamagui'
 import { Button, InformationBox } from '@status-im/components'
 import { CloseCircleIcon } from '@status-im/icons'
 
@@ -138,21 +138,57 @@ const ContinueButton = () => {
   }
 
   return (
-    <XStack
+    <YStack style={{ width: '100%' }}>
-      style={{
+      {windowSize.width < 1155 && (
-        width: '100%',
+        <CopyPastedNotification isSmallScreen={true} />
-        justifyContent: isActivationValScreen
+      )}
-          ? 'space-between'
+      <XStack
-          : windowSize.width < 560
+        style={{
-          ? 'start'
+          width: '100%',
-          : 'end',
+          justifyContent: isActivationValScreen ? 'space-between' : 'end',
-        alignItems: 'center',
+          alignItems: 'center',
-        zIndex: 1000,
+          zIndex: 1000,
-        marginTop: '21px',
+          marginTop: '12px',
-      }}
+        }}
-    >
+      >
+        {windowSize.width >= 1155 && <CopyPastedNotification />}
+        {isActivationValScreen && (
+          <LinkWithArrow
+            text="Skip to Dashboard"
+            to="/dashboard"
+            arrowRight={true}
+            style={{ fontWeight: 'bold', zIndex: 999 }}
+          />
+        )}
+        <Button onPress={continueHandler} size={40} disabled={isDisabled}>
+          {activeStep < 6 ? 'Continue' : 'Continue to Dashboard'}
+        </Button>
+      </XStack>
+    </YStack>
+  )
+}
+
+type CopyPastedNotificationProps = {
+  isSmallScreen?: boolean
+}
+
+const CopyPastedNotification = ({
+  isSmallScreen,
+}: CopyPastedNotificationProps) => {
+  const isCopyPastedPhrase = useSelector(
+    (state: RootState) => state.keyGeneration.isCopyPastedPhrase,
+  )
+
+  return (
+    <>
       {isCopyPastedPhrase && (
-        <Stack style={{ width: '100%', position: 'absolute' }}>
+        <Stack
+          style={{
+            width: '100%',
+            position: isSmallScreen ? 'static' : 'absolute',
+            marginTop: isSmallScreen ? '12px' : '0',
+          }}
+        >
           <InformationBox
             message="You have copy and pasted the entire Recovery Phrase. Please ensure you have secured it appropriately prior to continuing."
             variant="error"
@@ -160,18 +196,7 @@ const ContinueButton = () => {
           />
         </Stack>
       )}
-      {isActivationValScreen && (
+    </>
-        <LinkWithArrow
-          text="Skip to Dashboard"
-          to="/dashboard"
-          arrowRight={true}
-          style={{ fontWeight: 'bold', zIndex: 999 }}
-        />
-      )}
-      <Button onPress={continueHandler} size={40} disabled={isDisabled}>
-        {activeStep < 9 ? 'Continue' : 'Continue to Dashboard'}
-      </Button>
-    </XStack>
   )
 }