From c9276f960a9a2ac120c70c19356e427c092e0b44 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 27 Dec 2018 08:49:07 +0000
Subject: [PATCH] Add site health panel

---
 src/views/Environment.vue | 33 ++++++++++++++++-----------------
 tailwind.js               |  3 ++-
 2 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index b10e500..8cace1b 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -174,28 +174,27 @@
               </div>
             </div>
 
-            <!-- <div class="lg:flex lg:items-baseline mb-2">
-              <div class="mr-16 mb-4 lg:mb-0">
-                <h1 class="text-4xl font-hairline mb-2">Environments</h1>
-
-                <application-tags :type="application.type" :level="application.level"></application-tags>
-              </div>
-
-              <div class="lg:flex lg:flex-row-reverse flex-1 justify-between _bg-blue items-baseline">
-                <div class="w-full lg:w-1/2 xl:w-1/3">
-                  <form action="#">
-                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-darker rounded">
-                  </form>
+            <div class="mb-6 rounded border border-grey shadow overflow-hidden">
+              <div class="bg-grey-light p-4"><h2 class="text-lg">Site Health</h2></div>
+              <div class="bg-white p-4">
+                <div class="mb-6">
+                  <p class="text-lg font-hairline text-grey-darkest">Uptime monitoring</p>
                 </div>
 
-                <div class="flex-1">
-                  <toggle-help @toggle="help.hidden = !help.hidden"></toggle-help>
+                <div class="text-center leading-normal mb-5">
+                  <p class="text-grey-darker">
+                    Acquia uses a specially tuned uptime monitoring solution to keep track<br class="hidden md:inline">
+                    of whether your Drupal site is really up and running.
+                  </p>
+                </div>
+
+                <div class="flex justify-center">
+                  <button type="button" class="text-sm font-thin bg-blue-dark hover:bg-blue-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Enable Uptime</button>
+                  <button type="button" class="text-sm font-thin bg-grey-dark hover:bg-grey-darker antialiased text-white px-4 py-3 no-underline rounded mx-1">Learn more</button>
                 </div>
               </div>
             </div>
-          </div> -->
-
-        </div>
+          </div>
         </div>
 
         <sidebar :links="[
diff --git a/tailwind.js b/tailwind.js
index 2997385..bbd10a8 100644
--- a/tailwind.js
+++ b/tailwind.js
@@ -50,13 +50,14 @@ let colors = {
   'black': '#22292f',
   'grey-darkest': '#333333',
   'grey-darker': '#444444',
-  'grey-dark': '#8795a1',
+  'grey-dark': '#888888',
   'grey': '#B7B7B7',
   'grey-light': '#DDDDDD',
   'grey-lighter': '#eeeeee',
   'grey-lightest': '#f8fafc',
   'white': '#ffffff',
 
+  'blue-darker': '#002d64',
   'blue-dark': '#0B5386',
   'blue-light': '#008DC7',
   'blue': '#1E70AB',