From 97c0b76acd7bacdf62c209007df8287124e9a9c3 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 19:39:28 +0200
Subject: [PATCH] feat: move confirm recovery phrase into css module

---
 .../ConfirmRecoveryPhrase.tsx                   | 17 +++++------------
 .../KeyGeneration/index.module.css              |  8 ++++++++
 2 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
index 2597f468..abc10fe7 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/ConfirmRecoveryPhrase/ConfirmRecoveryPhrase.tsx
@@ -1,10 +1,11 @@
-import { Stack, YStack } from 'tamagui'
+import { YStack } from 'tamagui'
 import { Text } from '@status-im/components'
+import { useSelector } from 'react-redux'
 
 import AutocompleteInput from './AutocompleteInput'
 import KeyGenerationTitle from '../KeyGenerationTitle'
-import { useSelector } from 'react-redux'
 import { RootState } from '../../../../redux/store'
+import styles from '../index.module.css'
 
 const ConfirmRecoveryPhrase = () => {
   const { validWords } = useSelector((state: RootState) => state.keyGeneration)
@@ -13,19 +14,11 @@ const ConfirmRecoveryPhrase = () => {
     <YStack space={'$3'} style={{ width: '100%', marginTop: '20px' }}>
       <KeyGenerationTitle />
       <Text size={19}>Confirm Recovery Phrase</Text>
-      <Stack
-        style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(4, 1fr)',
-          gap: '20px 40px',
-          width: '72%',
-          marginBottom: '10px',
-        }}
-      >
+      <div className={styles['confirm-recovery-phrase']}>
         {validWords.map((_, index) => (
           <AutocompleteInput key={index} index={index} />
         ))}
-      </Stack>
+      </div>
     </YStack>
   )
 }
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index dde489e8..3019ce80 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -27,6 +27,14 @@
   grid-template-columns: repeat(6, 1fr);
 }
 
+.confirm-recovery-phrase {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px 40px;
+  width: 72%;
+  margin-bottom: 10px;
+}
+
 @media (max-width: 630px) {
   .recovery-mechanism-container > div {
     min-width: 40%;