diff --git a/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx b/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx
index f11be47d6..d156e9d87 100644
--- a/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx
+++ b/src/features/ui/components/modals/onboarding-flow-modal/header-steps.tsx
@@ -1,7 +1,8 @@
import React from 'react';
-import { Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import IconButton from 'soapbox/components/ui/icon-button.tsx';
+import Stack from 'soapbox/components/ui/stack.tsx';
+import Text from 'soapbox/components/ui/text.tsx';
interface IHeaderSteps {
onClose?: () => void;
@@ -13,7 +14,7 @@ export const HeaderSteps = ({ onClose, title, subtitle }: IHeaderSteps) => {
return (
-
+
{title}
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 a4e8e2cf9..3437369a6 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,14 +1,25 @@
+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';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { Button, Stack, Text, FormGroup, HStack, Textarea, Popover } from 'soapbox/components/ui';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { UsernameInput } from 'soapbox/features/edit-identity/index';
-import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
-import { useApi, useInstance } from 'soapbox/hooks';
-import { queryClient } from 'soapbox/queries/client';
-import toast from 'soapbox/toast';
+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';
+import { useApi } from 'soapbox/hooks/useApi.ts';
+import { useInstance } from 'soapbox/hooks/useInstance.ts';
+import { queryClient } from 'soapbox/queries/client.ts';
+import toast from 'soapbox/toast.tsx';
+
+const closeIcon = xIcon;
const messages = defineMessages({
title: { id: 'onboarding.display_identity.title', defaultMessage: 'Choose an Identity' },
@@ -43,7 +54,7 @@ function useRequestName() {
const DisplayUserNameStep: React.FC = ({ onClose, onNext }) => {
const intl = useIntl();
- const instance = useInstance();
+ const { instance } = useInstance();
const { mutate } = useRequestName();
const [isSubmitting, setSubmitting] = React.useState(false);
@@ -75,7 +86,18 @@ const DisplayUserNameStep: React.FC = ({ onClose, onNext }
return (
-
+ {/* */}
+
+
+
+
+
+
+
+
+
+
+
@@ -93,7 +115,7 @@ const DisplayUserNameStep: React.FC
= ({ onClose, onNext }
}
>
-
+