Update dependency @vector-im/compound-web to v9.2.1 (#33270)

* Update dependency @vector-im/compound-web to v9.2.1

* Update button sizes

* More button size updates

* Another button size

* Button size

* Snapshot updates

* Snapshots

* More sm/md

* More button size updates

* snapshot

* and one more from merging develop

* More snapshots

* Phantom typing

* yep, more snapshots

* More snapshots

* More snapshots

* Last ones?

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: David Baker <dbkr@users.noreply.github.com>

apps/web/src/async-components/structures/ErrorView.tsx

@@ -192,11 +192,11 @@ export const UnsupportedBrowserView: React.FC<{
             </Text>
 
             <Flex gap="var(--cpd-space-4x)" className="mx_ErrorView_flexContainer mx_ErrorView_buttons">
-                <Button Icon={PopOutIcon} kind="secondary" size="sm">
+                <Button Icon={PopOutIcon} kind="secondary" size="md">
                     {_t("incompatible_browser|learn_more")}
                 </Button>
                 {onAccept && (
-                    <Button kind="primary" size="sm" onClick={onAccept}>
+                    <Button kind="primary" size="md" onClick={onAccept}>
                         {_t("incompatible_browser|continue")}
                     </Button>
                 )}

apps/web/src/components/structures/auth/ForgotPassword.tsx

@@ -419,7 +419,7 @@ 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" size="sm">
+                        <Button type="submit" className="mx_Login_submit" size="md">
                             {submitButtonChild}
                         </Button>
                     </fieldset>
@@ -434,7 +434,7 @@ 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}
-                <Button className="mx_Login_submit" size="sm" type="button" onClick={this.props.onComplete}>
+                <Button className="mx_Login_submit" size="md" type="button" onClick={this.props.onComplete}>
                     {_t("auth|reset_password|return_to_login")}
                 </Button>
             </>

apps/web/src/components/structures/auth/Login.tsx

@@ -441,7 +441,7 @@ class LoginComponent extends React.PureComponent<IProps, IState> {
             <Button
                 className="mx_Login_fullWidthButton"
                 kind="primary"
-                size="sm"
+                size="md"
                 onClick={async () => {
                     await startOidcLogin(
                         this.props.serverConfig.delegatedAuthentication!,

apps/web/src/components/structures/auth/Registration.tsx

@@ -550,7 +550,7 @@ export default class Registration extends React.Component<IProps, IState> {
                 <Button
                     className="mx_Login_fullWidthButton"
                     kind="primary"
-                    size="sm"
+                    size="md"
                     onClick={async () => {
                         await startOidcLogin(
                             this.props.serverConfig.delegatedAuthentication!,

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

@@ -55,7 +55,7 @@ export const CheckEmail: React.FC<CheckEmailProps> = ({
                 </div>
             </div>
             {errorText && <ErrorMessage message={errorText} />}
-            <Button onClick={onSubmitForm} type="button" className="mx_Login_submit" size="sm">
+            <Button onClick={onSubmitForm} type="button" className="mx_Login_submit" size="md">
                 {_t("action|next")}
             </Button>
             <div className="mx_AuthBody_did-not-receive">

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

@@ -75,7 +75,7 @@ export const EnterEmail: React.FC<EnterEmailProps> = ({
                         />
                     </div>
                     {errorText && <ErrorMessage message={errorText} />}
-                    <Button type="submit" className="mx_Login_submit" size="sm">
+                    <Button type="submit" className="mx_Login_submit" size="md">
                         {submitButtonChild}
                     </Button>
                     <div className="mx_AuthBody_button-container">

apps/web/src/components/views/auth/DefaultWelcome.tsx

@@ -32,14 +32,14 @@ const DefaultWelcome: React.FC = () => {
             {isElement && <Text size="md">{_t("welcome|tagline_element")}</Text>}
 
             <div className="mx_DefaultWelcome_buttons">
-                <Button as="a" href="#/login" kind="primary" size="sm">
+                <Button as="a" href="#/login" kind="primary" size="md">
                     {_t("action|sign_in")}
                 </Button>
-                <Button as="a" href="#/register" kind="secondary" size="sm">
+                <Button as="a" href="#/register" kind="secondary" size="md">
                     {_t("action|create_account")}
                 </Button>
                 {showGuestFunctions && (
-                    <Button as="a" href="#/directory" kind="tertiary" size="sm">
+                    <Button as="a" href="#/directory" kind="tertiary" size="md">
                         {_t("action|explore_rooms")}
                     </Button>
                 )}

apps/web/src/components/views/auth/PasswordLogin.tsx

@@ -434,7 +434,7 @@ export default class PasswordLogin extends React.PureComponent<IProps, IState> {
                     />
                     {forgotPasswordJsx}
                     {!this.props.busy && (
-                        <Button className="mx_Login_submit" size="sm" type="submit" disabled={this.props.disableSubmit}>
+                        <Button className="mx_Login_submit" size="md" type="submit" disabled={this.props.disableSubmit}>
                             {_t("action|sign_in")}
                         </Button>
                     )}

apps/web/src/components/views/auth/RegistrationForm.tsx

@@ -549,7 +549,7 @@ export default class RegistrationForm extends React.PureComponent<IProps, IState
 
     public render(): ReactNode {
         const registerButton = (
-            <Button className="mx_Login_submit" size="sm" type="submit" disabled={!this.props.canSubmit}>
+            <Button className="mx_Login_submit" size="md" type="submit" disabled={!this.props.canSubmit}>
                 {_t("action|register")}
             </Button>
         );

apps/web/src/components/views/elements/BugReportDialogButton.tsx

@@ -34,7 +34,7 @@ export function BugReportDialogButton({
         return null;
     }
     return (
-        <Button kind="secondary" size="sm" onClick={onClick}>
+        <Button kind="secondary" size="md" onClick={onClick}>
             {bugReportUrl === BugReportEndpointURLLocal
                 ? _t("bug_reporting|download_logs")
                 : _t("bug_reporting|submit_debug_logs")}

apps/web/src/components/views/elements/SSOButtons.tsx

@@ -135,7 +135,7 @@ const SSOButton: React.FC<ISSOButtonProps> = ({
     }
 
     return (
-        <Button {...commonProps} size="sm">
+        <Button {...commonProps} size="md">
             {icon}
             {label}
         </Button>

apps/web/src/components/views/right_panel/ExtensionsCard.tsx

@@ -191,7 +191,7 @@ const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
     return (
         <BaseCard header={_t("right_panel|extensions_button")} className="mx_ExtensionsCard" onClose={onClose}>
             {shouldShowComponent(UIComponent.AddIntegrations) && (
-                <Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
+                <Button size="md" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
                     {_t("right_panel|add_integrations")}
                 </Button>
             )}

apps/web/src/components/views/right_panel/user_info/UserInfoHeaderVerificationView.tsx

@@ -40,7 +40,7 @@ export const UserInfoHeaderVerificationView: React.FC<{
                 <Button
                     className="mx_UserInfo_verify_button"
                     kind="tertiary"
-                    size="sm"
+                    size="md"
                     onClick={() => vm.verifySelectedUser()}
                 >
                     {_t("user_info|verify_button")}

apps/web/src/components/views/rooms/MemberList/MemberListHeaderView.tsx

@@ -47,7 +47,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
                     className="mx_MemberListHeaderView_invite_small"
                     kind="secondary"
                     onClick={vm.onInviteButtonClick}
-                    size="sm"
+                    size="md"
                     iconOnly={true}
                     Icon={InviteIcon}
                     disabled={disabled}
@@ -63,7 +63,7 @@ const InviteButton: React.FC<Props> = ({ vm }) => {
         <InviteTooltip canInvite={vm.canInvite}>
             <Button
                 kind="secondary"
-                size="sm"
+                size="md"
                 Icon={UserAddIcon}
                 className="mx_MemberListHeaderView_invite_large"
                 disabled={!vm.canInvite}

apps/web/src/components/views/rooms/RoomHeader/RoomHeader.tsx

@@ -117,7 +117,7 @@ function RoomHeaderButtons({
             }
         >
             <Button
-                size="sm"
+                size="md"
                 onClick={videoClick}
                 // If we know this is a voice session, show the voice call. All other kinds of call are video calls.
                 Icon={activeCallSessionType === CallType.Voice ? VoiceCallIcon : VideoCallIcon}

apps/web/src/components/views/rooms/ThirdPartyMemberInfo.tsx

@@ -117,7 +117,7 @@ export default class ThirdPartyMemberInfo extends React.Component<IProps, IState
                     <Text as="span" role="heading" size="lg" weight="semibold">
                         {_t("user_info|admin_tools_section")}
                     </Text>
-                    <Button size="sm" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
+                    <Button size="md" kind="destructive" className="mx_MemberInfo_field" onClick={this.onKickClick}>
                         {_t("user_info|revoke_invite")}
                     </Button>
                 </Flex>

apps/web/src/components/views/rooms/UserIdentityWarning.tsx

@@ -122,7 +122,7 @@ function warningBanner(
             <div className="mx_UserIdentityWarning_row">
                 {avatar}
                 <span className={classNames("mx_UserIdentityWarning_main", { critical: isCritical })}>{title}</span>
-                <Button kind="secondary" size="sm" onClick={onButtonClick}>
+                <Button kind="secondary" size="md" onClick={onButtonClick}>
                     {action}
                 </Button>
             </div>

apps/web/src/components/views/settings/PowerLevelSelector.tsx

@@ -129,7 +129,7 @@ export function PowerLevelSelector({
             })}
 
             <Button
-                size="sm"
+                size="md"
                 kind="primary"
                 // mx_Dialog_nonDialogButton is necessary to avoid the Dialog CSS to override the button style
                 className="mx_Dialog_nonDialogButton mx_PowerLevelSelector_Button"

apps/web/src/components/views/settings/encryption/AdvancedPanel.tsx

@@ -72,7 +72,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
             </div>
             <div className="mx_EncryptionDetails_buttons">
                 <Button
-                    size="sm"
+                    size="md"
                     kind="secondary"
                     Icon={DownloadIcon}
                     onClick={() =>
@@ -87,7 +87,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
                     {_t("settings|encryption|advanced|export_keys")}
                 </Button>
                 <Button
-                    size="sm"
+                    size="md"
                     kind="secondary"
                     Icon={ShareIcon}
                     onClick={() =>
@@ -102,7 +102,7 @@ function EncryptionDetails({ onResetIdentityClick }: EncryptionDetails): JSX.Ele
                     {_t("settings|encryption|advanced|import_keys")}
                 </Button>
             </div>
-            <Button size="sm" kind="tertiary" destructive={true} onClick={onResetIdentityClick}>
+            <Button size="md" kind="tertiary" destructive={true} onClick={onResetIdentityClick}>
                 {_t("settings|encryption|advanced|reset_identity")}
             </Button>
         </div>

apps/web/src/components/views/settings/encryption/RecoveryPanel.tsx

@@ -57,14 +57,14 @@ export function RecoveryPanel({ onChangeRecoveryKeyClick }: RecoveryPanelProps):
             break;
         case "missing_recovery_key":
             content = (
-                <Button size="sm" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
+                <Button size="md" kind="primary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(true)}>
                     {_t("settings|encryption|recovery|set_up_recovery")}
                 </Button>
             );
             break;
         case "good":
             content = (
-                <Button size="sm" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
+                <Button size="md" kind="secondary" Icon={KeyIcon} onClick={() => onChangeRecoveryKeyClick(false)}>
                     {_t("settings|encryption|recovery|change_recovery_key")}
                 </Button>
             );

apps/web/src/components/views/settings/encryption/RecoveryPanelOutOfSync.tsx

@@ -62,11 +62,11 @@ export function RecoveryPanelOutOfSync({
             data-testid="recoveryPanel"
         >
             <div className="mx_RecoveryPanelOutOfSync">
-                <Button size="sm" kind="secondary" onClick={onForgotRecoveryKey}>
+                <Button size="md" kind="secondary" onClick={onForgotRecoveryKey}>
                     {_t("settings|encryption|recovery|forgot_recovery_key")}
                 </Button>
                 <Button
-                    size="sm"
+                    size="md"
                     kind="primary"
                     Icon={KeyIcon}
                     onClick={async () => {

apps/web/src/components/views/settings/tabs/user/EncryptionUserSettingsTab.tsx

@@ -204,7 +204,7 @@ function SetUpEncryptionPanel({ onFinish }: SetUpEncryptionPanelProps): JSX.Elem
             }
         >
             <Button
-                size="sm"
+                size="md"
                 Icon={ComputerIcon}
                 onClick={() => {
                     const { finished } = Modal.createDialog(SetupEncryptionDialog);
@@ -237,7 +237,7 @@ function IdentityNeedsResetNoticePanel({ onContinue }: Readonly<IdentityNeedsRes
             }
         >
             <div>
-                <Button size="sm" kind="primary" onClick={onContinue}>
+                <Button size="md" kind="primary" onClick={onContinue}>
                     {_t("encryption|continue_with_reset")}
                 </Button>
             </div>

apps/web/src/components/views/toasts/GenericToast.tsx

@@ -56,7 +56,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                         onClick={onSecondaryClick}
                         kind={destructive === "secondary" ? "destructive" : "secondary"}
                         Icon={SecondaryIcon}
-                        size="sm"
+                        size="md"
                     >
                         {secondaryLabel}
                     </Button>
@@ -65,7 +65,7 @@ const GenericToast: React.FC<XOR<IPropsExtended, IProps>> = ({
                     onClick={onPrimaryClick}
                     kind={destructive === "primary" ? "destructive" : "primary"}
                     Icon={PrimaryIcon}
-                    size="sm"
+                    size="md"
                 >
                     {primaryLabel}
                 </Button>

apps/web/src/toasts/IncomingCallToast.tsx

@@ -85,7 +85,7 @@ function JoinCallButtonWithCall({ onClick, disabledTooltip, isRinging }: JoinCal
                 disabled={disabledTooltip != undefined}
                 kind="primary"
                 Icon={CheckIcon}
-                size="sm"
+                size="md"
             >
                 {isRinging ? _t("action|accept") : _t("action|join")}
             </Button>
@@ -123,7 +123,7 @@ function DeclineCallButtonWithNotificationEvent({
                 destructive
                 disabled={declining}
                 Icon={CloseIcon}
-                size="sm"
+                size="md"
             >
                 {_t("action|decline")}
             </Button>