From f006724abcd12fec2ff066c4b9c8fdee8fbcc744 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:29:08 +0000
Subject: [PATCH 01/14] Update colour scale

---
 tailwind.config.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index 9413b4f..b071d66 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,24 +6,24 @@ module.exports = {
       inherit: 'inherit',
       black: '#22292f',
       blue: {
-        1: '#29aae1',
-        2: '#018dc7',
-        3: '#0e68a7',
-        4: '#004f86',
+        100: '#29aae1',
+        200: '#018dc7',
+        300: '#0e68a7',
+        400: '#004f86',
       },
       green: '#398002',
       grey: {
-        1: '#f8fafc',
-        2: '#eee',
-        3: '#ddd',
-        4: '#bbb',
-        5: '#888',
-        6: '#555',
-        7: '#333',
+        100: '#f8fafc',
+        200: '#eee',
+        300: '#ddd',
+        400: '#bbb',
+        500: '#888',
+        600: '#555',
+        700: '#333',
       },
       orange: {
-        1: '#fa9903',
-        2: '#ffb401',
+        100: '#fa9903',
+        200: '#ffb401',
       },
       purple: '#991faf',
       red: '#cc1f1a',

From 505c4634c3d7a3c50b71fabd9a42c014a18870a1 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:30:35 +0000
Subject: [PATCH 02/14] defaultConfig is no longer a function

---
 tailwind.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index b071d66..b3162d8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,4 +1,4 @@
-defaultTheme = require('tailwindcss/defaultTheme')()
+defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
   theme: {

From 46034c8a39853b7688b1b26937df12f3ed8a9b5d Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:31:31 +0000
Subject: [PATCH 03/14] Container is now a core plugin

---
 tailwind.config.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/tailwind.config.js b/tailwind.config.js
index b3162d8..5b3fb49 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -59,7 +59,6 @@ module.exports = {
     },
   },
   plugins: [
-    require('tailwindcss/plugins/container')(),
     require('tailwindcss-spaced-items')({ values: defaultTheme.spacing }),
     require('tailwindcss-visuallyhidden')(),
   ],

From eb9da4a8e0a6e1c640e2a48b29f9d881f4fcd269 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:33:44 +0000
Subject: [PATCH 04/14] Switch to Tailwind beta

---
 package.json |  2 +-
 yarn.lock    | 56 +++++-----------------------------------------------
 2 files changed, 6 insertions(+), 52 deletions(-)

diff --git a/package.json b/package.json
index 742b11f..9138070 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "postcss-nested": "^4.1.2",
-    "tailwindcss": "https://github.com/tailwindcss/tailwindcss.git#next",
+    "tailwindcss": "^1.0.0-beta.3",
     "tailwindcss-spaced-items": "^0.1.0",
     "tailwindcss-visuallyhidden": "^1.0.1",
     "vue": "^2.5.17",
diff --git a/yarn.lock b/yarn.lock
index ba1f3ab..385c526 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1339,13 +1339,6 @@ babel-eslint@^10.0.1:
     eslint-scope "3.7.1"
     eslint-visitor-keys "^1.0.0"
 
-babel-extract-comments@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/babel-extract-comments/-/babel-extract-comments-1.0.0.tgz#0a2aedf81417ed391b85e18b4614e693a0351a21"
-  integrity sha512-qWWzi4TlddohA91bFwgt6zO/J0X+io7Qp184Fw0m2JYRSTZnJbFR8+07KmzudHCZgOiKRCrjhylwv9Xd8gfhVQ==
-  dependencies:
-    babylon "^6.18.0"
-
 babel-helper-vue-jsx-merge-props@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
@@ -1368,19 +1361,6 @@ babel-plugin-dynamic-import-node@^2.2.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-syntax-object-rest-spread@^6.8.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz#fd6536f2bce13836ffa3a5458c4903a597bb3bf5"
-  integrity sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=
-
-babel-plugin-transform-object-rest-spread@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
-  integrity sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=
-  dependencies:
-    babel-plugin-syntax-object-rest-spread "^6.8.0"
-    babel-runtime "^6.26.0"
-
 babel-plugin-transform-vue-jsx@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-4.0.1.tgz#2c8bddce87a6ef09eaa59869ff1bfbeeafc5f88d"
@@ -1388,19 +1368,6 @@ babel-plugin-transform-vue-jsx@^4.0.1:
   dependencies:
     esutils "^2.0.2"
 
-babel-runtime@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
-  integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
-  dependencies:
-    core-js "^2.4.0"
-    regenerator-runtime "^0.11.0"
-
-babylon@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.yarnpkg.com/babylon/-/babylon-6.18.0.tgz#af2f3b88fa6f5c1e4c634d1a0f8eac4f55b395e3"
-  integrity sha512-q/UEjfGJ2Cm3oKV71DJz9d25TPnq5rhBVL2Q4fA5wcC3jcrdn7+SssEybFIxwAvvP+YCsCYNKughoF33GxgycQ==
-
 balanced-match@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@@ -2170,7 +2137,7 @@ copy-webpack-plugin@^4.6.0:
     p-limit "^1.0.0"
     serialize-javascript "^1.4.0"
 
-core-js@^2.4.0, core-js@^2.5.7, core-js@^2.6.1:
+core-js@^2.5.7, core-js@^2.6.1:
   version "2.6.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.1.tgz#87416ae817de957a3f249b3b5ca475d4aaed6042"
   integrity sha512-L72mmmEayPJBejKIWe2pYtGis5r0tQ5NaJekdhyXgeMQTpJoBsH0NL4ElY2LfSoV15xeQWKQ+XTTOZdyero5Xg==
@@ -6369,11 +6336,6 @@ regenerate@^1.2.1, regenerate@^1.4.0:
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
   integrity sha512-1G6jJVDWrt0rK99kBjvEtziZNCICAuvIPkSiUFIQxVP06RCVpq3dmDo2oi6ABpYaDYaTRr67BEhL8r1wgEZZKg==
 
-regenerator-runtime@^0.11.0:
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
-  integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
-
 regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
@@ -7190,14 +7152,6 @@ strip-ansi@^5.0.0:
   dependencies:
     ansi-regex "^4.0.0"
 
-strip-comments@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/strip-comments/-/strip-comments-1.0.2.tgz#82b9c45e7f05873bee53f37168af930aa368679d"
-  integrity sha512-kL97alc47hoyIQSV165tTt9rG5dn4w1dNnBhOQ3bOU1Nc1hel09jnXANaHJ7vzHLd4Ju8kseDGzlev96pghLFw==
-  dependencies:
-    babel-extract-comments "^1.0.0"
-    babel-plugin-transform-object-rest-spread "^6.26.0"
-
 strip-eof@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/strip-eof/-/strip-eof-1.0.0.tgz#bb43ff5598a6eb05d89b59fcd129c983313606bf"
@@ -7300,9 +7254,10 @@ tailwindcss-visuallyhidden@^1.0.1:
   resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"
   integrity sha512-RJNJ2BqUBPw8OgPR/UnoLFNuKuFWEM5gk6tcg63atG5rUS5tTtxHjsay0b8JnIx+0xfFF72dRuoDmVvxn4HDrg==
 
-"tailwindcss@https://github.com/tailwindcss/tailwindcss.git#next":
-  version "0.7.3"
-  resolved "https://github.com/tailwindcss/tailwindcss.git#483d9382929928a4cbc35a1df81d7847aa18ec7a"
+tailwindcss@^1.0.0-beta.3:
+  version "1.0.0-beta.3"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-1.0.0-beta.3.tgz#66ac8e15377f4038cea6877e834a54edbc5ca295"
+  integrity sha512-J3KZ0gtpz1XVQ/D2xTuBMII1KmEb9LrQibIWtFRAXpa81yIeDM3v1g88M3Qr/lnjrJymi7zC3T2f9AdGuZ4oMw==
   dependencies:
     autoprefixer "^9.4.5"
     bytes "^3.0.0"
@@ -7318,7 +7273,6 @@ tailwindcss-visuallyhidden@^1.0.1:
     postcss-nested "^4.1.1"
     postcss-selector-parser "^6.0.0"
     pretty-hrtime "^1.0.3"
-    strip-comments "^1.0.2"
 
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.1"

From 5323b6153f283aadee589e137c9471c8c377d5c3 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:42:57 +0000
Subject: [PATCH 05/14] Update colour class names

---
 public/index.html                             |  2 +-
 src/App.vue                                   | 12 ++--
 .../Application/ApplicationCard.vue           | 12 ++--
 .../ApplicationDisplaySwitcher.vue            |  6 +-
 src/components/Application/StarToggle.vue     |  2 +-
 src/components/Environment/ActionCards.vue    | 58 +++++++++----------
 .../Environment/EnvironmentCards.vue          | 18 +++---
 src/components/Environment/QuickHelp.vue      |  8 +--
 .../Environment/TaskLog/TaskLog.vue           |  2 +-
 .../Environment/TaskLog/TaskLogItem.vue       | 12 ++--
 src/components/Environment/ToggleHelp.vue     |  4 +-
 src/components/HeaderButtons.vue              |  4 +-
 src/components/Navbar.vue                     | 10 ++--
 src/components/Sidebar.vue                    | 10 ++--
 src/components/TitleBlock.vue                 |  4 +-
 src/views/Applications.vue                    |  2 +-
 src/views/Environment.vue                     | 26 ++++-----
 src/views/Environments.vue                    |  8 +--
 18 files changed, 100 insertions(+), 100 deletions(-)

diff --git a/public/index.html b/public/index.html
index db7b8f7..1f3f4fb 100644
--- a/public/index.html
+++ b/public/index.html
@@ -7,7 +7,7 @@
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>Rebuilding Acquia</title>
   </head>
-  <body class="antialiased bg-grey-2 font-sans min-h-full flex flex-col flex-1">
+  <body class="antialiased bg-grey-200 font-sans min-h-full flex flex-col flex-1">
     <noscript>
       <strong>We're sorry but rebuilding-acquia doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
diff --git a/src/App.vue b/src/App.vue
index 361232b..c1ed107 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -18,29 +18,29 @@ h2 {
 }
 
 .btn {
-  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-3;
+  @apply text-sm font-thin antialiased text-white px-4 py-3 no-underline rounded mx-1 bg-blue-300;
 
   &:hover,
   &:focus {
-    @apply bg-blue-4
+    @apply bg-blue-400
   }
 }
 
 .btn.is-secondary {
-  @apply bg-grey-5;
+  @apply bg-grey-500;
 
   &:hover,
   &:focus {
-    @apply bg-grey-6
+    @apply bg-grey-600
   }
 }
 
 .tag {
-  @apply text-2xs uppercase py-1 px-2 rounded border border-grey-4 bg-white mr-2 mb-2
+  @apply text-2xs uppercase py-1 px-2 rounded border border-grey-400 bg-white mr-2 mb-2
 }
 
 .tag.is-type {
-  @apply bg-blue-1 border-blue-1 text-white
+  @apply bg-blue-100 border-blue-100 text-white
 }
 
 @tailwind utilities;
diff --git a/src/components/Application/ApplicationCard.vue b/src/components/Application/ApplicationCard.vue
index 8e5e41b..c856cef 100644
--- a/src/components/Application/ApplicationCard.vue
+++ b/src/components/Application/ApplicationCard.vue
@@ -1,14 +1,14 @@
 <template>
   <div>
-    <div v-if="display == 'grid'" class="bg-white p-4 border-grey-4 rounded border flex-1">
+    <div v-if="display == 'grid'" class="bg-white p-4 border-grey-400 rounded border flex-1">
       <div class="flex h-full">
         <div class="flex-1 w-5/6 flex flex-col justify-between">
           <div>
             <div>
-              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link>
+              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-300 no-underline hover:underline focus:underline focus:outline-none"><h2 class="mb-1">{{ application.name }}</h2></router-link>
             </div>
 
-            <div class="truncate text-blue-3">
+            <div class="truncate text-blue-300">
               <a href="#0" class="text-inherit no-underline hover:underline focus:underline focus:outline-none">{{ application.environments['prod'].url }}</a>
             </div>
           </div>
@@ -22,18 +22,18 @@
       </div>
     </div>
 
-    <div v-if="display == 'list'" class="bg-white p-3 border-grey-4 border-b">
+    <div v-if="display == 'list'" class="bg-white p-3 border-grey-400 border-b">
       <div class="-mx-2">
         <div class="flex flex-row-reverse items-center justify-between">
           <div class="flex flex-1 justify-between items-center -mx-2">
             <div class="flex-1 px-2">
-              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-3 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
+              <router-link :to="{name: 'environments', params: {id: id}}" class="text-blue-300 no-underline hover:underline focus:underline"><h2 class="text-base font-normal mb-1">{{ application.name }}</h2></router-link>
             </div>
 
             <application-tags :type="application.type" :level="application.level" class="w-1/4 px-2"></application-tags>
 
             <div class="w-2/5 px-2">
-              <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
+              <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">{{ application.environments['prod'].url }}</a>
             </div>
           </div>
 
diff --git a/src/components/Application/ApplicationDisplaySwitcher.vue b/src/components/Application/ApplicationDisplaySwitcher.vue
index 072a7d1..afef797 100644
--- a/src/components/Application/ApplicationDisplaySwitcher.vue
+++ b/src/components/Application/ApplicationDisplaySwitcher.vue
@@ -1,12 +1,12 @@
 <template>
   <div>
-    <div class="bg-grey-1 rounded overflow-hidden">
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
+    <div class="bg-grey-100 rounded overflow-hidden">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'grid' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'grid')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__grid"></use></svg>
         <span class="visuallyhidden">Grid</span>
       </button>
 
