From 8f2a6f57e09482ad3ae29a5fb928806a2980da75 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Wed, 22 May 2019 11:53:51 -0400
Subject: [PATCH] Improve flash messages

---
 resources/js/Shared/FlashMessages.vue  | 8 ++++----
 resources/js/Shared/TrashedMessage.vue | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/resources/js/Shared/FlashMessages.vue b/resources/js/Shared/FlashMessages.vue
index 6bc99c5..be79da3 100644
--- a/resources/js/Shared/FlashMessages.vue
+++ b/resources/js/Shared/FlashMessages.vue
@@ -1,15 +1,15 @@
 <template>
   <div>
-    <div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green rounded max-w-lg">
+    <div v-if="$page.flash.success && show" class="mb-8 flex items-center justify-between bg-green-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><polygon points="0 11 2 9 7 14 18 3 20 5 7 18" /></svg>
         <div class="py-4 text-white text-sm font-medium">{{ $page.flash.success }}</div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
-        <svg class="block w-2 h-2 fill-green-dark group-hover:fill-green-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
+        <svg class="block w-2 h-2 fill-green-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
       </button>
     </div>
-    <div v-if="Object.keys($page.errors).length > 0 && show" class="mb-8 flex items-center justify-between bg-red-light rounded max-w-lg">
+    <div v-if="Object.keys($page.errors).length > 0 && show" class="mb-8 flex items-center justify-between bg-red-500 rounded max-w-3xl">
       <div class="flex items-center">
         <svg class="ml-4 mr-2 flex-no-shrink w-4 h-4 fill-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zm1.41-1.41A8 8 0 1 0 15.66 4.34 8 8 0 0 0 4.34 15.66zm9.9-8.49L11.41 10l2.83 2.83-1.41 1.41L10 11.41l-2.83 2.83-1.41-1.41L8.59 10 5.76 7.17l1.41-1.41L10 8.59l2.83-2.83 1.41 1.41z" /></svg>
         <div class="py-4 text-white text-sm font-medium">
@@ -18,7 +18,7 @@
         </div>
       </div>
       <button type="button" class="group mr-2 p-2" @click="show = false">
-        <svg class="block w-2 h-2 fill-red-dark group-hover:fill-red-darker" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
+        <svg class="block w-2 h-2 fill-red-800 group-hover:fill-white" xmlns="http://www.w3.org/2000/svg" width="235.908" height="235.908" viewBox="278.046 126.846 235.908 235.908"><path d="M506.784 134.017c-9.56-9.56-25.06-9.56-34.62 0L396 210.18l-76.164-76.164c-9.56-9.56-25.06-9.56-34.62 0-9.56 9.56-9.56 25.06 0 34.62L361.38 244.8l-76.164 76.165c-9.56 9.56-9.56 25.06 0 34.62 9.56 9.56 25.06 9.56 34.62 0L396 279.42l76.164 76.165c9.56 9.56 25.06 9.56 34.62 0 9.56-9.56 9.56-25.06 0-34.62L430.62 244.8l76.164-76.163c9.56-9.56 9.56-25.06 0-34.62z" /></svg>
       </button>
     </div>
   </div>
diff --git a/resources/js/Shared/TrashedMessage.vue b/resources/js/Shared/TrashedMessage.vue
index 3143c45..55a72ef 100644
--- a/resources/js/Shared/TrashedMessage.vue
+++ b/resources/js/Shared/TrashedMessage.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="p-4 bg-yellow-400 rounded flex items-center justify-between max-w-3xl">
     <div class="flex items-center">
-      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-900 mr-2" />
-      <div class="text-yellow-900">
+      <icon name="trash" class="flex-shrink-0 w-4 h-4 fill-yellow-800 mr-2" />
+      <div class="text-sm font-medium text-yellow-800">
         <slot />
       </div>
     </div>
-    <button class="text-yellow-900 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
+    <button class="text-sm text-yellow-800 hover:underline" tabindex="-1" type="button" @click="$emit('restore')">Restore</button>
   </div>
 </template>