Update overview page to use new UI patterns

- Use page, section, list-pair to establish
  consistent layout
- Update header and overview page to use new
  caret icon
- Reordered Server and BMC information to
  accomodate small screen views
- Added chevron icons to create consistency
  between header and server overview page
  quick links
- Changed edit hostname text to use the
  standard icon
- Added OR operator to short circuit the server
  model, server serial number, and server manufacturer
  to display N/A if the information is not available

Change-Id: I6619f5369ff290555142e85aa432e901c4f93d2d
Signed-off-by: Derick Montague <derick.montague@ibm.com>

13 files changed, 329 insertions, 314 deletions

diff --git a/app/assets/icons/icon-chevron-right.svg b/app/assets/icons/icon-chevron-right.svg
new file mode 100644
index 0000000..7c48325
--- /dev/null
+++ b/app/assets/icons/icon-chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
\ No newline at end of file
diff --git a/app/common/directives/app-header.html b/app/common/directives/app-header.html
index a9c41b4..651e56d 100644
--- a/app/common/directives/app-header.html
+++ b/app/common/directives/app-header.html
@@ -5,20 +5,51 @@
     <a href="" class="header__logout" ng-click="logout()">Log out</a>
   </div>
   <div class="header__functions-section">
-    <div class="logo__wrapper"><img src="../../assets/images/logo.svg" class="header__logo" alt="company logo"/></div>
+    <div class="logo__wrapper">
+      <img
+        src="../../assets/images/logo.svg"
+        class="header__logo"
+        alt="company logo"
+      />
+    </div>
     <div class="inline header__server-name">
-      <p class="header__hostname">{{dataService.hostname}}</p>
-      <p class="header__server-ip courier-bold">{{dataService.server_id}}</p>
+      <p class="header__hostname">{{ dataService.hostname }}</p>
+      <p class="header__server-ip courier-bold">{{ dataService.server_id }}</p>
     </div>
     <div class="header__functions" ng-class="{'active' : toggle}">
-      <button type="button" class="header__info" ng-click="toggle = !toggle"><i class="icon icon-angle" aria-hidden="true"></i></button>
-      <a href="#/server-health/event-log" class="header__server-health">Server health
-        <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}">{{dataService.server_health}}</span></a>
-       <a href="#/server-control/power-operations" class="header__server-power" role="button">Server power
-        <i class="icon icon-angle" aria-hidden="true"></i><span ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}">{{dataService.server_state | quiescedToError}}</span></a>
-      <p class="header__refresh">Data last refreshed<span>{{dataService.last_updated | localeDate}}</span>
+      <button
+        type="button"
+        class="header__action header__action--info"
+        ng-click="toggle = !toggle"
+      >
+        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
+      </button>
+      <a href="#/server-health/event-log" class="header__action"
+        >Server health
+        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+        ><span
+          ng-class="{'status-light__error': dataService.server_health == 'Critical', 'status-light__warn': dataService.server_health == 'Warning', 'status-light__good': dataService.server_health == 'Good'}"
+          >{{ dataService.server_health }}</span
+        ></a
+      >
+      <a href="#/server-control/power-operations" class="header__action"
+        >Server power
+        <icon aria-hidden="true" file="icon-chevron-right.svg"></icon
+        ><span
+          ng-class="{'status-light__off': dataService.server_state == 'Off', 'status-light__disabled': dataService.server_state == 'Unreachable', 'status-light__good': dataService.server_state == 'Running', 'status-light__error': dataService.server_state == 'Quiesced'}"
+          >{{ dataService.server_state | quiescedToError }}</span
+        ></a
+      >
+      <p class="header__refresh">
+        Data last refreshed<span>{{
+          dataService.last_updated | localeDate
+        }}</span>
       </p>
-      <button class="header__page-refresh" ng-click="refresh()" aria-label="refresh page data">
+      <button
+        class="header__action header__action--refresh"
+        ng-click="refresh()"
+        aria-label="refresh page data"
+      >
         <span>Refresh</span>
         <icon file="icon-restart.svg"></icon>
       </button>
diff --git a/app/common/styles/elements/modals.scss b/app/common/styles/elements/modals.scss
index 87ad432..dc1c9d8 100644
--- a/app/common/styles/elements/modals.scss
+++ b/app/common/styles/elements/modals.scss
@@ -11,9 +11,9 @@
   opacity: 0;
 }
 
