Add done button to UsernameLinkModalBody

ts/components/ProfileEditor.tsx

@@ -535,6 +535,7 @@ export function ProfileEditor({
         resetUsernameLink={resetUsernameLink}
         saveAttachment={saveAttachment}
         showToast={showToast}
+        onBack={() => setEditState(EditState.None)}
       />
     );
   } else if (editState === EditState.None) {

ts/components/UsernameLinkModalBody.stories.tsx

@@ -55,6 +55,7 @@ export default {
     showToast: { action: true },
     resetUsernameLink: { action: true },
     setUsernameLinkColor: { action: true },
+    onBack: { action: true },
   },
 } as Meta;
 

ts/components/UsernameLinkModalBody.tsx

@@ -32,6 +32,7 @@ export type PropsType = Readonly<{
   resetUsernameLink: () => void;
   saveAttachment: SaveAttachmentActionCreatorType;
   showToast: ShowToastAction;
+  onBack: () => void;
 }>;
 
 export type ColorMapEntryType = Readonly<{
@@ -492,6 +493,8 @@ export function UsernameLinkModalBody({
   resetUsernameLink,
   saveAttachment,
   showToast,
+
+  onBack,
 }: PropsType): JSX.Element {
   const [pngData, setPngData] = useState<Uint8Array | undefined>();
   const [showColors, setShowColors] = useState(false);
@@ -663,6 +666,14 @@ export function UsernameLinkModalBody({
       >
         {i18n('icu:UsernameLinkModalBody__reset')}
       </button>
+
+      <Button
+        className={classnames(`${CLASS}__done`)}
+        variant={ButtonVariant.Primary}
+        onClick={onBack}
+      >
+        {i18n('icu:UsernameLinkModalBody__done')}
+      </Button>
     </>
   );