Refactor onboarding steps and improve spacing on mobile

src/features/ui/components/modals/onboarding-flow-modal/steps/avatar-step.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { FormattedMessage, defineMessages } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
+import { Button, Stack, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultAvatar } from 'soapbox/utils/accounts';
@@ -12,13 +12,10 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-
 interface IAvatarSelectionModal {
   onClose?(): void;
   onNext: () => void;
@@ -73,17 +70,7 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ 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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-full'>
+      <HeaderSteps onClose={onClose} title={<FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />} subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage={'Just have fun with it.'} />} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='border-grey-200 dark:border-grey-800 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10'>
-          <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.avatar.title' defaultMessage={'Choose a profile picture'} />
-          </Text>
-          <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage={'Just have fun with it.'} />
-          </Text>
-        </Stack>
-      </div>
 
       <div className='relative mx-auto rounded-full bg-gray-200'>
         {account && (
@@ -111,7 +98,7 @@ const AvatarSelectionModal: React.FC<IAvatarSelectionModal> = ({ onClose, onNext
         <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
       </div>
 
-      <Stack justifyContent='center' space={2} className='w-2/3'>
+      <Stack justifyContent='center' space={2} className='w-full sm:w-2/3'>
         <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
           {isSubmitting ? (
             <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />

src/features/ui/components/modals/onboarding-flow-modal/steps/bio-step.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Text, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
+import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -14,8 +14,6 @@ const messages = defineMessages({
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
 });
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 interface IBioStep {
   onClose(): void;
   onNext: () => void;
@@ -54,17 +52,7 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
 
     <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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-full'>
+      <HeaderSteps onClose={onClose} title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />} subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
-          <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
-          </Text>
-          <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
-          </Text>
-        </Stack>
-      </div>
 
       <div className='mx-auto w-full sm:w-2/3'>
         <FormGroup
@@ -81,7 +69,7 @@ const BioStep: React.FC<IBioStep> = ({ onClose, onNext }) => {
         </FormGroup>
       </div>
 
-      <Stack justifyContent='center' space={2} className='w-2/3'>
+      <Stack justifyContent='center' space={2} className='w-full sm:w-2/3'>
         <Button block theme='primary' type='button' onClick={handleSubmit} disabled={isSubmitting}>
           {isSubmitting ? (
             <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />

src/features/ui/components/modals/onboarding-flow-modal/steps/completed-step.tsx

@@ -20,7 +20,7 @@ const CompletedModal: React.FC<ICompletedModal> = ({ onClose, onComplete }) => {
         <IconButton src={closeIcon} className='absolute -right-2 -top-6 text-gray-500 hover:text-gray-700 sm:-right-4 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' onClick={onClose} />
         <Stack space={2} justifyContent='center' alignItems='center' className=''>
           <Icon strokeWidth={1} src={require('@tabler/icons/outline/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
-          <Text size='2xl' align='center' weight='bold'>
+          <Text align='center' weight='bold' className='text-xl sm:text-2xl'>
             <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
           </Text>
           <Text theme='muted' align='center'>

src/features/ui/components/modals/onboarding-flow-modal/steps/cover-photo-selection-step.tsx

@@ -5,7 +5,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { patchMe } from 'soapbox/actions/me';
 import StillImage from 'soapbox/components/still-image';
 import { Button, Stack, Text, Avatar, Icon, Spinner } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 import { isDefaultHeader } from 'soapbox/utils/accounts';
@@ -13,8 +13,6 @@ import resizeImage from 'soapbox/utils/resize-image';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 const messages = defineMessages({
   header: { id: 'account.header.alt', defaultMessage: 'Profile header' },
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
@@ -78,17 +76,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
     <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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-full'>
+      <HeaderSteps onClose={onClose} title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />} subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
-          <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
-          </Text>
-          <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
-          </Text>
-        </Stack>
-      </div>
 
       <Stack space={2} justifyContent='center' alignItems='center' className='w-full'>
         <div className='w-full rounded-lg border border-solid border-gray-200 sm:w-2/3 dark:border-gray-800'>
@@ -139,7 +127,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
           </div>
         </div>
 
-        <Stack justifyContent='center' space={2} className='w-2/3'>
+        <Stack justifyContent='center' space={2} className='w-full sm:w-2/3'>
           <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
             {isSubmitting ? (
               <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />

src/features/ui/components/modals/onboarding-flow-modal/steps/display-identity-step.tsx

@@ -2,21 +2,18 @@ import { useMutation } from '@tanstack/react-query';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
-import { Button, Stack, Text, FormGroup, Input, HStack, Icon, Textarea, Popover } from 'soapbox/components/ui';
+import { Button, Stack, Text, FormGroup, HStack, Textarea, Popover } from 'soapbox/components/ui';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+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';
 
-
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 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' },
-  username: { id: 'onboarding.display_identity.fields.nip05_label', defaultMessage: 'Username' },
   helpText: { id: 'onboarding.display_identity.help_text', defaultMessage: 'This identifier is a unique username that represents you on the platform. It is automatically generated based on the site, ensuring that you have a distinct identity to interact with other users. 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' },
@@ -44,24 +41,6 @@ function useRequestName() {
   });
 }
 
-const UsernameInput: React.FC<React.ComponentProps<typeof Input>> = (props) => {
-  const intl = useIntl();
-  const instance = useInstance();
-
-  return (
-    <Input
-      placeholder={intl.formatMessage(messages.username)}
-      append={(
-        <HStack alignItems='center' space={1} className='rounded p-1 text-sm backdrop-blur'>
-          <Icon className='h-4 w-4' src={require('@tabler/icons/outline/at.svg')} />
-          <span>{instance.domain}</span>
-        </HStack>
-      )}
-      {...props}
-    />
-  );
-};
-
 const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }) => {
   const intl = useIntl();
   const instance = useInstance();
@@ -86,8 +65,6 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
         queryClient.invalidateQueries({
           queryKey: ['names', 'pending'],
         });
-        // setUsername('');
-        // setReason('');
         setSubmitting(false);
       }, onError() {
         toast.error(intl.formatMessage(messages.error));
@@ -96,20 +73,9 @@ 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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-full'>
+      <HeaderSteps onClose={onClose} title={intl.formatMessage(messages.title)} subtitle={intl.formatMessage(messages.subtitle)} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
-          <Text size='2xl' align='center' weight='bold'>
-            {intl.formatMessage(messages.title)}
-          </Text>
-          <Text theme='muted' align='center'>
-            {intl.formatMessage(messages.subtitle)}
-          </Text>
-        </Stack>
-      </div>
 
       <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
         <div className='w-full sm:w-3/4'>
@@ -135,9 +101,7 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
             }
           >
             <Stack space={4}>
-
               <UsernameInput value={username} onChange={(e) => setUsername(e.target.value)} />
-
               <Textarea
                 name='reason'
                 placeholder={intl.formatMessage(messages.placeholder, { siteTitle: instance.title })}
@@ -147,13 +111,11 @@ const DisplayUserNameStep: React.FC<IDisplayUserNameStep> = ({ onClose, onNext }
                 autoGrow
                 required
               />
-
             </Stack>
-
           </FormGroup>
         </div>
 
-        <Stack justifyContent='center' space={2} className='w-2/3'>
+        <Stack justifyContent='center' space={2} className='w-full sm:w-3/4'>
           <Button block theme='primary' type='button' onClick={handleSubmit} disabled={isDisabled || isSubmitting}>
             {isSubmitting ? (
               intl.formatMessage(messages.saving)

src/features/ui/components/modals/onboarding-flow-modal/steps/display-name-step.tsx

@@ -2,15 +2,13 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
-import { Button, Stack, Text, FormGroup, Input } from 'soapbox/components/ui';
+import { Button, Stack, FormGroup, Input } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
+import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
 import type { AxiosError } from 'axios';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 const messages = defineMessages({
   usernamePlaceholder: { id: 'onboarding.display_name.placeholder', defaultMessage: 'Eg. John Smith' },
   error: { id: 'onboarding.error', defaultMessage: 'An unexpected error occurred. Please try again or skip this step.' },
@@ -65,17 +63,7 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
 
     <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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-full'>
+      <HeaderSteps onClose={onClose} title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />} subtitle={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
-          <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
-          </Text>
-          <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
-          </Text>
-        </Stack>
-      </div>
 
       <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
         <div className='w-full sm:w-2/3'>
@@ -94,7 +82,7 @@ const DisplayNameStep: React.FC<IDisplayNameStep> = ({ onClose, onNext }) => {
           </FormGroup>
         </div>
 
-        <Stack justifyContent='center' space={2} className='w-2/3'>
+        <Stack justifyContent='center' space={2} className='w-full sm:w-2/3'>
           <Button block theme='primary' type='button' onClick={handleSubmit} disabled={isDisabled || isSubmitting}>
             {isSubmitting ? (
               <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />

src/features/ui/components/modals/onboarding-flow-modal/steps/suggested-accounts-step.tsx

@@ -4,12 +4,10 @@ import { FormattedMessage } from 'react-intl';
 
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Stack, Text } from 'soapbox/components/ui';
-import IconButton from 'soapbox/components/ui/icon-button/icon-button';
 import AccountContainer from 'soapbox/containers/account-container';
+import { HeaderSteps } from 'soapbox/features/ui/components/modals/onboarding-flow-modal/header-steps';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
-const closeIcon = require('@tabler/icons/outline/x.svg');
-
 interface ICoverPhotoSelectionModal {
   onClose?(): void;
   onNext: () => void;
@@ -31,7 +29,7 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
       return null;
     }
     return (
-      <div className='flex flex-col sm:pb-10 sm:pt-4'>
+      <div className='flex flex-col sm:pb-4 sm:pt-0'>
         <ScrollableList
           isLoading={isFetching}
           scrollKey='suggestions'
@@ -76,24 +74,14 @@ const CoverPhotoSelectionModal: React.FC<ICoverPhotoSelectionModal> = ({ onClose
 
     <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 sm:p-10 dark:bg-primary-900 dark:text-gray-100 dark:shadow-none'>
 
-      <div className='w-5/6 sm:w-full'>
+      <HeaderSteps onClose={onClose} title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />} subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />} />
-        <IconButton src={closeIcon} onClick={onClose} className='absolute right-2 top-2 text-gray-500 hover:text-gray-700 sm:right-6 sm:top-5 rtl:rotate-180 dark:text-gray-300 dark:hover:text-gray-200' />
-        <Stack space={2} justifyContent='center' alignItems='center' className='bg-grey-500 border-grey-200 -mx-4 mb-4 border-b border-solid pb-4 sm:-mx-10 sm:pb-10 dark:border-gray-800'>
-          <Text size='2xl' align='center' weight='bold'>
-            <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
-          </Text>
-          <Text theme='muted' align='center'>
-            <FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
-          </Text>
-        </Stack>
-      </div>
 
-      <Stack space={5} justifyContent='center' alignItems='center' className='w-full'>
+      <Stack justifyContent='center' alignItems='center' className='w-full gap-5 sm:gap-0'>
         <div className='w-full sm:w-2/3'>
           {renderBody()}
         </div>
 
-        <Stack justifyContent='center' space={2} className='w-2/3'>
+        <Stack justifyContent='center' space={2} className='w-full sm:w-2/3'>
           <Button block theme='primary' type='button' onClick={onNext}>
             <FormattedMessage id='onboarding.done' defaultMessage='Done' />
           </Button>