From 6386dc224bbf8ff33a0f2de18c8fe3ef8a876d3d Mon Sep 17 00:00:00 2001
From: James Brooks <jbrooksuk@me.com>
Date: Tue, 23 Dec 2014 21:03:02 +0000
Subject: [PATCH] Make some visual changes to the status page.

---
 app/assets/sass/_palette.scss                 |  23 ++
 app/assets/sass/_status-page.scss             | 273 +++++++++---------
 app/lang/en/cachet.php                        |   1 +
 app/views/index.blade.php                     |  15 +-
 app/views/partials/components.blade.php       |  18 +-
 app/views/partials/incident.blade.php         |   2 +-
 .../{all-ced1a963.css => all-bfee613c.css}    | 208 +++++++------
 public/build/css/all.css                      | 208 +++++++------
 public/build/rev-manifest.json                |   2 +-
 9 files changed, 380 insertions(+), 370 deletions(-)
 create mode 100644 app/assets/sass/_palette.scss
 rename public/build/css/{all-ced1a963.css => all-bfee613c.css} (97%)

diff --git a/app/assets/sass/_palette.scss b/app/assets/sass/_palette.scss
new file mode 100644
index 00000000..8e9d08b4
--- /dev/null
+++ b/app/assets/sass/_palette.scss
@@ -0,0 +1,23 @@
+$green: #2ECC71;
+$dark-green: darken($green, 10%);
+
+$blue: #3498db;
+$dark-blue: darken($blue, 10%);
+
+$red: #ff6f6f;
+$dark-red: darken($red, 10%);
+
+$teal: #0dccc0;
+$dark-teal: darken($teal, 10%);
+
+$yellow: #F7CA18;
+$dark-yellow: darken($yellow, 10%);
+
+$pink: #b23f73;
+$dark-pink: darken($pink, 10%);
+
+$grey: #ecf0f1;
+$dark-grey: darken($grey, 10%);
+
+$orange: #E87E04;
+$dark-orange: darken($orange, 10%);
diff --git a/app/assets/sass/_status-page.scss b/app/assets/sass/_status-page.scss
index cccbccff..9d1e70b8 100644
--- a/app/assets/sass/_status-page.scss
+++ b/app/assets/sass/_status-page.scss
@@ -1,162 +1,167 @@
-body {
+@import 'palette';
+
+body.status-page {
+    font-family: 'Lato';
     color: #333333;
     font-size: 1.4em;
     font-weight: 300;
-}
 
-hr {
-    margin-top: 10px;
-    margin-bottom: 10px;
-}
-
-h1 {
-    margin-bottom: 20px;
-}
-
-.text-success, .text-component-1 {
-    color: #4cae4c;
-}
-
-.text-info, .text-component-2 {
-    color: #46b8da;
-}
-
-.text-alert, .text-component-3 {
-    color: #F9BF3B;
-}
-
-.text-danger, .text-component-4 {
-    color: #D91E18;
-}
-
-.container {
-    max-width: 960px;
-    margin-bottom: 40px;
-}
-
-.page-header {
-    margin-top: 10px;
-}
-
-.alert {
-    margin-top: 20px;
-    border-radius: 0;
-    font-size: 1.2em;
-    &.alert-success {
-        background-color: #8DCD8D;
-        border-color: #4cae4c;
-        color: white;
+    hr {
+        margin-top: 10px;
+        margin-bottom: 10px;
     }
 
-    &.alert-info {
-        background: #8CD3E8;
-        border-color: #46b8da;
-        color: #FFF;
+    h1, h2, h3, h4, h5 {
+        margin-bottom: 20px;
     }
 
-    &.alert-danger {
-        background: #D91E18;
-        border-color: #CF000F;
-        color: #FFF;
+    .text-success, .text-component-1 {
+        color: $green;
     }
-}
 
-.badge {
-    padding-top: 8px;
-    padding-bottom: 8px;
-    padding-left: 12px;
-    padding-right: 12px;
-    &.badge-incident-1 {
-        background-color: #F27935;
+    .text-info, .text-component-2 {
+        color: $blue;
     }
-    &.badge-incident-2 {
-        background-color: #F9BF3B;
-    }
-    &.badge-incident-3 {
-        background-color: #46b8da;
-    }
-    &.badge-incident-4 {
-        background-color: #4cae4c;
-    }
-}
 
-.list-group {
-    margin-bottom: 20px;
-    padding-left: 0;
-    border-radius: 0;
+    .text-alert, .text-component-3 {
+        color: $yellow;
+    }
 
-    .list-group-item {
+    .text-danger, .text-component-4 {
+        color: $red;
+    }
+
+    .container {
+        max-width: 960px;
+        margin-bottom: 40px;
+        margin-top: 20px;
+    }
+
+    .page-header {
+        margin-top: 10px;
+    }
+
+    .alert {
         border-radius: 0;
-        background-color: #ffffff;
-        border: 1px solid #BDC3C7;
-        font-size: 1.1em;
+        font-size: 1.2em;
+        &.alert-success {
+            background-color: $green;
+            border-color: $dark-green;
+            color: white;
+        }
 
-        span.badge {
-            position: absolute;
-            top: 0;
-            right: 0;
+        &.alert-info {
+            background: $blue;
+            border-color: $dark-blue;
+            color: #FFF;
+        }
+
+        &.alert-danger {
+            background: $red;
+            border-color: $dark-red;
+            color: #FFF;
+        }
+    }
+
+    .badge {
+        padding-top: 8px;
+        padding-bottom: 8px;
+        padding-left: 12px;
+        padding-right: 12px;
+        &.badge-incident-1 {
+            background-color: $orange;
+        }
+        &.badge-incident-2 {
+            background-color: $yellow;
+        }
+        &.badge-incident-3 {
+            background-color: $blue;
+        }
+        &.badge-incident-4 {
+            background-color: $green;
+        }
+    }
+
+    .list-group {
+        margin-bottom: 20px;
+        padding-left: 0;
+        border-radius: 0;
+
+        .list-group-item {
             border-radius: 0;
-            display: block;
-        }
-
-        i.glyphicon {
-            font-size: 1.4em;
-        }
-
-        h1, h2, h3, h4 {
-            margin-bottom: 2px;
-        }
-
-        h4 {
-            font-weight: 400;
-            max-width: 90%;
-        }
-
-        p, time {
-            margin-bottom: 0;
-            line-height: 1.3em;
-        }
-
-        time {
-            color: #6C7A89;
-            // letter-spacing: 0.02em;
-            font-weight: 300;
+            background-color: #ffffff;
+            border: 1px solid $grey;
             font-size: 1.1em;
-        }
 
-        &.active {
-            background-color: #F2F1EF;
-            h3 {
-                color: #22313F;
-                padding-top: 6px;
-                padding-bottom: 6px;
+            span.badge {
+                position: absolute;
+                top: 0;
+                right: 0;
+                border-radius: 0;
+                display: block;
+            }
+
+            i.glyphicon {
+                font-size: 1.4em;
+                color: rgba(white, 0.9);
+            }
+
+            h1, h2, h3, h4 {
+                margin-bottom: 2px;
+            }
+
+            h4 {
+                font-weight: 400;
+                max-width: 90%;
+            }
+
+            p, time {
+                margin-bottom: 0;
+                line-height: 1.3em;
+            }
+
+            time {
+                color: #6C7A89;
+                // letter-spacing: 0.02em;
                 font-weight: 300;
-                font-size: 1.6em;
+                font-size: 1.1em;
             }
 
-            &:hover {
-                color: inherit;
-                border-color: #BDC3C7;
+            &.active {
+                background-color: #F2F1EF;
+                h3 {
+                    color: #22313F;
+                    padding-top: 2px;
+                    padding-bottom: 2px;
+                    font-weight: 600;
+                    font-size: 1.4em;
+                }
+
+                &:hover {
+                    color: inherit;
+                    border-color: $grey;
+                }
+            }
+        }
+
+        &.components {
+            margin-bottom: 30px;
+            p {
+                margin-bottom: 10px;
+            }
+            .badge {
+                color: transparent;
             }
         }
     }
 
-    &.components {
-        margin-bottom: 30px;
-        p {
-            margin-bottom: 10px;
-        }
-        .badge {
-            color: transparent;
-        }
+    footer.footer {
+        padding-top: 40px;
+        padding-bottom: 40px;
+        color: #777;
+        text-align: center;
+        border-top: 1px solid $grey;
+        background-color: lighten($grey, 5%);
     }
 }
 
-footer.footer {
-    padding-top: 40px;
-    padding-bottom: 40px;
-    color: #777;
-    text-align: center;
-    border-top: 1px solid #e5e5e5;
-    background-color: lighten(#e5e5e5, 5%);
-}
diff --git a/app/lang/en/cachet.php b/app/lang/en/cachet.php
index c4c44b84..4f4c5d0f 100644
--- a/app/lang/en/cachet.php
+++ b/app/lang/en/cachet.php
@@ -29,6 +29,7 @@ return [
     'logout'     => 'Logout',
     'logged_in'  => 'You\'re logged in.',
     'setup'      => 'Setup Cachet',
+    'no_incidents' => 'No incidents reported.',
     'dashboard'  => [
         'dashboard'                => 'Dashboard',
         'components'               => 'Components',
diff --git a/app/views/index.blade.php b/app/views/index.blade.php
index 78706e3e..1d994e0d 100644
--- a/app/views/index.blade.php
+++ b/app/views/index.blade.php
@@ -1,17 +1,20 @@
 @extends('layout.master')
 
 @section('content')
-    <div class='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div>
-
     @if(Auth::check())
-    <div class='page-header text-right'>
-        <div class='btn-group'>
+    <ul class='nav nav-pills'>
+        <li>
             <a class="btn btn-default" href="{{ URL::route('dashboard') }}">{{ Lang::get('cachet.dashboard.dashboard') }}</a>
+        </li>
+        <li>
             <a class="btn btn-danger" href="{{ URL::route('logout') }}">{{ Lang::get('cachet.logout') }}</a>
-        </div>
-    </div>
+        </li>
+    </ul>
+    <hr />
     @endif
 
+    <div class='alert alert-{{ $systemStatus }}'>{{ $systemMessage }}</div>
+
     @include('partials.components')
 
     @if(Setting::get('display_graphs'))
diff --git a/app/views/partials/components.blade.php b/app/views/partials/components.blade.php
index 3bef9b14..628008a7 100644
--- a/app/views/partials/components.blade.php
+++ b/app/views/partials/components.blade.php
@@ -1,12 +1,10 @@
 @if($components->count() > 0)
-<div class='page-header'>
-    <ul class='list-group components'>
-        @foreach($components as $component)
-        <li class='list-group-item component '>
-            <h4>{{ $component->name }} <small class='text-component-{{ $component->status }}'>{{ $component->humanStatus }}</small></h4>
-            <p>{{ $component->description }}</p>
-        </li>
-        @endforeach
-    </ul>
-</div>
+<ul class='list-group components'>
+    @foreach($components as $component)
+    <li class='list-group-item component '>
+        <h4>{{ $component->name }} <small class='text-component-{{ $component->status }}'>{{ $component->humanStatus }}</small></h4>
+        <p>{{ $component->description }}</p>
+    </li>
+    @endforeach
+</ul>
 @endif
diff --git a/app/views/partials/incident.blade.php b/app/views/partials/incident.blade.php
index 3147739a..1cdd0f5b 100644
--- a/app/views/partials/incident.blade.php
+++ b/app/views/partials/incident.blade.php
@@ -8,7 +8,7 @@
     </li>
 
     @unless($incidents->count() > 0)
-    <li class='list-group-item'>No incidents reported.</li>
+    <li class='list-group-item'>{{ Lang::get('cachet.no_incidents') }}</li>
     @endunless
 
     @foreach($incidents as $incidentID => $incident)
diff --git a/public/build/css/all-ced1a963.css b/public/build/css/all-bfee613c.css
similarity index 97%
rename from public/build/css/all-ced1a963.css
rename to public/build/css/all-bfee613c.css
index 9f713b39..46cbc92c 100644
--- a/public/build/css/all-ced1a963.css
+++ b/public/build/css/all-bfee613c.css
@@ -4377,119 +4377,109 @@ body.dashboard .content {
   body.dashboard .content h3 {
     margin-top: 0; }
 
-body {
+body.status-page {
+  font-family: 'Lato';
   color: #333333;
   font-size: 1.4em;
   font-weight: 300; }
-
-hr {
-  margin-top: 10px;
-  margin-bottom: 10px; }
-
-h1 {
-  margin-bottom: 20px; }
-
-.text-success, .text-component-1 {
-  color: #4cae4c; }
-
-.text-info, .text-component-2 {
-  color: #46b8da; }
-
-.text-alert, .text-component-3 {
-  color: #F9BF3B; }
-
-.text-danger, .text-component-4 {
-  color: #D91E18; }
-
-.container {
-  max-width: 960px;
-  margin-bottom: 40px; }
-
-.page-header {
-  margin-top: 10px; }
-
-.alert {
-  margin-top: 20px;
-  border-radius: 0;
-  font-size: 1.2em; }
-  .alert.alert-success {
-    background-color: #8DCD8D;
-    border-color: #4cae4c;
-    color: white; }
-  .alert.alert-info {
-    background: #8CD3E8;
-    border-color: #46b8da;
-    color: #FFF; }
-  .alert.alert-danger {
-    background: #D91E18;
-    border-color: #CF000F;
-    color: #FFF; }
-
-.badge {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 12px;
-  padding-right: 12px; }
-  .badge.badge-incident-1 {
-    background-color: #F27935; }
-  .badge.badge-incident-2 {
-    background-color: #F9BF3B; }
-  .badge.badge-incident-3 {
-    background-color: #46b8da; }
-  .badge.badge-incident-4 {
-    background-color: #4cae4c; }
-
-.list-group {
-  margin-bottom: 20px;
-  padding-left: 0;
-  border-radius: 0; }
-  .list-group .list-group-item {
+  body.status-page hr {
+    margin-top: 10px;
+    margin-bottom: 10px; }
+  body.status-page h1, body.status-page h2, body.status-page h3, body.status-page h4, body.status-page h5 {
+    margin-bottom: 20px; }
+  body.status-page .text-success, body.status-page .text-component-1 {
+    color: #2ECC71; }
+  body.status-page .text-info, body.status-page .text-component-2 {
+    color: #3498db; }
+  body.status-page .text-alert, body.status-page .text-component-3 {
+    color: #F7CA18; }
+  body.status-page .text-danger, body.status-page .text-component-4 {
+    color: #ff6f6f; }
+  body.status-page .container {
+    max-width: 960px;
+    margin-bottom: 40px;
+    margin-top: 20px; }
+  body.status-page .page-header {
+    margin-top: 10px; }
+  body.status-page .alert {
     border-radius: 0;
-    background-color: #ffffff;
-    border: 1px solid #BDC3C7;
-    font-size: 1.1em; }
-    .list-group .list-group-item span.badge {
-      position: absolute;
-      top: 0;
-      right: 0;
+    font-size: 1.2em; }
+    body.status-page .alert.alert-success {
+      background-color: #2ECC71;
+      border-color: #25a25a;
+      color: white; }
+    body.status-page .alert.alert-info {
+      background: #3498db;
+      border-color: #217dbb;
+      color: #FFF; }
+    body.status-page .alert.alert-danger {
+      background: #ff6f6f;
+      border-color: #ff3c3c;
+      color: #FFF; }
+  body.status-page .badge {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px; }
+    body.status-page .badge.badge-incident-1 {
+      background-color: #E87E04; }
+    body.status-page .badge.badge-incident-2 {
+      background-color: #F7CA18; }
+    body.status-page .badge.badge-incident-3 {
+      background-color: #3498db; }
+    body.status-page .badge.badge-incident-4 {
+      background-color: #2ECC71; }
+  body.status-page .list-group {
+    margin-bottom: 20px;
+    padding-left: 0;
+    border-radius: 0; }
+    body.status-page .list-group .list-group-item {
       border-radius: 0;
-      display: block; }
-    .list-group .list-group-item i.glyphicon {
-      font-size: 1.4em; }
-    .list-group .list-group-item h1, .list-group .list-group-item h2, .list-group .list-group-item h3, .list-group .list-group-item h4 {
-      margin-bottom: 2px; }
-    .list-group .list-group-item h4 {
-      font-weight: 400;
-      max-width: 90%; }
-    .list-group .list-group-item p, .list-group .list-group-item time {
-      margin-bottom: 0;
-      line-height: 1.3em; }
-    .list-group .list-group-item time {
-      color: #6C7A89;
-      font-weight: 300;
+      background-color: #ffffff;
+      border: 1px solid #ecf0f1;
       font-size: 1.1em; }
-    .list-group .list-group-item.active {
-      background-color: #F2F1EF; }
-      .list-group .list-group-item.active h3 {
-        color: #22313F;
-        padding-top: 6px;
-        padding-bottom: 6px;
+      body.status-page .list-group .list-group-item span.badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0;
+        display: block; }
+      body.status-page .list-group .list-group-item i.glyphicon {
+        font-size: 1.4em;
+        color: rgba(255, 255, 255, 0.9); }
+      body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
+        margin-bottom: 2px; }
+      body.status-page .list-group .list-group-item h4 {
+        font-weight: 400;
+        max-width: 90%; }
+      body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
+        margin-bottom: 0;
+        line-height: 1.3em; }
+      body.status-page .list-group .list-group-item time {
+        color: #6C7A89;
         font-weight: 300;
-        font-size: 1.6em; }
-      .list-group .list-group-item.active:hover {
-        color: inherit;
-        border-color: #BDC3C7; }
-  .list-group.components {
-    margin-bottom: 30px; }
-    .list-group.components p {
-      margin-bottom: 10px; }
-    .list-group.components .badge {
-      color: transparent; }
-
-footer.footer {
-  padding-top: 40px;
-  padding-bottom: 40px;
-  color: #777;
-  text-align: center;
-  border-top: 1px solid #e5e5e5;
-  background-color: #f2f2f2; }
+        font-size: 1.1em; }
+      body.status-page .list-group .list-group-item.active {
+        background-color: #F2F1EF; }
+        body.status-page .list-group .list-group-item.active h3 {
+          color: #22313F;
+          padding-top: 2px;
+          padding-bottom: 2px;
+          font-weight: 600;
+          font-size: 1.4em; }
+        body.status-page .list-group .list-group-item.active:hover {
+          color: inherit;
+          border-color: #ecf0f1; }
+    body.status-page .list-group.components {
+      margin-bottom: 30px; }
+      body.status-page .list-group.components p {
+        margin-bottom: 10px; }
+      body.status-page .list-group.components .badge {
+        color: transparent; }
+  body.status-page footer.footer {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    color: #777;
+    text-align: center;
+    border-top: 1px solid #ecf0f1;
+    background-color: #fbfcfc; }
diff --git a/public/build/css/all.css b/public/build/css/all.css
index 9f713b39..46cbc92c 100644
--- a/public/build/css/all.css
+++ b/public/build/css/all.css
@@ -4377,119 +4377,109 @@ body.dashboard .content {
   body.dashboard .content h3 {
     margin-top: 0; }
 
-body {
+body.status-page {
+  font-family: 'Lato';
   color: #333333;
   font-size: 1.4em;
   font-weight: 300; }
-
-hr {
-  margin-top: 10px;
-  margin-bottom: 10px; }
-
-h1 {
-  margin-bottom: 20px; }
-
-.text-success, .text-component-1 {
-  color: #4cae4c; }
-
-.text-info, .text-component-2 {
-  color: #46b8da; }
-
-.text-alert, .text-component-3 {
-  color: #F9BF3B; }
-
-.text-danger, .text-component-4 {
-  color: #D91E18; }
-
-.container {
-  max-width: 960px;
-  margin-bottom: 40px; }
-
-.page-header {
-  margin-top: 10px; }
-
-.alert {
-  margin-top: 20px;
-  border-radius: 0;
-  font-size: 1.2em; }
-  .alert.alert-success {
-    background-color: #8DCD8D;
-    border-color: #4cae4c;
-    color: white; }
-  .alert.alert-info {
-    background: #8CD3E8;
-    border-color: #46b8da;
-    color: #FFF; }
-  .alert.alert-danger {
-    background: #D91E18;
-    border-color: #CF000F;
-    color: #FFF; }
-
-.badge {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-left: 12px;
-  padding-right: 12px; }
-  .badge.badge-incident-1 {
-    background-color: #F27935; }
-  .badge.badge-incident-2 {
-    background-color: #F9BF3B; }
-  .badge.badge-incident-3 {
-    background-color: #46b8da; }
-  .badge.badge-incident-4 {
-    background-color: #4cae4c; }
-
-.list-group {
-  margin-bottom: 20px;
-  padding-left: 0;
-  border-radius: 0; }
-  .list-group .list-group-item {
+  body.status-page hr {
+    margin-top: 10px;
+    margin-bottom: 10px; }
+  body.status-page h1, body.status-page h2, body.status-page h3, body.status-page h4, body.status-page h5 {
+    margin-bottom: 20px; }
+  body.status-page .text-success, body.status-page .text-component-1 {
+    color: #2ECC71; }
+  body.status-page .text-info, body.status-page .text-component-2 {
+    color: #3498db; }
+  body.status-page .text-alert, body.status-page .text-component-3 {
+    color: #F7CA18; }
+  body.status-page .text-danger, body.status-page .text-component-4 {
+    color: #ff6f6f; }
+  body.status-page .container {
+    max-width: 960px;
+    margin-bottom: 40px;
+    margin-top: 20px; }
+  body.status-page .page-header {
+    margin-top: 10px; }
+  body.status-page .alert {
     border-radius: 0;
-    background-color: #ffffff;
-    border: 1px solid #BDC3C7;
-    font-size: 1.1em; }
-    .list-group .list-group-item span.badge {
-      position: absolute;
-      top: 0;
-      right: 0;
+    font-size: 1.2em; }
+    body.status-page .alert.alert-success {
+      background-color: #2ECC71;
+      border-color: #25a25a;
+      color: white; }
+    body.status-page .alert.alert-info {
+      background: #3498db;
+      border-color: #217dbb;
+      color: #FFF; }
+    body.status-page .alert.alert-danger {
+      background: #ff6f6f;
+      border-color: #ff3c3c;
+      color: #FFF; }
+  body.status-page .badge {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    padding-left: 12px;
+    padding-right: 12px; }
+    body.status-page .badge.badge-incident-1 {
+      background-color: #E87E04; }
+    body.status-page .badge.badge-incident-2 {
+      background-color: #F7CA18; }
+    body.status-page .badge.badge-incident-3 {
+      background-color: #3498db; }
+    body.status-page .badge.badge-incident-4 {
+      background-color: #2ECC71; }
+  body.status-page .list-group {
+    margin-bottom: 20px;
+    padding-left: 0;
+    border-radius: 0; }
+    body.status-page .list-group .list-group-item {
       border-radius: 0;
-      display: block; }
-    .list-group .list-group-item i.glyphicon {
-      font-size: 1.4em; }
-    .list-group .list-group-item h1, .list-group .list-group-item h2, .list-group .list-group-item h3, .list-group .list-group-item h4 {
-      margin-bottom: 2px; }
-    .list-group .list-group-item h4 {
-      font-weight: 400;
-      max-width: 90%; }
-    .list-group .list-group-item p, .list-group .list-group-item time {
-      margin-bottom: 0;
-      line-height: 1.3em; }
-    .list-group .list-group-item time {
-      color: #6C7A89;
-      font-weight: 300;
+      background-color: #ffffff;
+      border: 1px solid #ecf0f1;
       font-size: 1.1em; }
-    .list-group .list-group-item.active {
-      background-color: #F2F1EF; }
-      .list-group .list-group-item.active h3 {
-        color: #22313F;
-        padding-top: 6px;
-        padding-bottom: 6px;
+      body.status-page .list-group .list-group-item span.badge {
+        position: absolute;
+        top: 0;
+        right: 0;
+        border-radius: 0;
+        display: block; }
+      body.status-page .list-group .list-group-item i.glyphicon {
+        font-size: 1.4em;
+        color: rgba(255, 255, 255, 0.9); }
+      body.status-page .list-group .list-group-item h1, body.status-page .list-group .list-group-item h2, body.status-page .list-group .list-group-item h3, body.status-page .list-group .list-group-item h4 {
+        margin-bottom: 2px; }
+      body.status-page .list-group .list-group-item h4 {
+        font-weight: 400;
+        max-width: 90%; }
+      body.status-page .list-group .list-group-item p, body.status-page .list-group .list-group-item time {
+        margin-bottom: 0;
+        line-height: 1.3em; }
+      body.status-page .list-group .list-group-item time {
+        color: #6C7A89;
         font-weight: 300;
-        font-size: 1.6em; }
-      .list-group .list-group-item.active:hover {
-        color: inherit;
-        border-color: #BDC3C7; }
-  .list-group.components {
-    margin-bottom: 30px; }
-    .list-group.components p {
-      margin-bottom: 10px; }
-    .list-group.components .badge {
-      color: transparent; }
-
-footer.footer {
-  padding-top: 40px;
-  padding-bottom: 40px;
-  color: #777;
-  text-align: center;
-  border-top: 1px solid #e5e5e5;
-  background-color: #f2f2f2; }
+        font-size: 1.1em; }
+      body.status-page .list-group .list-group-item.active {
+        background-color: #F2F1EF; }
+        body.status-page .list-group .list-group-item.active h3 {
+          color: #22313F;
+          padding-top: 2px;
+          padding-bottom: 2px;
+          font-weight: 600;
+          font-size: 1.4em; }
+        body.status-page .list-group .list-group-item.active:hover {
+          color: inherit;
+          border-color: #ecf0f1; }
+    body.status-page .list-group.components {
+      margin-bottom: 30px; }
+      body.status-page .list-group.components p {
+        margin-bottom: 10px; }
+      body.status-page .list-group.components .badge {
+        color: transparent; }
+  body.status-page footer.footer {
+    padding-top: 40px;
+    padding-bottom: 40px;
+    color: #777;
+    text-align: center;
+    border-top: 1px solid #ecf0f1;
+    background-color: #fbfcfc; }
diff --git a/public/build/rev-manifest.json b/public/build/rev-manifest.json
index 6195d5c2..e9c686a0 100644
--- a/public/build/rev-manifest.json
+++ b/public/build/rev-manifest.json
@@ -1,4 +1,4 @@
 {
-  "css/all.css": "css/all-ced1a963.css",
+  "css/all.css": "css/all-bfee613c.css",
   "js/all.js": "js/all-d8f5640f.js"
 }
\ No newline at end of file