New sticker creator button

ts/components/CaptchaDialog.tsx

@@ -82,7 +82,7 @@ export function CaptchaDialog(props: Readonly<PropsType>): JSX.Element {
       variant={ButtonVariant.Primary}
     >
       {isPending ? (
-        <Spinner size="22px" svgSize="small" direction="on-captcha" />
+        <Spinner size="22px" svgSize="small" direction="on-primary-button" />
       ) : (
         'Continue'
       )}

ts/components/ConfirmationDialog.tsx

@@ -10,11 +10,13 @@ import { ModalHost } from './ModalHost';
 import { ModalPage } from './Modal';
 import type { Theme } from '../util/theme';
 import { useAnimated } from '../hooks/useAnimated';
+import { Spinner } from './Spinner';
 
 export type ActionSpec = {
   text: string;
   action: () => unknown;
   style?: 'affirmative' | 'negative';
+  autoClose?: boolean;
 };
 
 export type OwnProps = Readonly<{
@@ -22,6 +24,7 @@ export type OwnProps = Readonly<{
   dialogName: string;
   cancelButtonVariant?: ButtonVariant;
   cancelText?: string;
+  isSpinning?: boolean;
   children?: React.ReactNode;
   hasXButton?: boolean;
   i18n: LocalizerType;
@@ -65,6 +68,7 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
   children,
   hasXButton,
   i18n,
+  isSpinning,
   moduleClassName,
   noMouseClose,
   noDefaultCancelButton,
@@ -99,7 +103,7 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
 
   const footer = (
     <>
-      {!noDefaultCancelButton ? (
+      {!isSpinning && !noDefaultCancelButton ? (
         <Button
           onClick={handleCancel}
           ref={focusRef}
@@ -114,14 +118,25 @@ export const ConfirmationDialog = React.memo(function ConfirmationDialogInner({
       {actions.map((action, i) => (
         <Button
           key={action.text}
+          disabled={isSpinning}
           onClick={() => {
             action.action();
-            close();
+            if (action.autoClose !== false) {
+              close();
+            }
           }}
           data-action={i}
           variant={getButtonVariant(action.style)}
         >
-          {action.text}
+          {isSpinning ? (
+            <Spinner
+              size="22px"
+              svgSize="small"
+              direction="on-primary-button"
+            />
+          ) : (
+            action.text
+          )}
         </Button>
       ))}
     </>

ts/components/GlobalModalContainer.tsx

@@ -7,6 +7,7 @@ import type {
   ForwardMessagePropsType,
   UserNotFoundModalStateType,
   SafetyNumberChangedBlockingDataType,
+  AuthorizeArtCreatorDataType,
 } from '../state/ducks/globalModals';
 import type { LocalizerType, ThemeType } from '../types/Util';
 import { missingCaseError } from '../util/missingCaseError';
@@ -66,6 +67,11 @@ export type PropsType = {
   // WhatsNewModal
   isWhatsNewVisible: boolean;
   hideWhatsNewModal: () => unknown;
+  // AuthArtCreatorModal
+  authArtCreatorData?: AuthorizeArtCreatorDataType;
+  isAuthorizingArtCreator?: boolean;
+  cancelAuthorizeArtCreator: () => unknown;
+  confirmAuthorizeArtCreator: () => unknown;
 };
 
 export function GlobalModalContainer({
@@ -110,6 +116,11 @@ export function GlobalModalContainer({
   // WhatsNewModal
   hideWhatsNewModal,
   isWhatsNewVisible,
+  // AuthArtCreatorModal
+  authArtCreatorData,
+  isAuthorizingArtCreator,
+  cancelAuthorizeArtCreator,
+  confirmAuthorizeArtCreator,
 }: PropsType): JSX.Element | null {
   // We want the following dialogs to show in this order:
   // 1. Errors
@@ -200,5 +211,28 @@ export function GlobalModalContainer({
     );
   }
 
+  if (authArtCreatorData) {
+    return (
+      <ConfirmationDialog
+        dialogName="GlobalModalContainer.authArtCreator"
+        cancelText={i18n('icu:AuthArtCreator--dialog--dismiss')}
+        cancelButtonVariant={ButtonVariant.Secondary}
+        i18n={i18n}
+        isSpinning={isAuthorizingArtCreator}
+        onClose={cancelAuthorizeArtCreator}
+        actions={[
+          {
+            text: i18n('icu:AuthArtCreator--dialog--confirm'),
+            style: 'affirmative',
+            action: confirmAuthorizeArtCreator,
+            autoClose: false,
+          },
+        ]}
+      >
+        {i18n('icu:AuthArtCreator--dialog--message')}
+      </ConfirmationDialog>
+    );
+  }
+
   return null;
 }

ts/components/Spinner.tsx

@@ -13,7 +13,7 @@ export const SpinnerDirections = [
   'outgoing',
   'incoming',
   'on-background',
-  'on-captcha',
+  'on-primary-button',
   'on-progress-dialog',
   'on-avatar',
 ] as const;

ts/components/TitleBarContainer.tsx

@@ -226,6 +226,7 @@ export function TitleBarContainer(props: PropsType): JSX.Element {
 
         // actions
         forceUpdate: () => executeMenuAction('forceUpdate'),
+        openArtCreator: () => executeMenuAction('openArtCreator'),
         openContactUs: () => executeMenuAction('openContactUs'),
         openForums: () => executeMenuAction('openForums'),
         openJoinTheBeta: () => executeMenuAction('openJoinTheBeta'),