From 73035877b3c282e9467dac1d965084da64c83f94 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Tue, 10 Jan 2017 10:27:10 -0600
Subject: [PATCH] Fixing spacing of manage packs header (#848)

* Fixing spacing of header

* Make h1 headers consistent
---
 frontend/components/NumberPill/_styles.scss               | 1 +
 frontend/components/forms/packs/PackForm/_styles.scss     | 4 ----
 frontend/components/forms/queries/QueryForm/_styles.scss  | 8 --------
 .../side_panels/QueryDetailsSidePanel/_styles.scss        | 2 --
 .../components/side_panels/SiteNavHeader/_styles.scss     | 5 +++--
 frontend/pages/Admin/AppSettingsPage/_styles.scss         | 5 -----
 frontend/pages/Admin/UserManagementPage/_styles.scss      | 4 ----
 frontend/pages/Kolide404/_styles.scss                     | 2 ++
 frontend/pages/Kolide500/_styles.scss                     | 2 ++
 frontend/pages/UserSettingsPage/_styles.scss              | 5 -----
 frontend/pages/hosts/ManageHostsPage/_styles.scss         | 6 ------
 frontend/pages/hosts/NewHostPage/_styles.scss             | 5 -----
 frontend/pages/packs/AllPacksPage/AllPacksPage.jsx        | 4 ++--
 frontend/pages/packs/AllPacksPage/_styles.scss            | 4 +---
 .../pages/queries/ManageQueriesPage/ManageQueriesPage.jsx | 4 ++--
 frontend/pages/queries/ManageQueriesPage/_styles.scss     | 8 --------
 frontend/styles/global/_global.scss                       | 8 ++++++++
 17 files changed, 21 insertions(+), 56 deletions(-)

diff --git a/frontend/components/NumberPill/_styles.scss b/frontend/components/NumberPill/_styles.scss
index 0d521fb70f..a1492ef72a 100644
--- a/frontend/components/NumberPill/_styles.scss
+++ b/frontend/components/NumberPill/_styles.scss
@@ -10,4 +10,5 @@
   font-weight: 600;
   letter-spacing: -0.5px;
   padding: 0 14px;
+  vertical-align: text-bottom;
 }
diff --git a/frontend/components/forms/packs/PackForm/_styles.scss b/frontend/components/forms/packs/PackForm/_styles.scss
index 4cde234378..098c81c003 100644
--- a/frontend/components/forms/packs/PackForm/_styles.scss
+++ b/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;
   }
 
diff --git a/frontend/components/forms/queries/QueryForm/_styles.scss b/frontend/components/forms/queries/QueryForm/_styles.scss
index 905ce67ed9..c166051c6b 100644
--- a/frontend/components/forms/queries/QueryForm/_styles.scss
+++ b/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,
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
index d349292757..749b542aa9 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/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;
diff --git a/frontend/components/side_panels/SiteNavHeader/_styles.scss b/frontend/components/side_panels/SiteNavHeader/_styles.scss
index 402710ec5a..7ceb67b346 100644
--- a/frontend/components/side_panels/SiteNavHeader/_styles.scss
+++ b/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;
diff --git a/frontend/pages/Admin/AppSettingsPage/_styles.scss b/frontend/pages/Admin/AppSettingsPage/_styles.scss
index 481d6a356e..61db0d4248 100644
--- a/frontend/pages/Admin/AppSettingsPage/_styles.scss
+++ b/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;
   }
 
diff --git a/frontend/pages/Admin/UserManagementPage/_styles.scss b/frontend/pages/Admin/UserManagementPage/_styles.scss
index 145efeaca1..096b3e6244 100644
--- a/frontend/pages/Admin/UserManagementPage/_styles.scss
+++ b/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;
   }
diff --git a/frontend/pages/Kolide404/_styles.scss b/frontend/pages/Kolide404/_styles.scss
index 7f6ae911f0..dcfc9a5e7a 100644
--- a/frontend/pages/Kolide404/_styles.scss
+++ b/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 {
diff --git a/frontend/pages/Kolide500/_styles.scss b/frontend/pages/Kolide500/_styles.scss
index fdcaadbe3a..62f835200e 100644
--- a/frontend/pages/Kolide500/_styles.scss
+++ b/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 {
diff --git a/frontend/pages/UserSettingsPage/_styles.scss b/frontend/pages/UserSettingsPage/_styles.scss
index 4be121d630..313b29eade 100644
--- a/frontend/pages/UserSettingsPage/_styles.scss
+++ b/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;
   }
 
diff --git a/frontend/pages/hosts/ManageHostsPage/_styles.scss b/frontend/pages/hosts/ManageHostsPage/_styles.scss
index d330cbac89..0b309dc496 100644
--- a/frontend/pages/hosts/ManageHostsPage/_styles.scss
+++ b/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;
diff --git a/frontend/pages/hosts/NewHostPage/_styles.scss b/frontend/pages/hosts/NewHostPage/_styles.scss
index 0217f4337e..0e7b59a788 100644
--- a/frontend/pages/hosts/NewHostPage/_styles.scss
+++ b/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;
   }
 
diff --git a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx b/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
index 317517ab5f..55490a9061 100644
--- a/frontend/pages/packs/AllPacksPage/AllPacksPage.jsx
+++ b/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"
diff --git a/frontend/pages/packs/AllPacksPage/_styles.scss b/frontend/pages/packs/AllPacksPage/_styles.scss
index 490ce9022d..e075dc085d 100644
--- a/frontend/pages/packs/AllPacksPage/_styles.scss
+++ b/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 {
diff --git a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx b/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx
index ea72627666..b33f04d268 100644
--- a/frontend/pages/queries/ManageQueriesPage/ManageQueriesPage.jsx
+++ b/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
diff --git a/frontend/pages/queries/ManageQueriesPage/_styles.scss b/frontend/pages/queries/ManageQueriesPage/_styles.scss
index 302e6c765e..4a442a7ebc 100644
--- a/frontend/pages/queries/ManageQueriesPage/_styles.scss
+++ b/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 {
diff --git a/frontend/styles/global/_global.scss b/frontend/styles/global/_global.scss
index faaf2a357c..2ceccc03b3 100644
--- a/frontend/styles/global/_global.scss
+++ b/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;
 }