Fleet UI: Comb through registration buttons (#40444)

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<IButtonProps, IButtonState> {
       className,
       {
         [`${baseClass}--${variant}__small`]: size === "small",
+        [`${baseClass}__wide`]: size === "wide",
         [`${baseClass}--disabled`]: disabled,
         [`${baseClass}--icon-stroke`]: iconStroke,
       }

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;
+  }
 }

frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.tsx

@@ -134,11 +134,11 @@ const ConfirmInviteForm = ({
         error={formErrors.password_confirmation}
         parseTarget
       />
-      <div className="button-wrap">
+      <div className="button-wrap--center">
         <Button
           type="submit"
           disabled={Object.keys(formErrors).length > 0}
-          className="confirm-invite-button"
+          size="wide"
         >
           Submit
         </Button>

frontend/components/forms/ForgotPasswordForm/ForgotPasswordForm.jsx

@@ -42,11 +42,12 @@ class ForgotPasswordForm extends Component {
           placeholder="Email"
           type="email"
         />
-        <div className="button-wrap">
+        <div className="button-wrap--center">
           <Button
             className={`${baseClass}__submit-btn`}
             type="submit"
             isLoading={isLoading}
+            size="wide"
           >
             Get instructions
           </Button>

frontend/components/forms/ForgotPasswordForm/_styles.scss

@@ -1,7 +1,3 @@
 .forgot-password-form {
   width: 100%;
-
-  &__submit-btn {
-    width: 160px;
-  }
 }

frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx

@@ -80,8 +80,13 @@ class AdminDetails extends Component {
           tabIndex={tabIndex}
           label="Confirm password"
         />
-        <div className="button-wrap">
-          <Button type="submit" tabIndex={tabIndex} disabled={!currentPage}>
+        <div className="button-wrap--center">
+          <Button
+            type="submit"
+            tabIndex={tabIndex}
+            disabled={!currentPage}
+            size="wide"
+          >
             Next
           </Button>
         </div>

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.
       </p>
-      <div className="button-wrap">
+      <div className="button-wrap--center">
         <Button
           type="submit"
           tabIndex={tabIndex}
           disabled={!currentPage}
           isLoading={isLoading}
+          size="wide"
         >
           Confirm
         </Button>

frontend/components/forms/RegistrationForm/ConfirmationPage/_styles.scss

@@ -99,8 +99,4 @@
       top: 0;
     }
   }
-
-  .button {
-    width: 160px;
-  }
 }

frontend/components/forms/RegistrationForm/FleetDetails/FleetDetails.jsx

@@ -53,8 +53,13 @@ class FleetDetails extends Component {
             this.firstInput = input;
           }}
         />{" "}
-        <div className="button-wrap">
-          <Button type="submit" tabIndex={tabIndex} disabled={!currentPage}>
+        <div className="button-wrap--center">
+          <Button
+            type="submit"
+            tabIndex={tabIndex}
+            disabled={!currentPage}
+            size="wide"
+          >
             Next
           </Button>
         </div>

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."
         />
-        <div className="button-wrap">
-          <Button type="submit" tabIndex={tabIndex} disabled={!currentPage}>
+        <div className="button-wrap--center">
+          <Button
+            type="submit"
+            tabIndex={tabIndex}
+            disabled={!currentPage}
+            size="wide"
+          >
             Next
           </Button>
         </div>

frontend/components/forms/RegistrationForm/_styles.scss

@@ -135,14 +135,4 @@
     margin: 0;
     padding: 0;
   }
-
-  &__field-wrapper {
-    .button-wrap {
-      justify-content: center;
-    }
-
-    .button {
-      width: 160px;
-    }
-  }
 }

frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tsx

@@ -117,12 +117,8 @@ const ResetPasswordForm = ({
         className={`${baseClass}__input`}
         type="password"
       />
-      <div className="button-wrap">
-        <Button
-          type="submit"
-          onClick={onFormSubmit}
-          className={`${baseClass}__btn`}
-        >
+      <div className="button-wrap--center">
+        <Button type="submit" onClick={onFormSubmit} size="wide">
           Reset password
         </Button>
       </div>

frontend/components/forms/ResetPasswordForm/_styles.scss

@@ -1,10 +1,6 @@
 .reset-password-form {
   width: 100%;
 
-  .button-wrap {
-    justify-content: center;
-  }
-
   &__input {
     width: 100%;
   }

frontend/pages/ConfirmInvitePage/_styles.scss

@@ -7,9 +7,4 @@
   &__description {
     margin: 0;
   }
-
-  .confirm-invite-button {
-    align-self: center;
-    width: 160px;
-  }
 }

frontend/pages/NoAccessPage/NoAccessPage.tsx

@@ -59,9 +59,11 @@ const NoAccessPage = ({ router, orgContactUrl }: INoAccessPageProps) => {
           .
         </p>
       </div>
-      <Button onClick={onBackToLogin} className={`${baseClass}__btn`}>
-        Back to login
-      </Button>
+      <div className="button-wrap--center">
+        <Button onClick={onBackToLogin} size="wide">
+          Back to login
+        </Button>
+      </div>
     </AuthenticationFormWrapper>
   );
 };

frontend/pages/RegistrationPage/_styles.scss

@@ -21,10 +21,4 @@
   &__flash-message {
     top: 180px;
   }
-
-  .button-wrap {
-    button {
-      width: 200px;
-    }
-  }
 }

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;
   }