From a42a5041f469c2ef505b9a4592e5865a9b747927 Mon Sep 17 00:00:00 2001 From: RachelElysia <71795832+RachelElysia@users.noreply.github.com> Date: Thu, 26 Feb 2026 12:13:53 -0500 Subject: [PATCH] Fleet UI: Comb through registration buttons (#40444) --- frontend/components/buttons/Button/Button.tsx | 5 +++-- frontend/components/buttons/Button/_styles.scss | 5 +++++ .../forms/ConfirmInviteForm/ConfirmInviteForm.tsx | 4 ++-- .../forms/ForgotPasswordForm/ForgotPasswordForm.jsx | 3 ++- .../components/forms/ForgotPasswordForm/_styles.scss | 4 ---- .../RegistrationForm/AdminDetails/AdminDetails.jsx | 9 +++++++-- .../ConfirmationPage/ConfirmationPage.tsx | 3 ++- .../RegistrationForm/ConfirmationPage/_styles.scss | 4 ---- .../RegistrationForm/FleetDetails/FleetDetails.jsx | 9 +++++++-- .../forms/RegistrationForm/OrgDetails/OrgDetails.jsx | 9 +++++++-- .../components/forms/RegistrationForm/_styles.scss | 10 ---------- .../forms/ResetPasswordForm/ResetPasswordForm.tsx | 8 ++------ .../components/forms/ResetPasswordForm/_styles.scss | 4 ---- frontend/pages/ConfirmInvitePage/_styles.scss | 5 ----- frontend/pages/NoAccessPage/NoAccessPage.tsx | 8 +++++--- frontend/pages/RegistrationPage/_styles.scss | 6 ------ frontend/styles/global/_global.scss | 11 +++++++++-- 17 files changed, 51 insertions(+), 56 deletions(-) diff --git a/frontend/components/buttons/Button/Button.tsx b/frontend/components/buttons/Button/Button.tsx index 70bb0b547e7..6ec51e596ef 100644 --- a/frontend/components/buttons/Button/Button.tsx +++ b/frontend/components/buttons/Button/Button.tsx @@ -52,8 +52,8 @@ export interface IButtonProps { | "dialog"; ariaExpanded?: boolean; ariaLabel?: string; - /** Small: 1/2 the padding */ - size?: "small" | "default"; + /** Small: 1/2 the padding, Wide: 200px */ + size?: "small" | "wide" | "default"; } // eslint-disable-next-line @typescript-eslint/no-empty-interface @@ -136,6 +136,7 @@ class Button extends React.Component { className, { [`${baseClass}--${variant}__small`]: size === "small", + [`${baseClass}__wide`]: size === "wide", [`${baseClass}--disabled`]: disabled, [`${baseClass}--icon-stroke`]: iconStroke, } diff --git a/frontend/components/buttons/Button/_styles.scss b/frontend/components/buttons/Button/_styles.scss index ad93b982140..18257b5a3ed 100644 --- a/frontend/components/buttons/Button/_styles.scss +++ b/frontend/components/buttons/Button/_styles.scss @@ -551,4 +551,9 @@ $base-class: "button"; right: -$pad-small; margin-left: -$pad-small; } + + // Used in registration/auth pages + &__wide { + width: 200px; + } } diff --git a/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.tsx b/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.tsx index e201697db62..5dd97d654ed 100644 --- a/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.tsx +++ b/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.tsx @@ -134,11 +134,11 @@ const ConfirmInviteForm = ({ error={formErrors.password_confirmation} parseTarget /> -
+
diff --git a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx index c565de4a494..657822ba0e1 100644 --- a/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx +++ b/frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx @@ -42,11 +42,12 @@ class ForgotPasswordForm extends Component { placeholder="Email" type="email" /> -
+
diff --git a/frontend/components/forms/ForgotPasswordForm/_styles.scss b/frontend/components/forms/ForgotPasswordForm/_styles.scss index db10b330715..215f214def7 100644 --- a/frontend/components/forms/ForgotPasswordForm/_styles.scss +++ b/frontend/components/forms/ForgotPasswordForm/_styles.scss @@ -1,7 +1,3 @@ .forgot-password-form { width: 100%; - - &__submit-btn { - width: 160px; - } } diff --git a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx index 66877b6abee..a29e7277fc5 100644 --- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx +++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx @@ -80,8 +80,13 @@ class AdminDetails extends Component { tabIndex={tabIndex} label="Confirm password" /> -
-
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx index 0bc891602dd..b765efeeb35 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.tsx @@ -104,12 +104,13 @@ const ConfirmationPage = ({ your instance. Sending usage statistics from your Fleet instance is optional and can be disabled in settings.

-
+
diff --git a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss index d54dbb6d231..1bbe423bfef 100644 --- a/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss +++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss @@ -99,8 +99,4 @@ top: 0; } } - - .button { - width: 160px; - } } diff --git a/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx index 58b388478e4..239cae1be23 100644 --- a/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx +++ b/frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx @@ -53,8 +53,13 @@ class FleetDetails extends Component { this.firstInput = input; }} />{" "} -
-
diff --git a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx index fd3d04faa87..f8aab2b9588 100644 --- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx +++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx @@ -55,8 +55,13 @@ class OrgDetails extends Component { tabIndex={tabIndex} helpText="Personalize Fleet with your brand. For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png." /> -
-
diff --git a/frontend/components/forms/RegistrationForm/_styles.scss b/frontend/components/forms/RegistrationForm/_styles.scss index 787ebbf9cab..511b18171d7 100644 --- a/frontend/components/forms/RegistrationForm/_styles.scss +++ b/frontend/components/forms/RegistrationForm/_styles.scss @@ -135,14 +135,4 @@ margin: 0; padding: 0; } - - &__field-wrapper { - .button-wrap { - justify-content: center; - } - - .button { - width: 160px; - } - } } diff --git a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tsx index f1e09f6e316..403c66279ab 100644 --- a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tsx +++ b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tsx @@ -117,12 +117,8 @@ const ResetPasswordForm = ({ className={`${baseClass}__input`} type="password" /> -
-
diff --git a/frontend/components/forms/ResetPasswordForm/_styles.scss b/frontend/components/forms/ResetPasswordForm/_styles.scss index 5ef5c744e3b..61613e69351 100644 --- a/frontend/components/forms/ResetPasswordForm/_styles.scss +++ b/frontend/components/forms/ResetPasswordForm/_styles.scss @@ -1,10 +1,6 @@ .reset-password-form { width: 100%; - .button-wrap { - justify-content: center; - } - &__input { width: 100%; } diff --git a/frontend/pages/ConfirmInvitePage/_styles.scss b/frontend/pages/ConfirmInvitePage/_styles.scss index d373197dde6..c6291afe628 100644 --- a/frontend/pages/ConfirmInvitePage/_styles.scss +++ b/frontend/pages/ConfirmInvitePage/_styles.scss @@ -7,9 +7,4 @@ &__description { margin: 0; } - - .confirm-invite-button { - align-self: center; - width: 160px; - } } diff --git a/frontend/pages/NoAccessPage/NoAccessPage.tsx b/frontend/pages/NoAccessPage/NoAccessPage.tsx index 22c4e34bf53..a1de9a3f890 100644 --- a/frontend/pages/NoAccessPage/NoAccessPage.tsx +++ b/frontend/pages/NoAccessPage/NoAccessPage.tsx @@ -59,9 +59,11 @@ const NoAccessPage = ({ router, orgContactUrl }: INoAccessPageProps) => { .

- +
+ +
); }; diff --git a/frontend/pages/RegistrationPage/_styles.scss b/frontend/pages/RegistrationPage/_styles.scss index 40a28a8d6c4..d23861caa14 100644 --- a/frontend/pages/RegistrationPage/_styles.scss +++ b/frontend/pages/RegistrationPage/_styles.scss @@ -21,10 +21,4 @@ &__flash-message { top: 180px; } - - .button-wrap { - button { - width: 200px; - } - } } diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss index ef704b277fb..d2c83822061 100644 --- a/frontend/styles/global/_global.scss +++ b/frontend/styles/global/_global.scss @@ -101,10 +101,17 @@ form, margin: 0; display: flex; gap: $pad-medium; + + &--center { + margin: 0; + display: flex; + gap: $pad-medium; + justify-content: center; + } } - // Override button width to auto unless icon-only which has fixed widths - .button:not(.button--icon):not(.button--icon__small) { + // Override button width to auto unless icon-only or wide buttons which has fixed widths + .button:not(.button--icon):not(.button--icon__small):not(.button__wide) { width: auto; }