Conv

web/packages/accounts/components/SignUp.tsx

@@ -3,6 +3,7 @@ import { PasswordStrengthHint } from "@/accounts/components/PasswordStrength";
 import { PAGES } from "@/accounts/constants/pages";
 import { isWeakPassword } from "@/accounts/utils";
 import { generateKeyAndSRPAttributes } from "@/accounts/utils/srp";
+import { LoadingButton } from "@/base/components/mui/LoadingButton";
 import log from "@/base/log";
 import { LS_KEYS, setLSUser } from "@ente/shared//storage/localStorage";
 import { VerticallyCentered } from "@ente/shared/components/Container";
@@ -10,7 +11,6 @@ import FormPaperFooter from "@ente/shared/components/Form/FormPaper/Footer";
 import FormPaperTitle from "@ente/shared/components/Form/FormPaper/Title";
 import ShowHidePassword from "@ente/shared/components/Form/ShowHidePassword";
 import LinkButton from "@ente/shared/components/LinkButton";
-import SubmitButton from "@ente/shared/components/SubmitButton";
 import {
     generateAndSaveIntermediateKeyAttributes,
     saveKeyInSessionStore,
@@ -289,15 +289,18 @@ export const SignUp: React.FC<SignUpProps> = ({ router, login, host }) => {
                             </FormGroup>
                         </VerticallyCentered>
                         <Box mb={4}>
-                            <SubmitButton
-                                sx={{ my: 0 }}
-                                buttonText={t("CREATE_ACCOUNT")}
+                            <LoadingButton
+                                size="large"
+                                color="accent"
+                                type="submit"
                                 loading={loading}
                                 disabled={
                                     !acceptTerms ||
                                     isWeakPassword(values.passphrase)
                                 }
-                            />
+                            >
+                                {t("CREATE_ACCOUNT")}
+                            </LoadingButton>
                             {loading && (
                                 <Typography
                                     mt={1}

web/packages/base/components/mui/LoadingButton.tsx

@@ -21,12 +21,17 @@ export const LoadingButton: React.FC<ButtonProps & { loading?: boolean }> = ({
 }) => (
     <FocusVisibleButton
         {...{ color }}
-        disabled={loading ?? disabled}
+        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+        disabled={loading || disabled}
         sx={{
-            "&.Mui-disabled": {
-                backgroundColor: `${color}.main`,
-                color: `${color}.contrastText`,
-            },
+            ...(loading
+                ? {
+                      "&.Mui-disabled": {
+                          backgroundColor: `${color}.main`,
+                          color: `${color}.contrastText`,
+                      },
+                  }
+                : {}),
             ...sx,
         }}
         {...rest}