Update steps to show up the "x" button

src/features/onboarding/steps/avatar-selection-step.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { endOnboarding } from 'soapbox/actions/onboarding';
 import { BigCard } from 'soapbox/components/big-card';
 import { Avatar, Button, Icon, Spinner, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
@@ -64,10 +65,16 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
     }).catch(console.error);
   };
 
+  const handleComplete = () => {
+    dispatch(endOnboarding());
+  };
+
   return (
     <BigCard
       title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
+      buttonEvent={handleComplete}
       subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
+      onClose
     >
       <Stack space={10}>
         <div className='relative mx-auto rounded-full bg-gray-200'>

src/features/onboarding/steps/bio-step.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { endOnboarding } from 'soapbox/actions/onboarding';
 import { BigCard } from 'soapbox/components/big-card';
 import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
@@ -43,10 +44,16 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
       });
   };
 
+  const handleComplete = () => {
+    dispatch(endOnboarding());
+  };
+  
   return (
     <BigCard
       title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />}
       subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />}
+      buttonEvent={handleComplete}
+      onClose
     >
       <Stack space={5}>
         <div>

src/features/onboarding/steps/cover-photo-selection-step.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { endOnboarding } from 'soapbox/actions/onboarding';
 import { BigCard } from 'soapbox/components/big-card';
 import StillImage from 'soapbox/components/still-image';
 import { Avatar, Button, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
@@ -67,10 +68,16 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
     }).catch(console.error);
   };
 
+  const handleComplete = () => {
+    dispatch(endOnboarding());
+  };
+
   return (
     <BigCard
       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.' />}
+      buttonEvent={handleComplete}
+      onClose
     >
       <Stack space={10}>
         <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>

src/features/onboarding/steps/display-name-step.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { patchMe } from 'soapbox/actions/me';
+import { endOnboarding } from 'soapbox/actions/onboarding';
 import { BigCard } from 'soapbox/components/big-card';
 import { Button, FormGroup, Input, Stack } from 'soapbox/components/ui';
 import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
@@ -54,10 +55,16 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
       });
   };
 
+  const handleComplete = () => {
+    dispatch(endOnboarding());
+  };
+
   return (
     <BigCard
       title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
       subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
+      buttonEvent={handleComplete}
+      onClose
     >
       <Stack space={5}>
         <FormGroup

src/features/onboarding/steps/suggested-accounts-step.tsx

@@ -2,13 +2,16 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { endOnboarding } from 'soapbox/actions/onboarding';
 import { BigCard } from 'soapbox/components/big-card';
 import ScrollableList from 'soapbox/components/scrollable-list';
 import { Button, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
+import { useAppDispatch } from 'soapbox/hooks';
 import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
 
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
+  const dispatch = useAppDispatch();
   const { data, fetchNextPage, hasNextPage, isFetching } = useOnboardingSuggestions();
 
   const handleLoadMore = debounce(() => {
@@ -19,6 +22,10 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     return fetchNextPage();
   }, 300);
 
+  const handleComplete = () => {
+    dispatch(endOnboarding());
+  };
+
   const renderSuggestions = () => {
     if (!data) {
       return null;
@@ -70,6 +77,8 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
     <BigCard
       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.' />}
+      buttonEvent={handleComplete}
+      onClose
     >
       {renderBody()}