5 files changed, 103 insertions, 113 deletions
diff --git a/app/server-control/controllers/power-usage-controller.html b/app/server-control/controllers/power-usage-controller.html
index 62ca3da..b0760e0 100644
--- a/app/server-control/controllers/power-usage-controller.html
+++ b/app/server-control/controllers/power-usage-controller.html
@@ -1,45 +1,67 @@
 <loader loading="loading"></loader>
-<div id="power-usage">
-  <div class="row column">
-    <h1>Manage Power Usage</h1>
-  </div>
+<div id="power-usage" class="page">
+  <h1 class="page-title">Manage Power Usage</h1>
   <form class="power-usage__form" role="form" action="">
-    <section class="row column">
-      <div class="page-header">
-        <h2 class="bold">Power information</h2>
+    <section class="section">
+      <h2 class="section-title">Power information</h2>
+      <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-content">
+        <p>
+          Set a power cap to keep power consumption at or below the specified
+          value in watts.
+        </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-model="power_cap.PowerCapEnable"
+              ng-checked="power_cap.PowerCapEnable"
+            />
+            <label for="toggle__switch-round" tabindex="0"
+              >Server power cap setting is
+              <span class="uid-switch__status">{{
+                power_cap.PowerCapEnable ? "on" : "off"
+              }}</span></label
+            >
+          </div>
+          <span>
+            {{ power_cap.PowerCapEnable ? "On" : "Off" }}
+          </span>
+        </div>
       </div>
-      <fieldset>
-          <ul class="power-usage__metadata-wrapper">
-            <li class="power-usage__metadata-block">
-              <p class="content-label">Power Consumption</p>
-              <p class="courier-bold">{{power_consumption}}</p>
-            </li>
-            <li class="power-usage__metadata-block">
-              <div class="toggle inline">
-                <input id="toggle__switch-round"
-                        class="toggle-switch toggle-switch__round-flat"
-                        type="checkbox"
-                        tabindex="0"
-                        ng-model="power_cap.PowerCapEnable"
-                        ng-checked="power_cap.PowerCapEnable">
-                <label for="toggle__switch-round" tabindex="0">Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></label>
-              </div>
-              <div class="power-usage__switch-label inline">
-                <p>Server power cap setting is <span class="uid-switch__status">{{power_cap.PowerCapEnable ? "on" : "off"}}</span></p>
-                <p>Set a power cap to keep power consumption at or below the specified value in watts.</p>
-              </div>
-              <div class="small-12 large-4">
-                <label for="power-cap" class="content-label power-cap-value-label">POWER CAP VALUE IN WATTS</label>
-                <input id="power-cap" type="number" min="100" max="10000" step="1" ng-disabled="!power_cap.PowerCapEnable"  ng-model="power_cap.PowerCap"/>
-              </div>
-            </li>
-          </ul>
-      </fieldset>
-      <div class="power-usage__submit-wrapper">
-        <button type="button" class="btn-primary inline" ng-click="setPowerCap()">Save settings</button>
-        <button type="button" class="btn-secondary inline" ng-click="refresh()">Cancel</button>
+      <div class="section-content form__field">
+        <label for="power-cap" class="content-label"
+          >POWER CAP VALUE IN WATTS</label
+        >
+        <input
+          id="power-cap"
+          type="number"
+          min="100"
+          max="10000"
+          step="1"
+          ng-disabled="!power_cap.PowerCapEnable"
+          ng-model="power_cap.PowerCap"
+        />
       </div>
     </section>
+    <div class="form__actions">
+      <button type="submit" class="btn-primary" ng-click="setPowerCap()">
+        Save settings
+      </button>
+      <button type="button" class="btn btn-secondary" ng-click="refresh()">
+        Cancel
+      </button>
+    </div>
   </form>
 </div>
-
diff --git a/app/server-control/controllers/server-led-controller.html b/app/server-control/controllers/server-led-controller.html
index 2901d76..c5a56e1 100644
--- a/app/server-control/controllers/server-led-controller.html
+++ b/app/server-control/controllers/server-led-controller.html
@@ -1,28 +1,44 @@
 <div id="led-switch">
