Add style fixes caught during QA. Add favicon. (#119)

Changes include style fixes that were caught during a QA pass.
2024-11-06 08:55:24 +00:00 · 2020-12-10 13:09:05 -08:00 · 2020-12-10 13:09:05 -08:00 · 1b23b7b74f
commit 1b23b7b74f
parent 416235f4b8
60 changed files with 181 additions and 173 deletions
--- a/assets/images/robo-dog-176x144@2x.png
+++ b/assets/images/robo-dog-176x144@2x.png
--- a/frontend/components/config/EnrollSecretTable/_styles.scss
+++ b/frontend/components/config/EnrollSecretTable/_styles.scss
@ -32,6 +32,10 @@
    right: 16px;
    transform: translateY(60%);

+    span {
+      font-weight: $regular;
+    }
+
    a {
      display: flex;
      align-items: center;
--- a/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.jsx
+++ b/frontend/components/forms/ChangePasswordForm/ChangePasswordForm.jsx
@ -29,17 +29,17 @@ class ChangePasswordForm extends Component {
        <InputField
          {...fields.old_password}
          autofocus
-          label="Original Password"
+          label="Original password"
          type="password"
        />
        <InputField
          {...fields.new_password}
-          label="New Password"
+          label="New password"
          type="password"
        />
        <InputField
          {...fields.new_password_confirmation}
-          label="New Password Confirmation"
+          label="New password confirmation"
          type="password"
        />
        <div className={`${baseClass}__btn-wrap`}>
--- a/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
+++ b/frontend/components/forms/ConfigurePackQueryForm/_styles.scss
@ -11,9 +11,10 @@

      .form-field__hint {
        position: absolute;
-        bottom: 5px;
+        bottom: 10px;
        right: 10px;
        text-transform: lowercase;
+        font-size: $x-small;
      }
    }
  }
--- a/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx
+++ b/frontend/components/forms/ConfirmInviteForm/ConfirmInviteForm.jsx
@ -47,7 +47,7 @@ class ConfirmInviteForm extends Component {
          />
          <InputFieldWithIcon
            {...fields.password_confirmation}
-            placeholder="Confirm Password"
+            placeholder="Confirm password"
            type="password"
          />
        </div>
--- a/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/AdminDetails/AdminDetails.jsx
@ -57,7 +57,7 @@ class AdminDetails extends Component {
          />
          <InputFieldWithIcon
            {...fields.password_confirmation}
-            placeholder="Confirm Password"
+            placeholder="Confirm password"
            type="password"
            tabIndex={tabIndex}
          />
--- a/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
+++ b/frontend/components/forms/RegistrationForm/ConfirmationPage/ConfirmationPage.jsx
@ -65,7 +65,7 @@ class ConfirmationPage extends Component {
      <form onSubmit={handleSubmit} className={confirmRegClasses}>
        <div className={`${baseClass}__wrapper`}>
          <table className={`${baseClass}__table`}>
-            <caption>Administrator Configuration</caption>
+            <caption>Administrator configuration</caption>
            <tbody>
              <tr>
                <th>Username:</th>
--- a/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/KolideDetails/KolideDetails.jsx
@ -40,9 +40,9 @@ class KolideDetails extends Component {
        <div className="registration-fields">
          <InputFieldWithIcon
            {...fields.kolide_server_url}
-            placeholder="Fleet Web Address"
+            placeholder="Fleet web address"
            tabIndex={tabIndex}
-            hint={['Don’t include ', <code key="hint">/v1</code>, ' or any other path']}
+            hint={['Don’t include ', <code key="hint">/v1</code>, ' or any other path.']}
            ref={(input) => { this.firstInput = input; }}
          />
        </div>
--- a/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
+++ b/frontend/components/forms/RegistrationForm/OrgDetails/OrgDetails.jsx
@ -41,13 +41,13 @@ class OrgDetails extends Component {
        <div className="registration-fields">
          <InputFieldWithIcon
            {...fields.org_name}
-            placeholder="Organization Name"
+            placeholder="Organization name"
            tabIndex={tabIndex}
            ref={(input) => { this.firstInput = input; }}
          />
          <InputFieldWithIcon
            {...fields.org_logo_url}
-            placeholder="Organization Logo URL (optional)"
+            placeholder="Organization logo URL (optional)"
            tabIndex={tabIndex}
            hint="Personalize Fleet with your brand.  For best results, use a square image at least 150px wide, like https://fleetdm.com/logo.png."
          />
--- a/frontend/components/forms/RegistrationForm/RegistrationForm.jsx
+++ b/frontend/components/forms/RegistrationForm/RegistrationForm.jsx
@ -124,7 +124,7 @@ class RegistrationForm extends Component {
        <div className={formSectionClasses}>
          <div className={adminDetailsContainerClass}>
            <h2>Setup user</h2>
-            <p>Additional admins can be designated within the Fleet App</p>
+            <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}>
@ -136,7 +136,7 @@ class RegistrationForm extends Component {
            <KolideDetails formData={formData} handleSubmit={onPageFormSubmit} className={kolideDetailsClass} currentPage={isCurrentPage(3)} />
          </div>
          <div className={confirmationContainerClass}>
-            <h2>Success</h2>
+            <h2>You&apos;re all set.</h2>
            <ConfirmationPage formData={formData} handleSubmit={onSubmitConfirmation} classNmae={confirmationClass} currentPage={isCurrentPage(4)} />
          </div>
        </div>
--- a/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
+++ b/frontend/components/forms/RegistrationForm/RegistrationForm.tests.jsx
@ -29,7 +29,7 @@ describe('RegistrationForm - component', () => {
    const form = mount(<RegistrationForm page={4} />);

    expect(form.find('ConfirmationPage').length).toEqual(1);
-    expect(form.text()).toContain('Success');
+    expect(form.text()).toContain('You\'re all set');
  });
 });

--- a/frontend/components/forms/RegistrationForm/_styles.scss
+++ b/frontend/components/forms/RegistrationForm/_styles.scss
@ -39,17 +39,20 @@

    &--org {
      left: calc(100% + 220px);
-      top: -10px;
+      top: unquote('max(56%, 480px)');
+      opacity: 0;
    }

    &--kolide {
      left: calc(150% + 220px);
-      top: -8px;
+      top: unquote('max(56%, 480px)');
+      opacity: 0;
    }

    &--confirmation {
      left: calc(200% + 220px);
-      top: -8px;
+      top: unquote('max(56%, 480px)');
+      opacity: 0;
    }

    &--complete {
@ -81,16 +84,18 @@

      .user-registration__container--org {
        left: 0;
-        top: unquote('max(56%, 480px)');
        margin: auto;
+        opacity: 1;
      }

      .user-registration__container--kolide {
        left: calc(100% + 220px);
+        opacity: 0;
      }

      .user-registration__container--confirmation {
        left: calc(150% + 220px);
+        opacity: 0;
      }
    }

@ -108,12 +113,13 @@

      .user-registration__container--kolide {
        left: 0;
-        top: unquote('max(56%, 480px)');
        margin: auto;
+        opacity: 1;
      }

      .user-registration__container--confirmation {
        left: calc(100% + 220px);
+        opacity: 0;
      }
    }

@ -136,8 +142,8 @@

      .user-registration__container--confirmation {
        left: 0;
-        top: unquote('max(56%, 480px)');
        margin: auto;
+        opacity: 1;
      }
    }

--- a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
+++ b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.jsx
@ -28,14 +28,14 @@ class ResetPasswordForm extends Component {
          {...fields.new_password}
          autofocus
          iconName="password"
-          placeholder="New Password"
+          placeholder="New password"
          className={`${baseClass}__input`}
          type="password"
        />
        <InputFieldWithIcon
          {...fields.new_password_confirmation}
          iconName="password"
-          placeholder="Confirm Password"
+          placeholder="Confirm password"
          className={`${baseClass}__input`}
          type="password"
        />
--- a/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tests.jsx
+++ b/frontend/components/forms/ResetPasswordForm/ResetPasswordForm.tests.jsx
@ -41,7 +41,7 @@ describe('ResetPasswordForm - component', () => {
      submitBtn.simulate('submit');

      const { errors } = form.state();
-      expect(errors.new_password).toEqual('New Password field must be completed');
+      expect(errors.new_password).toEqual('New password field must be completed');
      expect(submitSpy).not.toHaveBeenCalled();
    },
  );
@ -58,7 +58,7 @@ describe('ResetPasswordForm - component', () => {
      submitBtn.simulate('submit');

      const { errors } = form.state();
-      expect(errors.new_password_confirmation).toEqual('New Password Confirmation field must be completed');
+      expect(errors.new_password_confirmation).toEqual('New password confirmation field must be completed');
      expect(submitSpy).not.toHaveBeenCalled();
    },
  );
--- a/frontend/components/forms/ResetPasswordForm/validate.js
+++ b/frontend/components/forms/ResetPasswordForm/validate.js
@ -19,11 +19,11 @@ const validate = (formData) => {
  }

  if (!validatePresence(newPasswordConfirmation)) {
-    errors.new_password_confirmation = 'New Password Confirmation field must be completed';
+    errors.new_password_confirmation = 'New password confirmation field must be completed';
  }

  if (!validatePresence(newPassword)) {
-    errors.new_password = 'New Password field must be completed';
+    errors.new_password = 'New password field must be completed';
  }

  if (noMatch) {
--- a/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
+++ b/frontend/components/forms/admin/AppConfigForm/AppConfigForm.jsx
@ -162,11 +162,11 @@ class AppConfigForm extends Component {
          <div className={`${baseClass}__inputs`}>
            <InputField
              {...fields.org_name}
-              label="Organization Name"
+              label="Organization name"
            />
            <InputField
              {...fields.org_logo_url}
-              label="Organization Avatar URL"
+              label="Organization avatar URL"
            />
          </div>
          <div className={`${baseClass}__details ${baseClass}__avatar-preview`}>
@ -174,7 +174,7 @@ class AppConfigForm extends Component {
          </div>
        </div>
        <div className={`${baseClass}__section`}>
-          <h2>Fleet Web Address</h2>
+          <h2>Fleet web address</h2>
          <div className={`${baseClass}__inputs`}>
            <InputField
              {...fields.kolide_server_url}
--- a/frontend/components/forms/fields/Checkbox/_styles.scss
+++ b/frontend/components/forms/fields/Checkbox/_styles.scss
@ -12,7 +12,7 @@
    &:checked + .kolide-checkbox__tick {
      &::after {
        background-color: $core-blue;
-        border: solid 2px $core-blue;
+        border: solid 1px $core-blue;
      }

      &::before {
@ -41,7 +41,7 @@
      @include size(20px);
      transition: border 75ms ease-in-out, background 75ms ease-in-out;
      border-radius: 2px;
-      border: solid 2px $ui-borders;
+      border: solid 1px $ui-borders;
      content: '';
      box-sizing: border-box;
      display: block;
--- a/frontend/components/forms/fields/Dropdown/_styles.scss
+++ b/frontend/components/forms/fields/Dropdown/_styles.scss
@ -129,6 +129,10 @@
    border: 0;
  }

+  .Select-noresults {
+    font-size: $x-small;
+  }
+
  .Select-option {
    color: $core-dark-blue-grey;
    font-size: $x-small;
--- a/frontend/components/forms/fields/InputField/_styles.scss
+++ b/frontend/components/forms/fields/InputField/_styles.scss
@ -1,5 +1,4 @@
 .input-field {
-  transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
  line-height: 34px;
  background-color: $ui-light-grey;
  border: solid 1px $ui-borders;
@ -17,8 +16,7 @@

  &:focus {
    outline: none;
-    border-color: $core-purple;
-    border-bottom-color: $core-blue;
+    border-color: $core-blue;
  }

  &--disabled {
--- a/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/SelectTargetsMenu/_styles.scss
@ -39,13 +39,7 @@
  }

  &__not-found {
-    font-size: $small;
-    font-weight: $bold;
-    line-height: 2.64;
-    text-align: left;
-    color: $core-dark-blue-grey;
-    text-transform: uppercase;
-    display: block;
-    padding: 0 $large;
+    font-size: $x-small;
+    padding: 0 4px 4px;
  }
 }
--- a/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
+++ b/frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss
@ -2,11 +2,8 @@
  margin-bottom: $pad-small;

  &__label {
-    font-size: 16px;
-    font-style: $x-small;
-    font-stretch: normal;
-    letter-spacing: -0.5px;
-    color: $core-dark-blue-grey;
+    font-size: $x-small;
+    color: $core-black;
    display: block;
    margin: 40px 0 4px;
    text-align: right;
@ -30,7 +27,6 @@

  &.Select {
    .Select-control {
-      transition: border 150ms ease-in-out, box-shadow 150ms ease-in-out;
      min-height: 48px;
    }

@ -98,8 +94,7 @@

    &.is-focused {
      .Select-control {
-        border: 1px solid $ui-borders;
-        border-bottom-color: $core-blue;
+        border: 1px solid $core-blue;
      }
    }
  }
--- a/frontend/components/forms/fields/Slider/_styles.scss
+++ b/frontend/components/forms/fields/Slider/_styles.scss
@ -46,9 +46,8 @@
  }

  &__label {
-    font-size: 18px;
+    font-size: $small;
    font-weight: $regular;
-    letter-spacing: 1.3px;
    text-align: left;
    vertical-align: text-bottom;
    margin-right: 10px;
--- a/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx
+++ b/frontend/components/forms/packs/EditPackForm/EditPackForm.jsx
@ -36,7 +36,7 @@ class EditPackForm extends Component {

    return (
      <form className={`${baseClass} ${className}`} onSubmit={handleSubmit}>
-        <h1>Edit Pack</h1>
+        <h1>Edit pack</h1>
        <InputField
          {...fields.name}
          placeholder="Query Pack Title"
--- a/frontend/components/forms/queries/QueryForm/QueryForm.jsx
+++ b/frontend/components/forms/queries/QueryForm/QueryForm.jsx
@ -150,7 +150,7 @@ class QueryForm extends Component {
          {...fields.name}
          error={fields.name.error || errors.name}
          inputClassName={`${baseClass}__query-title`}
-          label="Query Title"
+          label="Query title"
        />
        <KolideAce
          {...fields.query}
--- a/frontend/components/hosts/AddHostModal/AddHostModal.jsx
+++ b/frontend/components/hosts/AddHostModal/AddHostModal.jsx
@ -119,7 +119,7 @@ class AddHostModal extends Component {
          </div>
          <ol className={`${baseClass}__install-steps`}>
            <li>
-              <h4><span className={`${baseClass}__step-number`}>1</span>Enroll Secret</h4>
+              <h4><span className={`${baseClass}__step-number`}>1</span>Enroll secret</h4>
              <p>
                Provide an active enroll secret to allow osquery to authenticate with the Fleet server:
              </p>
@ -128,7 +128,7 @@ class AddHostModal extends Component {
              </div>
            </li>
            <li>
-              <h4><span className={`${baseClass}__step-number`}>2</span>Server Certificate</h4>
+              <h4><span className={`${baseClass}__step-number`}>2</span>Server certificate</h4>
              <p>
                Provide the TLS certificate used by the Fleet server to enable secure connections from osquery:
              </p>
@ -153,7 +153,7 @@ class AddHostModal extends Component {
              </p>
            </li>
            <li>
-              <h4><span className={`${baseClass}__step-number`}>4</span>Run Osquery</h4>
+              <h4><span className={`${baseClass}__step-number`}>4</span>Run osquery</h4>
              <p>
                Run osquery from the directory containing the above files (may require sudo or Run as Administrator privileges):
              </p>
--- a/frontend/components/hosts/AddHostModal/_styles.scss
+++ b/frontend/components/hosts/AddHostModal/_styles.scss
@ -75,14 +75,6 @@
    margin: 0;
    padding: 0;
    list-style: none;
-
-    li {
-      &:first-child {
-        h4 {
-          margin-top: 10px;
-        }
-      }
-    }
  }

  &__step-number {
--- a/frontend/components/hosts/HostContainer/HostContainer.jsx
+++ b/frontend/components/hosts/HostContainer/HostContainer.jsx
@ -5,7 +5,7 @@ import hostInterface from 'interfaces/host';
 import labelInterface from 'interfaces/label';
 import HostsTable from 'components/hosts/HostsTable';
 import Spinner from 'components/loaders/Spinner';
-import NoHostsImage from '../../../../assets/images/no-matching-host-100x100@2x.png';
+import RoboDogImage from '../../../../assets/images/robo-dog-176x144@2x.png';

 const baseClass = 'host-container';

@ -26,7 +26,7 @@ class HostContainer extends Component {
    return (
      <div className={`${baseClass}  ${baseClass}--no-hosts`}>
        <div className={`${baseClass}--no-hosts__inner`}>
-          <img src={NoHostsImage} alt="No Hosts" />
+          <img src={RoboDogImage} alt="robo dog" />
          <div>
            <h1>No matching hosts found.</h1>
            <h2>Where are the missing hosts?</h2>
@ -38,7 +38,7 @@ class HostContainer extends Component {

            <div className={`${baseClass}__no-hosts-contact`}>
              <p>Still having trouble?</p>
-              <a href="https://github.com/fleetdm/fleet/issues">File a Github issue</a>
+              <a href="https://github.com/fleetdm/fleet/issues">File a GitHub issue</a>
            </div>
          </div>
        </div>
@ -71,14 +71,14 @@ class HostContainer extends Component {
        return (
          <div className={`${baseClass}  ${baseClass}--no-hosts`}>
            <div className={`${baseClass}--no-hosts__inner`}>
-              <img src={NoHostsImage} alt="No Hosts" />
+              <img src={RoboDogImage} alt="No Hosts" />
              <div>
-                <h1>It&#39;s Kinda Lonely In Here...</h1>
+                <h1>It&#39;s kinda empty in here...</h1>
                <h2>Get started adding hosts to Fleet.</h2>
-                <p>This can be done individually or across your entire fleet.</p>
+                <p>Add your laptops and servers to securely monitor them.</p>
                <div className={`${baseClass}__no-hosts-contact`}>
                  <p>Still having trouble?</p>
-                  <a href="https://github.com/fleetdm/fleet/issues">File a Github issue</a>
+                  <a href="https://github.com/fleetdm/fleet/issues">File a GitHub issue</a>
                </div>
              </div>
            </div>
--- a/frontend/components/hosts/HostContainer/_styles.scss
+++ b/frontend/components/hosts/HostContainer/_styles.scss
@ -47,10 +47,11 @@

    &__inner {
      display: flex;
-      align-items: flex-start;
+      align-items: center;

      img {
-        margin-right: 24px;
+        width: 176px;
+        margin-right: 34px;
      }

      p {
--- a/frontend/components/modals/Modal/_styles.scss
+++ b/frontend/components/modals/Modal/_styles.scss
@ -10,6 +10,7 @@

  &__content {
    margin-top: 10px;
+    font-size: $x-small;

    .input-field {
      width: 100%;
--- a/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
+++ b/frontend/components/packs/EditPackFormWrapper/EditPackFormWrapper.jsx
@ -4,7 +4,6 @@ import { noop } from 'lodash';

 import Button from 'components/buttons/Button';
 import EditPackForm from 'components/forms/packs/EditPackForm';
-import Icon from 'components/icons/Icon';
 import packInterface from 'interfaces/pack';
 import SelectTargetsDropdown from 'components/forms/fields/SelectTargetsDropdown';
 import targetInterface from 'interfaces/target';
@ -58,14 +57,14 @@ class EditPackFormWrapper extends Component {
          variant="brand"
          className={`${baseClass}__edit-btn`}
        >
-          EDIT
+          Edit
        </Button>
-        <h1 className={`${baseClass}__title`}><Icon name="packs" /> <span>{pack.name}</span></h1>
+        <h1 className={`${baseClass}__title`}><span>{pack.name}</span></h1>
        <div className={`${baseClass}__description`}>
          <p>{pack.description}</p>
        </div>
        <SelectTargetsDropdown
-          label="select pack targets"
+          label="Select pack targets"
          name="selected-pack-targets"
          onFetchTargets={onFetchTargets}
          onSelect={noop}
--- a/frontend/components/packs/PacksList/PacksList.jsx
+++ b/frontend/components/packs/PacksList/PacksList.jsx
@ -80,11 +80,11 @@ class PacksList extends Component {
                  wrapperClassName={`${baseClass}__select-all`}
                />
              </th>
-              <th className={`${baseClass}__th ${baseClass}__th-pack-name`}>Pack Name</th>
+              <th className={`${baseClass}__th ${baseClass}__th-pack-name`}>Pack name</th>
              <th className={`${baseClass}__th`}>Queries</th>
              <th className={`${baseClass}__th`}>Status</th>
              <th className={`${baseClass}__th`}>Hosts</th>
-              <th className={`${baseClass}__th`}>Last Modified</th>
+              <th className={`${baseClass}__th`}>Last modified</th>
            </tr>
          </thead>
          <tbody>
--- a/frontend/components/packs/PacksList/_styles.scss
+++ b/frontend/components/packs/PacksList/_styles.scss
@ -1,5 +1,6 @@
 .packs-list {
  border-collapse: collapse;
+  overflow: scroll;

  &__wrapper {
    border: 1px solid $ui-borders;
@ -39,7 +40,7 @@

  &__empty-table {
    text-align: center;
-    font-size: 18px;
+    font-size: $x-small;
    color: $core-black;
  }
 }
--- a/frontend/components/queries/QueriesList/QueriesList.jsx
+++ b/frontend/components/queries/QueriesList/QueriesList.jsx
@ -108,9 +108,10 @@ class QueriesList extends Component {
                onChange={handleCheckAll}
                value={allQueriesChecked}
              /></th>
-              <th>Query Name</th>
+              <th>Query name</th>
+              <th>Description</th>
              <th className={`${baseClass}__author-name`}>Author</th>
-              <th>Last Modified</th>
+              <th>Last modified</th>
            </tr>
          </thead>
          <tbody>
--- a/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
+++ b/frontend/components/queries/QueriesList/QueriesListRow/QueriesListRow.jsx
@ -49,7 +49,7 @@ class QueriesListRow extends Component {
  render () {
    const { checked, query, selected } = this.props;
    const { onCheck, onSelect, onDblClick } = this;
-    const { author_name: authorName, id, name, updated_at: updatedAt } = query;
+    const { author_name: authorName, id, name, updated_at: updatedAt, description } = query;
    const lastModifiedDate = moment(updatedAt).format('MM/DD/YY');
    const rowClassName = classnames(baseClass, {
      [`${baseClass}--selected`]: selected,
@ -65,6 +65,7 @@ class QueriesListRow extends Component {
          />
        </td>
        <td className={`${baseClass}__name`}>{name}</td>
+        <td className={`${baseClass}__description`}>{description}</td>
        <td className={`${baseClass}__author-name`}>{authorName}</td>
        <td>{lastModifiedDate}</td>
      </ClickableTableRow>
--- a/frontend/components/queries/QueriesList/_styles.scss
+++ b/frontend/components/queries/QueriesList/_styles.scss
@ -4,6 +4,7 @@
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: 16px;
+  overflow: scroll;

  &__table {
    border-collapse: collapse;
@ -34,6 +35,10 @@
        padding: 0 10px;
        margin: 0;

+        p {
+          font-size: $x-small;
+        }
+
        &:nth-child(1) {
          text-align: center;
          vertical-align: middle;
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesList.jsx
@ -121,8 +121,8 @@ class ScheduledQueriesList extends Component {
                onChange={handleSelectAllQueries}
                value={allQueriesSelected}
              /></th>
-              <th>Query Name</th>
-              <th>Interval [s]</th>
+              <th>Query name</th>
+              <th>Interval(s)</th>
              <th>Platform</th>
              <th><Icon name="osquery" /> Ver.</th>
              <th>Shard</th>
--- a/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/ScheduledQueriesListItem/_styles.scss
@ -1,8 +1,13 @@
 .scheduled-query-list-item {
  outline: none;
  cursor: pointer;
+  border-bottom: 1px solid $ui-borders;
+
+  &:last-child {
+    border-bottom: 0;
+  }

  &--selected {
-    background-color: $ui-light-grey;
+    background-color: $core-blue-selected;
  }
 }
--- a/frontend/components/queries/ScheduledQueriesList/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesList/_styles.scss
@ -1,8 +1,7 @@
 .scheduled-queries-list {
  background-color: $white;
  border: 1px solid $ui-borders;
-  border-radius: 3px;
-  box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
  box-sizing: border-box;

  &__table {
@ -13,14 +12,12 @@
    thead {
      height: 50px;
      background-color: $core-light-blue-grey;
-      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
+      border-bottom: 1px solid $ui-borders;

      th {
-        font-size: 14px;
+        font-size: $x-small;
        font-weight: $bold;
-        letter-spacing: -0.5px;
        text-align: left;
-        color: $core-purple;
        padding: 15px 10px;

        .form-field {
@ -61,7 +58,6 @@
      td {
        padding: 0 10px;
        margin: 0;
-        border-bottom: 1px solid $ui-borders;

        .form-field {
          margin: 0;
--- a/frontend/components/queries/ScheduledQueriesListWrapper/ScheduledQueriesListWrapper.jsx
+++ b/frontend/components/queries/ScheduledQueriesListWrapper/ScheduledQueriesListWrapper.jsx
@ -5,7 +5,6 @@ import { pull } from 'lodash';
 import Button from 'components/buttons/Button';
 import helpers from 'components/queries/ScheduledQueriesListWrapper/helpers';
 import InputField from 'components/forms/fields/InputField';
-import NumberPill from 'components/NumberPill';
 import QueriesList from 'components/queries/ScheduledQueriesList';
 import queryInterface from 'interfaces/query';

@ -84,7 +83,7 @@ class ScheduledQueriesListWrapper extends Component {
    const scheduledQueryCount = checkedScheduledQueryIDs.length;

    if (scheduledQueryCount) {
-      const queryText = scheduledQueryCount === 1 ? 'Query' : 'Queries';
+      const queryText = scheduledQueryCount === 1 ? 'query' : 'queries';

      return (
        <Button
@ -103,9 +102,14 @@ class ScheduledQueriesListWrapper extends Component {
  renderQueryCount = () => {
    const { scheduledQueries } = this.props;
    const queryCount = scheduledQueries.length;
-    const queryText = queryCount === 1 ? 'Query' : 'Queries';
+    const queryText = queryCount === 1 ? ' 1 query' : `${queryCount} queries`;

-    return <h1 className={`${baseClass}__query-count`}><NumberPill number={queryCount} /> {queryText}</h1>;
+    return (
+      <div>
+        <h1>Queries</h1>
+        <p className={`${baseClass}__query-count`}>{queryText}</p>
+      </div>
+    );
  }

  renderQueriesList = () => {
@ -145,9 +149,9 @@ class ScheduledQueriesListWrapper extends Component {
            placeholder="Search Queries"
            value={querySearchText}
          />
-          {renderButton()}
        </div>
        {renderQueriesList()}
+        {renderButton()}
      </div>
    );
  }
--- a/frontend/components/queries/ScheduledQueriesListWrapper/ScheduledQueriesListWrapper.tests.jsx
+++ b/frontend/components/queries/ScheduledQueriesListWrapper/ScheduledQueriesListWrapper.tests.jsx
@ -24,7 +24,7 @@ describe('ScheduledQueriesListWrapper - component', () => {
    component.find('Checkbox').last().find('input').simulate('change');

    const addQueryBtn = component.find('Button').find({ children: 'Add New Query' });
-    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'Query'] });
+    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'query'] });

    expect(addQueryBtn.length).toEqual(0);
    expect(removeQueryBtn.length).toBeGreaterThan(0);
@ -42,7 +42,7 @@ describe('ScheduledQueriesListWrapper - component', () => {
      .find('input')
      .simulate('change');

-    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'Query'] });
+    const removeQueryBtn = component.find('Button').find({ children: ['Remove ', 'query'] });

    removeQueryBtn.hostNodes().simulate('click');

--- a/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
+++ b/frontend/components/queries/ScheduledQueriesListWrapper/_styles.scss
@ -1,10 +1,12 @@
 .scheduled-queries-list-wrapper {
  flex-grow: 1;
-  padding: $pad-small $pad-base;
+  padding: 50px 30px;
  margin-bottom: $pad-base;

  &__query-count {
-    margin: 0 0 15px;
+    font-size: $x-small;
+    font-weight: $bold;
+    margin: 24px 0;
  }

  &__queries-list-wrapper {
@ -13,13 +15,17 @@
  }

  &__search-queries-input {
-    float: left;
    display: inline-block;
-    width: '400px';
+    width: 100%;
+
+    input {
+      width: 100%;
+    }
  }

  &__query-btn {
    float: right;
+    margin-top: 14px;
  }

  &__search-queries {
--- a/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
+++ b/frontend/components/side_panels/HostSidePanel/HostSidePanel.jsx
@ -82,7 +82,7 @@ class HostSidePanel extends Component {
          <InputField
            name="tags-filter"
            onChange={onFilterLabels}
-            placeholder="Filter Labels by Name..."
+            placeholder="Filter labels by name..."
            value={labelFilter}
            inputWrapperClass={`${baseClass}__filter-labels`}
          />
--- a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
@ -37,16 +37,16 @@ const PackDetailsSidePanel = ({ onUpdateSelectedPack, pack, scheduledQueries = [
        <span>{pack.name}</span>
      </h2>
      <ScheduledQueriesSection scheduledQueries={scheduledQueries} />
+      <Description pack={pack} />
      <Slider
        activeText="Enabled"
        inactiveText="Disabled"
        onChange={updatePackStatus}
        value={!disabled}
      />
-      <Link className={`${baseClass}__edit-pack-link button button--inverse`} to={PATHS.PACK({ id: pack.id })}>
-        Edit Pack
+      <Link className={`${baseClass}__edit-pack-link button button--inverse`} to={`${PATHS.PACK({ id: pack.id })}/edit`}>
+        Edit pack
      </Link>
-      <Description pack={pack} />
    </SecondarySidePanelContainer>
  );
 };
--- a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';

-import Icon from 'components/icons/Icon';
 import scheduledQueryInterface from 'interfaces/scheduled_query';

 const baseClass = 'pack-details-side-panel';
@ -23,7 +22,6 @@ class ScheduledQueriesSection extends Component {
          {scheduledQueries.map((scheduledQuery) => {
            return (
              <li key={`scheduled-query-${scheduledQuery.id}`}>
-                <Icon className={`${baseClass}__query-icon`} name="query" />
                <Link to={`/queries/${scheduledQuery.query_id}`} className={`${baseClass}__query-name`}>{scheduledQuery.name}</Link>
              </li>
            );
--- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
@ -8,10 +8,8 @@
  }

  &__section-label {
-    color: $core-dark-blue-grey;
-    font-size: $x-small;
+    font-size: $medium;
    font-weight: $bold;
-    letter-spacing: -0.5px;
    margin: 24px 0 16px;
  }

@ -29,7 +27,6 @@
    color: $core-dark-blue-grey;
    font-size: $small;
    font-weight: $regular;
-    letter-spacing: -0.5px;
    margin: 0;
  }

@ -47,12 +44,8 @@

  &__query-name {
    @include ellipsis(240px);
-    font-size: 14px;
-    vertical-align: middle;
+    font-size: $small;
+    color: $core-blue;
    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
  }
 }
--- a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router';

 import Button from 'components/buttons/Button';
-import Icon from 'components/icons/Icon';
 import KolideAce from 'components/KolideAce';
 import queryInterface from 'interfaces/query';
 import SecondarySidePanelContainer from 'components/side_panels/SecondarySidePanelContainer';
@ -37,7 +36,6 @@ class QueryDetailsSidePanel extends Component {
        {packs.map((pack) => {
          return (
            <li className={`${baseClass}__pack-item`} key={`query-side-panel-pack-${pack.id}`}>
-              <Icon name="packs" />
              <Link to={`/packs/${pack.id}`} className={`${baseClass}__pack-name`}>{pack.name}</Link>
            </li>
          );
@ -54,7 +52,7 @@ class QueryDetailsSidePanel extends Component {
    return (
      <SecondarySidePanelContainer className={baseClass}>
        <p className={`${baseClass}__label`}>Query</p>
-        <h1><Icon name="query" /> {name}</h1>
+        <h1>{name}</h1>
        <p className={`${baseClass}__label`}>SQL</p>
        <KolideAce
          fontSize={12}
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@ -3,9 +3,8 @@

  h1 {
    @include ellipsis(250px);
-    margin: 0 0 24px;
-    font-size: 18px;
-    font-weight: $bold;
+    margin: 0;
+    font-size: $small;

    .kolidecon {
      color: $core-medium-blue-grey;
@ -14,14 +13,13 @@
  }

  &__label {
-    font-size: $x-small;
+    font-size: $medium;
    font-weight: $bold;
-    padding: 0 0 4px;
    margin: 24px 0 16px;
  }

  &__description {
-    font-size: 14px;
+    font-size: $small;
    font-weight: $regular;
    color: $core-dark-blue-grey;
    word-wrap: break-word;
@ -29,6 +27,10 @@

  &__query-preview {
    margin-bottom: 12px;
+
+    .kolide-ace__label {
+      display: none;
+    }
  }

  .button {
@ -41,21 +43,11 @@
    list-style: none;
  }

-  &__pack-item {
-    .kolidecon {
-      margin-right: 12px;
-      color: $core-dark-blue-grey;
-    }
-  }
-
  &__pack-name {
    @include ellipsis(240px);
    text-decoration: none;
-    font-size: 14px;
+    font-size: $small;
    vertical-align: middle;
-
-    &:hover {
-      text-decoration: underline;
-    }
+    color: $core-blue;
  }
 }
--- a/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
+++ b/frontend/components/side_panels/ScheduleQuerySidePanel/SearchPackQuery/SearchPackQuery.jsx
@ -117,7 +117,7 @@ class SearchPackQuery extends Component {
        <Dropdown
          options={queryDropdownOptions}
          onChange={onSelectQuery}
-          placeholder={[<Icon name="search" size="lg" key="search-pack-query" />, ' Select Query...']}
+          placeholder={[<Icon name="search" size="lg" key="search-pack-query" />, ' Select query']}
        />
        {renderQuery()}
        {renderDescription()}
--- a/frontend/components/side_panels/SiteNavSidePanel/navItems.js
+++ b/frontend/components/side_panels/SiteNavSidePanel/navItems.js
@ -13,7 +13,7 @@ export default (admin) => {
      subItems: [
        {
          icon: 'admin',
-          name: 'Manage Users',
+          name: 'Manage users',
          location: {
            regex: new RegExp(`^${PATHS.ADMIN_USERS}`),
            pathname: PATHS.ADMIN_USERS,
@ -21,7 +21,7 @@ export default (admin) => {
        },
        {
          icon: 'user-settings',
-          name: 'App Settings',
+          name: 'App settings',
          location: {
            regex: new RegExp(`^${PATHS.ADMIN_SETTINGS}`),
            pathname: PATHS.ADMIN_SETTINGS,
@ -31,7 +31,7 @@ export default (admin) => {
          // No such icon now. SiteNavSidePanel does not display
          // icons for subItems
          icon: 'osquery',
-          name: 'Osquery Options',
+          name: 'Osquery options',
          location: {
            regex: new RegExp(`^${PATHS.ADMIN_OSQUERY}`),
            pathname: PATHS.ADMIN_OSQUERY,
@ -53,7 +53,7 @@ export default (admin) => {
    },
    {
      icon: 'query',
-      name: 'Query',
+      name: 'Queries',
      location: {
        regex: new RegExp(`^${URL_PREFIX}/queries/`),
        pathname: PATHS.MANAGE_QUERIES,
@ -69,15 +69,6 @@ export default (admin) => {
      },
      subItems: [],
    },
-    {
-      icon: 'help',
-      name: 'Help',
-      location: {
-        regex: /^\/help/,
-        pathname: 'https://github.com/fleetdm/fleet/blob/master/docs/README.md',
-      },
-      subItems: [],
-    },
  ];

  if (admin) {
--- a/frontend/components/side_panels/UserMenu/UserMenu.jsx
+++ b/frontend/components/side_panels/UserMenu/UserMenu.jsx
@ -41,8 +41,9 @@ class UserMenu extends Component {
      <div className={userMenuClass}>
        <nav className={`${baseClass}__nav`}>
          <ul className={`${baseClass}__nav-list`}>
-            <li className={settingsNavItemBaseClass}><a href="#settings" onClick={onNavItemClick(PATHS.USER_SETTINGS)}><Icon name="user-settings" /><span>Settings</span></a></li>
-            <li className={`${baseClass}__nav-item`}><a href="#logout" onClick={onLogout}><Icon name="logout" /><span>Log Out</span></a></li>
+            <li className={settingsNavItemBaseClass}><a href="#settings" onClick={onNavItemClick(PATHS.USER_SETTINGS)}><Icon name="user-settings" /><span>Account</span></a></li>
+            <li className={`${baseClass}__nav-item`}><a href="https://github.com/fleetdm/fleet/blob/master/docs/README.md" target="_blank" rel="noreferrer"><Icon name="help" /><span>Help</span></a></li>
+            <li className={`${baseClass}__nav-item`}><a href="#logout" onClick={onLogout}><Icon name="logout" /><span>Log out</span></a></li>
          </ul>
        </nav>
      </div>
--- a/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/Breadcrumbs.jsx
@ -42,7 +42,7 @@ class Breadcrumbs extends Component {

    return (
      <div className={baseClass}>
-        <button className={page1ClassName} onClick={onClick(1)}>Setup User</button>
+        <button className={page1ClassName} onClick={onClick(1)}>Setup user</button>
        <button className={page2ClassName} onClick={onClick(2)}>Organization details</button>
        <button className={page3ClassName} onClick={onClick(3)}>Set Fleet URL</button>
      </div>
--- a/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
+++ b/frontend/pages/RegistrationPage/Breadcrumbs/_styles.scss
@ -94,7 +94,7 @@

    &--2 {
      &::after {
-        border: solid 2px $core-blue;
+        border: solid 1px $core-blue;
      }

      &.registration-breadcrumbs__page--active {
@ -129,7 +129,7 @@
      }

      &::after {
-        border: solid 2px $core-blue;
+        border: solid 1px $core-blue;
      }

      &.registration-breadcrumbs__page--active {
--- a/frontend/pages/RegistrationPage/_styles.scss
+++ b/frontend/pages/RegistrationPage/_styles.scss
@ -7,7 +7,7 @@
  overflow-x: hidden;

  &__logo {
-    @include position(absolute, 15px null null 15px);
+    @include position(absolute, 24px null null 24px);
    width: 120px;

    @include breakpoint(tablet) {
--- a/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
+++ b/frontend/pages/UserSettingsPage/UserSettingsPage.jsx
@ -215,7 +215,7 @@ export class UserSettingsPage extends Component {
    }

    return (
-      <Modal title="Change Password" onExit={onTogglePasswordModal}>
+      <Modal title="Change password" onExit={onTogglePasswordModal}>
        <ChangePasswordForm
          handleSubmit={handleSubmitPasswordForm}
          onCancel={onTogglePasswordModal}
@ -294,7 +294,7 @@ export class UserSettingsPage extends Component {
    return (
      <div className={baseClass}>
        <div className={`${baseClass}__manage body-wrap`}>
-          <h1>User settings</h1>
+          <h1>Account</h1>
          <UserSettingsForm
            formData={user}
            handleSubmit={handleSubmit}
--- a/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
+++ b/frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx
@ -330,7 +330,7 @@ export class ManageHostsPage extends PureComponent {

    return (
      <Modal
-        title="Delete Label"
+        title="Delete label"
        onExit={toggleDeleteLabelModal}
        className={`${baseClass}_delete-label__modal`}
      >
@ -354,7 +354,7 @@ export class ManageHostsPage extends PureComponent {
    return (
      <div className={`${baseClass}__label-actions`}>
        <Button onClick={toggleEditLabel} variant="inverse">Edit</Button>
-        <Button onClick={toggleDeleteLabelModal} variant="inverse-alert">Delete</Button>
+        <Button onClick={toggleDeleteLabelModal} variant="inverse">Delete</Button>
      </div>
    );
  }
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/frontend/pages/hosts/ManageHostsPage/_styles.scss
@ -17,10 +17,11 @@

  &__header {
    display: flex;
+    align-items: center;
  }

  &__text {
-    margin-right: 16px;
+    margin-right: 24px;
  }

  &__title {
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx
+++ b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx
@ -9,7 +9,7 @@ import entityGetter from 'redux/utilities/entityGetter';
 import InputField from 'components/forms/fields/InputField';
 import Modal from 'components/modals/Modal';
 import Icon from 'components/icons/Icon';
-import PackInfoSidePanel from 'components/side_panels/PackInfoSidePanel';
+import SecondarySidePanelContainer from 'components/side_panels/SecondarySidePanelContainer';
 import PATHS from 'router/paths';
 import QueryDetailsSidePanel from 'components/side_panels/QueryDetailsSidePanel';
 import QueriesList from 'components/queries/QueriesList';
@ -187,7 +187,7 @@ export class ManageQueriesPage extends Component {

      return (
        <div className={`${baseClass}__ctas`}>
-          <p className={`${baseClass}__query-count`}>{checkedQueryCount} {queryText} Selected</p>
+          <p className={`${baseClass}__query-count`}>{checkedQueryCount} {queryText} selected</p>
          <Button
            className={btnClass}
            onClick={onToggleModal}
@ -232,7 +232,12 @@ export class ManageQueriesPage extends Component {

    if (!selectedQuery) {
      // FIXME: Render QueryDetailsSidePanel when Fritz has completed the mock
-      return <PackInfoSidePanel />;
+      return (
+        <SecondarySidePanelContainer>
+          <p className={`${baseClass}__empty-label`}>Query</p>
+          <p className={`${baseClass}__empty-description`}>No query selected.</p>
+        </SecondarySidePanelContainer>
+      );
    }

    return <QueryDetailsSidePanel onEditQuery={goToEditQueryPage} query={selectedQuery} />;
@ -266,7 +271,7 @@ export class ManageQueriesPage extends Component {
        <div className={`${baseClass}__wrapper body-wrap`}>
          <div className={`${baseClass}__header-wrap`}>
            <h1 className={`${baseClass}__title`}>
-              Query
+              Queries
            </h1>
            {renderCTAs()}
          </div>
@ -275,7 +280,7 @@ export class ManageQueriesPage extends Component {
              <InputField
                name="query-filter"
                onChange={onFilterQueries}
-                placeholder="Filter Queries"
+                placeholder="Filter queries"
                value={queriesFilter}
              />
              <Icon name="search" />
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/frontend/pages/queries/ManageQueriesPage/_styles.scss
@ -73,5 +73,20 @@
      width: 120px;
    }
  }
+
+  &__empty-label {
+    font-size: $medium;
+    font-weight: $bold;
+    padding: 20px 20px 0;
+    margin: 24px 0;
+  }
+
+  &__empty-description {
+
+    font-size: $small;
+    font-style: italic;
+    padding: 0 20px;
+    margin: 0;
+  }
 }

--- a/frontend/styles/var/colors.scss
+++ b/frontend/styles/var/colors.scss
@ -17,7 +17,7 @@ $ui-light-grey: #fafafa;
 $ui-medium-grey: #e3e3e3;
 $warning: #ffad00;

-$alert: #ff287a;
+$alert: #ff5c83;
 $alert-light: #ffb5b2;
 $brand-light: #c38dec;
 $core-blue-ultralight: #edd6ff;
--- a/frontend/templates/react.ejs
+++ b/frontend/templates/react.ejs
@ -4,6 +4,7 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="{{.URLPrefix}}<%= htmlWebpackPlugin.files.css[0] %>">
+    <link rel="shortcut icon" href="{{.URLPrefix}}/assets/favicon.ico">

    <title>Fleet for osquery</title>
    <script type="text/javascript">