From 867f37b030c1a666f06d633c6bbf50d06baa6497 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:27:05 -0600
Subject: [PATCH 1/6] OnboardingFlowModal: improve spacing between dots and
 card

---
 .../onboarding-flow-modal.tsx                 | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index 887ad9a7d..908391b66 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -78,8 +78,8 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
 
 
   return (
-    <Stack space={4} justifyContent='center' alignItems='center' className='relative w-full'>
-      <Modal width='2xl' onClose={handleComplete} theme='transparent' >
+    <Stack justifyContent='center' alignItems='center' className='relative w-full'>
+      <Modal width='2xl' onClose={handleComplete} theme='transparent'>
         <Stack space={4}>
           <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
             {steps.map((step, i) => (
@@ -96,23 +96,24 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
               </div>
             ))}
           </ReactSwipeableViews>
+
+          <div className='relative flex w-full justify-center'>
+            <HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
+              {steps.map((_, i) => (
+                <button
+                  key={i}
+                  tabIndex={0}
+                  onClick={() => handleDotClick(i)}
+                  className={clsx({
+                    'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
+                    'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
+                    'bg-primary-600': i === currentStep,
+                  })}
+                />
+              ))}
+            </HStack>
+          </div>
         </Stack>
-        <div className='relative flex w-full justify-center'>
-          <HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
-            {steps.map((_, i) => (
-              <button
-                key={i}
-                tabIndex={0}
-                onClick={() => handleDotClick(i)}
-                className={clsx({
-                  'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
-                  'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
-                  'bg-primary-600': i === currentStep,
-                })}
-              />
-            ))}
-          </HStack>
-        </div>
       </Modal>
     </Stack>
   );

From 78b653371cb3d1b01edaa1849da183f61b254a9c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:33:46 -0600
Subject: [PATCH 2/6] OnboardingModalFlow: improve layout, improve transitions

---
 .../onboarding-flow-modal.tsx                 | 66 +++++++++----------
 1 file changed, 31 insertions(+), 35 deletions(-)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
index 908391b66..fd4a4b0a8 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
@@ -78,43 +78,39 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
 
 
   return (
-    <Stack justifyContent='center' alignItems='center' className='relative w-full'>
-      <Modal width='2xl' onClose={handleComplete} theme='transparent'>
-        <Stack space={4}>
-          <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
-            {steps.map((step, i) => (
-              <div key={i} className='w-full'>
-                <div
-                  className={clsx({
-                    'transition-opacity ease-linear': true,
-                    'opacity-0 duration-500': currentStep !== i,
-                    'opacity-100 duration-75': currentStep === i,
-                  })}
-                >
-                  {step}
-                </div>
+    <Stack space={5} justifyContent='center' alignItems='center' className='relative w-full'>
+      <Modal width='2xl' onClose={handleComplete}>
+        <ReactSwipeableViews animateHeight index={currentStep} onChangeIndex={handleSwipe}>
+          {steps.map((step, i) => (
+            <div key={i} className='w-full'>
+              <div
+                className={clsx({
+                  'transition-opacity ease-linear': true,
+                  'opacity-0 duration-500': currentStep !== i,
+                  'opacity-100 duration-75': currentStep === i,
+                })}
+              >
+                {step}
               </div>
-            ))}
-          </ReactSwipeableViews>
-
-          <div className='relative flex w-full justify-center'>
-            <HStack space={3} alignItems='center' justifyContent='center' className='absolute h-10'>
-              {steps.map((_, i) => (
-                <button
-                  key={i}
-                  tabIndex={0}
-                  onClick={() => handleDotClick(i)}
-                  className={clsx({
-                    'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
-                    'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
-                    'bg-primary-600': i === currentStep,
-                  })}
-                />
-              ))}
-            </HStack>
-          </div>
-        </Stack>
+            </div>
+          ))}
+        </ReactSwipeableViews>
       </Modal>
+
+      <HStack space={3} alignItems='center' justifyContent='center' className='pointer-events-auto'>
+        {steps.map((_, i) => (
+          <button
+            key={i}
+            tabIndex={0}
+            onClick={() => handleDotClick(i)}
+            className={clsx({
+              'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
+              'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
+              'bg-primary-600': i === currentStep,
+            })}
+          />
+        ))}
+      </HStack>
     </Stack>
   );
 };

