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,46 +20,26 @@ 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 {
+        svg,
+        img {
+            width: 24px;
+            height: 24px;
             object-fit: contain;
             position: absolute;
             left: 8px;
             top: 4px;
+            color: var(--cpd-color-icon-primary);
         }
     }
 
-    .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;
+        svg,
+        img {
+            /* 30px parent, 24px self */
+            padding: 3px;
+            position: unset;
         }
 
         & + .mx_SSOButton_mini {

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;