-    <div class="row column">
-        <h1>Server LED</h1>
-        <div class="page-header">
-            <h2>LED light control</h2>
-        </div>
+  <div class="row column">
+    <h1>Server LED</h1>
+    <div class="page-header">
+      <h2>LED light control</h2>
     </div>
-
-    <div class="row column" ng-class="{disabled: dataService.server_unreachable || dataService.loading}">
-        <div class="btm-border-grey">
-            <div class="toggle inline">
-                <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 indicator is <span class="led-switch__status">{{dataService.LED_state}}</span></label>
-            </div>
-            <div class="led-switch__label inline">
-                <p>Server LED light is <span class="led-switch__status">{{dataService.LED_state}}</span></p>
-                <p>Turn the LED light on or off. If the server has an LCD, use this control to display text (on) or not to display text (off) on the LCD.</p>
-            </div>
-        </div>
+  </div>
+  <div
+    class="column"
+    ng-class="{disabled: dataService.server_unreachable || dataService.loading}"
+  >
+    <div class="led-switch__label">
+      <h3>
+        Server LED light
+      </h3>
+      <p>
+        Turn the LED light on or off. If the server has an LCD, use this control
+        to display text (on) or not to display text (off) on the LCD.
+      </p>
     </div>
+    <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 indicator is
+          <span class="toggle-switch__status">{{
+            dataService.LED_state
+          }}</span></label
+        >
+      </div>
+      <span>
+        {{ dataService.LED_state == "on" ? "On" : "Off" }}
+      </span>
+    </div>
+  </div>
 </div>
diff --git a/app/server-control/styles/index.scss b/app/server-control/styles/index.scss
index 5e8a995..7171a7e 100644
--- a/app/server-control/styles/index.scss
+++ b/app/server-control/styles/index.scss
@@ -2,5 +2,4 @@
 @import "./power-operations.scss";
 @import "./remote-console.scss";
 @import "./server-led.scss";
-@import "./power-usage.scss";
 @import "./kvm.scss";
diff --git a/app/server-control/styles/power-usage.scss b/app/server-control/styles/power-usage.scss
deleted file mode 100644
index 0f612ae..0000000
--- a/app/server-control/styles/power-usage.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-// Power Usage SCSS
-.power-usage__form {
-
-  input {
-    margin-bottom: 0em;
-  }
-
-  fieldset {
-    padding-left: 1.8em;
-  }
-
-  .power-usage__switch-label {
-    padding-bottom: .5em;
-  }
-
-  .power-usage__switch-label p {
-    margin: 0;
-    &:first-child {font-weight: 700;}
-  }
-
-  .power-usage__metadata-wrapper {
-    margin: 0;
-    padding: 0;
-  }
-
-  .power-usage__metadata-block {
-    min-width: 47%;
-    margin-bottom: 1.8em;
-    margin-right: .7em;
-    display: inline-block;
-    white-space: normal;
-    word-break: break-all;
-    @include mediaQuery(small) {
-      float: left;
-    }
-  }
-
-  .power-usage__submit-wrapper {
-    width: 100%;
-    margin-top: 3em;
-    padding-top: 1em;
-    border-top: 1px solid $border-color-01;
-    button {
-      float: right;
-      margin: .5em;
-    }
-  }
-}
diff --git a/app/server-control/styles/server-led.scss b/app/server-control/styles/server-led.scss
index 9807c74..26136fa 100644
--- a/app/server-control/styles/server-led.scss
+++ b/app/server-control/styles/server-led.scss
@@ -1,12 +1,13 @@
 // Server LED
 
 #led-switch {
-  .switch {margin-left: 1.7em;}
   .led-switch__label {
     padding-bottom: 1.5em;
   }
   .led-switch__label p {
     margin: 0;
-    &:first-child {font-weight: 700;}
+    &:first-child {
+      font-weight: 700;
+    }
   }
 }