-      <button type="button" class="p-2 focus:outline-none focus:bg-blue-3 focus:text-white" :class="[mode == 'list' ? 'bg-blue-1 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
+      <button type="button" class="p-2 focus:outline-none focus:bg-blue-300 focus:text-white" :class="[mode == 'list' ? 'bg-blue-100 text-white' : 'text-grey-darkest']" @click="$emit('display-changed', 'list')">
         <svg class="h-5 w-5 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__list"></use></svg>
         <span class="visuallyhidden">List</span>
       </button>
diff --git a/src/components/Application/StarToggle.vue b/src/components/Application/StarToggle.vue
index 4be8a42..7c3e636 100644
--- a/src/components/Application/StarToggle.vue
+++ b/src/components/Application/StarToggle.vue
@@ -1,5 +1,5 @@
 <template>
-  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-1 hover:text-orange-2 focus:text-orange-2' : 'text-grey-4 focus:text-orange-2 hover:text-orange-1']">
+  <button type="button" @click="starred = !starred" class="focus:outline-none" :class="[starred ? 'text-orange-100 hover:text-orange-200 focus:text-orange-200' : 'text-grey-400 focus:text-orange-200 hover:text-orange-100']">
     <span class="visuallyhidden">{{ !starred ? 'Star' : 'Unstar' }} {{ application.name }}</span>
     <svg class="h-6 w-6 fill-current -mr-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#state__${starred ? 'starred' : 'unstarred'}`"></use></svg>
   </button>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 1a72704..5bddc65 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -1,21 +1,21 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'code'">Code</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'databases'">Databases</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-4' : 'bg-blue-3']" @click="active = 'files'">Files</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'code'">Code</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'databases'">Databases</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'files'">Files</button></li>
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-4">
+            <div class="border-b border-grey-400">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-6 text-base mb-1">Code</h2>
-                    <div class="text-xs text-grey-6">{{ environment.name }}: {{ environment.label }}</div>
+                    <h2 class="text-grey-600 text-base mb-1">Code</h2>
+                    <div class="text-xs text-grey-600">{{ environment.name }}: {{ environment.label }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -27,15 +27,15 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
-                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
+                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
                     <span class="block">Deploy</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
-                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
+                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
                     <span class="block">Switch</span>
                   </button>
@@ -47,14 +47,14 @@
       </div>
 
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-4">
+            <div class="border-b border-grey-400">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-6 text-base mb-1">Databases</h2>
-                    <div class="text-xs text-grey-6">{{ environment.name }}</div>
+                    <h2 class="text-grey-600 text-base mb-1">Databases</h2>
+                    <div class="text-xs text-grey-600">{{ environment.name }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -66,27 +66,27 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
-                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
+                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
-                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
+                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
                     <span class="block">Back up</span>
                   </button>
                 </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
                   <button
                     type="button"
-                    class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block"
+                    class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block"
                     :class="{
-                      'text-blue-3': !isProduction,
-                      'text-grey-5 cursor-not-allowed': isProduction
+                      'text-blue-300': !isProduction,
+                      'text-grey-500 cursor-not-allowed': isProduction
                     }"
                     :disabled="isProduction"
                   >
@@ -101,14 +101,14 @@
       </div>
 
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-4 rounded shadow bg-white overflow-hidden">
+        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-4">
+            <div class="border-b border-grey-400">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
-                    <h2 class="text-grey-6 text-base mb-1">Files</h2>
-                    <div class="text-xs text-grey-6">{{ environment.name }}</div>
+                    <h2 class="text-grey-600 text-base mb-1">Files</h2>
+                    <div class="text-xs text-grey-600">{{ environment.name }}</div>
                   </div>
 
                   <div class="mr-3">
@@ -120,8 +120,8 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-4">
-                  <button type="button" class="w-full py-3 text-blue-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-2 focus:bg-grey-lighter focus:outline-none block">
+                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
+                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index 80a0328..90c7fa3 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -2,42 +2,42 @@
   <div class="mb-6">
     <div class="flex flex-wrap -mx-4 -mb-6">
       <div v-for="(environment, key) in environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
-        <div class="border border-grey-4 rounded overflow-hidden">
+        <div class="border border-grey-400 rounded overflow-hidden">
            <div class="bg-white">
             <div class="border-t-4 border-teal p-3">
-              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none mb-1">
+              <router-link :to="{ name: 'environment', params: { environmentName: key, id: id }}" class="flex items-baseline no-underline hover:underline focus:underline text-grey-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none mb-1">
                 <h2>{{ environment.name }}</h2>
                 <svg class="w-4 h-4 fill-current text-inherit ml-2" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </router-link>
 
               <div class="mb-2">
-                <a href="#0" class="no-underline hover:underline focus:underline text-grey-6 hover:text-blue-3 focus:text-blue-3 focus:outline-none">
+                <a href="#0" class="no-underline hover:underline focus:underline text-grey-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
                   {{ environment.url }}
                 </a>
               </div>
 
-              <div class="text-grey-6">{{ environment.label }}</div>
+              <div class="text-grey-600">{{ environment.label }}</div>
             </div>
           </div>
 
           <div>
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Code</span>
-              <span class="border-l border-grey-4 p-2">
+              <span class="border-l border-grey-400 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline text-sm w-full text-left border-t border-grey-4">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left border-t border-grey-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Databases</span>
-              <span class="border-l border-grey-4 p-2">
+              <span class="border-l border-grey-400 p-2">
                 <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
               </span>
             </button>
 
-            <button type="button" class="flex items-center text-white bg-blue-2 hover:bg-blue-4 focus:bg-blue-4 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey-4">
+            <button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               Files
             </button>
diff --git a/src/components/Environment/QuickHelp.vue b/src/components/Environment/QuickHelp.vue
index 5479735..7793681 100644
--- a/src/components/Environment/QuickHelp.vue
+++ b/src/components/Environment/QuickHelp.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
-    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-2">
+    <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-grey-200">
       <div class="flex items-center">
         <svg class="h-6 w-6 mr-1 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
         Quick help
@@ -22,15 +22,15 @@
             :key="item.subject"
             type="button"
             class="hover:underline focus:underline mr-6 focus:outline-none"
-            :class="[ i === selected ? 'text-grey-7' : 'text-blue-3' ]"
+            :class="[ i === selected ? 'text-grey-700' : 'text-blue-300' ]"
             @click="selected = i"
           >{{ item.subject }}</button>
         </div>
 
         <div class="leading-normal">
-          <p class="text-sm text-grey-6">
+          <p class="text-sm text-grey-600">
             {{ items[selected].text }}
-            <a href="#0" class="text-blue-3 no-underline hover:underline focus:underline">Learn more</a>
+            <a href="#0" class="text-blue-300 no-underline hover:underline focus:underline">Learn more</a>
           </p>
         </div>
       </div>
diff --git a/src/components/Environment/TaskLog/TaskLog.vue b/src/components/Environment/TaskLog/TaskLog.vue
index 20551e0..be8a3e6 100644
--- a/src/components/Environment/TaskLog/TaskLog.vue
+++ b/src/components/Environment/TaskLog/TaskLog.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="bg-grey-3 pb-4 pt-6 px-4">
+    <div class="bg-grey-300 pb-4 pt-6 px-4">
       <h2 class="font-normal text-lg">Task Log</h2>
     </div>
     <div>
diff --git a/src/components/Environment/TaskLog/TaskLogItem.vue b/src/components/Environment/TaskLog/TaskLogItem.vue
index 267c5f4..6a7d3ad 100644
--- a/src/components/Environment/TaskLog/TaskLogItem.vue
+++ b/src/components/Environment/TaskLog/TaskLogItem.vue
@@ -1,26 +1,26 @@
 <template>
   <div>
-    <div class="px-3 py-4 border-b border-grey-3 flex" :class="{'bg-yellow-lightest': open}">
+    <div class="px-3 py-4 border-b border-grey-300 flex" :class="{'bg-yellow-lightest': open}">
       <div class="flex-none mr-3">
-        <svg v-if="task.loading" class="h-5 w-5 text-grey-5 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
+        <svg v-if="task.loading" class="h-5 w-5 text-grey-500 fill-current rotates" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__loading"></use></svg>
         <svg v-if="!task.loading && task.success" class="h-5 w-5 text-green fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__success-circle"></use></svg>
         <svg v-if="!task.loading && !task.success" class="h-5 w-5 text-red fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#feedback__warning"></use></svg>
       </div>
 
       <div class="flex-1">
         <div class="text-sm font-bold mb-2">{{ task.text }}</div>
-        <div class="text-grey-6 text-2xs">{{ task.times.display }}</div>
+        <div class="text-grey-600 text-2xs">{{ task.times.display }}</div>
       </div>
 
       <div>
         <button type="button" @click="open = !open">
-          <svg v-if="!open" class="h-5 w-5 text-grey-6 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
-          <svg v-else class="h-5 w-5 text-grey-6 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-if="!open" class="h-5 w-5 text-grey-600 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
+          <svg v-else class="h-5 w-5 text-grey-600 fill-current" style="transform: rotate(180deg)" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__chevron"></use></svg>
         </button>
       </div>
     </div>
 
-    <div class="p-4 bg-grey-6 text-white antialiased" v-show="open">
+    <div class="p-4 bg-grey-600 text-white antialiased" v-show="open">
       <div class="lg:flex lg:flex-wrap -mx-4 -mb-4">
         <div class="px-4 mb-4">
           <div class="text-xs uppercase mb-1">Task ID</div>
diff --git a/src/components/Environment/ToggleHelp.vue b/src/components/Environment/ToggleHelp.vue
index 1cbd1fd..d47c15b 100644
--- a/src/components/Environment/ToggleHelp.vue
+++ b/src/components/Environment/ToggleHelp.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="hidden lg:block">
-    <button type="button" class="text-blue-3 text-sm font-hairline flex items-end hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
-      <svg class="h-5 w-5 mr-1 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
+    <button type="button" class="text-blue-300 text-sm font-hairline flex items-end hover:underline focus:underline focus:outline-none" @click="$emit('toggle')">
+      <svg class="h-5 w-5 mr-1 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
       {{ hidden ? 'Show quick help' : 'Hide quick help' }}
     </button>
   </div>
diff --git a/src/components/HeaderButtons.vue b/src/components/HeaderButtons.vue
index 6709978..fd38f80 100644
--- a/src/components/HeaderButtons.vue
+++ b/src/components/HeaderButtons.vue
@@ -7,11 +7,11 @@
           class="text-xs no-underline hover:underline flex flex-col items-center justify-center"
           :class="{
             'text-grey cursor-not-allowed': link.disabled,
-            'text-blue-3': !link.disabled,
+            'text-blue-300': !link.disabled,
           }"
           :disabled="link.disabled"
         >
