Refactor onboarding steps and improve spacing on mobile
This commit is contained in:
danidfra
parent
cb4520ad3e
commit
1192b40e33
|
|
@ -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 IconButton from 'soapbox/components/ui/icon-button/icon-button';
|
||||
import { Button, Stack, Avatar, Icon, Spinner } from 'soapbox/components/ui';
|
||||
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'>
|
||||
<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>
|
||||
<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.'} />} />
|
||||
|
||||
<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…' />
|
||||
|
|
|
|||
|
|
@ -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 IconButton from 'soapbox/components/ui/icon-button/icon-button';
|
||||
import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
|
||||
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'>
|
||||
<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>
|
||||
<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.' />} />
|
||||
|
||||
<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…' />
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
<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>
|
||||
<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.' />} />
|
||||
|
||||
<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…' />
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
<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>
|
||||
<HeaderSteps onClose={onClose} title={intl.formatMessage(messages.title)} subtitle={intl.formatMessage(messages.subtitle)} />
|
||||
|
||||
<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)
|
||||
|
|
|
|||
|
|
@ -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 IconButton from 'soapbox/components/ui/icon-button/icon-button';
|
||||
import { Button, Stack, FormGroup, Input } from 'soapbox/components/ui';
|
||||
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'>
|
||||
<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>
|
||||
<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' />} />
|
||||
|
||||
<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…' />
|
||||
|
|
|
|||
|
|
@ -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'>
|
||||
<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>
|
||||
<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.' />} />
|
||||
|
||||
<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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue