NostrSigninModal: add EmojiGraphic, use an emoji on each step

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;

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>

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

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