-.modal-overlay.active{
+.modal-overlay.active {
   z-index: 100;
-  opacity: .5;
+  opacity: 0.5;
   display: block;
   @include fastTransition-all;
 }
@@ -23,12 +23,12 @@
   height: auto;
   left: 50%;
   top: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   max-width: 850px;
   min-width: 450px;
-  padding: .8em 1.5em;
+  padding: 0.8em 1.5em;
   border: thin $primary-dark solid;
-  background-color :$background-01;
+  background-color: $background-01;
   z-index: 101;
   position: fixed;
   overflow: hidden;
@@ -38,13 +38,13 @@
   }
 }
 
-.modal.active{
+.modal.active {
   @include fastTransition-all;
   display: block;
 }
 
 .modal .page-header {
-  padding-bottom: .7em;
+  padding-bottom: 0.7em;
 }
 
 .screen-reader-offscreen {
@@ -61,20 +61,21 @@
 }
 .modal__link {
   display: block;
-  margin: .8em 0 1em;
+  margin: 0.8em 0 1em;
   @include mediaQuery(medium) {
     display: inline-block;
-    margin: .6em 0;
+    margin: 0.6em 0;
   }
 }
+// TODO: Use the form__actions pattern / selector
 .modal__button-wrapper {
   float: right;
   button {
-    margin-bottom: .8em;
-    margin-right: .8em;
+    margin-bottom: 0.8em;
+    margin-right: 0.8em;
     display: inline-block;
     @include mediaQuery(medium) {
-      margin-left: .8em;
+      margin-left: 0.8em;
       margin-right: 0;
     }
   }
diff --git a/app/common/styles/elements/quicklinks.scss b/app/common/styles/elements/quicklinks.scss
index c1bff93..e6f49a3 100644
--- a/app/common/styles/elements/quicklinks.scss
+++ b/app/common/styles/elements/quicklinks.scss
@@ -1,21 +1,26 @@
 //Quick links block
 .quick-links {
   background-color: $background-02;
-  padding: .5em 1em;
-  font-size: .9em;
+  padding: 0.5em 1em;
+  font-size: 0.9em;
   font-weight: 400;
   margin: 1em 0;
   @include mediaQuery(medium) {
     margin: 0 0 0 1em;
   }
+
   a {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     color: $primary-dark;
     text-decoration: none;
-    display: block;
   }
+
   p {
     margin-bottom: 0;
   }
+
   .event-log__events {
     margin-top: 0;
   }
@@ -25,21 +30,16 @@
   padding: 1em 0 1em 0;
   border-bottom: 1px solid $border-color-01;
   position: relative;
-  &:after {
-    content: '\203A';
-    position: absolute;
-    top: 50%;
-    right: 0;
-    font-size: 3em;
-    color: $text-02;
-    transform: translateY(-50%);
-  }
+
   &.no-icon {
     overflow: auto;
+
     .bmc-time {
+      @include fontCourierBold;
       text-align: right;
       max-width: 17em;
       float: right;
+
       @include mediaQuery(medium) {
         display: block;
         text-align: left;
@@ -59,7 +59,7 @@
   }
   .float-right {
     float: right;
-    @media(min-width: 1024px) and (max-width: 1140px) {
+    @media (min-width: 1024px) and (max-width: 1140px) {
       display: block;
       float: none;
     }
@@ -74,7 +74,7 @@
   color: $status-error;
   margin-bottom: 0;
   font-weight: 700;
-  font-size: .9em;
+  font-size: 0.9em;
   a {
     color: $status-error;
   }
diff --git a/app/common/styles/layout/content.scss b/app/common/styles/layout/content.scss
index 8c8b916..f5d2757 100644
--- a/app/common/styles/layout/content.scss
+++ b/app/common/styles/layout/content.scss
@@ -38,12 +38,12 @@ label {
   @include label;
 }
 
-// TODO: Remove and replace with page and page-title pattern
+// TODO: Remove and replace with section and section-title pattern
 // Page header
 .page-header {
   width: 100%;
   position: relative;
-  border-bottom: 1px solid $border-color-02;
+  border-bottom: 1px solid $border-color-01;
   margin: 0.5em 0 2.2em;
   padding-left: 0;
 }
diff --git a/app/common/styles/layout/header.scss b/app/common/styles/layout/header.scss
index 3e0f0da..084fe71 100644
--- a/app/common/styles/layout/header.scss
+++ b/app/common/styles/layout/header.scss
@@ -136,43 +136,26 @@ $logoMaxWidth: 125px;
     }
   }
 
-  .header__server-power,
-  .header__page-refresh,
-  .header__server-health,
-  .header__info,
-  .header__multi-server {
-    background: $background-02;
+  .header__action {
+    @include fastTransition-all;
     @include round-corners;
-    margin: 0 0.3em;
     height: 100%;
+    background: $background-02;
     border: 1px solid $border-color-01;
+    margin: 0 0.3em;
     opacity: 1;
-    @include fastTransition-all;
+
+    .icon svg {
+      width: 1rem;
+    }
+
     &:hover {
       background: $background-01;
     }
   }
 
-  .header__multi-server {
-    padding: 0.5em;
-    padding-top: 0.8em;
-    float: left;
-    margin-top: 10px;
-    margin-right: -10px;
-    .icon-angle::before {
-      margin-left: 0;
-      transform: rotate(90deg);
-      @include fastTransition-all;
-    }
-    &.active {
-      .icon-angle::before {
-        transform: rotate(266deg);
-        @include fastTransition-all;
-      }
-    }
-  }
   .header__functions {
-    .header__info {
+    .header__action--info {
       padding: 0.3em;
       min-width: 40px;
       text-align: center;
@@ -183,25 +166,24 @@ $logoMaxWidth: 125px;
         font-weight: 400;
         color: $text-02;
       }
-      .icon-angle {
-        margin: 0.2em 0 0 0;
-      }
-      .icon-angle::before {
-        font-size: 1.625em;
-        font-weight: 400;
-        margin-left: 0;
-        display: block;
-        transform: rotate(180deg);
+
+      .icon {
         @include fastTransition-all;
+        margin: 0.2em 0 0 0;
+
+        svg {
+          width: 2.6rem;
+          height: auto;
+        }
       }
+
       @media (min-width: 1025px) {
         display: none;
       }
     }
 
-    &.active > .header__info > .icon-angle::before {
-      transform: rotate(-360deg);
-      @include fastTransition-all;
+    &.active > .header__action--info > .icon {
+      transform: rotate(-180deg);
     }
 
     .header__refresh {
@@ -213,7 +195,7 @@ $logoMaxWidth: 125px;
       }
     }
   }
-  .header__page-refresh {
+  .header__action--refresh {
     padding-top: 1em;
     span {
       font-size: 0.875em;
@@ -226,11 +208,12 @@ $logoMaxWidth: 125px;
       display: block;
       margin-left: auto;
       margin-right: auto;
-    }
-    svg {
-      width: 25px;
-      height: auto;
-      fill: $primary-accent;
+
+      svg {
+        width: 1.6rem;
+        height: auto;
+        fill: $primary-accent;
+      }
     }
   }
 }
diff --git a/app/common/styles/layout/list.scss b/app/common/styles/layout/list.scss
index 9be7522..ac1e3a4 100644
--- a/app/common/styles/layout/list.scss
+++ b/app/common/styles/layout/list.scss
@@ -8,6 +8,8 @@
  */
 
 .list-pair {
+  margin-bottom: 0;
+
   dt {
     @include label;
   }
@@ -15,4 +17,8 @@
     @include fontCourierBold;
     margin-bottom: 0;
   }
+
+  + .list-pair {
+    margin-top: 1.5rem;
+  }
 }
diff --git a/app/common/styles/layout/section.scss b/app/common/styles/layout/section.scss
index e92b096..aeb7ff2 100644
--- a/app/common/styles/layout/section.scss
+++ b/app/common/styles/layout/section.scss
@@ -1,28 +1,41 @@
 /**
  * Used for section layout. This should be used for the page container
  * Mark up
- <div class="section">
-   <h2 class="section-title">Section Title</h2>
+ <section class="section">
+   <div class="section-header">
+    <h2 class="section-title">Section Title</h2>
+    ... any element added here will be right aligned
+   </div>
    <div class="section-content">
      ...
     </div>
     <div class="section-content">
      ...
     </div>
- </div>
+ </section>
  */
 
 .section {
   margin-bottom: 3rem;
 }
 
-.section-title {
+.section-header {
+  display: flex;
+  justify-content: space-between;
   border-bottom: 1px solid $border-color-01;
   padding-bottom: 0.5rem;
   margin-bottom: 1.5rem;
 }
 
+.section-title {
+  margin-bottom: 0;
+}
+
 .section-content {
-  margin-bottom: 1.5rem;
   margin-top: 0;
+  margin-bottom: 0;
+
+  + .section-content {
+    margin-top: 1.5rem;
+  }
 }
diff --git a/app/overview/controllers/system-overview-controller.html b/app/overview/controllers/system-overview-controller.html
index ffbf0a1..9ef38ff 100644
--- a/app/overview/controllers/system-overview-controller.html
+++ b/app/overview/controllers/system-overview-controller.html
@@ -1,193 +1,191 @@
 <loader loading="loading"></loader>
-<div class="overview">
-  <div class="row column">
-    <h1 class="inline">{{dataService.hostname}}</h1>
-    <button class="btn  btn-tertiary" ng-click="edit_hostname = !edit_hostname">Edit</button>
-  </div>
-  <section class="row">
-    <div class="column large-8">
-      <!-- Server Metadata -->
-      <div class="row overview__server-metadata">
-        <div class="column large-4">
-          <h2 class="h3">Server information</h2>
+<div class="page overview">
+  <h1 class="page-title inline">{{ dataService.hostname }}</h1>
+  <button class="btn  btn-tertiary" ng-click="edit_hostname = !edit_hostname" aria-label="edit host name">
+    <icon class="nav-icon" aria-hidden="true" file="icon-edit.svg"></icon>
+  </button>
+  <div class="row">
+    <div class="small-12 large-8">
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title h3">Server information</h2>
         </div>
-        <div class="column large-8">
-          <ul class="overview__metadata-wrapper">
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Model</dt>
-                <dd class="courier-bold">{{server_info.Model}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Manufacturer</dt>
-                <dd class="courier-bold">{{server_info.Manufacturer}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Firmware version</dt>
-                <dd class="courier-bold">{{server_firmware}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Serial number</dt>
-                <dd class="courier-bold">{{server_info.SerialNumber}}</dd>
-              </dl>
-            </li>
-          </ul>
+        <div class="section-content row">
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Model</dt>
+              <dd>{{ server_info.Model  || "N/A"  }}</dd>
+            </dl>
+            <dl class="list-pair">
+              <dt>Serial number</dt>
+              <dd>{{ server_info.SerialNumber || "N/A"  }}</dd>
+            </dl>
+          </div>
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Manufacturer</dt>
+              <dd>{{ server_info.Manufacturer || "N/A" }}</dd>
+            </dl>
+            <dl class="list-pair">
+              <dt>Firmware version</dt>
+              <dd>{{ server_firmware }}</dd>
+            </dl>
+          </div>
         </div>
-      </div>
-      <!-- BMC Metadata -->
-      <div class="row overview__server-metadata">
-        <div class="column large-4">
-          <h2 class="h3">BMC information</h2>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title h3">BMC information</h2>
         </div>
-        <div class="column large-8">
-          <ul class="overview__metadata-wrapper">
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Hostname</dt>
-                <dd class="courier-bold overview__hostname">{{dataService.hostname}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">IP addresses</dt>
-                <dd class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">{{ip_address}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Firmware Version</dt>
-                <dd class="courier-bold">{{bmc_firmware}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Mac address</dt>
-                <dd class="courier-bold">{{dataService.mac_address}}</dd>
-              </dl>
-            </li>
-          </ul>
+        <div class="section-content row">
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Hostname</dt>
+              <dd class="overview__hostname">
+                {{ dataService.hostname }}
+              </dd>
+            </dl>
+            <dl class="list-pair">
+              <dt>IP addresses</dt>
+              <dd class="courier-bold" ng-repeat="ip_address in bmc_ip_addresses">
+                {{ ip_address }}
+              </dd>
+            </dl>
+          </div>
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Mac address</dt>
+              <dd class="courier-bold">{{ dataService.mac_address }}</dd>
+            </dl>
+            <dl class="list-pair">
+              <dt>Firmware Version</dt>
+              <dd class="courier-bold">{{ bmc_firmware }}</dd>
+            </dl>
+          </div>
         </div>
-      </div>
-      <!-- Power metadata -->
-      <div class="row overview__server-metadata">
-        <div class="column large-4">
-          <h2 class="h3">Power information</h2>
+      </section>
+
+      <section class="section">
+        <div class="section-header">
+          <h2 class="section-title h3">Power Consumption</h2>
         </div>
-        <div class="column large-8">
-          <ul class="overview__metadata-wrapper">
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Power Consumption</dt>
-                <dd class="courier-bold">{{power_consumption}}</dd>
-              </dl>
-            </li>
-            <li class="overview__metadata-block">
-              <dl>
-                <dt class="content-label">Power Cap</dt>
-                <dd class="courier-bold">{{power_cap}}</dd>
-              </dl>
-            </li>
-          </ul>
+        <div class="section-content row">
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Power Consumption</dt>
+              <dd class="courier-bold">{{ power_consumption }}</dd>
+            </dl>
+          </div>
+          <div class="column large-6">
+            <dl class="list-pair">
+              <dt>Power Cap</dt>
+              <dd class="courier-bold">{{ power_cap }}</dd>
+            </dl>
+          </div>
         </div>
-      </div>
-      <!-- Power metadata -->
+      </section>
     </div>
-    <div class="column large-4 no-padding">
+    <div class="small-12 large-4">
       <div class="quick-links">
         <a href="#/server-health/event-log/high" class="quick-links__item quick-links__events event-log__events"
           ng-show="logs.length">
           <!-- link to event log filtered to the high priority events -->
-          <p class="inline quick-links__event-copy">View {{logs.length}} high priority events</p>
+          <span class="inline quick-links__event-copy">
+            View {{ logs.length }} high priority events
+          </span>
         </a>
         <dl class="quick-links__item no-icon">
           <dt class="inline quick-links__label">BMC time</dt>
-          <dd class="courier-bold bmc-time">{{ bmc_time | localeDate }}</dd>
+          <dd class="bmc-time">{{ bmc_time | localeDate }}</dd>
         </dl>
         <div class="quick-links__item no-icon">
-          <p class="inline quick-links__label">Turn <span ng-if="dataService.LED_state == 'off'">on</span>
-            <span ng-if="dataService.LED_state == 'on'">off</span> server LED</p>
+          <p class="inline quick-links__label">
+            Turn <span ng-if="dataService.LED_state == 'off'">on</span>
+            <span ng-if="dataService.LED_state == 'on'">off</span> server LED
+          </p>
           <div class="toggle-container">
             <div class="toggle">
               <input id="toggle__switch-round" class="toggle-switch toggle-switch__round-flat" type="checkbox"
                 tabindex="0" ng-click="toggleLED()" ng-checked="dataService.LED_state == 'on'"
-                ng-disabled="dataService.server_unreachable">
-              <label for="toggle__switch-round" tabindex="0">Server LED is <span
-                  class="uid-switch__status">{{dataService.LED_state}}</span></label>
+                ng-disabled="dataService.server_unreachable" />
+              <label for="toggle__switch-round" tabindex="0">Server LED is
+                <span class="uid-switch__status">{{
+                  dataService.LED_state
+                }}</span></label>
             </div>
-          <span>
-              {{ dataService.LED_state == 'on' ? "On" : "Off" }}
-          </span>
+            <span>
+              {{ dataService.LED_state == "on" ? "On" : "Off" }}
+            </span>
+          </div>
         </div>
-      </div>
         <a href="#/server-control/remote-console" class="no-icon quick-links__item">
-          <p class="inline quick-links__label">Serial over LAN console</p>
-          <icon file="icon-launch.svg" class="float-right"></icon>
+          <span class="inline quick-links__label">Serial over LAN console</span>
+          <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
         </a>
         <a href="#/configuration/network" class="quick-links__item">
-          <p class="inline quick-links__label">Edit network settings</p>
+          <span class="inline quick-links__label">Edit network settings</span>
+          <icon aria-hidden="true" file="icon-chevron-right.svg"></icon>
         </a>
-        </d>
-      </div>
-  </section>
-  <section class="row">
-    <div class="column large-12 overview__event-log event-log__events" ng-show="logs.length">
-      <div class="page-header">
-        <div class="row">
-          <div class="column large-7 small-6">
-            <h2 class="h3">High priority events ({{logs.length}})</h2>
-          </div>
-          <div class="column large-5 small-6 no-padding">
-            <a href="#/server-health/event-log/" class="float-right">View all event logs</a>
-          </div>
-        </div>
       </div>
+    </div>
+  </div>
 
-      <!-- single event -->
-      <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'-Id'|limitTo : 5">
-        <div class="row column event-log__single-event">
-          <div class="row">
-            <!-- click will go to specific event in event log page-->
-            <div class="column small-10 large-11 event-log__event-info" ng-click="">
-              <div class="row">
-                <div class="column large-1 small-1">
-                  <p class="inline event__id">#{{event.Id}}</p>
-                </div>
-                <div class="column large-4 small-11">
-                  <p class="inline event__priority high-priority">High</p>
-                  <p class="inline event__severity high-priority">{{event.severity_code}}</p>
-                </div>
-                <div class="column large-7 large-offset-0 small-12 small-offset-1">
-                  <p class="inline event__timestamp">{{ event.Timestamp | localeDate }}</p>
-                </div>
-              </div>
+  <div class="section overview__event-log event-log__events" ng-show="logs.length">
+    <div class="section-header">
+      <h2 class="section-title h3">High priority events ({{ logs.length }})</h2>
+      <a href="#/server-health/event-log/">
+        View all event logs
+      </a>
+    </div>
 
-              <div class="row">
-                <div class="column large-12 small-12 small-offset-1">
-                  <p class="inline event__description">{{getEventLogTitle(event)}}</p>
-                </div>
+    <!-- single event -->
+    <a href="#/server-health/event-log/high" ng-repeat="event in logs|orderBy:'-Id'|limitTo : 5">
+      <div class="row column event-log__single-event">
+        <div class="row">
+          <!-- click will go to specific event in event log page-->
+          <div class="column small-10 large-11 event-log__event-info" ng-click="">
+            <div class="row">
+              <div class="column large-1 small-1">
+                <p class="inline event__id">#{{ event.Id }}</p>
+              </div>
+              <div class="column large-4 small-11">
+                <p class="inline event__priority high-priority">High</p>
+                <p class="inline event__severity high-priority">
+                  {{ event.severity_code }}
+                </p>
+              </div>
+              <div class="column large-7 large-offset-0 small-11 small-offset-1">
+                <p class="inline event__timestamp">
+                  {{ event.Timestamp | localeDate }}
+                </p>
               </div>
             </div>
-            <div class="column small-2 large-1">
-              <span class="accord-trigger" aria-hidden="true"></span>
+
+            <div class="row">
+              <div class="column large-12 small-11 small-offset-1">
+                <p class="inline event__description">
+                  {{ getEventLogTitle(event) }}
+                </p>
+              </div>
             </div>
           </div>
+          <div class="column small-2 large-1">
+            <span class="accord-trigger" aria-hidden="true"></span>
+          </div>
         </div>
-      </a>
-    </div>
-
-    <div class="row column overview__event-log event-log__events" ng-show="!logs.length">
-      <div class="page-header">
-        <h2 class="h3">High priority events (0)</h2>
       </div>
-      <p>There are no high priority events to display at this time.</p>
+    </a>
+  </div>
+
+  <div class="section overview__event-log event-log__events" ng-show="!logs.length">
+    <div class="section-header">
+      <h2 class="section-title h3">High priority events</h2>
     </div>
-  </section>
+    <p class="section-content">
+      There are no high priority events to display at this time.
+    </p>
+  </div>
 </div>
 <!-- edit server name modal -->
 <section class="modal" aria-hidden="true" aria-labelledby="modalTitle" aria-describedby="modalDescription" role="dialog"
@@ -197,26 +195,32 @@
     <div class="screen-reader-offscreen modal-description">Edit hostname</div>
     <div class="page-header ">
       <h2 class="modal-title">
-        <icon class="icon__info" file="icon-information.svg"></icon>Edit hostname
+        <icon class="icon__info" file="icon-information.svg"></icon>Edit
+        hostname
       </h2>
     </div>
     <div class="modal__content">
       <form name="edit_hostname_text">
         <label for="editServerName">Hostname</label>
-        <p class="label__helper-text">Hostname must be less than 64 characters and must not contain spaces.</p>
+        <p class="label__helper-text">
+          Hostname must be less than 64 characters and must not contain spaces.
+        </p>
         <input id="editServerName" class="modal__edit-server-name" type="text" ng-model="newHostname" ng-trim="false"
           name="hostname" ng-pattern="/^\S{0,64}$/" required autofocus />
-        <span class="modal__error" ng-show="edit_hostname_text.hostname.$error.pattern">Invalid format.
-          Remove spaces.</span>
+        <span class="modal__error" ng-show="edit_hostname_text.hostname.$error.pattern">Invalid format. Remove
+          spaces.</span>
         <span class="modal__char-count"
-          ng-hide="edit_hostname_text.hostname.$error.pattern">{{0 + newHostname.length}}/64</span>
+          ng-hide="edit_hostname_text.hostname.$error.pattern">{{ 0 + newHostname.length }}/64</span>
       </form>
     </div>
     <div class="modal__button-wrapper">
-      <button class="btn  btn-secondary"
-        ng-click="edit_hostname= false; newHostname = dataService.hostname">Cancel</button>
+      <button class="btn  btn-secondary" ng-click="edit_hostname= false; newHostname = dataService.hostname">
+        Cancel
+      </button>
       <button class="btn  btn-primary" ng-click="saveHostname(newHostname);" ng-disabled="edit_hostname_text.$invalid"
-        ng-class="{'disabled' : edit_hostname_text.$invalid}">Save</button>
+        ng-class="{'disabled' : edit_hostname_text.$invalid}">
+        Save
+      </button>
     </div>
   </div>
 </section>
diff --git a/app/overview/styles/system-overview.scss b/app/overview/styles/system-overview.scss
index 627ecf5..241a622 100644
--- a/app/overview/styles/system-overview.scss
+++ b/app/overview/styles/system-overview.scss
@@ -1,41 +1,19 @@
-.row {
-  width: 100%;
-}
-
-.overview__server-metadata {
-  border-bottom: 1px solid $border-color-01;
-  padding: 1.8em 0 0 0;
-}
-.overview__metadata-wrapper {
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
-}
-.overview__metadata-block {
-  list-style-type: none;
-  min-width: 47%;
-  margin-bottom: 1em;
-  margin-right: .7em;
-  display: inline-block;
-  white-space: normal;
-  word-break: break-all;
-  @include mediaQuery(small) {
-    float: left;
-  }
-}
 .overview__event-log {
-  padding-top: 2em;
   .event__description {
     color: $primary-dark;
     text-decoration: none;
   }
-  .control-check {display: none;}
+
+  .control-check {
+    display: none;
+  }
   .accord-trigger {
     transform: rotate(0deg) translateY(-50%);
     position: absolute;
     top: 50%;
     right: 0;
   }
+
   .event-log__event-info {
     padding-left: 1.4em;
   }
@@ -47,14 +25,10 @@ input.modal__edit-server-name {
 
 .modal__char-count,
 .modal__error {
-  font-size: .8em;
+  font-size: 0.8em;
   color: $text-02;
 }
 
 .modal__error {
   color: $status-error;
 }
-
-dl {
-  margin-bottom: 0;
-}
\ No newline at end of file
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index b0760e0..1a2a4b5 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -3,16 +3,20 @@
   <h1 class="page-title">Manage Power Usage</h1>
   <form class="power-usage__form" role="form" action="">
     <section class="section">
-      <h2 class="section-title">Power information</h2>
+      <div class="section-header">
+        <h2 class="section-title">Power information</h2>
+      </div>
       <dl class="list-pair">
         <dt>Power Consumption</dt>
         <dd>{{ power_consumption }}</dd>
       </dl>
     </section>
     <section class="section">
-      <h2 class="section-title">
-        Server power cap setting
-      </h2>
+      <div class="section-header">
+        <h2 class="section-title">
+          Server power cap setting
+        </h2>
+      </div>
       <div class="section-content">
         <p>
           Set a power cap to keep power consumption at or below the specified
diff --git a/app/server-health/controllers/log-controller.html b/app/server-health/controllers/log-controller.html
index 3b164bd..3921c20 100644
--- a/app/server-health/controllers/log-controller.html
+++ b/app/server-health/controllers/log-controller.html
@@ -30,7 +30,7 @@
   <log-search-control></log-search-control>
   <!-- filters -->
   <log-filter></log-filter>
-  <section id="event-log__events" class="row column">
+  <section class="row column event-log__events">
     <div id="event__actions-bar" class="row header__actions-bar no-margin">
       <div class="column small-1 large-1 event-log__col-check">
         <label class="control-check">
diff --git a/app/server-health/styles/log.scss b/app/server-health/styles/log.scss
index 7b82549..60bbba9 100644
--- a/app/server-health/styles/log.scss
+++ b/app/server-health/styles/log.scss
@@ -10,13 +10,12 @@ $priority-resolve--light: $base-02--04;
 
 // Event Log SCSS
 #event-log {
-
   .row {
     width: 100%;
   }
   // Dropwdowns filter
   .dropdown__date.row {
-    padding: .5em;
+    padding: 0.5em;
   }
 
   //Timezone select
@@ -25,7 +24,7 @@ $priority-resolve--light: $base-02--04;
     position: relative;
     text-transform: uppercase;
     color: $primary-accent;
-    font-size: .9em;
+    font-size: 0.9em;
     font-weight: 700;
     border: 0;
   }
@@ -42,7 +41,7 @@ $priority-resolve--light: $base-02--04;
     color: $text-02;
     text-transform: uppercase;
     font-weight: 700;
-    font-size: .75em;
+    font-size: 0.75em;
     margin-bottom: 3px;
   }
   .event__severity-filter {
@@ -60,7 +59,7 @@ $priority-resolve--light: $base-02--04;
   .event__date-filter {
     margin-right: 1.5em;
     color: $text-02;
-    float:left;
+    float: left;
     input {
       width: 170px;
     }
@@ -70,7 +69,7 @@ $priority-resolve--light: $base-02--04;
     }
   }
   .event__status-filter {
-    float:left;
+    float: left;
     @include mediaQuery(medium) {
       width: 25%;
     }
@@ -84,8 +83,8 @@ $priority-resolve--light: $base-02--04;
 
 .event-log__filters {
   position: relative;
-  padding-bottom: .5em;
-  padding-top: .5em;
+  padding-bottom: 0.5em;
+  padding-top: 0.5em;
 
   @media (min-width: 1333px) {
     float: right;
@@ -94,7 +93,7 @@ $priority-resolve--light: $base-02--04;
 }
 .empty__logs {
   border: 1px solid $border-color-02;
-  margin-top: .5em;
+  margin-top: 0.5em;
   text-align: center;
   padding: 2em;
 }
@@ -102,13 +101,11 @@ $priority-resolve--light: $base-02--04;
 .accord-trigger {
   position: absolute;
   right: 1em;
-  top: .3em;
+  top: 0.3em;
 }
 
-#event-log__events,
 .event-log__events {
   display: block;
-  margin-top: 1.6em;
   position: relative;
   overflow: hidden;
   .header__actions-bar {
@@ -130,16 +127,16 @@ $priority-resolve--light: $base-02--04;
     height: auto;
     margin-left: 0;
     left: 0;
-    padding: 1em 2em 1em 2em
+    padding: 1em 2em 1em 2em;
   }
   .inline__confirm-message {
     margin-top: 5px;
     margin-bottom: -10px;
   }
   .inline__confirm-buttons .btn-primary {
-    padding: .5em 2em;
+    padding: 0.5em 2em;
     min-height: 25px;
-    margin-top: .5em;
+    margin-top: 0.5em;
     @include mediaQuery(medium) {
       margin-top: 0;
     }
@@ -152,15 +149,15 @@ $priority-resolve--light: $base-02--04;
     span {
       display: inline-block;
       font-weight: 700;
-      margin-right: .3em;
+      margin-right: 0.3em;
     }
   }
 
   // Single event log card
   .event-log__single-event {
     border: 1px solid $border-color-01;
-    padding: 1em 1em 1em .7em;
-    margin: .5em 0 .5em 0;
+    padding: 1em 1em 1em 0.7em;
+    margin: 0.5em 0 0.5em 0;
     position: relative;
     overflow: hidden;
     @include fastTransition-all;
@@ -178,7 +175,7 @@ $priority-resolve--light: $base-02--04;
   //Event priorities
   .event__priority {
     color: $primary-light;
-    font-size: .8em;
+    font-size: 0.8em;
     text-transform: uppercase;
     padding: 2px 2em;
     font-weight: 700;
@@ -209,7 +206,7 @@ $priority-resolve--light: $base-02--04;
 
   //Event Severity
   .event__severity {
-    font-size: .7em;
+    font-size: 0.7em;
     text-transform: uppercase;
     font-weight: 700;
     min-width: 103px;
@@ -230,7 +227,7 @@ $priority-resolve--light: $base-02--04;
   //Event ID
   .event__id {
     @include fontCourierBold;
-    font-size: .9em;
+    font-size: 0.9em;
     color: $text-02;
     margin-right: 1em;
   }
@@ -238,7 +235,7 @@ $priority-resolve--light: $base-02--04;
   .event__timestamp {
     text-align: left;
     @include fontCourierBold;
-    font-size: .9em;
+    font-size: 0.9em;
     color: $text-02;
     max-width: 18em;
     @include mediaQuery(medium) {
@@ -267,7 +264,7 @@ $priority-resolve--light: $base-02--04;
     height: 200px;
     overflow-y: scroll;
     border: 1px solid $border-color-01;
-    padding: .5em .5em 0;
+    padding: 0.5em 0.5em 0;
     background: $primary-light;
     display: block;
     margin-bottom: 1.5em;
@@ -277,7 +274,7 @@ $priority-resolve--light: $base-02--04;
     }
     &::-webkit-scrollbar-thumb {
       border-radius: 4px;
-      background-color: rgba(0, 0, 0, .5);
+      background-color: rgba(0, 0, 0, 0.5);
     }
   }
 
@@ -288,19 +285,19 @@ $priority-resolve--light: $base-02--04;
   .event__related-label {
     font-weight: 700;
     margin-right: 1.2em;
-    padding-top: .3em;
+    padding-top: 0.3em;
     float: left;
   }
   .event__related-item {
     margin-right: 1em;
-    padding-top: .3em;
+    padding-top: 0.3em;
     display: inline-block;
     float: left;
     clear: both;
   }
   .event__actions {
     margin-left: -1em;
-    margin-top: .5em;
+    margin-top: 0.5em;
     @include mediaQuery(medium) {
       float: right;
       margin-top: -5px;
@@ -315,7 +312,8 @@ $priority-resolve--light: $base-02--04;
   }
 }
 
-/*p*/.event__description {
+/*p*/
+.event__description {
   margin-bottom: 0;
   line-height: 1.7;
   font-weight: 400;