From af8e6e09cc69b217c24d67f396127635ec382b6b Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 27 Jun 2019 21:25:01 +0100
Subject: [PATCH] Use more top and left margins

---
 .../Application/ApplicationTags.vue           |  6 +-
 src/components/Environment/ActionCards.vue    |  8 +--
 .../Environment/EnvironmentCards.vue          | 72 +++++++++----------
 src/components/Environment/QuickHelp.vue      |  2 +-
 src/views/Applications.vue                    | 17 +++--
 src/views/Environment.vue                     |  8 +--
 src/views/Environments.vue                    | 10 ++-
 7 files changed, 64 insertions(+), 59 deletions(-)

diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index 074daa7..fadcbda 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
-    <ul class="list-reset -mr-2 -mb-2 flex flex-wrap">
-      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
-      <li class="mr-2 mb-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
+    <ul class="list-reset -ml-2 flex flex-wrap">
+      <li class="ml-2 py-1 px-2 text-2xs rounded uppercase border" :class="typeClasses" v-text="applicationTypeName"/>
+      <li class="ml-2 py-1 px-2 text-2xs rounded uppercase border border-gray-400 bg-white">{{ application.level }}</li>
     </ul>
   </div>
 </template>
diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index cc46169..2152c5f 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -6,8 +6,8 @@
       <li class="px-1 w-1/3"><button type="button" class="py-3 w-full text-sm text-white rounded" :class="[ active == 'files' ? 'bg-blue-400' : 'bg-blue-300' ]" @click="active = 'files'">Files</button></li>
     </ul>
 
-    <div class="-mx-4 -mb-4 flex flex-wrap">
-      <div class="px-4 mb-4 w-full md:w-1/3 md:block" :class="[ active == 'code' ? 'block' : 'hidden' ]">
+    <div class="-mx-4 flex flex-wrap">
+      <div class="px-4 w-full md:w-1/3 md:block" :class="[ active == 'code' ? 'block' : 'hidden' ]">
         <action-card title="Code" :description="`${ environment.name }: ${environment.label}`">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
 
@@ -27,7 +27,7 @@
         </action-card>
       </div>
 
-      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
+      <div class="px-4 w-full md:block md:w-1/3" :class="[ active == 'databases' ? 'block' : 'hidden' ]">
         <action-card title="Databases" :description="environment.name">
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
 
@@ -56,7 +56,7 @@
         </action-card>
       </div>
 
-      <div class="px-4 mb-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
+      <div class="px-4 w-full md:block md:w-1/3" :class="[ active == 'files' ? 'block' : 'hidden' ]">
         <action-card title="Files" :description="environment.name">
           <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>
 
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index aa94033..726d25e 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -1,47 +1,45 @@
 <template>
-  <div class="mb-6">
-    <div class="flex flex-wrap -mx-4 -mb-6">
-      <div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4 mb-6" :key="key">
-        <div class="border border-gray-400 rounded overflow-hidden shadow">
-           <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-gray-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="-mx-4 flex flex-wrap">
+    <div v-for="(environment, key) in application.environments" class="w-full md:w-1/2 xl:w-1/3 px-4" :key="key">
+      <div class="border border-gray-400 rounded overflow-hidden shadow">
+         <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-gray-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-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
-                  {{ environment.url }}
-                </a>
-              </div>
-
-              <div class="text-gray-600">{{ environment.label }}</div>
+            <div class="mb-2">
+              <a href="#0" class="no-underline hover:underline focus:underline text-gray-600 hover:text-blue-300 focus:text-blue-300 focus:outline-none">
+                {{ environment.url }}
+              </a>
             </div>
+
+            <div class="text-gray-600">{{ environment.label }}</div>
           </div>
