From ea1e70b4a292d03e9a28bbf44ea0f1461fa4f116 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Mon, 30 Sep 2024 19:33:27 -0300
Subject: [PATCH] Revamp key-add-step

---
 .../nostr-login-modal/steps/key-add-step.tsx  | 20 +++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
index d53008b86..a9fbec91a 100644
--- a/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
+++ b/src/features/ui/components/modals/nostr-login-modal/steps/key-add-step.tsx
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl';
 
 import { logInNostr } from 'soapbox/actions/nostr';
 import EmojiGraphic from 'soapbox/components/emoji-graphic';
-import { Button, Stack, Modal, Input, FormGroup, Form } from 'soapbox/components/ui';
+import { Button, Stack, Modal, Input, FormGroup, Form, Divider } from 'soapbox/components/ui';
 import { NKeys } from 'soapbox/features/nostr/keys';
 import { useAppDispatch } from 'soapbox/hooks';
 
@@ -43,9 +43,8 @@ const KeyAddStep: React.FC<IKeyAddStep> = ({ onClose }) => {
   };
 
   return (
-    <Modal title={<FormattedMessage id='nostr_signup.key-add.title' defaultMessage='Import Key' />} onClose={onClose}>
+    <Modal title={<FormattedMessage id='nostr_signup.key-add.title' defaultMessage='Import Key' />} width='sm' onClose={onClose}>
       <Stack className='my-3' space={6}>
-        <NostrExtensionIndicator />
 
         <EmojiGraphic emoji='🔑' />
 
@@ -60,11 +59,20 @@ const KeyAddStep: React.FC<IKeyAddStep> = ({ onClose }) => {
               />
             </FormGroup>
 
-            <Button theme='accent' size='lg' type='submit' disabled={!nsec}>
-              <FormattedMessage id='nostr_signup.key-add.key_button' defaultMessage='Add Key' />
-            </Button>
+            <Stack space={2}>
+              <Button theme='accent' size='lg' type='submit' disabled={!nsec}>
+                <FormattedMessage id='nostr_signup.key-add.key_button' defaultMessage='Add Key' />
+              </Button>
+
+              <Divider text='or' />
+
+              <NostrExtensionIndicator />
+            </Stack>
+
           </Stack>
         </Form>
+
+
       </Stack>
     </Modal>
   );