-          <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
+          <svg class="h-6 w-6 fill-current mb-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
           {{ link.title }}
         </button>
       </li>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index 43c145c..4200f48 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -7,20 +7,20 @@
 
         <div class="flex flex-col flex-1">
           <nav class="border-t-2 border-transparent flex justify-end md:justify-start">
-            <a href="#0" class="inline-block text-sm border-b-4 border-blue-3 mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Develop</a>
-            <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-3 uppercase no-underline hover:underline focus:underline">Manage</a>
+            <a href="#0" class="inline-block text-sm border-b-4 border-blue-300 mx-2 px-4 py-4 md:py-5 text-blue-300 uppercase no-underline hover:underline focus:underline">Develop</a>
+            <a href="#0" class="inline-block text-sm border-b-4 border-transparent mx-2 px-4 py-4 md:py-5 text-blue-300 uppercase no-underline hover:underline focus:underline">Manage</a>
           </nav>
         </div>
 
         <div class="hidden md:flex md:items-center">
-          <div><a class="text-sm text-blue-3 no-underline hover:underline uppercase" href="#0">Help</a></div>
+          <div><a class="text-sm text-blue-300 no-underline hover:underline uppercase" href="#0">Help</a></div>
           <div class="ml-6"><button type="button">
             <span class="hidden">Menu</span>
