feat: move confirm recovery phrase into css module

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>
   )
 }

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%;