Fixing spacing of manage packs header (#848)

* Fixing spacing of header

* Make h1 headers consistent

frontend/components/NumberPill/_styles.scss

@@ -10,4 +10,5 @@
   font-weight: 600;
   letter-spacing: -0.5px;
   padding: 0 14px;
+  vertical-align: text-bottom;
 }

frontend/components/forms/packs/PackForm/_styles.scss

@@ -1,9 +1,5 @@
 .pack-form {
   h1 {
-    font-size: $large;
-    font-weight: $light;
-    letter-spacing: 1.2px;
-    color: $text-medium;
     margin: 0 0 20px;
   }
 

frontend/components/forms/queries/QueryForm/_styles.scss

@@ -1,14 +1,6 @@
 .query-form {
   &__wrapper {
     padding: $base;
-
-    h1 {
-      font-size: $large;
-      font-weight: $light;
-      letter-spacing: 1.2px;
-      color: $text-medium;
-      margin: 0;
-    }
   }
 
   &__query-title,

frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss

@@ -5,8 +5,6 @@
     margin: 0 0 12px;
     font-size: 18px;
     font-weight: $bold;
-    letter-spacing: -0.5px;
-    color: $text-dark;
 
     .kolidecon {
       color: $text-light;

frontend/components/side_panels/SiteNavHeader/_styles.scss

@@ -43,11 +43,12 @@
     @include ellipsis(110px);
     font-size: 16px;
     letter-spacing: 0.5px;
-    margin: 0;
     padding: 0;
-    display: block;
     white-space: nowrap;
     text-transform: none;
+    font-weight: $bold;
+    display: block;
+    color: $text-ultradark;
 
     @include breakpoint(smalldesk) {
       display: none;

frontend/pages/Admin/AppSettingsPage/_styles.scss

@@ -2,11 +2,6 @@
   padding: 30px;
 
   h1 {
-    font-size: 24px;
-    font-weight: $light;
-    line-height: 1.33;
-    letter-spacing: 1px;
-    color: $text-dark;
     margin: 0 0 22px;
   }
 

frontend/pages/Admin/UserManagementPage/_styles.scss

@@ -3,10 +3,6 @@
   padding: 30px 30px 30px 0;
 
   &__user-count {
-    font-size: $large;
-    font-weight: $light;
-    letter-spacing: 1px;
-    color: $text-ultradark;
     margin: 0 0 0 30px;
     float: left;
   }

frontend/pages/Kolide404/_styles.scss

@@ -42,6 +42,8 @@
       font-size: 56px;
       max-width: 479px;
       margin: 34px auto 0;
+      font-weight: $bold;
+      color: $text-ultradark;
     }
 
     > h2 {

frontend/pages/Kolide500/_styles.scss

@@ -43,6 +43,8 @@
       font-size: 56px;
       min-width: 479px;
       margin: 34px auto 0;
+      font-weight: $bold;
+      color: $text-ultradark;
     }
 
     > h2 {

frontend/pages/UserSettingsPage/_styles.scss

@@ -2,11 +2,6 @@
   @include display(flex);
 
   h1 {
-    font-size: 24px;
-    font-weight: $light;
-    line-height: 1.33;
-    letter-spacing: 1px;
-    color: $text-dark;
     margin: 0 0 30px;
   }
 

frontend/pages/hosts/ManageHostsPage/_styles.scss

@@ -9,12 +9,6 @@
   }
 
   &__title {
-    margin: 0;
-    font-weight: $light;
-    font-size: 20px;
-    letter-spacing: 1px;
-    color: $text-medium;
-
     .kolidecon {
       color: $text-light;
       margin-right: 15px;

frontend/pages/hosts/NewHostPage/_styles.scss

@@ -5,11 +5,6 @@
   }
 
   &__title {
-    font-weight: $light;
-    letter-spacing: 1px;
-    color: $text-ultradark;
-    font-size: $large;
-    width: 364px;
     margin: 0 0 32px;
   }
 

frontend/pages/packs/AllPacksPage/AllPacksPage.jsx

@@ -262,9 +262,9 @@ export class AllPacksPage extends Component {
     return (
       <div className={`${baseClass} has-sidebar`}>
         <div className={`${baseClass}__wrapper body-wrap`}>
-          <p className={`${baseClass}__title`}>
+          <h1 className={`${baseClass}__title`}>
             <NumberPill number={packsCount} /> Query Packs
-          </p>
+          </h1>
           <div className={`${baseClass}__search-create-section`}>
             <InputField
               name="pack-filter"

frontend/pages/packs/AllPacksPage/_styles.scss

@@ -46,9 +46,7 @@
   }
 
   &__title {
-    color: $text-medium;
-    display: inline-block;
-    font-size: $large;
+    margin: 0 0 15px;
   }
 
   &__wrapper {

frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx

@@ -244,9 +244,9 @@ export class ManageQueriesPage extends Component {
     return (
       <div className={`${baseClass} has-sidebar`}>
         <div className={`${baseClass}__wrapper body-wrap`}>
-          <p className={`${baseClass}__title`}>
+          <h1 className={`${baseClass}__title`}>
             <NumberPill number={queriesCount} /> Queries
-          </p>
+          </h1>
           <div className={`${baseClass}__filter-and-cta`}>
             <div className={`${baseClass}__filter-queries`}>
               <InputField

frontend/pages/queries/ManageQueriesPage/_styles.scss

@@ -51,15 +51,7 @@
   }
 
   &__title {
-    color: $text-dark;
     margin: 0 0 12px;
-    font-size: 24px;
-    font-weight: $light;
-    letter-spacing: -0.5px;
-
-    .number-pill {
-      vertical-align: text-bottom;
-    }
   }
 
   &__wrapper {

frontend/styles/global/_global.scss

@@ -34,6 +34,14 @@ h3 {
   line-height: 1.2;
 }
 
+h1 {
+  font-size: 24px;
+  font-weight: $light;
+  letter-spacing: -0.5px;
+  color: $text-dark;
+  margin: 0;
+}
+
 a {
   color: $link;
 }