-            <svg class="fill-current text-blue-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg>
+            <svg class="fill-current text-blue-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20" height="20"><path id="select-product" class="cls-1" d="M.77,0h4A.76.76,0,0,1,5.5.77v4a.76.76,0,0,1-.77.77h-4A.76.76,0,0,1,0,4.73v-4A.76.76,0,0,1,.77,0ZM7.25.77v4A.76.76,0,0,0,8,5.5h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,0H8A.76.76,0,0,0,7.25.77Zm7.25,0v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,4.73v-4A.76.76,0,0,0,19.23,0h-4A.76.76,0,0,0,14.5.77ZM0,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,5.5,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,8ZM7.25,8v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77V8A.76.76,0,0,0,12,7.25H8A.76.76,0,0,0,7.25,8ZM14.5,8v4a.76.76,0,0,0,.77.77h4A.76.76,0,0,0,20,12V8a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,8ZM0,15.27v4A.76.76,0,0,0,.77,20h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,0,15.27Zm7.25,0v4A.76.76,0,0,0,8,20h4a.76.76,0,0,0,.77-.77v-4A.76.76,0,0,0,12,14.5H8A.76.76,0,0,0,7.25,15.27Zm7.25,0v4a.76.76,0,0,0,.77.77h4a.76.76,0,0,0,.77-.77v-4a.76.76,0,0,0-.77-.77h-4A.76.76,0,0,0,14.5,15.27Z"></path></svg>
           </button></div>
           <div class="ml-6"><button type="button">
             <span class="hidden">Activity</span>
