From a42d2c551409a631df444c92af48fd6c59a50af0 Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Tue, 5 Mar 2019 12:15:36 +0000
Subject: [PATCH] Extract tag component

---
 src/App.vue                                    | 6 ++++++
 src/components/Application/ApplicationTags.vue | 4 ++--
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fcd3c43..2658b28 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -22,4 +22,10 @@
   &:hover,
   &:focus
     @apply bg-grey-darker
+
+.tag
+  @apply text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2 mb-2
+
+.tag.is-type
+  @apply bg-blue-light border-blue-light text-white
 </style>
diff --git a/src/components/Application/ApplicationTags.vue b/src/components/Application/ApplicationTags.vue
index b9abf60..662d229 100644
--- a/src/components/Application/ApplicationTags.vue
+++ b/src/components/Application/ApplicationTags.vue
@@ -1,8 +1,8 @@
 <template>
   <div>
     <ul class="list-reset flex flex-wrap -mr-2 -mb-2">
-      <li class="text-2xs uppercase py-1 px-2 rounded border border-transparent bg-blue-light text-white mr-2 mb-2">{{ type }}</li>
-      <li class="text-2xs uppercase py-1 px-2 rounded border border-grey bg-white mr-2 mb-2">{{ level }}</li>
+      <li class="tag is-type">{{ type }}</li>
+      <li class="tag">{{ level }}</li>
     </ul>
   </div>
 </template>