Use Compound buttons in auth screens

res/css/structures/auth/_Login.pcss

@@ -7,19 +7,9 @@ Please see LICENSE files in the repository root for full details.
 */
 
 .mx_Login_submit {
-    @mixin mx_DialogButton;
-    font-size: 15px;
-    font-weight: var(--cpd-font-weight-semibold);
     width: 100%;
     margin-top: 24px;
     margin-bottom: 24px;
-    box-sizing: border-box;
-    text-align: center;
-}
-
-.mx_Login_submit:disabled {
-    opacity: 0.3;
-    cursor: default;
 }
 
 .mx_Login_loader {

res/css/views/auth/_AuthBody.pcss

@@ -148,7 +148,6 @@ Please see LICENSE files in the repository root for full details.
     }
 
     .mx_Login_submit {
-        font-weight: var(--cpd-font-weight-semibold);
         margin: 0 0 $spacing-16;
     }
 

res/css/views/elements/_SSOButtons.pcss

@@ -20,13 +20,7 @@ Please see LICENSE files in the repository root for full details.
     .mx_SSOButton {
         position: relative;
         width: 100%;
-        padding: 7px 32px;
-        text-align: center;
-        border-radius: 8px;
         display: inline-block;
-        font: var(--cpd-font-body-md-semibold);
-        border: 1px solid $input-border-color;
-        color: $primary-content;
 
         > img {
             object-fit: contain;
@@ -36,27 +30,7 @@ Please see LICENSE files in the repository root for full details.
         }
     }
 
