Add done button to UsernameLinkModalBody

_locales/en/messages.json

@@ -6583,6 +6583,10 @@
     "messageformat": "Reset",
     "description": "Text of button at the bottom of the username link modal"
   },
+  "icu:UsernameLinkModalBody__done": {
+    "messageformat": "Done",
+    "description": "Text of button at the bottom of the username link modal"
+  },
   "icu:UsernameLinkModalBody__color__radio": {
     "messageformat": "Username link color, {index, number} of {total, number}",
     "description": "ARIA label of button for selecting username link color"

stylesheets/components/UsernameLinkModalBody.scss

@@ -247,6 +247,11 @@
     }
   }
 
+  &__done {
+    width: 100%;
+    margin-block-end: 8px;
+  }
+
   &__colors {
     &__grid {
       display: grid;

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>
     </>
   );