From 728a4a4f39c4089939fdb9973672af0d8b8e717a Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Thu, 21 Mar 2019 18:01:56 +0000
Subject: [PATCH] Extract more CSS components

---
 src/components/Environment/ActionCards.vue    | 14 +++----
 .../Environment/EnvironmentCards.vue          | 40 ++++++++++++++-----
 2 files changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/Environment/ActionCards.vue b/src/components/Environment/ActionCards.vue
index e703f58..8d10d23 100644
--- a/src/components/Environment/ActionCards.vue
+++ b/src/components/Environment/ActionCards.vue
@@ -12,13 +12,13 @@
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__code"></use></svg>
 
           <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+            <li>
               <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="button-list-item">
+            <li>
               <action-card-button label="Switch">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
               </action-card-button>
@@ -32,19 +32,19 @@
           <svg slot="icon" role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__database"></use></svg>
 
           <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+            <li>
               <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">
+            <li>
               <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="button-list-item">
+            <li>
               <action-card-button label="Restore" :disabled="isProduction" :class="{
                 'text-blue-300': !isProduction,
                 'text-grey-500 cursor-not-allowed': isProduction
@@ -61,7 +61,7 @@
           <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>
 
           <ul slot="buttons" class="button-list">
-            <li class="button-list-item">
+            <li>
               <action-card-button label="Copy">
                 <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__copy"></use></svg>
               </action-card-button>
@@ -110,7 +110,7 @@ export default {
   @apply flex -ml-px
 }
 
-.button-list-item {
+.button-list > li {
   @apply w-1/2 flex-1 text-center border-l border-grey-400
 }
 </style>
diff --git a/src/components/Environment/EnvironmentCards.vue b/src/components/Environment/EnvironmentCards.vue
index b6ca9bf..44ac707 100644
--- a/src/components/Environment/EnvironmentCards.vue
+++ b/src/components/Environment/EnvironmentCards.vue
@@ -21,25 +21,25 @@
           </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>
+            <button type="button" class="card-button py-1">
+              <svg 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">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__switch"></use></svg>
+                <svg 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-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>
+            <button type="button" class="card-button py-1 border-t border-grey-400">
+              <svg 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">
-                <svg class="h-6 w-6 text-white fill-current" role="presentation"><use xlink:href="/img/icons.symbol.svg#actions__backup"></use></svg>
+                <svg 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-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 type="button" class="card-button border-t border-grey-400 py-3 block">
+              <svg role="presentation"><use xlink:href="/img/icons.symbol.svg#objects__grip-handle"></use></svg>
+              <span class="flex-1">Files</span>
             </button>
           </div>
         </div>
@@ -56,3 +56,25 @@ export default {
   },
 }
 </script>
+
+<style type="postcss" scoped>
+.card-button {
+  @apply flex items-center justify-between text-white pl-1 bg-blue-200 text-sm w-full text-left;
+
+  &:hover {
+    @apply bg-blue-400
+  }
+
+  &:focus {
+    @apply bg-blue-400 outline-none underline
+  }
+}
+
+.card-button > svg {
+  @apply h-6 w-5 text-white mr-2 fill-current
+}
+
+.card-button span svg {
+  @apply h-6 w-6 text-white fill-current
+}
+</style>