-            <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg>
+            <svg class="h-6 w-6 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__notification"></use></svg>
           </button></div>
           <div class="ml-6">
             <img class="w-5 h-5 rounded-full" src="https://avatars1.githubusercontent.com/u/339813?s=460&v=4" alt="">
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 612700c..09cc954 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-auto lg:w-56 bg-grey-3 text-grey-4 antialiased fixed pin-l h-full overflow-y-scroll z-30">
+  <div class="w-auto lg:w-56 bg-grey-300 text-grey-400 antialiased fixed left-0 h-full overflow-y-scroll z-30">
     <div>
       <ul class="list-reset">
         <li v-for="link in links" :key="link.title">
@@ -7,10 +7,10 @@
             href="#0"
             class="flex items-center no-underline focus:underline px-4 py-2 text-sm"
             :class="{
-              'bg-grey-6 text-white hover:text-white': link.active,
-              'border-transparent hover:bg-grey-4': !link.active,
-              'text-grey-5 cursor-not-allowed': link.disabled,
-              'text-grey-6 hover:text-blue-3': !link.disabled && !link.active,
+              'bg-grey-600 text-white hover:text-white': link.active,
+              'border-transparent hover:bg-grey-400': !link.active,
+              'text-grey-500 cursor-not-allowed': link.disabled,
+              'text-grey-600 hover:text-blue-300': !link.disabled && !link.active,
             }"
           >
             <svg class="h-6 w-6 fill-current" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
diff --git a/src/components/TitleBlock.vue b/src/components/TitleBlock.vue
index c89e572..b370a19 100644
--- a/src/components/TitleBlock.vue
+++ b/src/components/TitleBlock.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="border-b-3 border-grey-3">
-    <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-2 flex justify-between items-center">
+  <div class="border-b-3 border-grey-300">
+    <div class="bg-white px-4 lg:px-6 py-5 border-t border-grey-200 flex justify-between items-center">
       <div class="w-full md:w-auto flex flex-col">
         <slot name="left"></slot>
       </div>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index f9b7d11..2b51a78 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -31,7 +31,7 @@
                 <div class="w-full">
                   <form action="#">
                     <label for="applications" class="visuallyhidden">Filter applications</label>
-                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-4-6 rounded">
+                    <input id="applications" type="text" placeholder="Filter applications" class="w-full py-2 px-3 border border-grey-400-6 rounded">
                   </form>
                 </div>
               </div>
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index e2b0dca..aea2b10 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -8,11 +8,11 @@
           <div class="text-xs mb-3">
             <ol class="list-reset flex">
               <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
+                <router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li class="flex items-center pr-1">
-                <router-link :to="{ name: 'environments' }" class="text-blue-3 no-underline hover:underline mr-1">{{ application.name }}</router-link>
+                <router-link :to="{ name: 'environments' }" class="text-blue-300 no-underline hover:underline mr-1">{{ application.name }}</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li>{{ environment.name }}</li>
@@ -21,7 +21,7 @@
 
           <button class="flex flex-1 items-center justify-between md:justify-start">
             <div class="text-2xl font-hairline">{{ application.name }} : {{ environment.name }}</div>
-            <svg class="h-6 w-6 text-blue-3 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
+            <svg class="h-6 w-6 text-blue-300 fill-current ml-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
           </button>
         </template>
 
@@ -48,7 +48,7 @@
             </div>
 
             <div class="my-10">
-              <a :href="environment.url" class="flex items-center text-sm text-blue-3 no-underline hover:underline focus:underline">
+              <a :href="environment.url" class="flex items-center text-sm text-blue-300 no-underline hover:underline focus:underline">
                 <svg class="h-6 w-6 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#alpha__globe"></use></svg>
                 {{ environment.url }}
               </a>
@@ -60,14 +60,14 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Site Health</h2></div>
+                <div class="bg-white border-b-2 border-grey-300 p-3"><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="text-center leading-normal mb-5">
-                    <p class="text-grey-6">
+                    <p class="text-grey-600">
                       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>
@@ -81,13 +81,13 @@
               </div>
 
               <div class="shadow-md overflow-hidden">
-                <div class="bg-white border-b-2 border-grey-3 p-3"><h2 class="text-lg">Information</h2></div>
+                <div class="bg-white border-b-2 border-grey-300 p-3"><h2 class="text-lg">Information</h2></div>
                 <div class="bg-white px-4 py-6">
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">Git URL</div>
                     <div class="border border-grey-dark rounded p-3 truncate">{{ gitUrl }}</div>
                     <div class="absolute pin-t pin-r">
-                      <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
+                      <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">Git URL to your clipboard</span>
                       </button>
@@ -98,7 +98,7 @@
                     <div class="text-xs mb-1">SSH URL</div>
                     <div class="border border-grey-dark rounded p-3 truncate">{{ sshUrl }}</div>
                     <div class="absolute pin-t pin-r">
-                      <button type="button" class="flex items-center text-xs text-blue-3 hover:underline focus:underline">
+                      <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
                       </button>
@@ -107,22 +107,22 @@
 
                   <div class="flex flex-wrap -mx-4 -mb-4 lg:-mb-6">
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-6">IP Address</div>
+                      <div class="mb-1 text-xs text-grey-600">IP Address</div>
                       <div>1.2.3.4</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-6">Region</div>
+                      <div class="mb-1 text-xs text-grey-600">Region</div>
                       <div>eu-west-1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-6">PHP version</div>
