From 407b19321d8126365be3c99d6a97da8f2c396bb9 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 16 Feb 2024 20:04:25 -0600
Subject: [PATCH] NostrSigninModal: add EmojiGraphic, use an emoji on each step

---
 .../components/emoji-graphic.tsx              | 20 +++++++++++++++++++
 .../steps/extension-step.tsx                  |  4 ++++
 .../steps/identity-step.tsx                   |  3 +++
 .../nostr-signin-modal/steps/key-step.tsx     |  3 +++
 4 files changed, 30 insertions(+)
 create mode 100644 src/features/ui/components/modals/nostr-signin-modal/components/emoji-graphic.tsx

diff --git a/src/features/ui/components/modals/nostr-signin-modal/components/emoji-graphic.tsx b/src/features/ui/components/modals/nostr-signin-modal/components/emoji-graphic.tsx
new file mode 100644
index 0000000000..5d340f8a54
--- /dev/null
+++ b/src/features/ui/components/modals/nostr-signin-modal/components/emoji-graphic.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Emoji from 'soapbox/components/ui/emoji/emoji';
+
+interface IEmojiGraphic {
+  emoji: string;
+}
+
+/** Large emoji with a background for display purposes (eg breaking up a page). */
+const EmojiGraphic: React.FC<IEmojiGraphic> = ({ emoji }) => {
+  return (
+    <div className='flex items-center justify-center'>
+      <div className='my-6 rounded-full bg-gray-100 p-8 dark:bg-gray-800'>
+        <Emoji className='h-24 w-24' emoji={emoji} />
+      </div>
+    </div>
+  );
+};
+
+export default EmojiGraphic;
\ No newline at end of file
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
index 58c079f3ef..b7fa74ae4d 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
+++ b/src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
@@ -6,6 +6,8 @@ import Button from 'soapbox/components/ui/button/button';
 import Stack from 'soapbox/components/ui/stack/stack';
 import { useAppDispatch } from 'soapbox/hooks';
 
+import EmojiGraphic from '../components/emoji-graphic';
+
 interface IExtensionStep {
   setStep: (step: number) => void;
 }
@@ -18,6 +20,8 @@ const ExtensionStep: React.FC<IExtensionStep> = ({ setStep }) => {
 
   return (
     <Stack className='my-6' space={3}>
+      <EmojiGraphic emoji='🔐' />
+
       <Button theme='accent' size='lg' onClick={onClick}>
         <FormattedMessage id='nostr_signin.siwe.action' defaultMessage='Sign in with extension' />
       </Button>
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
index 373b8cfcfc..a0a5b67297 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
+++ b/src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
@@ -6,6 +6,7 @@ import HStack from 'soapbox/components/ui/hstack/hstack';
 import Input from 'soapbox/components/ui/input/input';
 import Stack from 'soapbox/components/ui/stack/stack';
 
+import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../nostr-extension-indicator';
 
 interface IIdentityStep {
@@ -19,6 +20,8 @@ const IdentityStep: React.FC<IIdentityStep> = ({ username, setUsername, setStep
     <Stack className='mt-3' space={3}>
       <NostrExtensionIndicator />
 
+      <EmojiGraphic emoji='🕵️' />
+
       <FormGroup labelText='Username'>
         <Input
           icon={require('@tabler/icons/at.svg')}
diff --git a/src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx b/src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx
index 530af4f4a4..50e6b9a20e 100644
--- a/src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx
+++ b/src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import Button from 'soapbox/components/ui/button/button';
 import Stack from 'soapbox/components/ui/stack/stack';
 
+import EmojiGraphic from '../components/emoji-graphic';
 import NostrExtensionIndicator from '../nostr-extension-indicator';
 
 interface IKeyStep {
@@ -14,6 +15,8 @@ const KeyStep: React.FC<IKeyStep> = ({ setStep }) => {
     <Stack className='my-3' space={6} justifyContent='center'>
       <NostrExtensionIndicator />
 
+      <EmojiGraphic emoji='🔑' />
+
       <Stack space={3} alignItems='center'>
         <Button theme='accent' size='lg'>
           Generate key