From b6dd23aebec58fca6ff9018aa6a431a293cf295e Mon Sep 17 00:00:00 2001
From: Oliver Davies <oliver@oliverdavies.uk>
Date: Fri, 28 Dec 2018 18:40:28 +0000
Subject: [PATCH] Use computed properties for message colours

---
 src/components/DrupalMessage.vue | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/components/DrupalMessage.vue b/src/components/DrupalMessage.vue
index e7bd757..90792ce 100644
--- a/src/components/DrupalMessage.vue
+++ b/src/components/DrupalMessage.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="pl-2 rounded-sm" :class="{'bg-green': type == 'status'}">
-    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="{'border-green-light text-green-dark bg-green-lighter': type == 'status'}">
-      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-2" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
+    <div :class="[ wrapperClasses, wrapperClasses ? 'pl-2 rounded-sm' : '' ]">
+    <div class="py-4 pl-3 pr-4 mb-4 border flex items-center rounded-sm" :class="classes">
+      <svg v-if="type == 'status'" class="fill-current w-4 h-4 text-green mr-3" xmlns="http://www.w3.org/2000/svg"><path d="M6.464 13.676a.502.502 0 0 1-.707 0L.797 8.721a.502.502 0 0 1 0-.707l1.405-1.407a.5.5 0 0 1 .707 0l2.849 2.848a.504.504 0 0 0 .707 0l6.629-6.626a.502.502 0 0 1 .707 0l1.404 1.404a.504.504 0 0 1 0 .707l-8.741 8.736z"/></svg>
       <slot></slot>
     </div>
   </div>
@@ -12,5 +12,19 @@ export default {
   props: {
     type: String,
   },
+
+  computed: {
+    classes: function () {
+      return {
+        status: 'border-green-light text-green-dark bg-green-lighter',
+      }[this.type]
+    },
+
+    wrapperClasses: function () {
+      return {
+        status: 'bg-green',
+      }[this.type]
+    },
+  }
 }
 </script>