Clean up headers

Updates headers to match style guide and makes them consistent
throughout pages in the GUI. Removes instances where a header
element existed and a different header style was being applied.
For example, <h2 class="h4">

Tested: Ran GUI locally and verified that headers look consistent
and have the appropriate sizing while using Chrome, Firefox and
Safari.

Change-Id: I187136298ed2bfd36c40c2b80d5a4f20947cbe56
Signed-off-by: beccabroek <beccabroek@gmail.com>

19 files changed, 48 insertions, 71 deletions

diff --git a/app/common/directives/errors.html b/app/common/directives/errors.html
index f3e98b6..49ed449 100644
--- a/app/common/directives/errors.html
+++ b/app/common/directives/errors.html
@@ -4,7 +4,7 @@
         <div class="screen-reader-offscreen modal-description">{{dataService.errorModalDetails.title}}</div><!-- accessibility only; used for screen readers -->
         <div class="page-header ">
             <span class="icon icon__warning inline"><span class="accessible-text" role="alert">{{dataService.errorModalDetails.title}}</span></span>
-            <h1 class="modal-title h4 inline">{{dataService.errorModalDetails.title}}</h1>
+            <h3 class="modal-title inline">{{dataService.errorModalDetails.title}}</h3>
         </div>
         <div class="modal__content">
             <p>{{dataService.errorModalDetails.description}}</p>
diff --git a/app/common/styles/base/foundation.scss b/app/common/styles/base/foundation.scss
index 1749d09..03ba3e5 100644
--- a/app/common/styles/base/foundation.scss
+++ b/app/common/styles/base/foundation.scss
@@ -42,14 +42,6 @@ nav,
 section {
   display: block; }
 