+                      <div class="mb-1 text-xs text-grey-600">PHP version</div>
                       <div>7.1</div>
                     </div>
 
                     <div class="w-full lg:w-1/2 px-4 mb-4 lg:mb-6">
-                      <div class="mb-1 text-xs text-grey-6">Live development mode</div>
+                      <div class="mb-1 text-xs text-grey-600">Live development mode</div>
                       <div>Off</div>
                     </div>
                   </div>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 6fd0d92..3bba534 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -8,7 +8,7 @@
           <div class="text-xs mb-3">
             <ol class="list-reset flex">
               <li class="flex items-center pr-1">
-                <router-link to="/" class="text-blue-3 no-underline hover:underline mr-1">Applications</router-link>
+                <router-link to="/" class="text-blue-300 no-underline hover:underline mr-1">Applications</router-link>
                 <svg class="w-3 h-3 fill-current text-grey" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M12.95 10.707l.707-.707L8 4.343 6.586 5.757 10.828 10l-4.242 4.243L8 15.657l4.95-4.95z" fill-rule="evenodd"/></svg>
               </li>
               <li>{{ application.name }}</li>
@@ -17,14 +17,14 @@
 
           <button class="flex flex-1 items-center justify-between md:justify-start">
             <div class="text-2xl font-hairline mr-2">{{ application.name }}</div>
-            <svg class="h-6 w-6 text-blue-3 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
+            <svg class="h-6 w-6 text-blue-300 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__down-arrow"></use></svg>
           </button>
         </template>
 
         <template slot="right">
           <div class="flex items-center">
             <div class="hidden md:block">
-              <button type="button" class="text-sm font-bold text-blue-3 uppercase py-2 px-6 border border-blue-3 hover:text-blue-4 hover:border-blue-4 focus:border-blue-4">
+              <button type="button" class="text-sm font-bold text-blue-300 uppercase py-2 px-6 border border-blue-300 hover:text-blue-400 hover:border-blue-400 focus:border-blue-400">
                 Steps to launch
               </button>
             </div>
@@ -54,7 +54,7 @@
               <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-4-6 rounded">
+                    <input type="text" placeholder="Filter environments" class="w-full py-2 px-3 border border-grey-400-6 rounded">
                   </form>
                 </div>
 

From aef186ea76f485d482c2ba3abc7c68c9cca5a2e7 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:47:55 +0000
Subject: [PATCH 06/14] Re-add base line height

---
 src/App.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/App.vue b/src/App.vue
index c1ed107..dcf9e1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,6 +6,11 @@
 
 <style lang="postcss">
 @tailwind base;
+
+html {
+  line-height: 1.15;
+}
+
 @tailwind components;
 
 h1,

From 8ae9f3fa5646489ee155a3bb90a12cb06f4f2fe4 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:48:02 +0000
Subject: [PATCH 07/14] Increase margin

---
 src/components/HeaderButtons.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/HeaderButtons.vue b/src/components/HeaderButtons.vue
index fd38f80..c982298 100644
--- a/src/components/HeaderButtons.vue
+++ b/src/components/HeaderButtons.vue
@@ -11,7 +11,7 @@
           }"
           :disabled="link.disabled"
         >
-          <svg class="h-6 w-6 fill-current mb-1" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
+          <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use :xlink:href="`/img/icons.symbol.svg#${link.icon}`"></use></svg>
           {{ link.title }}
         </button>
       </li>

From 2c20c14b5348bcd8905b172dea57de37b17887a1 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 00:54:48 +0000
Subject: [PATCH 08/14] Update classes

---
 src/components/Environment/ActionCards.vue      | 12 ++++++------
 src/components/Environment/EnvironmentCards.vue |  6 +++---
 src/views/Applications.vue                      |  2 +-
 src/views/Environment.vue                       |  6 +++---
 src/views/Environments.vue                      |  2 +-
 5 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 5bddc65..37e92e5 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -28,14 +28,14 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
                     <span class="block">Deploy</span>
                   </button>
                 </li>
 
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
                     <span class="block">Switch</span>
                   </button>
@@ -67,14 +67,14 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
                 </li>
 
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
                     <span class="block">Back up</span>
                   </button>
@@ -83,7 +83,7 @@
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
                   <button
                     type="button"
-                    class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block"
+                    class="w-full flex flex-col items-center py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block"
                     :class="{
                       'text-blue-300': !isProduction,
                       'text-grey-500 cursor-not-allowed': isProduction
@@ -121,7 +121,7 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
                     <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                     <span class="block">Copy</span>
                   </button>
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index 90c7fa3..b6ca9bf 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -21,7 +21,7 @@
           </div>
 
           <div>
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Code</span>
               <span class="border-l border-grey-400 p-2">
@@ -29,7 +29,7 @@
               </span>
             </button>
 
-            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left border-t border-grey-400">
+            <button type="button" class="flex items-center justify-between text-white pl-1 bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline text-sm w-full text-left py-1 border-t border-grey-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               <span class="flex-1">Databases</span>
               <span class="border-l border-grey-400 p-2">
@@ -37,7 +37,7 @@
               </span>
             </button>
 
-            <button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left border-t border-grey-400">
+            <button type="button" class="flex items-center text-white bg-blue-200 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline px-1 py-3 text-sm w-full text-left py-1 border-t border-grey-400">
               <svg class="h-6 w-5 text-white mr-2 fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
               Files
             </button>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 2b51a78..cd51781 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="fixed pin-t w-full z-30">
+    <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
       <title-block>
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index aea2b10..5bfa601 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="fixed pin-t w-full z-30">
+    <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
       <title-block>
@@ -86,7 +86,7 @@
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">Git URL</div>
                     <div class="border border-grey-dark rounded p-3 truncate">{{ gitUrl }}</div>
-                    <div class="absolute pin-t pin-r">
+                    <div class="absolute top-0 right-0">
                       <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">Git URL to your clipboard</span>
@@ -97,7 +97,7 @@
                   <div class="mb-6 relative">
                     <div class="text-xs mb-1">SSH URL</div>
                     <div class="border border-grey-dark rounded p-3 truncate">{{ sshUrl }}</div>
-                    <div class="absolute pin-t pin-r">
+                    <div class="absolute top-0 right-0">
                       <button type="button" class="flex items-center text-xs text-blue-300 hover:underline focus:underline">
                         <svg class="h-3 w-3 fill-current mr-1" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
                         Copy <span class="visuallyhidden">SSH URL to your clipboard</span>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index 3bba534..37e7bc8 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="fixed pin-t w-full z-30">
+    <div class="fixed top-0 w-full z-30">
       <navbar></navbar>
 
       <title-block>

