Consolidate button styles

This patchset will create consistent button styling according
to the styleguide and remove redundant button styles by creating
reusable button classes.

This patchset also implements a consistent strategy for including
icon assets. Currently, svg icons are imported as CSS background
images or inlined into the markup. Inlining an svg is preferred,
especially when used with buttons or links so the colors can
be easily changed for different states (hover, focus, disabled)
without having to request variants.
The icon provider allows us to inline svgs without cluttering
the markup. Webpack config was adjusted to use svg-inline-loader
when resolving svgs that are used by the icon provider directive.

- All svgs were optimized to remove unncessary information.
- Removed unused svg color variants
- Moved icons used by icon provider to separate directory to
  avoid Webpack parsing the files twice
- Small changes to navigation icons

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I1ca214b74fc502e6b6e760cfee88b48110237c43

6 files changed, 18 insertions, 31 deletions

diff --git a/app/server-control/controllers/bmc-reboot-controller.html b/app/server-control/controllers/bmc-reboot-controller.html
index 627e60c..24988bc 100644
--- a/app/server-control/controllers/bmc-reboot-controller.html
+++ b/app/server-control/controllers/bmc-reboot-controller.html
@@ -19,8 +19,8 @@
     </div>
   </div>
   <div class="row column">
-    <button id="bmc__reboot" class="btn-secondary float-right" ng-class="{disabled: confirm}" ng-click="rebootConfirm()" ng-disabled="dataService.server_unreachable">
-      <i>&#x21BB</i> Reboot BMC
+    <button id="bmc__reboot" class="btn  btn-secondary" ng-class="{disabled: confirm}" ng-click="rebootConfirm()" ng-disabled="dataService.server_unreachable">
+      <icon file="icon-restart.svg"></icon>Reboot BMC
     </button>
   </div>
 </section>
diff --git a/app/server-control/controllers/power-operations-controller.html b/app/server-control/controllers/power-operations-controller.html
index aa2ef54..2fcb95b 100644
--- a/app/server-control/controllers/power-operations-controller.html
+++ b/app/server-control/controllers/power-operations-controller.html
@@ -20,27 +20,33 @@
         <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 -->
         <div class="row column power-option" ng-hide="dataService.server_state == 'Running' || dataService.server_state == 'Quiesced' || dataService.server_state == 'Unreachable'" ng-class="{disabled: dataService.server_unreachable || confirm || dataService.loading, transitionAll: confirm}">
-            <button id="power__power-on" class="btn-secondary inline" ng-click="powerOn()" role="button" ng-disabled="dataService.server_unreachable"><img src="../../assets/images/icon-power.svg" alt="power on" aria-hidden="true">Power on</button>
+            <button id="power__power-on" class="btn  btn-secondary" ng-click="powerOn()" role="button" ng-disabled="dataService.server_unreachable">
+                <icon file="icon-power.svg"></icon>Power on
+            </button>
             <p class="inline">Attempts to power on the server</p>
         </div>
         <!-- Power reboot/shutdown options : when server is off all of these are hidden. When one option is selected, the others are disabled. -->
         <div class="column power-option" ng-hide="dataService.server_state == 'Off' || dataService.server_state == 'Unreachable'" ng-class="{disabled: dataService.server_unreachable || (confirm && !confirmWarmReboot) || dataService.loading, transitionAll: confirm && confirmWarmReboot}">
-            <button id="power__warm-boot" class="btn-secondary inline" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i aria-hidden="true">&#x21BB</i> Warm reboot</button>
+            <button id="power__warm-boot" class="btn btn-secondary" ng-click="warmRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable">
+                <icon file="icon-restart.svg"></icon>Warm reboot</button>
             <p class="inline">Attempts to perform an orderly shutdown before restarting the server</p>
             <confirm title="warm reboot" confirm="confirmWarmReboot" ng-show="confirmWarmReboot" callback="warmReboot"></confirm>
         </div>
         <div class="column power-option" ng-hide="dataService.server_state == 'Off' || dataService.server_state == 'Unreachable'" ng-class="{disabled: dataService.server_unreachable || (confirm && !confirmColdReboot) || dataService.loading, transitionAll: confirm && confirmColdReboot}">
-            <button id="power__cold-boot" class="btn-secondary inline" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable"><i aria-hidden="true">&#x21BB</i> Cold reboot</button>
+            <button id="power__cold-boot" class="btn  btn-secondary" ng-click="coldRebootConfirm()" role="button" ng-disabled="dataService.server_unreachable">
+                <icon file="icon-restart.svg"></icon>Cold reboot</button>
             <p class="inline">Shuts down the server immediately, then restarts it</p>
             <confirm title="cold reboot" confirm="confirmColdReboot" ng-show="confirmColdReboot" cancel="coldbootCancel" callback="coldReboot"></confirm>
         </div>
         <div class="column power-option" ng-hide="dataService.server_state == 'Off' || dataService.server_state == 'Unreachable'" ng-class="{disabled: dataService.server_unreachable || (confirm && !confirmOrderlyShutdown) || dataService.loading, transitionAll: confirm && confirmOrderlyShutdown}">
