Use specific class instead of relying on H1 being inside page-header

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>

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>

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"

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 />

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>

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>

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} />

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>

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>

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;
@@ -72,3 +62,13 @@ $page-header-weight: 400 !important;
     }
   }
 }
+.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;
+}