From 3585ea680419aa1525bfe83823f8d2db081fa224 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Fri, 12 Jan 2024 09:55:17 +0200
Subject: [PATCH] feat: move style for recovery phrase into css module

---
 .../KeyGeneration/RecoveryPhrase.tsx                  | 11 ++++-------
 .../KeyGeneration/index.module.css                    |  8 ++++++++
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
index 8fe3a5f3..a84e4131 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/RecoveryPhrase.tsx
@@ -8,6 +8,7 @@ import wordlist from 'web-bip39/wordlists/english'
 
 import { RootState } from '../../../redux/store'
 import { setGeneratedMnemonic } from '../../../redux/ValidatorOnboarding/KeyGeneration/slice'
+import styles from './index.module.css'
 
 type RecoveryPhraseProps = {
   isKeystoreFiles: boolean
@@ -54,15 +55,11 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
         }}
         onClick={copyRecoveryPhraseHandler}
       >
-        <Stack
+        <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(6, 1fr)',
-            gap: '5px 3px',
-            width: '100%',
             filter: `blur(${isReveal ? '0px' : '4px'})`,
-            padding: '28px 0px 0px 18px',
           }}
+          className={styles['recovery-phrase']}
         >
           {generatedMnemonic.map((word, index) => (
             <XStack style={{ width: '100%' }}>
@@ -76,7 +73,7 @@ const RecoveryPhrase = ({ isKeystoreFiles }: RecoveryPhraseProps) => {
               </Text>
             </XStack>
           ))}
-        </Stack>
+        </div>
         {isCopied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}
       </YStack>
       <Stack style={{ width: 'fit-content', marginBottom: '12px' }}>
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
index dd1bb365..d8da2861 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/index.module.css
@@ -19,6 +19,14 @@
   gap: 8px;
 }
 
+.recovery-phrase {
+  display: grid;
+  gap: 5px 3px;
+  width: 100%;
+  padding: 28px 0px 0px 18px;
+  grid-template-columns: repeat(6, 1fr);
+}
+
 @media (max-width: 630px) {
   .recovery-mechanism-container > div {
     min-width: 40%;