-/**
-     * Correct the font size and margin on `h1` elements within `section` and
-     * `article` contexts in Chrome, Firefox, and Safari.
-     */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
 /* Grouping content
        ========================================================================== */
 /**
diff --git a/app/common/styles/base/typography.scss b/app/common/styles/base/typography.scss
index db5bdd7..0457fc2 100644
--- a/app/common/styles/base/typography.scss
+++ b/app/common/styles/base/typography.scss
@@ -10,44 +10,44 @@ p {
   line-height: 1.5rem;
 }
 
+// Headers
 h1,
 h2,
 h3,
 h4,
-h5,
-h6 {
-  font-weight: 300;
-  margin: 0 0 .8rem;
-  line-height: 1;
+h5 {
+  line-height: 1.25;
   color: #333;
 }
 
 h1, .h1 {
-  font-size: 3rem;
+  font-size: 2.25rem;
   font-weight: 500;
   padding-top: .5rem;
-  margin-bottom: .6em;
 }
 
 h2, .h2 {
-  font-size: 1.8rem;
+  font-size: 1.25rem;
+  font-weight: bold;
 }
 
 h3, .h3 {
-  font-size: 1.3rem;
-  letter-spacing: -.08rem;
+  font-size: 1rem;
+  font-weight: bold;
 }
 
 h4, .h4 {
-  font-size: 1.125rem;
-  letter-spacing: -.04rem;
+  font-size: .875rem;
+  font-weight: bold;
 }
 
 h5, .h5 {
-  font-size: 1rem;
-  letter-spacing: -.05rem;
+  font-size: .875rem;
+  font-weight: 500;
+  color: $darkgrey;
 }
 
+// Fonts
 .courier-normal {
   font-family: "Courier New", Helvetica, arial, sans-serif;
 }
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index e50f826..bacb093 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -9,11 +9,6 @@ $nav__seclvlWidth: 240px;
   border-bottom: 1px solid $lightbg__grey;
   margin: .5em 0 2.2em;
   padding-left: 0;
-  .h4 {
-    padding: .1em 0 0 0;
-    margin: 0 0 1em 0;
-    font-weight: bold;
-  }
 }
 
 .content__container {
diff --git a/app/configuration/controllers/date-time-controller.html b/app/configuration/controllers/date-time-controller.html
index 78d693b..6e1e24d 100644
--- a/app/configuration/controllers/date-time-controller.html
+++ b/app/configuration/controllers/date-time-controller.html
@@ -1,12 +1,10 @@
 <loader loading="loading"></loader>
 <div id="configuration-date-time">
-  <div class="row column">
-    <h1>Date and time settings</h1>
+  <h1>Date and time settings</h1>
+  <div class="column small-12 page-header">
+    <h2>Set date and time manually or configure a Network Time Protocol (NTP) Server</h2>
   </div>
   <form class="time__form" role="form" action="">
-    <div class="page-header">
-      <h2 class="bold h4">Set date and time manually or configure a Network Time Protocol (NTP) Server</h2>
-    </div>
     <fieldset>
       <div class="column large-8">
         <div class="row column">
diff --git a/app/configuration/controllers/firmware-controller.html b/app/configuration/controllers/firmware-controller.html
index 9c0905b..1ec79fd 100644
--- a/app/configuration/controllers/firmware-controller.html
+++ b/app/configuration/controllers/firmware-controller.html
@@ -2,7 +2,7 @@
 <div class="row column">
   <h1>Firmware</h1>
   <div class="column small-12 page-header">
-    <h2 class="inline h4">Manage BMC and server firmware</h2>
+    <h2 class="inline">Manage BMC and server firmware</h2>
   </div>
 </div>
 <div class="row column">
@@ -13,12 +13,12 @@
 <firmware-list title="Server images" version="hostActiveVersion" firmwares="firmwares" filter-by="filters.host"></firmware-list>
 <div class="row column" id="upload">
   <div class="column small-12 page-header">
-    <h2 class="inline h3 bold">Specify image file location</h2>
+    <h2 class="inline bold">Specify image file location</h2>
   </div>
   <form id="firmware__upload-form" role="form" class="firmware__upload-form">
     <p>Specify an image file located on your workstation or a TFTP server. An image file may contain firmware images for the server, BMC, or other hardware devices. Each image that you upload will be unpacked from the image file and added to the appropriate list above.</p>
     <div class=" column firmware__upload-station">
-      <h3 class="h4 bold">Upload image file from workstation</h3>
+      <h3>Upload image file from workstation</h3>
       <p>Select the image file saved on the workstation storage medium to upload to the server BMC.</p>
       <label for="file-upload" class="inline firmware__upload-chooser">
         <input id="file-upload" type="file" file="file" class="hide" onchange="angular.element(this).scope().fileNameChanged()"/>
@@ -29,7 +29,7 @@
       <div class="inline uploading" ng-show="uploading">Upload in progress...</div>
     </div>
     <div class=" column firmware__upload-tftp">
-      <h3 class="h4 bold">Download image file from TFTP server</h3>
+      <h3>Download image file from TFTP server</h3>
       <p>Specify both the TFTP server IP address and the image file name stored on it to download to the server BMC.</p>
       <fieldset>
         <div class="row">
@@ -58,7 +58,7 @@
     <div class="screen-reader-offscreen modal-description">Update image priority</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
       <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
-      <h1 class="modal-title h4 inline">Change image priority</h1>
+      <h3 class="modal-title inline">Change image priority</h3>
     </div>
     <div class="modal__content">
       <p>Change firmware {{priority_image_version}} priority?</p>
@@ -75,7 +75,7 @@
     <div class="screen-reader-offscreen modal-description">Delete firmware image</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
       <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
-      <h1 class="modal-title h4 inline">Delete image</h1>
+      <h3 class="modal-title inline">Delete image</h3>
     </div>
     <div class="modal__content">
       <p>Delete firmware {{delete_image_version}}?</p>
@@ -91,13 +91,13 @@
   <div class="modal__activate" role="document">
     <div class="screen-reader-offscreen modal-description">Activate modal</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
-      <h1 class="modal-title h4"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
+      <h3 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 32 32"><path
           d="M18 14h-6v2h1v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path
           d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg></span>
         <!-- We call "Host" firmware "server" firmware -->
         Confirm {{activate_image_type == 'Host' ? 'server' : activate_image_type}} firmware file activation
-      </h1>
+      </h3>
     </div>
     <div class="modal__content">
       <div ng-switch on="activate_image_type">
diff --git a/app/configuration/controllers/network-controller.html b/app/configuration/controllers/network-controller.html
index 22e5889..6500c0b 100644
--- a/app/configuration/controllers/network-controller.html
+++ b/app/configuration/controllers/network-controller.html
@@ -6,7 +6,7 @@
   <form class="net-config__form" role="form" action="">
     <section class="row column">
       <div class="column small-12 page-header">
-        <h2 class="inline h4">Common settings</h2>
+        <h2 class="inline">Common settings</h2>
       </div>
       <fieldset>
         <div class="column small-12 large-3">
@@ -36,7 +36,7 @@
     </section>
     <section class="row column">
       <div class="column small-12 page-header">
-        <h2 class="inline h4">IPV4 settings</h2>
+        <h2 class="inline">IPV4 settings</h2>
       </div>
       <fieldset>
         <div class="row column">
@@ -78,7 +78,7 @@
     </section>
     <section class="row column">
       <div class="column small-12 page-header">
-        <h2 class="inline h4">DNS settings</h2>
+        <h2 class="inline">DNS settings</h2>
       </div>
       <fieldset>
         <!-- Call Nameservers "DNS Servers" on the GUI -->
@@ -107,7 +107,7 @@
     <div class="screen-reader-offscreen modal-description">Change network settings</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
       <span class="icon icon__warning inline"><span class="accessible-text" role="alert">Warning</span></span>
-      <h1 class="modal-title h4 inline">Change network settings</h1>
+      <h3 class="modal-title inline">Change network settings</h3>
     </div>
     <div class="modal__content">
       <p>Changing network settings may cause the system to become unavailable (e.g. changing the BMC IP address).
diff --git a/app/configuration/controllers/snmp-controller.html b/app/configuration/controllers/snmp-controller.html
index 586ee33..ac03497 100644
--- a/app/configuration/controllers/snmp-controller.html
+++ b/app/configuration/controllers/snmp-controller.html
@@ -5,7 +5,7 @@
   </div>
   <form class="snmp__form" role="form" action="">
       <div class="page-header">
-        <h2 class="bold h4">Set the Simple Network Management Protocol (SNMP)</h2>
+        <h2>Set the Simple Network Management Protocol (SNMP)</h2>
       </div>
       <fieldset>
         <div class="row column snmp__managers-wrap">
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index e9e189c..57a5f18 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -9,7 +9,7 @@
       <!-- Server Metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3 class="bold h4">Server information</h3>
+          <h3>Server information</h3>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
@@ -35,7 +35,7 @@
       <!-- BMC Metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3 class="bold h4">BMC information</h3>
+          <h3>BMC information</h3>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
@@ -61,7 +61,7 @@
       <!-- Power metadata -->
       <div class="row overview__server-metadata">
         <div class="column large-4">
-          <h3 class="bold h4">Power information</h3>
+          <h3>Power information</h3>
         </div>
         <div class="column large-8">
           <ul class="overview__metadata-wrapper">
@@ -113,7 +113,7 @@
   <section class="row">
     <div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
       <div class="page-header">
-        <h3 class="bold h4 inline">High priority events ({{logs.length}})</h3>
+        <h3>High priority events ({{logs.length}})</h3>
         <a href="#/server-health/event-log/" class="inline float-right">View all event logs</a>
       </div>
 
@@ -140,7 +140,7 @@
 
     <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
       <div class="page-header">
-        <h3 class="bold h4">High priority events (0)</h3>
+        <h3>High priority events (0)</h3>
       </div>
       <p>There are no high priority events to display at this time.</p>
     </div>
@@ -151,12 +151,12 @@
   <div class="modal__upload" role="document">
     <div class="screen-reader-offscreen modal-description">Edit hostname</div><!-- accessibility only; used for screen readers -->
     <div class="page-header ">
-      <h1 class="modal-title h4"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
+      <h3 class="modal-title"><span class="icon icon__info"><svg xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 32 32"><path
           d="M18 14h-6v2h1v6h-2v2h8v-2h-2z"/><circle cx="16" cy="10" r="2"/><path
           d="M16 2C8.269 2 2 8.269 2 16s6.269 14 14 14 14-6.269 14-14S23.731 2 16 2zm0 26C9.383 28 4 22.617 4 16S9.383 4 16 4s12 5.383 12 12-5.383 12-12 12z"/></svg></span>
         Edit hostname
-      </h1>
+      </h3>
     </div>
     <div class="modal__content">
       <p>The hostname is displayed in the header and can contain any characters up to a total of 64</p>
diff --git a/app/server-control/controllers/bmc-reboot-controller.html b/app/server-control/controllers/bmc-reboot-controller.html
index dece701..627e60c 100644
--- a/app/server-control/controllers/bmc-reboot-controller.html
+++ b/app/server-control/controllers/bmc-reboot-controller.html
@@ -4,7 +4,7 @@
   </div>
   <div class="row column">
     <div class="page-header">
-      <p class="inline h4">Current BMC boot status</p>
+      <h2 class="inline">Current BMC boot status</h2>
       <div class="float-right bmc-reboot__status-log inline">BMC last reboot at
         <span class="courier-bold">{{reboot_time | localeDate}}</span></div>
     </div>
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index b32792a..3dc69d2 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -3,7 +3,7 @@
     <div class="row column">
         <h1>Server power operations</h1>
         <div class="power__current-status page-header">
-            <h2 class="inline h4">Current status</h2>
+            <h2 class="inline">Current status</h2>
             <div class="power__status-log inline float-right">Last power operation at <span class="courier-bold">{{power_time | localeDate}}</span></div>
         </div>
     </div>
@@ -15,7 +15,7 @@
     </div>
     <div class="row column">
         <div class="row column">
-            <h3 class="h4 subhead">Select a power operation</h3>
+            <h3 class="subhead">Select a power operation</h3>
         </div>
         <span class="inactive-message" ng-show="dataService.server_state == 'Unreachable'">There are no power operations to display while a power operation is in progress. When complete, any new power operations will be displayed here.</span>
         <!-- Power on displays only when server is shutdown -->
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index 3e7c63f..5369827 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -6,7 +6,7 @@
   <form class="power-usage__form" role="form" action="">
     <section class="row column">
       <div class="page-header">
-        <h2 class="bold h4">Power information</h2>
+        <h2 class="bold">Power information</h2>
       </div>
       <fieldset>
           <ul class="power-usage__metadata-wrapper">
diff --git a/app/server-control/controllers/remote-console-controller.html b/app/server-control/controllers/remote-console-controller.html
index 4d1887a..d03bb70 100644
--- a/app/server-control/controllers/remote-console-controller.html
+++ b/app/server-control/controllers/remote-console-controller.html
@@ -4,7 +4,7 @@
   </div>
   <section class="row column">
     <div class="page-header">
-      <h2 class="h4">Access the Serial over LAN console</h2>
+      <h2>Access the Serial over LAN console</h2>
     </div>
   </section>
   <section class="row column">
diff --git a/app/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html
index dba6923..2901d76 100644
--- a/app/server-control/controllers/server-led-controller.html
+++ b/app/server-control/controllers/server-led-controller.html
@@ -2,7 +2,7 @@
     <div class="row column">
         <h1>Server LED</h1>
         <div class="page-header">
-            <h2 class="h4">LED light control</h2>
+            <h2>LED light control</h2>
         </div>
     </div>
 
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 3228fbd..155fce9 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -2,18 +2,10 @@
 
 #power-operations {
 
-  .h4 {
-    font-weight: bold;
-  }
-
   // Power Curernt status wrapper
   .power__current-status {
     border-bottom: 1px solid $medgrey;
     margin: 1.3em 0 1.2em 0;
-    .h4 {
-      padding: 0;
-      margin: 0 0 .5em 0;
-    }
   }
 
   // Power state indicator on/off
diff --git a/app/server-health/controllers/inventory-overview-controller.html b/app/server-health/controllers/inventory-overview-controller.html
index b9f6f27..c7fa781 100644
--- a/app/server-health/controllers/inventory-overview-controller.html
+++ b/app/server-health/controllers/inventory-overview-controller.html
@@ -3,7 +3,7 @@
   <div class="row column no-padding">
     <h1>Hardware status</h1>
     <div class="page-header">
-      <h2 class="inline h4">All hardware in the system</h2>
+      <h2 class="inline">All hardware in the system</h2>
       <a ng-href="data:text/json;charset=utf-8,{{originalData}}" class="inline btn-export float-right"  download="export_inventory.json" ng-show="hardwares.length">Export</a>
 
     </div>
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 5ece64a..0a5dfab 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -5,7 +5,7 @@
   </div>
   <section class="row column">
     <div class="page-header">
-      <h2 class="inline h4">All events from the BMC</h2>
+      <h2 class="inline">All events from the BMC</h2>
       <div class="event-log__timezone inline float-right">
         <button class="dropdown__button" ng-click="timezone = timezone == true ? false : true;" toggle-flag="timezone">
           <span>{{tmz === 'UTC' ? 'UTC Timezone' : 'User Timezone'}}</span>
diff --git a/app/server-health/controllers/sensors-overview-controller.html b/app/server-health/controllers/sensors-overview-controller.html
index 90950c8..5a6f95a 100644
--- a/app/server-health/controllers/sensors-overview-controller.html
+++ b/app/server-health/controllers/sensors-overview-controller.html
@@ -5,7 +5,7 @@
   </div>
   <section class="row column">
     <div class="page-header">
-      <h2 class="inline h4">All sensors present in the system</h2>
+      <h2 class="inline">All sensors present in the system</h2>
       <a ng-href="data:text/json;charset=utf-8,{{export_data}}" class="inline btn-export float-right" download="{{export_name}}">Export</a>
     </div>
   </section>
diff --git a/app/users/controllers/user-accounts-controller.html b/app/users/controllers/user-accounts-controller.html
index fd9d7cf..9c80da6 100644
--- a/app/users/controllers/user-accounts-controller.html
+++ b/app/users/controllers/user-accounts-controller.html
@@ -33,7 +33,7 @@
   <form  role="form" class="user-manage__form">
     <section class="row column" aria-label="user manage form">
        <div class="column small-12 page-header">
-        <h2 class="inline h4">User account settings</h2>
+        <h2 class="inline">User account settings</h2>
        </div>
         <div class='col-sm-12'>
           <label class="col-md-1 control-label" for="user-manage__username">UserName</label>