From e48ada8c596a90d4d7b30712c62856b39b5e51e3 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 01:33:49 +0000
Subject: [PATCH 09/14] Extract an action card button component

---
 .../Environment/ActionCardButton.vue          | 20 +++++++
 src/components/Environment/ActionCards.vue    | 57 ++++++++-----------
 2 files changed, 45 insertions(+), 32 deletions(-)
 create mode 100644 src/components/Environment/ActionCardButton.vue

diff --git a/src/components/Environment/ActionCardButton.vue b/src/components/Environment/ActionCardButton.vue
new file mode 100644
index 0000000..b4f0e8a
--- /dev/null
+++ b/src/components/Environment/ActionCardButton.vue
@@ -0,0 +1,20 @@
+<template>
+  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
+    <slot></slot>
+    <span class="block" v-text="label"></span>
+  </button>
+</template>
+
+<script>
+export default {
+  props: {
+    label: { type: String },
+  },
+}
+</script>
+
+<style scoped>
+  svg {
+    @apply h-6 w-6 fill-current mb-2
+  }
+</style>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 37e92e5..33a8d89 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -28,17 +28,15 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
-                    <span class="block">Deploy</span>
-                  </button>
+                  <action-card-button label="Deploy">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
+                  </action-card-button>
                 </li>
 
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
-                    <span class="block">Switch</span>
-                  </button>
+                  <action-card-button label="Switch">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
+                  </action-card-button>
                 </li>
               </ul>
             </div>
@@ -67,32 +65,24 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                    <span class="block">Copy</span>
-                  </button>
+                  <action-card-button label="Copy">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+                  </action-card-button>
                 </li>
 
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
-                    <span class="block">Back up</span>
-                  </button>
+                  <action-card-button label="Back up">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
+                  </action-card-button>
                 </li>
 
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button
-                    type="button"
-                    class="w-full flex flex-col items-center py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block"
-                    :class="{
-                      'text-blue-300': !isProduction,
-                      'text-grey-500 cursor-not-allowed': isProduction
-                    }"
-                    :disabled="isProduction"
-                  >
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
-                    <span class="block">Restore</span>
-                  </button>
+                  <action-card-button label="Restore" :disabled="isProduction" :class="{
+                    'text-blue-300': !isProduction,
+                    'text-grey-500 cursor-not-allowed': isProduction
+                  }">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
+                  </action-card-button>
                 </li>
               </ul>
             </div>
@@ -121,10 +111,9 @@
             <div>
               <ul class="list-reset flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <button type="button" class="w-full flex flex-col items-center py-3 text-blue-300 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-200 focus:bg-grey-lighter focus:outline-none block">
-                    <svg class="h-6 w-6 fill-current mb-2" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                    <span class="block">Copy</span>
-                  </button>
+                  <action-card-button label="Copy">
+                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+                  </action-card-button>
                 </li>
               </ul>
             </div>
@@ -137,7 +126,11 @@
 
 
 <script>
+import ActionCardButton from '@/components/Environment/ActionCardButton'
+
 export default {
+  components: { ActionCardButton },
+
   props: {
     environment: Object,
     isProduction: Boolean

From e5d9079293f8dc86da1d54533c3ecc73f8b424ab Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 01:37:32 +0000
Subject: [PATCH 10/14] Extract a mobile button component

---
 src/components/Environment/ActionCards.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 33a8d89..41eda4b 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'code' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'code'">Code</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'databases' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'databases'">Databases</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[active == 'files' ? 'bg-blue-400' : 'bg-blue-300']" @click="active = 'files'">Files</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'code'}" @click="active = 'code'">Code</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'databases'}" @click="active = 'databases'">Databases</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'files'}" @click="active = 'files'">Files</button></li>
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
@@ -143,3 +143,12 @@ export default {
   },
 }
 </script>
+
+<style scoped>
+.mobile-button {
+  @apply text-sm text-white w-full py-3 rounded bg-blue-300
+}
+.mobile-button.is-active {
+  @apply bg-blue-400
+}
+</style>

From f38df8683a29df599352cf12b6f60a1ccf50eca2 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 01:39:11 +0000
Subject: [PATCH 11/14] Remove list-reset class

---
 src/components/Environment/ActionCards.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 41eda4b..e4768dc 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <ul class="list-reset flex flex-wrap md:hidden -mx-1 mb-5">
+    <ul class="flex flex-wrap md:hidden -mx-1 mb-5">
       <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'code'}" @click="active = 'code'">Code</button></li>
       <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'databases'}" @click="active = 'databases'">Databases</button></li>
       <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'files'}" @click="active = 'files'">Files</button></li>
@@ -26,7 +26,7 @@
             </div>
 
             <div>
-              <ul class="list-reset flex -ml-px">
+              <ul class="flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
                   <action-card-button label="Deploy">
                     <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
@@ -63,7 +63,7 @@
             </div>
 
             <div>
-              <ul class="list-reset flex -ml-px">
+              <ul class="flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
                   <action-card-button label="Copy">
                     <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
@@ -109,7 +109,7 @@
             </div>
 
             <div>
-              <ul class="list-reset flex -ml-px">
+              <ul class="flex -ml-px">
                 <li class="w-1/2 flex-1 text-center border-l border-grey-400">
                   <action-card-button label="Copy">
                     <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>

From f9356b09aae59f35ecc0f58b709894c874dbf36a Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 02:16:29 +0000
Subject: [PATCH 12/14] Re-order PostCSS plugins

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 9138070..94871bc 100644
--- a/package.json
+++ b/package.json
@@ -40,8 +40,8 @@
   },
   "postcss": {
     "plugins": {
-      "postcss-nested": {},
       "tailwindcss": "./tailwind.config.js",
+      "postcss-nested": {},
       "autoprefixer": {}
     }
   },

From a715bcda800a78383444bbb98d77f5b7e8d17cac Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 02:18:22 +0000
Subject: [PATCH 13/14] Nest is-active class

