bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

NostrSigninModal: add EmojiGraphic, use an emoji on each step

Browse source
This commit is contained in:
Alex Gleason 2024-02-16 20:04:25 -06:00
parent 20328961fd
commit 407b19321d
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
4 changed files with 30 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/features/ui/components/modals/nostr-signin-modal/components/emoji-graphic.tsx Normal file
View file

@ -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;

4
src/features/ui/components/modals/nostr-signin-modal/steps/extension-step.tsx
View file

@ -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>

3
src/features/ui/components/modals/nostr-signin-modal/steps/identity-step.tsx
View file

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

3
src/features/ui/components/modals/nostr-signin-modal/steps/key-step.tsx
View file

@ -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