+        </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 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-gray-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>
+        <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 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-gray-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-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-gray-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-gray-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 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-gray-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-gray-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="px-1 py-3 w-full flex items-center text-white bg-blue-200 text-sm text-left border-t border-gray-400 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline">
-              <svg class="mr-2 h-6 w-5 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
-              Files
-            </button>
-          </div>
+          <button type="button" class="px-1 py-3 w-full flex items-center text-white bg-blue-200 text-sm text-left border-t border-gray-400 hover:bg-blue-400 focus:bg-blue-400 focus:outline-none focus:underline">
+            <svg class="mr-2 h-6 w-5 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
+            Files
+          </button>
         </div>
       </div>
     </div>
diff --git a/src/components/Environment/QuickHelp.vue b/src/components/Environment/QuickHelp.vue
index 90883c7..c216b4a 100644
--- a/src/components/Environment/QuickHelp.vue
+++ b/src/components/Environment/QuickHelp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-white border-t-10 border-purple mb-6" :class="[hidden ? 'hidden' : 'block lg:flex']">
+  <div class="bg-white border-t-10 border-purple" :class="[hidden ? 'hidden' : 'block lg:flex']">
     <div class="flex-none py-3 pl-3 pr-8 border-b lg:border-r border-gray-200">
       <div class="flex items-center">
         <svg class="mr-1 h-6 w-6 text-purple fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__info"></use></svg>
diff --git a/src/views/Applications.vue b/src/views/Applications.vue
index 60316d6..117a07b 100644
--- a/src/views/Applications.vue
+++ b/src/views/Applications.vue
@@ -34,16 +34,19 @@
             </div>
           </div>
 
-          <div class="-mx-3 -mb-6 flex flex-wrap">
-            <application-card
+          <div class="-mt-6 -mx-3 flex flex-wrap">
+            <div
               v-for="application in sortedApplications"
-              :id="application.id"
-              :application="application"
               :key="application.id"
-              :display="display"
               class="px-3 w-full"
-              :class="{ 'mb-6 flex flex-col md:w-1/2 lg:w-1/3 xl:w-1/4': display == 'grid' }"
-            ></application-card>
+              :class="{ 'mt-6 flex flex-col md:w-1/2 lg:w-1/3 xl:w-1/4': display == 'grid' }"
+            >
+              <application-card
+                :application="application"
+                :display="display"
+                :id="application.id"
+              ></application-card>
+            </div>
           </div>
         </div>
 
diff --git a/src/views/Environment.vue b/src/views/Environment.vue
index bec4f72..913f66b 100644
--- a/src/views/Environment.vue
+++ b/src/views/Environment.vue
@@ -38,21 +38,21 @@
                 <action-cards :environment="environment" :is-production="isProduction"></action-cards>
               </div>
 
-              <div class="shadow-md overflow-hidden">
+              <div class="mt-8 shadow-md overflow-hidden">
                 <div class="p-3 bg-white border-b-2 border-gray-300"><h2 class="text-lg">Site Health</h2></div>
                 <div class="p-4 bg-white">
-                  <div class="mb-6">
+                  <div>
                     <p class="text-lg font-hairline text-gray-700">Uptime monitoring</p>
                   </div>
 
-                  <div class="mb-5 text-center leading-normal">
+                  <div class="mt-6 text-center leading-normal">
                     <p class="text-gray-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>
                   </div>
 
-                  <div class="flex justify-center">
+                  <div class="mt-5 flex justify-center">
                     <button type="button" class="btn">Enable Uptime</button>
                     <button type="button" class="btn is-secondary">Learn more</button>
                   </div>
diff --git a/src/views/Environments.vue b/src/views/Environments.vue
index fee613b..0d1fcb2 100644
--- a/src/views/Environments.vue
+++ b/src/views/Environments.vue
@@ -48,9 +48,13 @@
             </div>
           </div>
 
-          <quick-help :hidden="help.hidden"></quick-help>
-          <environment-cards :application="application" :id="id"/>
-          <task-log :tasks="application.tasks" v-if="application.tasks[0]"></task-log>
+          <div class="spaced-y-6">
+            <quick-help :hidden="help.hidden"></quick-help>
+
+            <environment-cards :application="application" :id="id"/>
+
+            <task-log :tasks="application.tasks" v-if="application.tasks[0]"></task-log>
+          </div>
         </div>
 
         <sidebar :links="[