-    .mx_SSOButton:hover {
-        background-color: $panel-actions;
-    }
-
-    .mx_SSOButton_default {
-        color: $accent;
-        background-color: $button-secondary-bg-color;
-        border-color: $accent;
-    }
-    .mx_SSOButton_default.mx_SSOButton_primary {
-        color: $button-primary-fg-color;
-        background-color: $accent;
-    }
-
     .mx_SSOButton_mini {
-        box-sizing: border-box;
-        width: 50px; /* 48px + 1px border on all sides */
-        height: 50px; /* 48px + 1px border on all sides */
-        min-width: 50px; /* prevent crushing by the flexbox */
-        padding: 12px;
-
         > img {
             left: 12px;
             top: 12px;

src/components/structures/auth/ForgotPassword.tsx

@@ -12,6 +12,7 @@ import React, { type JSX, type ReactNode } from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { sleep } from "matrix-js-sdk/src/utils";
 import { LockSolidIcon, CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button } from "@vector-im/compound-web";
 
 import { _t, _td } from "../../../languageHandler";
 import Modal from "../../../Modal";
@@ -417,9 +418,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                             </StyledCheckbox>
                         </div>
                         {this.state.errorText && <ErrorMessage message={this.state.errorText} />}
-                        <button type="submit" className="mx_Login_submit">
+                        <Button type="submit" className="mx_Login_submit" size="sm">
                             {submitButtonChild}
-                        </button>
+                        </Button>
                     </fieldset>
                 </form>
             </>
@@ -432,12 +433,9 @@ export default class ForgotPassword extends React.Component<Props, State> {
                 <CheckIcon className="mx_Icon mx_Icon_32 mx_Icon_accent" />
                 <h1>{_t("auth|reset_password|reset_successful")}</h1>
                 {this.state.logoutDevices ? <p>{_t("auth|reset_password|devices_logout_success")}</p> : null}
-                <input
-                    className="mx_Login_submit"
-                    type="button"
-                    onClick={this.props.onComplete}
-                    value={_t("auth|reset_password|return_to_login")}
-                />
+                <Button className="mx_Login_submit" size="sm" type="button" onClick={this.props.onComplete}>
+                    {_t("auth|reset_password|return_to_login")}
+                </Button>
             </>
         );
     }

src/components/structures/auth/Login.tsx

@@ -10,6 +10,7 @@ import React, { type JSX, type ReactNode } from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
 import { type SSOFlow, SSOAction } from "matrix-js-sdk/src/matrix";
+import { Button } from "@vector-im/compound-web";
 
 import { _t, UserFriendlyError } from "../../../languageHandler";
 import Login, { type ClientLoginFlow, type OidcNativeFlow } from "../../../Login";
@@ -439,9 +440,10 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
     private renderOidcNativeStep = (): React.ReactNode => {
         const flow = this.state.flows!.find((flow) => flow.type === "oidcNativeFlow")! as OidcNativeFlow;
         return (
-            <AccessibleButton
+            <Button
                 className="mx_Login_fullWidthButton"
                 kind="primary"
+                size="sm"
                 onClick={async () => {
                     await startOidcLogin(
                         this.props.serverConfig.delegatedAuthentication!,
@@ -452,7 +454,7 @@ export default class LoginComponent extends React.PureComponent<IProps, IState>
                 }}
             >
                 {_t("action|continue")}
-            </AccessibleButton>
+            </Button>
         );
     };
 

src/components/structures/auth/Registration.tsx

@@ -23,6 +23,7 @@ import {
 import React, { type JSX, Fragment, type ReactNode } from "react";
 import classNames from "classnames";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import { adminContactStrings, messageForResourceLimitError, resourceLimitStrings } from "../../../utils/ErrorUtils";
@@ -546,9 +547,10 @@ export default class Registration extends React.Component<IProps, IState> {
             );
         } else if (this.state.matrixClient && this.state.oidcNativeFlow) {
             return (
-                <AccessibleButton
+                <Button
                     className="mx_Login_fullWidthButton"
                     kind="primary"
+                    size="sm"
                     onClick={async () => {
                         await startOidcLogin(
                             this.props.serverConfig.delegatedAuthentication!,
@@ -560,7 +562,7 @@ export default class Registration extends React.Component<IProps, IState> {
                     }}
                 >
                     {_t("action|continue")}
-                </AccessibleButton>
+                </Button>
             );
         } else if (this.state.matrixClient && this.state.flows.length) {
             let ssoSection: JSX.Element | undefined;

src/components/structures/auth/forgot-password/CheckEmail.tsx

@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
 */
 
 import React, { type ReactNode } from "react";
-import { Tooltip } from "@vector-im/compound-web";
+import { Button, Tooltip } from "@vector-im/compound-web";
 import { RestartIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 import AccessibleButton from "../../../views/elements/AccessibleButton";
@@ -55,7 +55,9 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                 </div>
             </div>
             {errorText && <ErrorMessage message={errorText} />}
-            <input onClick={onSubmitForm} type="button" className="mx_Login_submit" value={_t("action|next")} />
+            <Button onClick={onSubmitForm} type="button" className="mx_Login_submit" size="sm">
+                {_t("action|next")}
+            </Button>
             <div className="mx_AuthBody_did-not-receive">
                 <span className="mx_VerifyEMailDialog_text-light">{_t("auth|check_email_resend_prompt")}</span>
                 <Tooltip description={_t("auth|check_email_resend_tooltip")} placement="top" open={tooltipVisible}>

src/components/structures/auth/forgot-password/EnterEmail.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type ReactNode, useRef } from "react";
 import { EmailSolidIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
+import { Button } from "@vector-im/compound-web";
 
 import { _t, _td } from "../../../../languageHandler";
 import EmailField from "../../../views/auth/EmailField";
@@ -74,9 +75,9 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                         />
                     </div>
                     {errorText && <ErrorMessage message={errorText} />}
-                    <button type="submit" className="mx_Login_submit">
+                    <Button type="submit" className="mx_Login_submit" size="sm">
                         {submitButtonChild}
-                    </button>
+                    </Button>
                     <div className="mx_AuthBody_button-container">
                         <AccessibleButton
                             className="mx_AuthBody_sign-in-instead-button"

src/components/views/auth/PasswordLogin.tsx

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import React, { type JSX, type SyntheticEvent } from "react";
 import classNames from "classnames";
+import { Button } from "@vector-im/compound-web";
 
 import { _t } from "../../../languageHandler";
 import SdkConfig from "../../../SdkConfig";
@@ -433,12 +434,9 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                     />
                     {forgotPasswordJsx}
                     {!this.props.busy && (
-                        <input
-                            className="mx_Login_submit"
-                            type="submit"
-                            value={_t("action|sign_in")}
-                            disabled={this.props.disableSubmit}
-                        />
+                        <Button className="mx_Login_submit" size="sm" type="submit" disabled={this.props.disableSubmit}>
+                            {_t("action|sign_in")}
+                        </Button>
                     )}
                 </form>
             </div>

src/components/views/auth/RegistrationForm.tsx

@@ -10,6 +10,7 @@ Please see LICENSE files in the repository root for full details.
 import React, { type JSX, type BaseSyntheticEvent, type ComponentProps, type ReactNode } from "react";
 import { type MatrixClient, MatrixError } from "matrix-js-sdk/src/matrix";
 import { logger } from "matrix-js-sdk/src/logger";
+import { Button } from "@vector-im/compound-web";
 
 import * as Email from "../../../email";
 import { looksValid as phoneNumberLooksValid, type PhoneNumberCountryDefinition } from "../../../phonenumber";
@@ -548,12 +549,9 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
 
     public render(): ReactNode {
         const registerButton = (
-            <input
-                className="mx_Login_submit"
-                type="submit"
-                value={_t("action|register")}
-                disabled={!this.props.canSubmit}
-            />
+            <Button className="mx_Login_submit" size="sm" type="submit" disabled={!this.props.canSubmit}>
+                {_t("action|register")}
+            </Button>
         );
 
         let emailHelperText: JSX.Element | undefined;

src/components/views/elements/SSOButtons.tsx

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Com
 Please see LICENSE files in the repository root for full details.
 */
 
-import React, { type JSX } from "react";
+import React, { type ComponentProps, type JSX } from "react";
 import { chunk } from "lodash";
 import classNames from "classnames";
 import {
@@ -18,9 +18,9 @@ import {
     DELEGATED_OIDC_COMPATIBILITY,
 } from "matrix-js-sdk/src/matrix";
 import { type Signup } from "@matrix-org/analytics-events/types/typescript/Signup";
+import { Button, Tooltip } from "@vector-im/compound-web";
 
 import PlatformPeg from "../../../PlatformPeg";
-import AccessibleButton from "./AccessibleButton";
 import { _t } from "../../../languageHandler";
 import { mediaFromMxc } from "../../../customisations/Media";
 import { PosthogAnalytics } from "../../../PosthogAnalytics";
@@ -78,10 +78,10 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     fragmentAfterLogin,
     idp,
     primary,
-    mini,
+    mini: iconOnly,
     action,
     flow,
-    ...props
+    disabled,
 }) => {
     let label: string;
     if (idp) {
@@ -98,43 +98,47 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
         PlatformPeg.get()?.startSingleSignOn(matrixClient, loginType, fragmentAfterLogin, idp?.id, action);
     };
 
+    const commonProps: Partial<ComponentProps<typeof Button>> & Record<`data-${string}`, string> = {
+        iconOnly,
+        className: classNames("mx_SSOButton", {
+            mx_SSOButton_mini: iconOnly,
+        }),
+        onClick,
+        kind: "secondary",
+        disabled,
+    };
+
+    if (iconOnly || primary) {
+        commonProps.kind = "primary";
+    }
+
     let icon: JSX.Element | undefined;
-    let brandClass: string | undefined;
     const brandIcon = idp?.brand ? getIcon(idp.brand) : null;
     if (idp?.brand && brandIcon) {
         const brandName = idp.brand.split(".").pop();
-        brandClass = `mx_SSOButton_brand_${brandName}`;
         icon = <img src={brandIcon} height="24" width="24" alt={brandName} />;
+        commonProps["data-testid"] = `idp-${idp.id}`;
     } else if (typeof idp?.icon === "string" && idp.icon.startsWith("mxc://")) {
         const src = mediaFromMxc(idp.icon, matrixClient).getSquareThumbnailHttp(24) ?? undefined;
         icon = <img src={src} height="24" width="24" alt={idp.name} />;
     }
 
-    const brandPart = brandClass ? { [brandClass]: brandClass } : undefined;
-    const classes = classNames(
-        "mx_SSOButton",
-        {
-            mx_SSOButton_mini: mini,
-            mx_SSOButton_default: !idp,
-            mx_SSOButton_primary: primary,
-        },
-        brandPart,
-    );
-
-    if (mini) {
-        // TODO fallback icon
+    // TODO fallback icon
+    if (iconOnly) {
         return (
-            <AccessibleButton {...props} title={label} className={classes} onClick={onClick}>
-                {icon}
-            </AccessibleButton>
+            <Tooltip label={label}>
+                <Button {...commonProps} size="lg">
+                    {icon}
+                </Button>
+            </Tooltip>
         );
     }
 
     return (
-        <AccessibleButton {...props} className={classes} onClick={onClick}>
+        <Button {...commonProps} size="sm">
             {icon}
             {label}
-        </AccessibleButton>
+        </Button>
     );
 };
 

test/unit-tests/components/structures/MatrixChat-test.tsx

@@ -1269,7 +1269,7 @@ describe("<MatrixChat />", () => {
             fireEvent.change(screen.getByLabelText("Password"), { target: { value: password } });
 
             // sign in button is an input
-            fireEvent.click(screen.getByDisplayValue("Sign in"));
+            fireEvent.click(screen.getByRole("button", { name: "Sign in" }));
         };
 
         beforeEach(() => {

test/unit-tests/components/structures/auth/Login-test.tsx

@@ -281,11 +281,11 @@ describe("Login", function () {
             ],
         });
 
-        const { container } = getComponent();
+        const { container, getByTestId } = getComponent();
         await waitForElementToBeRemoved(() => screen.queryAllByLabelText("Loading…"));
 
         for (const idp of idpsWithIcons) {
-            const ssoButton = container.querySelector(`.mx_SSOButton.mx_SSOButton_brand_${idp.brand}`);
+            const ssoButton = getByTestId(`idp-${idp.id}`);
             expect(ssoButton).toBeTruthy();
             expect(ssoButton?.querySelector(`img[alt="${idp.brand}"]`)).toBeTruthy();
         }