-            <button id="power__soft-shutdown" class="btn-secondary inline" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img aria-hidden="true" src="../../assets/images/icon-power.svg" />Orderly shutdown</button>
+            <button id="power__soft-shutdown" class="btn  btn-secondary" ng-click="orderlyShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable">
+                <icon file="icon-power.svg"></icon>Orderly shutdown</button>
             <p class="inline">Attempts to stop all software on the server before removing power</p>
             <confirm title="orderly shutdown" confirm="confirmOrderlyShutdown" ng-show="confirmOrderlyShutdown" cancel="orderlyShutdownCancel" callback="orderlyShutdown"></confirm>
         </div>
         <div class="column power-option" ng-hide="dataService.server_state == 'Off' || dataService.server_state == 'Unreachable'" ng-class="{disabled: dataService.server_unreachable || (confirm && !confirmImmediateShutdown) || dataService.loading, transitionAll: confirm && confirmImmediateShutdown}">
-            <button id="power__hard-shutdown" class="btn-secondary inline" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable"><img aria-hidden="true" src="../../assets/images/icon-power.svg" />Immediate shutdown</button>
+            <button id="power__hard-shutdown" class="btn btn-secondary" ng-click="immediateShutdownConfirm()" role="button" ng-disabled="dataService.server_unreachable">
+                <icon file="icon-power.svg"></icon>Immediate shutdown</button>
             <p class="inline">Removes power from the server without waiting for software to stop</p>
             <confirm title="immediate shutdown" confirm="confirmImmediateShutdown" ng-show="confirmImmediateShutdown" cancel="immediatelyShutdownCancel" callback="immediateShutdown"></confirm>
         </div>
diff --git a/app/server-control/controllers/remote-console-window-controller.html b/app/server-control/controllers/remote-console-window-controller.html
index 6644682..2f33672 100644
--- a/app/server-control/controllers/remote-console-window-controller.html
+++ b/app/server-control/controllers/remote-console-window-controller.html
@@ -1,5 +1,6 @@
 <div class="serial-lan__header">
-  <a class="bold" ng-click="close()"><i class="icon icon__return"></i> Return to OpenBmc</a>
+  <button class="btn  btn-tertiary" ng-click="close()">
+    <icon file="icon-return.svg"></icon>Return to OpenBmc</button>
 </div>
 <div id="term-container" class="window-terminal-container">
   <serial-console show-tab-btn="false"></serial-console>
diff --git a/app/server-control/styles/bmc-reboot.scss b/app/server-control/styles/bmc-reboot.scss
index 2b1a293..bd50dcc 100644
--- a/app/server-control/styles/bmc-reboot.scss
+++ b/app/server-control/styles/bmc-reboot.scss
@@ -5,7 +5,7 @@
   padding-bottom: 1.5em;
   margin-bottom: 1em;
   border-bottom: 1px solid $lightbg__grey;
-  button {
+  .btn {
     margin-bottom: 1.5em;
     margin-top: 1.5em;
   }
diff --git a/app/server-control/styles/power-operations.scss b/app/server-control/styles/power-operations.scss
index 192bf70..3279914 100644
--- a/app/server-control/styles/power-operations.scss
+++ b/app/server-control/styles/power-operations.scss
@@ -88,14 +88,10 @@
     overflow: hidden;
     min-height: 1px;
     min-width: 100%;
-    .btn-secondary {
+    .btn {
       margin-bottom: .5em;
       margin-right: 1em;
-      display: block;
       min-width: 240px;
-      @include mediaQuery(medium) {
-        display: inline-block;
-      }
     }
     @include mediaQuery(x-small){
       padding: 1.8em 0 1em 0;
diff --git a/app/server-control/styles/remote-console.scss b/app/server-control/styles/remote-console.scss
index d9aa40c..2c121f4 100644
--- a/app/server-control/styles/remote-console.scss
+++ b/app/server-control/styles/remote-console.scss
@@ -9,26 +9,10 @@
   padding: 1em 0;
 }
 
-.serial-lan__actions {
-  float: right;
-  .btn-pop-out,
-  .btn-export {
-    text-decoration: none;
-    font-size: .9em;
-    &:hover {
-      text-decoration: underline;
-    }
-    &:visited {
-      color: $black;
-    }
-  }
-}
-
 .serial-lan__header {
   background: $white;
-  padding: 1.2em;
+  padding-bottom: 1.2em;
   line-height: 0;
-  a {color: $black;}
 }
 
 .terminal-container {