From a23f985e0350d7020381bdfb45201d7723b49b07 Mon Sep 17 00:00:00 2001
From: RadoslavDimchev <RadoslavDimchev111@gmail.com>
Date: Mon, 28 Aug 2023 12:57:15 +0300
Subject: [PATCH] fix: add button and change texts to password fields

---
 .../KeyGeneration/KeyGeneration.tsx           |  1 -
 .../KeyGeneration/PasswordFields.tsx          | 35 ++++++++++++-------
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
index 964b251d..5ea8de0f 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/KeyGeneration.tsx
@@ -14,7 +14,6 @@ const KeyGeneration = () => {
         4 Validators
       </Text>
       <PasswordFields />
-      <Button>Generate Key files</Button>
       <InformationBox
         message="You should see that you have one keystore per validator. This keystore contains your signing key, encrypted with your password. Warning: Do not store keys on multiple (backup) validator clients at once"
         variant="error"
diff --git a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
index e5758887..a28fd423 100644
--- a/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
+++ b/src/pages/ValidatorOnboarding/KeyGeneration/PasswordFields.tsx
@@ -1,20 +1,29 @@
-import { Input, XStack, YStack } from 'tamagui'
+import { XStack, YStack } from 'tamagui'
 import BorderBox from '../../../components/General/BorderBox'
-import { Text } from '@status-im/components'
+import { Button, Text } from '@status-im/components'
+import LabelInputField from '../../../components/General/LabelInputField'
 
 const PasswordFields = () => {
+  const generateKeyFilesHandler = () => {}
+
   return (
-    <XStack space={'$2'} style={{ justifyContent: 'space-between' }}>
-      <YStack space={'$2'}>
-        <Input placeholder="Password" />
-        <Input placeholder="Confirm Password" />
-      </YStack>
-      <BorderBox>
-        <Text size={15} weight={'semibold'}>
-          Download Key Files
-        </Text>
-      </BorderBox>
-    </XStack>
+    <YStack space={'$2'}>
+      <XStack space={'$2'} style={{ justifyContent: 'space-between' }}>
+        <YStack space={'$1'}>
+          <LabelInputField labelText="Encryption Password" placeholderText="******************" />
+          <LabelInputField
+            labelText="Confirm Encryption Password"
+            placeholderText="******************"
+          />
+        </YStack>
+        <BorderBox>
+          <Text size={15} weight={'semibold'}>
+            Download Key Files
+          </Text>
+        </BorderBox>
+      </XStack>
+      <Button onPress={generateKeyFilesHandler}>Generate Key files</Button>
+    </YStack>
   )
 }