From d7badb78e07bbb2d926274564c65bb057066e2d9 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 26 Jan 2024 09:58:38 +0200
Subject: [PATCH] feat: move pasted notification above the btn for small screen

---
 .../ValidatorOnboarding/ContinueButton.tsx    | 79 ++++++++++++-------
 1 file changed, 52 insertions(+), 27 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/ContinueButton.tsx b/src/pages/ValidatorOnboarding/ContinueButton.tsx
index f865972a..b0f8fee9 100644
--- a/src/pages/ValidatorOnboarding/ContinueButton.tsx
+++ b/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
-      style={{
-        width: '100%',
-        justifyContent: isActivationValScreen
-          ? 'space-between'
-          : windowSize.width < 560
-          ? 'start'
-          : 'end',
-        alignItems: 'center',
-        zIndex: 1000,
-        marginTop: '21px',
-      }}
-    >
+    <YStack style={{ width: '100%' }}>
+      {windowSize.width < 1155 && (
+        <CopyPastedNotification isSmallScreen={true} />
+      )}
+      <XStack
+        style={{
+          width: '100%',
+          justifyContent: isActivationValScreen ? 'space-between' : 'end',
+          alignItems: 'center',
+          zIndex: 1000,
+          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>
+    </>
   )
 }