Update Fleet setup styles (#78)

This PR is part of the UI Refresh #38.

The goal of this PR is to update the styles of the Fleet setup (onboarding) flow.

frontend/components/App/App.jsx

@@ -13,7 +13,6 @@ export class App extends Component {
   static propTypes = {
     children: PropTypes.element,
     dispatch: PropTypes.func,
-    showBackgroundImage: PropTypes.bool,
     user: userInterface,
   };
 
@@ -51,11 +50,10 @@ export class App extends Component {
   }
 
   render () {
-    const { children, showBackgroundImage } = this.props;
+    const { children } = this.props;
 
     const wrapperStyles = classnames(
       'wrapper',
-      { 'wrapper--background': showBackgroundImage },
     );
 
     return (

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

@@ -43,35 +43,32 @@ class AdminDetails extends Component {
         <div className="registration-fields">
           <InputFieldWithIcon
             {...fields.username}
-            iconName="username"
             placeholder="Username"
             tabIndex={tabIndex}
             autofocus={currentPage}
             ref={(input) => { this.firstInput = input; }}
           />
           <InputFieldWithIcon
             {...fields.password}
-            iconName="password"
             placeholder="Password"
             type="password"
             tabIndex={tabIndex}
+            hint={['Must include 7 characters, at least 1 number (e.g. 0 - 9), and at least 1 symbol (e.g. &*#)']}
           />
           <InputFieldWithIcon
             {...fields.password_confirmation}
-            iconName="password"
             placeholder="Confirm Password"
             type="password"
             tabIndex={tabIndex}
           />
           <InputFieldWithIcon
             {...fields.email}
-            iconName="email"
             placeholder="Email"
             tabIndex={tabIndex}
           />
         </div>
-        <Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
-          Submit
+        <Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
+          Next
         </Button>
       </form>
     );

frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx

@@ -4,18 +4,29 @@ import classnames from 'classnames';
 
 import Button from 'components/buttons/Button';
 import formDataInterface from 'interfaces/registration_form_data';
-import Icon from 'components/icons/Icon';
 import Checkbox from 'components/forms/fields/Checkbox';
 
 const baseClass = 'confirm-user-reg';
 
 class ConfirmationPage extends Component {
   static propTypes = {
     className: PropTypes.string,
+    currentPage: PropTypes.bool,
     formData: formDataInterface,
     handleSubmit: PropTypes.func,
   };
 
+  componentDidUpdate(prevProps) {
+    if (this.props.currentPage && this.props.currentPage !== prevProps.currentPage) {
+      // Component has a transition duration of 300ms set in
+      // RegistrationForm/_styles.scss. We need to wait 300ms before
+      // calling .focus() to preserve smooth transition.
+      setTimeout(() => {
+        this.firstInput.input.focus();
+      }, 300);
+    }
+  }
+
   importOsqueryConfig = () => {
     const disableImport = true;
 
@@ -37,6 +48,7 @@ class ConfirmationPage extends Component {
     const { importOsqueryConfig } = this;
     const {
       className,
+      currentPage,
       handleSubmit,
       formData: {
         email,
@@ -45,13 +57,13 @@ class ConfirmationPage extends Component {
         username,
       },
     } = this.props;
+    const tabIndex = currentPage ? 1 : -1;
 
     const confirmRegClasses = classnames(className, baseClass);
 
     return (
       <form onSubmit={handleSubmit} className={confirmRegClasses}>
         <div className={`${baseClass}__wrapper`}>
-          <Icon name="success-check" className={`${baseClass}__icon`} />
           <table className={`${baseClass}__table`}>
             <caption>Administrator Configuration</caption>
             <tbody>
@@ -77,7 +89,7 @@ class ConfirmationPage extends Component {
           {importOsqueryConfig()}
         </div>
 
-        <Button type="submit" variant="gradient" className={`${baseClass}__submit`} autofocus>
+        <Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand" autofocus>
           Finish
         </Button>
       </form>

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

@@ -1,6 +1,10 @@
 .confirm-user-reg {
-  &__wrapper {
-    padding: 0 35px 25px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  h2 {
+    text-align: center;
   }
 
   &__icon {
@@ -27,41 +31,34 @@
     width: 100%;
 
     caption {
-      font-size: 18px;
+      font-size: $small;
       font-weight: $bold;
-      line-height: 0.72;
-      letter-spacing: 0.6px;
-      color: $core-dark-blue-grey;
-      text-transform: uppercase;
-      padding-bottom: 20px;
+      margin-bottom: 24px;
+      text-align: left;
     }
 
     tr {
       vertical-align: bottom;
     }
 
     th {
-      font-size: 14px;
+      font-size: $small;
       font-weight: $bold;
-      line-height: 1.71;
-      letter-spacing: 0.5px;
-      color: $core-dark-blue-grey;
       text-align: left;
+      padding-right: 108px;
     }
 
     td {
-      font-size: 14px;
+      font-size: $small;
       font-weight: $regular;
-      line-height: 1.71;
-      letter-spacing: 0.5px;
-      color: $core-dark-blue-grey;
     }
   }
 
   &__table-url {
-    @include ellipsis(90%);
+    @include ellipsis(100%);
     font-family: 'SourceCodePro', $monospace;
     vertical-align: bottom;
+    font-weight: 600;
   }
 
   &__import {
@@ -92,4 +89,9 @@
       top: 0;
     }
   }
+
+  .button {
+    width: 160px;
+    margin-top: 40px;
+  }
 }

frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx

@@ -46,7 +46,7 @@ class KolideDetails extends Component {
             ref={(input) => { this.firstInput = input; }}
           />
         </div>
-        <Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
+        <Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
           Submit
         </Button>
       </form>

frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx

@@ -49,11 +49,11 @@ class OrgDetails extends Component {
             {...fields.org_logo_url}
             placeholder="Organization Logo URL (optional)"
             tabIndex={tabIndex}
-            hint="must start with https://"
+            hint="Personalize Fleet with your brand.  For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png."
           />
         </div>
-        <Button type="submit" variant="gradient" tabIndex={tabIndex} disabled={!currentPage}>
-          Submit
+        <Button type="submit" tabIndex={tabIndex} disabled={!currentPage} className="button button--brand">
+          Next
         </Button>
       </form>
     );

frontend/components/forms/RegistrationForm/RegistrationForm.jsx

@@ -7,13 +7,6 @@ import ConfirmationPage from 'components/forms/RegistrationForm/ConfirmationPage
 import KolideDetails from 'components/forms/RegistrationForm/KolideDetails';
 import OrgDetails from 'components/forms/RegistrationForm/OrgDetails';
 
-const PAGE_HEADER_TEXT = {
-  1: 'SET USERNAME & PASSWORD',
-  2: 'SET ORGANIZATION DETAILS',
-  3: 'SET KOLIDE WEB ADDRESS',
-  4: 'SUCCESS',
-};
-
 const baseClass = 'user-registration';
 
 class RegistrationForm extends Component {
@@ -68,99 +61,51 @@ class RegistrationForm extends Component {
     return false;
   }
 
-  renderHeader = () => {
-    const { page } = this.props;
-    const headerText = PAGE_HEADER_TEXT[page];
-
-    if (headerText) {
-      return <h2 className={`${baseClass}__title`}>{headerText}</h2>;
-    }
-
-    return false;
-  }
-
-  renderDescription = () => {
-    const { page } = this.props;
-
-    if (page === 1) {
-      return (
-        <div className={`${baseClass}__description`}>
-          <p>Additional admins can be designated within the Fleet App</p>
-          <p>Passwords must include 7 characters, at least 1 number (eg. 0-9) and at least 1 symbol (eg. ^&*#)</p>
-        </div>
-      );
-    }
-
-    if (page === 2) {
-      return (
-        <div className={`${baseClass}__description`}>
-          <p>Set your organization&apos;s name (eg. Kolide, Inc)</p>
-          <p>(Optional) Set an organization logo to use in the Fleet application. Should be an https URL to an image file (eg. https://kolide.co/logo.png).</p>
-        </div>
-      );
-    }
-
-    if (page === 3) {
-      return (
-        <div className={`${baseClass}__description`}>
-          <p>Define the base URL of this Fleet instance.</p>
-        </div>
-      );
-    }
-
-    return false;
-  }
-
-  renderContent = () => {
-    const { page } = this.props;
-    const { formData } = this.state;
-    const {
-      onSubmitConfirmation,
-      renderDescription,
-      renderHeader,
-    } = this;
-
-    if (page === 4) {
-      return (
-        <div>
-          {renderHeader()}
-          <ConfirmationPage formData={formData} handleSubmit={onSubmitConfirmation} className={`${baseClass}__confirmation`} />
-        </div>
-      );
-    }
-
-    return (
-      <div>
-        {renderHeader()}
-        {renderDescription()}
-      </div>
-    );
-  }
-
   render () {
     const { page } = this.props;
     const { formData } = this.state;
-    const { isCurrentPage, onPageFormSubmit, renderContent } = this;
+    const { isCurrentPage, onPageFormSubmit, onSubmitConfirmation } = this;
 
-    const containerClass = classnames(`${baseClass}__container`, {
-      [`${baseClass}__container--complete`]: page > 3,
-    });
+    const adminDetailsContainerClass = classnames(
+      `${baseClass}__container`,
+      `${baseClass}__container--admin`,
+    );
 
     const adminDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
       `${baseClass}__field-wrapper--admin`,
     );
 
+    const orgDetailsContainerClass = classnames(
+      `${baseClass}__container`,
+      `${baseClass}__container--org`,
+    );
+
     const orgDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
       `${baseClass}__field-wrapper--org`,
     );
 
+    const kolideDetailsContainerClass = classnames(
+      `${baseClass}__container`,
+      `${baseClass}__container--kolide`,
+    );
+
     const kolideDetailsClass = classnames(
       `${baseClass}__field-wrapper`,
       `${baseClass}__field-wrapper--kolide`,
     );
 
+    const confirmationContainerClass = classnames(
+      `${baseClass}__container`,
+      `${baseClass}__container--confirmation`,
+    );
+
+    const confirmationClass = classnames(
+      `${baseClass}__field-wrapper`,
+      `${baseClass}__field-wrapper--confirmation`,
+    );
+
     const formSectionClasses = classnames(
       `${baseClass}__form`,
       {
@@ -170,21 +115,30 @@ class RegistrationForm extends Component {
         [`${baseClass}__form--step2-complete`]: page > 2,
         [`${baseClass}__form--step3-active`]: page === 3,
         [`${baseClass}__form--step3-complete`]: page > 3,
+        [`${baseClass}__form--step4-active`]: page === 4,
       },
     );
 
     return (
       <div className={baseClass}>
-        <div className={containerClass}>
-          {renderContent()}
-
-          <div className={formSectionClasses}>
+        <div className={formSectionClasses}>
+          <div className={adminDetailsContainerClass}>
+            <h2>Setup user</h2>
+            <p>Additional admins can be designated within the Fleet App</p>
             <AdminDetails formData={formData} handleSubmit={onPageFormSubmit} className={adminDetailsClass} currentPage={isCurrentPage(1)} />
-
+          </div>
+          <div className={orgDetailsContainerClass}>
+            <h2>Organization details</h2>
             <OrgDetails formData={formData} handleSubmit={onPageFormSubmit} className={orgDetailsClass} currentPage={isCurrentPage(2)} />
-
+          </div>
+          <div className={kolideDetailsContainerClass}>
+            <h2>Set Fleet URL</h2>
             <KolideDetails formData={formData} handleSubmit={onPageFormSubmit} className={kolideDetailsClass} currentPage={isCurrentPage(3)} />
           </div>
+          <div className={confirmationContainerClass}>
+            <h2>Success</h2>
+            <ConfirmationPage formData={formData} handleSubmit={onSubmitConfirmation} classNmae={confirmationClass} currentPage={isCurrentPage(4)} />
+          </div>
         </div>
       </div>
     );