New styles for label creation form.

frontend/components/KolideAce/_styles.scss

@@ -21,10 +21,8 @@
   }
 
   &__hint {
-    font-size: 14px;
+    font-size: $x-small;
     font-weight: $regular;
-    line-height: 1.57;
-    letter-spacing: 1px;
     color: $core-medium-blue-grey;
 
     code {

frontend/components/buttons/Button/_styles.scss

@@ -78,7 +78,8 @@ $base-class: 'button';
     @include button-variant($white, $inverse-hover, $core-blue);
     color: $core-blue;
     border: 2px solid $core-blue;
-    border-bottom-color: $core-blue;
+    height: 40px;
+    line-height: $x-small;
 
     &:active {
       border-bottom-color: $core-blue;
@@ -89,7 +90,8 @@ $base-class: 'button';
     @include button-variant($white, $inverse-hover, $alert);
     color: $alert;
     border: 2px solid $alert;
-    border-bottom-color: $white;
+    height: 40px;
+    line-height: $x-small;
 
     &:active {
       border-bottom-color: $alert;

frontend/components/forms/FormField/_styles.scss

@@ -1,11 +1,9 @@
 .form-field {
-  margin-bottom: $pad-small;
+  margin-bottom: 24px;
 
   &__label {
     font-size: $x-small;
     font-weight: $regular;
-    font-style: normal;
-    font-stretch: normal;
     color: $core-black;
     display: block;
     margin-bottom: 4px;
@@ -16,10 +14,7 @@
   }
 
   &__hint {
-    font-size: 14px;
     font-weight: $regular;
-    line-height: 1.57;
-    letter-spacing: 1px;
     color: $core-medium-blue-grey;
 
     code {

frontend/components/forms/LabelForm/LabelForm.jsx

@@ -59,8 +59,8 @@ class LabelForm extends Component {
     const { onLoad } = this;
     const isBuiltin = formData && (formData.label_type === 'builtin' || formData.type === 'status');
     const isManual = formData && formData.label_membership_type === 'manual';
-    const headerText = isEdit ? 'Edit Label' : 'New Label';
-    const saveBtnText = isEdit ? 'Update Label' : 'Save Label';
+    const headerText = isEdit ? 'Edit label' : 'New label';
+    const saveBtnText = isEdit ? 'Update label' : 'Save label';
     const aceHintText = isEdit ? 'Label queries are immutable. To change the query, delete this label and create a new one.' : '';
 
     if (isBuiltin) {

frontend/components/forms/LabelForm/_styles.scss

@@ -1,15 +1,13 @@
 .label-form {
-  &__wrapper {
-    padding: $pad-base;
-  }
 
   &__label-title,
   &__label-description {
-    width: 50%;
+    width: 100%;
   }
 
   &__button-wrap {
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
 
     .query-form__run-query-btn,
     .query-form__stop-query-btn {
@@ -21,13 +19,16 @@
     }
   }
 
-  &__save-btn,
   &__cancel-btn {
-    margin-right: $pad-xsmall;
+    margin-right: 14px;
+  }
+
+  &__save-btn {
+    padding: 7px 28px;
   }
 
   &__text-editor-wrapper {
-    margin: $pad-base 0;
+    margin: 24px 0;
   }
 }
 

frontend/components/forms/fields/Dropdown/_styles.scss

@@ -33,13 +33,16 @@
     background-color: $ui-light-grey;
     border-radius: 4px;
     height: 40px;
+
+    .Select-value {
+      border: 0;
+    }
   }
 
   .Select-value {
-    font-size: $medium;
-    border-radius: 2px;
-    background-color: #fff;
-    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 2px 0 0 $ui-medium-grey;
+    font-size: $small;
+    border-radius: 4px;
+    background-color: $ui-light-grey;
     border: solid 1px $ui-borders;
 
     .Select-value-icon {
@@ -90,7 +93,7 @@
   }
 
   .Select-arrow {
-    border-top-color: $core-blue;
+    border-top-color: $core-dark-blue-grey;
   }
 
   &.is-focused {
@@ -117,27 +120,24 @@
     }
   }
 
-  &.is-open {
-    .Select-control {
-      box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.08);
-    }
-  }
-
   .Select-menu-outer {
-    margin-top: 2px;
-    box-shadow: 0 1px 3px 1px rgba($black, 0.05);
-    border: solid 1px $ui-borders;
-    border-radius: 2px;
+    margin-top: 4px;
+    box-shadow: 0 4px 10px rgba(52, 59, 96, 0.15);
+    border-radius: 4px;
     z-index: 6;
+    overflow: hidden;
+    border: 0;
   }
 
   .Select-option {
     color: $core-dark-blue-grey;
-    font-size: $medium;
+    font-size: $x-small;
+    margin: 6px 0;
+    padding: 6px 16px;
+    display: block;
 
     &.is-focused {
-      background-color: $core-blue;
-      color: $white;
+      background-color: $core-blue-selected;
 
       .Select-icon {
         color: $core-blue-ultralight;

frontend/components/forms/fields/InputField/_styles.scss

@@ -17,7 +17,6 @@
 
   &:focus {
     outline: none;
-    box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
     border-color: $core-purple;
     border-bottom-color: $core-blue;
   }
@@ -31,10 +30,8 @@
     border-color: $alert;
     background-color: $alert-light;
     color: $white;
-    box-shadow: inset 0 -4px 4px 0 rgba($black, 0.1);
 
     &:focus {
-      box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
       border-bottom-color: $alert;
       background-color: $white;
       color: $core-dark-blue-grey;

frontend/components/forms/fields/SelectTargetsDropdown/_styles.scss

@@ -119,7 +119,6 @@
       .Select-control {
         border: 1px solid $ui-borders;
         border-bottom-color: $core-blue;
-        box-shadow: inset 0 0 8px 0 rgba($black, 0.1);
       }
     }
   }

frontend/components/side_panels/QuerySidePanel/QuerySidePanel.jsx

@@ -83,7 +83,7 @@ class QuerySidePanel extends Component {
     return (
       <SecondarySidePanelContainer className={baseClass}>
         <div className={`${baseClass}__choose-table`}>
-          <h2 className={`${baseClass}__header`}>Table Documentation</h2>
+          <h2 className={`${baseClass}__header`}>Documentation</h2>
           {renderTableSelect()}
           <p className={`${baseClass}__description`}>{description}</p>
         </div>

frontend/components/side_panels/QuerySidePanel/_styles.scss

@@ -1,28 +1,28 @@
 .query-side-panel {
-  padding: 0 $pad-small;
+  padding: 0 28px;
 
   &__header {
-    margin: 0 0 12px;
-    padding: 0 0 5px;
-    font-size: 16px;
+    margin: 0 0 16px;
+    font-size: $x-small;
     font-weight: $bold;
-    letter-spacing: -0.5px;
-    color: $core-dark-blue-grey;
-    border-bottom: solid 1px $ui-borders;
+    color: $core-darkest-blue-grey;
   }
 
   &__choose-table {
-    margin-bottom: 24px;
+    margin: 40px 0 16px;
+
+    .form-field {
+      margin-bottom: 16px;
+    }
 
     .Select {
       margin: 0 0 $pad-half;
     }
   }
 
   &__description {
-    font-size: 14px;
-    line-height: 1.43;
-    letter-spacing: 0.5px;
+    font-size: $x-small;
+    font-style: italic;
     color: $core-medium-blue-grey;
     margin: 0;
   }
@@ -84,22 +84,21 @@
     border-top: 1px solid $ui-borders;
     color: $core-dark-blue-grey;
     font-size: px-to-rem(14);
-    padding-bottom: $pad-half;
-    padding-top: $pad-half;
+    padding: 12px 0;
 
     &:first-of-type {
       border: 0;
     }
   }
 
   &__name {
-    line-height: 28px;
-    border-radius: 3px;
-    background-color: $ui-light-grey;
-    border: solid 1px #dce2f7;
-    color: #858495;
-    padding: 0 13px;
+    border-radius: 4px;
+    border: solid 1px $core-dark-blue-grey;
+    padding: 4px 10px;
     box-sizing: border-box;
+    font-size: $xx-small;
+    font-weight: $bold;
+    color: $core-dark-blue-grey;
   }
 
   &__description {
@@ -108,16 +107,15 @@
   }
 
   &__type {
-    font-size: 14px;
-    letter-spacing: 0.7px;
+    font-size: $x-small;
     color: $core-dark-blue-grey;
   }
 
   &__help {
     margin-left: 12px;
     vertical-align: text-bottom;
     font-size: 20px;
-    color: #c1c8e1;
+    color: $core-dark-blue-grey;
   }
 }
 

frontend/components/side_panels/SecondarySidePanelContainer/_styles.scss

@@ -5,7 +5,6 @@
   border-left: 1px solid $ui-medium-grey;
   overflow: auto;
   width: $sidepanel-width;
-  margin-left: $pad-base;
 
   @include breakpoint(smalldesk) {
     width: $sidepanel-tablet-width;

frontend/layouts/CoreLayout/_styles.scss

@@ -6,17 +6,17 @@
 .core-wrapper {
   flex-grow: 1;
   margin: 0;
-  padding: 0 0 0 $pad-base;
+  padding: 0;
   max-width: calc(100% - 217px);
   position: relative;
   background-color: $white;
 
   &--small {
-    max-width: calc(100% - 73px);
+    max-width: calc(100% - 55px);
   }
 
   @include breakpoint(smalldesk) {
-    max-width: calc(100% - 73px);
+    max-width: calc(100% - 55px);
   }
 }
 

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.jsx

@@ -352,9 +352,9 @@ export class ManageHostsPage extends PureComponent {
     }
 
     return (
-      <div className={`${baseClass}__delete-label`}>
+      <div className={`${baseClass}__label-actions`}>
         <Button onClick={toggleEditLabel} variant="inverse">Edit</Button>
-        <Button onClick={toggleDeleteLabelModal} variant="alert">Delete</Button>
+        <Button onClick={toggleDeleteLabelModal} variant="inverse-alert">Delete</Button>
       </div>
     );
   }
@@ -408,16 +408,18 @@ export class ManageHostsPage extends PureComponent {
 
     return (
       <div className={`${baseClass}__header`}>
-        {renderDeleteButton()}
-        <h1 className={`${baseClass}__title`}>
-          <span>{displayText}</span>
-        </h1>
-        <div className={`${baseClass}__description`}>
-          <p>{description || <em>{defaultDescription}</em>}</p>
-        </div>
-        <div className={`${baseClass}__topper`}>
-          <p className={`${baseClass}__host-count`}>{hostsTotalDisplay}</p>
+        <div className={`${baseClass}__text`}>
+          <h1 className={`${baseClass}__title`}>
+            <span>{displayText}</span>
+          </h1>
+          <div className={`${baseClass}__description`}>
+            <p>{description || <em>{defaultDescription}</em>}</p>
+          </div>
+          <div className={`${baseClass}__topper`}>
+            <p className={`${baseClass}__host-count`}>{hostsTotalDisplay}</p>
+          </div>
         </div>
+        {renderDeleteButton()}
       </div>
     );
   }

frontend/pages/hosts/ManageHostsPage/ManageHostsPage.tests.jsx

@@ -137,10 +137,10 @@ describe('ManageHostsPage - component', () => {
       expect(page.find('LabelForm').length).toEqual(1);
     });
 
-    it('displays "New Label" as the query form header', () => {
+    it('displays "New label" as the query form header', () => {
       const page = mount(component);
 
-      expect(page.find('LabelForm').text()).toContain('New Label');
+      expect(page.find('LabelForm').text()).toContain('New label');
     });
   });
 
@@ -212,7 +212,7 @@ describe('ManageHostsPage - component', () => {
     it('renders the LabelForm when Edit is clicked', () => {
       const Page = mount(Component);
       const EditButton = Page
-        .find('.manage-hosts__delete-label')
+        .find('.manage-hosts__label-actions')
         .find('Button')
         .first();
 
@@ -238,7 +238,7 @@ describe('ManageHostsPage - component', () => {
       });
       const page = mount(component);
       const deleteBtn = page
-        .find('.manage-hosts__delete-label')
+        .find('.manage-hosts__label-actions')
         .find('Button')
         .last();