From 103ddce41e2adc06a63b44c757b21a759363c676 Mon Sep 17 00:00:00 2001
From: Alex P <thealexpaxton@gmail.com>
Date: Thu, 27 Apr 2017 14:33:40 -0700
Subject: [PATCH] Use specific class instead of relying on H1 being inside
 page-header

---
 ui/src/admin/containers/AdminPage.js          |  2 +-
 ui/src/alerts/containers/AlertsApp.js         |  2 +-
 .../components/TemplateVariableManager.js     |  4 ++--
 ui/src/data_explorer/containers/Header.js     |  4 +++-
 ui/src/hosts/containers/HostsPage.js          |  2 +-
 ui/src/kapacitor/components/KapacitorForm.js  |  2 +-
 ui/src/kapacitor/components/KapacitorRules.js |  2 +-
 ui/src/sources/containers/ManageSources.js    |  2 +-
 ui/src/sources/containers/SourcePage.js       |  2 +-
 ui/src/style/layout/page-header.scss          | 20 +++++++++----------
 10 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js
index b262253e87..3862705ccf 100644
--- a/ui/src/admin/containers/AdminPage.js
+++ b/ui/src/admin/containers/AdminPage.js
@@ -157,7 +157,7 @@ class AdminPage extends Component {
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 Admin
               </h1>
             </div>
diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js
index 5bd902921e..e3f791541d 100644
--- a/ui/src/alerts/containers/AlertsApp.js
+++ b/ui/src/alerts/containers/AlertsApp.js
@@ -125,7 +125,7 @@ class AlertsApp extends Component {
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 Alert History
               </h1>
             </div>
diff --git a/ui/src/dashboards/components/TemplateVariableManager.js b/ui/src/dashboards/components/TemplateVariableManager.js
index 1d0e690f2f..7e7d1485b5 100644
--- a/ui/src/dashboards/components/TemplateVariableManager.js
+++ b/ui/src/dashboards/components/TemplateVariableManager.js
@@ -23,7 +23,7 @@ const TemplateVariableManager = ({
   <div className="template-variable-manager">
     <div className="template-variable-manager--header">
       <div className="page-header__left">
-        Template Variables
+        <h1 className="page-header__title">Template Variables</h1>
       </div>
       <div className="page-header__right">
         <button
@@ -40,7 +40,7 @@ const TemplateVariableManager = ({
           type="button"
           onClick={onEditTemplateVariables(templates, onSaveTemplatesSuccess)}
         >
-          Save Template
+          Save Changes
         </button>
         <span
           className="icon remove"
diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js
index 238deb4c9c..0f59f8ea48 100644
--- a/ui/src/data_explorer/containers/Header.js
+++ b/ui/src/data_explorer/containers/Header.js
@@ -43,7 +43,9 @@ const Header = React.createClass({
       <div className="page-header full-width-no-scrollbar">
         <div className="page-header__container">
           <div className="page-header__left">
-            <h1>Data Explorer</h1>
+            <h1 className="page-header__title">
+              Data Explorer
+            </h1>
           </div>
           <div className="page-header__right">
             <GraphTips />
diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js
index 4f732f724c..66b8c4214b 100644
--- a/ui/src/hosts/containers/HostsPage.js
+++ b/ui/src/hosts/containers/HostsPage.js
@@ -78,7 +78,7 @@ export const HostsPage = React.createClass({
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 Host List
               </h1>
             </div>
diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js
index 5db261ad19..cfdb29399a 100644
--- a/ui/src/kapacitor/components/KapacitorForm.js
+++ b/ui/src/kapacitor/components/KapacitorForm.js
@@ -11,7 +11,7 @@ class KapacitorForm extends Component {
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 Configure Kapacitor
               </h1>
             </div>
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js
index 77102e078a..f9af86bcbd 100644
--- a/ui/src/kapacitor/components/KapacitorRules.js
+++ b/ui/src/kapacitor/components/KapacitorRules.js
@@ -50,7 +50,7 @@ const PageContents = ({children, source}) => (
     <div className="page-header">
       <div className="page-header__container">
         <div className="page-header__left">
-          <h1>Kapacitor Rules</h1>
+          <h1 className="page-header__title">Kapacitor Rules</h1>
         </div>
         <div className="page-header__right">
           <SourceIndicator sourceName={source && source.name} />
diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js
index 7136b0dfdd..94e08a626b 100644
--- a/ui/src/sources/containers/ManageSources.js
+++ b/ui/src/sources/containers/ManageSources.js
@@ -49,7 +49,7 @@ class ManageSources extends Component {
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>Configuration</h1>
+              <h1 className="page-header__title">Configuration</h1>
             </div>
           </div>
         </div>
diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js
index ac7be0ac73..9b46f69334 100644
--- a/ui/src/sources/containers/SourcePage.js
+++ b/ui/src/sources/containers/SourcePage.js
@@ -115,7 +115,7 @@ export const SourcePage = React.createClass({
         <div className="page-header">
           <div className="page-header__container">
             <div className="page-header__left">
-              <h1>
+              <h1 className="page-header__title">
                 {editMode ? 'Edit Source' : 'Add a New Source'}
               </h1>
             </div>
diff --git a/ui/src/style/layout/page-header.scss b/ui/src/style/layout/page-header.scss
index 88a3e5e535..65413aa0a5 100644
--- a/ui/src/style/layout/page-header.scss
+++ b/ui/src/style/layout/page-header.scss
@@ -29,16 +29,6 @@ $page-header-weight: 400 !important;
     width: 100%;
     max-width: ($page-wrapper-max-width - $page-wrapper-padding - $page-wrapper-padding);
   }
-  h1 {
-    text-transform: none;
-    font-size: $page-header-size;
-    font-weight: $page-header-weight;
-    margin: 0;
-    display: inline-block;
-    vertical-align: middle;
-    @include no-user-select();
-    cursor: default;
-  }
   &__left,
   &__right {
     flex: 1 0 0;
@@ -71,4 +61,14 @@ $page-header-weight: 400 !important;
       max-width: 100%;
     }
   }
+}
+.page-header__title {
+  text-transform: none;
+  font-size: $page-header-size;
+  font-weight: $page-header-weight;
+  margin: 0;
+  display: inline-block;
+  vertical-align: middle;
+  @include no-user-select();
+  cursor: default;
 }
\ No newline at end of file