From 7fadf75c1656ef0262c353e7c08ba6b8a8b7b515 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:35:39 -0600
Subject: [PATCH 3/6] OnboardingFlowModal -> OnboardingModal, ONBOARDING_FLOW
 -> ONBOARDING

---
 src/features/ui/components/modal-root.tsx                   | 4 ++--
 .../{onboarding-flow-modal.tsx => onboarding-modal.tsx}     | 6 +++---
 src/features/ui/util/async-components.ts                    | 2 +-
 src/init/soapbox-mount.tsx                                  | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/features/ui/components/modals/onboarding-flow-modal/{onboarding-flow-modal.tsx => onboarding-modal.tsx} (96%)

diff --git a/src/features/ui/components/modal-root.tsx b/src/features/ui/components/modal-root.tsx
index a1fb2e53e..c3c996446 100644
--- a/src/features/ui/components/modal-root.tsx
+++ b/src/features/ui/components/modal-root.tsx
@@ -34,7 +34,7 @@ import {
   MuteModal,
   NostrLoginModal,
   NostrSignupModal,
-  OnboardingFlowModal,
+  OnboardingModal,
   ReactionsModal,
   ReblogsModal,
   ReplyMentionsModal,
@@ -87,7 +87,7 @@ const MODAL_COMPONENTS: Record<string, React.ExoticComponent<any>> = {
   'MUTE': MuteModal,
   'NOSTR_LOGIN': NostrLoginModal,
   'NOSTR_SIGNUP': NostrSignupModal,
-  'ONBOARDING_FLOW': OnboardingFlowModal,
+  'ONBOARDING': OnboardingModal,
   'REACTIONS': ReactionsModal,
   'REBLOGS': ReblogsModal,
   'REPLY_MENTIONS': ReplyMentionsModal,
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
similarity index 96%
rename from src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
rename to src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
index fd4a4b0a8..43af59caf 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
@@ -16,11 +16,11 @@ import DisplayUserNameStep from './steps/display-identity-step.tsx';
 import DisplayNameStep from './steps/display-name-step.tsx';
 import SuggestedAccountsModal from './steps/suggested-accounts-step.tsx';
 
-interface IOnboardingFlowModal {
+interface IOnboardingModal {
   onClose(): void;
 }
 
-const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
+const OnboardingModal: React.FC<IOnboardingModal> = ({ onClose }) => {
   const dispatch = useAppDispatch();
 
   const [currentStep, setCurrentStep] = useState<number>(0);
@@ -115,4 +115,4 @@ const OnboardingFlowModal: React.FC<IOnboardingFlowModal> = ({ onClose }) => {
   );
 };
 
-export default OnboardingFlowModal;
+export default OnboardingModal;
diff --git a/src/features/ui/util/async-components.ts b/src/features/ui/util/async-components.ts
index f9fe14898..5654b246b 100644
--- a/src/features/ui/util/async-components.ts
+++ b/src/features/ui/util/async-components.ts
@@ -160,7 +160,7 @@ export const EditAnnouncementModal = lazy(() => import('soapbox/features/ui/comp
 export const FollowedTags = lazy(() => import('soapbox/features/followed-tags/index.tsx'));
 export const AccountNotePanel = lazy(() => import('soapbox/features/ui/components/panels/account-note-panel.tsx'));
 export const ComposeEditor = lazy(() => import('soapbox/features/compose/editor/index.tsx'));
-export const OnboardingFlowModal = lazy(() => import('soapbox/features/ui/components/modals/onboarding-flow-modal/onboarding-flow-modal.tsx'));
+export const OnboardingModal = lazy(() => import('soapbox/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx'));
 export const NostrSignupModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-signup-modal/nostr-signup-modal.tsx'));
 export const NostrLoginModal = lazy(() => import('soapbox/features/ui/components/modals/nostr-login-modal/nostr-login-modal.tsx'));
 export const EditIdentity = lazy(() => import('soapbox/features/edit-identity/index.tsx'));
diff --git a/src/init/soapbox-mount.tsx b/src/init/soapbox-mount.tsx
index 680aa71d6..9046dac2f 100644
--- a/src/init/soapbox-mount.tsx
+++ b/src/init/soapbox-mount.tsx
@@ -41,7 +41,7 @@ const SoapboxMount = () => {
 
   useEffect(() => {
     if (showOnboarding && !showCaptcha) {
-      dispatch(openModal('ONBOARDING_FLOW'));
+      dispatch(openModal('ONBOARDING'));
     }
   }, [showOnboarding, showCaptcha]);
 

From d23a17b3ae14ca21f0e8cbf95b6ab494cf52f19a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:42:33 -0600
Subject: [PATCH 4/6] DisplayNameStep: don't prefill with display_name

---
 .../onboarding-flow-modal/steps/display-name-step.tsx    | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
index 0bf9b91bb..f4b1e8477 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx
@@ -11,7 +11,6 @@ import Input from 'soapbox/components/ui/input.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import { useAppDispatch } from 'soapbox/hooks/useAppDispatch.ts';
-import { useOwnAccount } from 'soapbox/hooks/useOwnAccount.ts';
 import toast from 'soapbox/toast.tsx';
 
 const closeIcon = xIcon;
@@ -30,14 +29,12 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const { account } = useOwnAccount();
-  const [value, setValue] = useState<string>(account?.display_name || '');
+  const [value, setValue] = useState<string>('');
   const [isSubmitting, setSubmitting] = useState<boolean>(false);
   const [errors, setErrors] = useState<string[]>([]);
 
-  const trimmedValue = value.trim();
-  const isValid = trimmedValue.length > 0;
-  const isDisabled = !isValid || value.length > 30;
+  const isValid = value.trim().length > 0;
+  const isDisabled = !isValid;
 
   const hintText = useMemo(() => {
     const charsLeft = 30 - value.length;

From 23cb3941602479ca80c449146d370c4f14b8d042 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:51:08 -0600
Subject: [PATCH 5/6] DisplayUserNameStep: fix title and subtitle, remove
 character minimum, progress on success

---
 .../steps/display-identity-step.tsx           | 47 ++++---------------
 src/locales/en.json                           | 11 ++---
 2 files changed, 14 insertions(+), 44 deletions(-)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx
index 3437369a6..a08f800a7 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx
@@ -1,4 +1,3 @@
-import helpSquare from '@tabler/icons/outline/help-square-rounded.svg';
 import xIcon from '@tabler/icons/outline/x.svg';
 import { useMutation } from '@tanstack/react-query';
 import React, { useState } from 'react';
@@ -6,11 +5,8 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import Button from 'soapbox/components/ui/button.tsx';
 import FormGroup from 'soapbox/components/ui/form-group.tsx';
-import HStack from 'soapbox/components/ui/hstack.tsx';
 import IconButton from 'soapbox/components/ui/icon-button.tsx';
-import Popover from 'soapbox/components/ui/popover.tsx';
 import Stack from 'soapbox/components/ui/stack.tsx';
-import SvgIcon from 'soapbox/components/ui/svg-icon.tsx';
 import Text from 'soapbox/components/ui/text.tsx';
 import Textarea from 'soapbox/components/ui/textarea.tsx';
 import { UsernameInput } from 'soapbox/features/edit-identity/index.tsx';
@@ -22,12 +18,9 @@ import toast from 'soapbox/toast.tsx';
 const closeIcon = xIcon;
 
 const messages = defineMessages({
-  title: { id: 'onboarding.display_identity.title', defaultMessage: 'Choose an Identity' },
-  subtitle: { id: 'onboarding.display_identity.subtitle', defaultMessage: 'You can always edit this later.' },
-  label: { id: 'onboarding.display_identity.label', defaultMessage: 'Identity' },
-  helpText: { id: 'onboarding.display_identity.help_text', defaultMessage: 'This identifier is a unique username that represents you on the platform. This username can be used to personalize your experience and facilitate communication within the community.' },
-  placeholder: { id: 'onboarding.display_identity.fields.reason_placeholder', defaultMessage: 'Why do you want to be part of the {siteTitle} community?' },
-  requested: { id: 'onboarding.display_identity.request', defaultMessage: 'Username requested' },
+  label: { id: 'onboarding.username.label', defaultMessage: 'Username' },
+  placeholder: { id: 'onboarding.username.fields.reason_placeholder', defaultMessage: 'Why do you want to be part of the {siteTitle} community?' },
+  requested: { id: 'onboarding.username.request', defaultMessage: 'Username requested' },
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
   saving: { id: 'onboarding.saving', defaultMessage: 'Saving…' },
   next: { id: 'onboarding.next', defaultMessage: 'Next' },
@@ -61,9 +54,8 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
   const [username, setUsername] = useState<string>('');
   const [reason, setReason] = useState<string>('');
 
-  const trimmedValue = username.trim();
-  const isValid = trimmedValue.length > 0;
-  const isDisabled = !isValid || username.length > 30;
+  const isValid = username.trim().length > 0;
+  const isDisabled = !isValid;
 
   const handleSubmit = () => {
     const name = `${username}@${instance.domain}`;
@@ -72,6 +64,7 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
 
     mutate({ name, reason }, {
       onSuccess() {
+        onNext();
         toast.success(intl.formatMessage(messages.requested));
         queryClient.invalidateQueries({
           queryKey: ['names', 'pending'],
@@ -85,43 +78,21 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
 
   return (
     <Stack space={2} justifyContent='center' alignItems='center' className='relative w-full rounded-3xl bg-white px-4 py-8 text-gray-900 shadow-lg black:bg-black dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:p-10'>
-
-      {/* <HeaderSteps onClose={onClose} title={intl.formatMessage(messages.title)} subtitle={intl.formatMessage(messages.subtitle)} /> */}
       <div className='relative w-full'>
         <IconButton src={closeIcon} onClick={onClose} className='absolute -right-2 -top-6 text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-gray-200 rtl:rotate-180' />
         <Stack space={2} justifyContent='center' alignItems='center' className='-mx-4 mb-4 border-b border-solid pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'>
           <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
+            <FormattedMessage id='onboarding.username.title' defaultMessage='Request a username' />
           </Text>
           <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
+            <FormattedMessage id='onboarding.username.subtitle' defaultMessage='Having an approved username will promote your account on this server.' />
           </Text>
         </Stack>
       </div>
 
       <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
         <div className='w-full sm:w-3/4'>
-          <FormGroup
-            labelText={
-              <HStack space={2}>
-                <div>
-                  {intl.formatMessage(messages.label)}
-                </div>
-                <Popover
-                  interaction='hover' content={
-                    <Text className='w-48 text-justify sm:w-72'>
-                      {intl.formatMessage(messages.helpText)}
-                    </Text>
-                  }
-                >
-                  <div>
-                    <SvgIcon size={20} src={helpSquare} className='hover:cursor-pointer' />
-                  </div>
-                </Popover>
-
-              </HStack>
-            }
-          >
+          <FormGroup labelText={intl.formatMessage(messages.label)}>
             <Stack space={4}>
               <UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />
               <Textarea
diff --git a/src/locales/en.json b/src/locales/en.json
index c235d07bd..8c5f10a9f 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -1233,12 +1233,6 @@
   "onboarding.avatar.title": "Choose a profile picture",
   "onboarding.bio.hint": "Max 500 characters",
   "onboarding.bio.placeholder": "Tell the world a little about yourself…",
-  "onboarding.display_identity.fields.reason_placeholder": "Why do you want to be part of the {siteTitle} community?",
-  "onboarding.display_identity.help_text": "This identifier is a unique username that represents you on the platform. This username can be used to personalize your experience and facilitate communication within the community.",
-  "onboarding.display_identity.label": "Identity",
-  "onboarding.display_identity.request": "Username requested",
-  "onboarding.display_identity.subtitle": "You can always edit this later.",
-  "onboarding.display_identity.title": "Choose an Identity",
   "onboarding.display_name.label": "Display name",
   "onboarding.display_name.placeholder": "Eg. John Smith",
   "onboarding.display_name.subtitle": "You can always edit this later.",
@@ -1256,6 +1250,11 @@
   "onboarding.skip": "Skip for now",
   "onboarding.suggestions.subtitle": "Here are a few of the most popular accounts you might like.",
   "onboarding.suggestions.title": "Suggested accounts",
+  "onboarding.username.fields.reason_placeholder": "Why do you want to be part of the {siteTitle} community?",
+  "onboarding.username.label": "Username",
+  "onboarding.username.request": "Username requested",
+  "onboarding.username.subtitle": "Having an approved username will promote your account on this server.",
+  "onboarding.username.title": "Request a username",
   "onboarding.view_feed": "View Feed",
   "password_reset.confirmation": "Check your email for confirmation.",
   "password_reset.fields.email_placeholder": "E-mail address",

From 7dd77b62bcb1b38bf7803f79397e0bb135ad8471 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 28 Jan 2025 14:52:58 -0600
Subject: [PATCH 6/6] DisplayUserNameStep -> UsernameStep

---
 .../modals/onboarding-flow-modal/onboarding-modal.tsx       | 4 ++--
 .../steps/{display-identity-step.tsx => username-step.tsx}  | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)
 rename src/features/ui/components/modals/onboarding-flow-modal/steps/{display-identity-step.tsx => username-step.tsx} (96%)

diff --git a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
index 43af59caf..8bf53cf3a 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/onboarding-modal.tsx
@@ -12,9 +12,9 @@ import AvatarSelectionModal from './steps/avatar-step.tsx';
 import BioStep from './steps/bio-step.tsx';
 import CompletedModal from './steps/completed-step.tsx';
 import CoverPhotoSelectionModal from './steps/cover-photo-selection-step.tsx';
-import DisplayUserNameStep from './steps/display-identity-step.tsx';
 import DisplayNameStep from './steps/display-name-step.tsx';
 import SuggestedAccountsModal from './steps/suggested-accounts-step.tsx';
+import UsernameStep from './steps/username-step.tsx';
 
 interface IOnboardingModal {
   onClose(): void;
@@ -49,7 +49,7 @@ const OnboardingModal: React.FC<IOnboardingModal> = ({ onClose }) => {
   const steps = [
     <AvatarSelectionModal onClose={handleComplete} onNext={handleNextStep} />,
     <DisplayNameStep onClose={handleComplete} onNext={handleNextStep} />,
-    <DisplayUserNameStep onClose={handleComplete} onNext={handleNextStep} />,
+    <UsernameStep onClose={handleComplete} onNext={handleNextStep} />,
     <BioStep onClose={handleComplete} onNext={handleNextStep} />,
     <CoverPhotoSelectionModal onClose={handleComplete} onNext={handleNextStep} />,
     <SuggestedAccountsModal onClose={handleComplete} onNext={handleNextStep} />,
diff --git a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx b/src/features/ui/components/modals/onboarding-flow-modal/steps/username-step.tsx
similarity index 96%
rename from src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx
rename to src/features/ui/components/modals/onboarding-flow-modal/steps/username-step.tsx
index a08f800a7..945f1f075 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/steps/username-step.tsx
@@ -27,7 +27,7 @@ const messages = defineMessages({
   skip: { id: 'onboarding.skip', defaultMessage: 'Skip for now' },
 });
 
-interface IDisplayUserNameStep {
+interface IUsernameStep {
   onClose?(): void;
   onNext: () => void;
 }
@@ -45,7 +45,7 @@ function useRequestName() {
   });
 }
 
-const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }) => {
+const UsernameStep: React.FC<IUsernameStep> = ({ onClose, onNext }) => {
   const intl = useIntl();
   const { instance } = useInstance();
   const { mutate } = useRequestName();
@@ -127,4 +127,4 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
 };
 
 
-export default DisplayUserNameStep;
\ No newline at end of file
+export default UsernameStep;
\ No newline at end of file