---
 src/components/Environment/ActionCards.vue | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index e4768dc..8570503 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -146,9 +146,11 @@ export default {
 
 <style scoped>
 .mobile-button {
-  @apply text-sm text-white w-full py-3 rounded bg-blue-300
+  @apply text-sm text-white w-full py-3 rounded bg-blue-300;
+
+  &.is-active {
+    @apply bg-blue-400
+  }
 }
-.mobile-button.is-active {
-  @apply bg-blue-400
 }
 </style>

From 5b1a1c245edf15d671188a57e447cfb4ab333d61 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 02:31:54 +0000
Subject: [PATCH 14/14] Extract an ActionCard Vue component, and some CSS
 components

---
 src/components/Environment/ActionCard.vue  |  45 ++++++
 src/components/Environment/ActionCards.vue | 180 ++++++++-------------
 2 files changed, 115 insertions(+), 110 deletions(-)
 create mode 100644 src/components/Environment/ActionCard.vue

diff --git a/src/components/Environment/ActionCard.vue b/src/components/Environment/ActionCard.vue
new file mode 100644
index 0000000..a4da653
--- /dev/null
+++ b/src/components/Environment/ActionCard.vue
@@ -0,0 +1,45 @@
+<template>
+  <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
+    <div class="border-t-4 border-teal">
+      <div class="border-b border-grey-400">
+        <div class="px-3 py-4">
+          <div class="flex flex-row-reverse">
+            <div class="flex-1">
+              <h2 class="text-grey-600 text-base mb-1">{{ title }}</h2>
+              <div class="text-xs text-grey-600">{{ description }}</div>
+            </div>
+
+            <div class="mr-3">
+              <slot name="icon"></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <slot name="buttons"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      required: true,
+    },
+  },
+}
+</script>
+
+<style scoped>
+svg {
+  @apply h-8 w-8 fill-current text-teal
+}
+</style>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index 8570503..e703f58 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -1,124 +1,73 @@
 <template>
   <div>
     <ul class="flex flex-wrap md:hidden -mx-1 mb-5">
-      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'code'}" @click="active = 'code'">Code</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'databases'}" @click="active = 'databases'">Databases</button></li>
-      <li class="w-1/3 px-1"><button type="button" class="mobile-button" :class="{'is-active': active == 'files'}" @click="active = 'files'">Files</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'code' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'code'">Code</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'databases' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'databases'">Databases</button></li>
+      <li class="w-1/3 px-1"><button type="button" class="text-sm text-white w-full py-3 rounded" :class="[ active == 'files' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'files'">Files</button></li>
     </ul>
 
     <div class="flex flex-wrap -mx-4 -mb-4">
-      <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
-          <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-400">
-              <div class="px-3 py-4">
-                <div class="flex flex-row-reverse">
-                  <div class="flex-1">
-                    <h2 class="text-grey-600 text-base mb-1">Code</h2>
-                    <div class="text-xs text-grey-600">{{ environment.name }}: {{ environment.label }}</div>
-                  </div>
+      <div class="wrapper" :class="[ active == 'code' ? 'block' : 'hidden' ]">
+        <action-card title="Code" description="Prod: tags/2018-12-21">
+          <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
 
-                  <div class="mr-3">
-                    <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
-                  </div>
-                </div>
-              </div>
-            </div>
+          <ul slot="buttons" class="button-list">
+            <li class="button-list-item">
+              <action-card-button label="Deploy">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
+              </action-card-button>
+            </li>
 
-            <div>
-              <ul class="flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Deploy">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__fork"></use></svg>
-                  </action-card-button>
-                </li>
-
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Switch">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
-                  </action-card-button>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+            <li class="button-list-item">
+              <action-card-button label="Switch">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
+              </action-card-button>
+            </li>
+          </ul>
+        </action-card>
       </div>
 
-      <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
-          <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-400">
-              <div class="px-3 py-4">
-                <div class="flex flex-row-reverse">
-                  <div class="flex-1">
-                    <h2 class="text-grey-600 text-base mb-1">Databases</h2>
-                    <div class="text-xs text-grey-600">{{ environment.name }}</div>
-                  </div>
+      <div class="wrapper" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
+        <action-card title="Databases" description="Prod">
+          <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
 
-                  <div class="mr-3">
-                    <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
-                  </div>
-                </div>
-              </div>
-            </div>
+          <ul slot="buttons" class="button-list">
+            <li class="button-list-item">
+              <action-card-button label="Copy">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+              </action-card-button>
+            </li>
 
-            <div>
-              <ul class="flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Copy">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                  </action-card-button>
-                </li>
+            <li class="button-list-item">
+              <action-card-button label="Back up">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
+              </action-card-button>
+            </li>
 
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Back up">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
-                  </action-card-button>
-                </li>
-
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Restore" :disabled="isProduction" :class="{
-                    'text-blue-300': !isProduction,
-                    'text-grey-500 cursor-not-allowed': isProduction
-                  }">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
-                  </action-card-button>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+            <li class="button-list-item">
+              <action-card-button label="Restore" :disabled="isProduction" :class="{
+                'text-blue-300': !isProduction,
+                'text-grey-500 cursor-not-allowed': isProduction
+              }">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__restore"></use></svg>
+              </action-card-button>
+            </li>
+          </ul>
+        </action-card>
       </div>
 
-      <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
-        <div class="border border-grey-400 rounded shadow bg-white overflow-hidden">
-          <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-400">
-              <div class="px-3 py-4">
-                <div class="flex flex-row-reverse">
-                  <div class="flex-1">
-                    <h2 class="text-grey-600 text-base mb-1">Files</h2>
-                    <div class="text-xs text-grey-600">{{ environment.name }}</div>
-                  </div>
+      <div class="wrapper" :class="[ active == 'files' ? 'block' : 'hidden' ]">
+        <action-card title="Files" description="Prod">
+          <svg slot="icon" class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
 
-                  <div class="mr-3">
-                    <svg class="h-8 w-8 fill-current text-teal" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__environment"></use></svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <ul class="flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-400">
-                  <action-card-button label="Copy">
-                    <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
-                  </action-card-button>
-                </li>
-              </ul>
-            </div>
-          </div>
-        </div>
+          <ul slot="buttons" class="button-list">
+            <li class="button-list-item">
+              <action-card-button label="Copy">
+                <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
+              </action-card-button>
+            </li>
+          </ul>
+        </action-card>
       </div>
     </div>
   </div>
@@ -126,10 +75,14 @@
 
 
 <script>
+import ActionCard from '@/components/Environment/ActionCard'
 import ActionCardButton from '@/components/Environment/ActionCardButton'
 
 export default {
-  components: { ActionCardButton },
+  components: {
+    ActionCard,
+    ActionCardButton,
+  },
 
   props: {
     environment: Object,
@@ -145,12 +98,19 @@ export default {
 </script>
 
 <style scoped>
-.mobile-button {
-  @apply text-sm text-white w-full py-3 rounded bg-blue-300;
+.wrapper {
+  @apply w-full px-4 mb-4;
 
-  &.is-active {
-    @apply bg-blue-400
+  @screen md {
+    @apply w-1/3 block
   }
 }
+
+.button-list {
+  @apply flex -ml-px
+}
+
+.button-list-item {
+  @apply w-1/2 flex-1 text-center border-l border-grey-400
 }
 </style>