Update Environment page

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "tailwindcss": "^0.7.3",
+    "tailwindcss-spaced-items": "^0.1.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.2"
   },

src/components/Environment/ActionCards.vue

@@ -10,7 +10,7 @@
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'code' ? 'block' : 'hidden' ]">
         <div class="border border-grey rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-dark">
+            <div class="border-b border-grey">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
@@ -27,14 +27,14 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter 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-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter 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>
@@ -49,7 +49,7 @@
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
         <div class="border border-grey rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-dark">
+            <div class="border-b border-grey">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
@@ -66,21 +66,21 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter 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-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter 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-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button
                     type="button"
                     class="w-full py-3 text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter focus:bg-grey-lighter focus:outline-none block"
@@ -103,7 +103,7 @@
       <div class="w-full md:w-1/3 md:block px-4 mb-4" :class="[ active == 'files' ? 'block' : 'hidden' ]">
         <div class="border border-grey rounded shadow bg-white overflow-hidden">
           <div class="border-t-4 border-teal">
-            <div class="border-b border-grey-dark">
+            <div class="border-b border-grey">
               <div class="px-3 py-4">
                 <div class="flex flex-row-reverse">
                   <div class="flex-1">
@@ -120,7 +120,7 @@
 
             <div>
               <ul class="list-reset flex -ml-px">
-                <li class="w-1/2 flex-1 text-center border-l border-grey-dark">
+                <li class="w-1/2 flex-1 text-center border-l border-grey">
                   <button type="button" class="w-full py-3 text-blue-dark text-xs font-bold no-underline hover:underline focus:underline hover:bg-grey-lighter 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>

src/views/Environment.vue

@@ -54,12 +54,13 @@
               </a>
             </div>
 
-            <div class="mb-6">
+            <div class="spaced-y-10">
+              <div>
                 <action-cards :environment="environment" :is-production="isProduction"></action-cards>
               </div>
 
-            <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="shadow-md overflow-hidden">
+                <div class="bg-white border-b-2 border-grey-light 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>
@@ -79,8 +80,8 @@
                 </div>
               </div>
 
-            <div class="rounded border border-grey shadow overflow-hidden">
-              <div class="bg-grey-light p-4"><h2 class="text-lg">Information</h2></div>
+              <div class="shadow-md overflow-hidden">
+                <div class="bg-white border-b-2 border-grey-light 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>
@@ -129,6 +130,7 @@
               </div>
             </div>
           </div>
+        </div>
 
         <sidebar :links="[
           { title: 'Overview', icon: 'sections__applications', active: true, disabled: false },

tailwind.js

@@ -70,8 +70,13 @@ module.exports = {
     ...defaultConfig.width,
     '56': '14rem',
   },
+  shadows: {
+    ...defaultConfig.shadows,
+    'md': '0 0 10px 0 rgba(0,0,0,0.1)'
+  },
   plugins: [
     require('tailwindcss/plugins/container')(),
+    require('tailwindcss-spaced-items')(),
     require('tailwindcss-visuallyhidden')(),
   ],
 }

yarn.lock

@@ -7243,6 +7243,11 @@ table@^5.0.2:
     slice-ansi "2.0.0"
     string-width "^2.1.1"
 
+tailwindcss-spaced-items@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/tailwindcss-spaced-items/-/tailwindcss-spaced-items-0.1.0.tgz#e7f381e5c780a034bcdbc38a6a2cfb31f828a020"
+  integrity sha512-YiT1h89fp13r6I+EBM8wS1RWfsTwzHSi4BAnHoTXXQK1GQ53DUCPeFNmiksYSdx2aQLMdp/DTPvErqBVfTALiQ==
+
 tailwindcss-visuallyhidden@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tailwindcss-visuallyhidden/-/tailwindcss-visuallyhidden-1.0.1.tgz#ed67ecf6ee48ea0313b5c3c27498467f350be206"