From 7d6d9984ca63e1a6450eec8041e362aaa04bcc9b Mon Sep 17 00:00:00 2001
From: Edgar Bustillos <edgar_daniel_1996@hotmail.com>
Date: Fri, 26 Jul 2024 11:33:02 -0600
Subject: [PATCH 1/2] update flash messages

---
 .../controllers/closable_controller.js           | 16 ++++++++++++++++
 app/views/layouts/application.html.erb           |  7 +++++--
 config/tailwind.config.js                        |  4 ++++
 3 files changed, 25 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/closable_controller.js

diff --git a/app/javascript/controllers/closable_controller.js b/app/javascript/controllers/closable_controller.js
new file mode 100644
index 00000000..b566213b
--- /dev/null
+++ b/app/javascript/controllers/closable_controller.js
@@ -0,0 +1,16 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  connect () {
+    this.close()
+  }
+
+  close (event) {
+    setTimeout(() => {
+      this.element.classList.add('opacity-0')
+      setTimeout(() => {
+        this.element.remove()
+      }, 300)
+    }, 3000)
+  }
+}
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 5d6c07b8..64351776 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -24,8 +24,11 @@
       <% end %>
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
-          <div><%= notice %></div>
-          <div><%= alert %></div>
+          <div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-20">
+            <div data-controller="closable" class="bg-gray-3 rounded-lg px-5 py-4 absolute transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
+              <%= message %>
+            </div>
+          </div>
         <% end %>
       <% end %>
       <%= yield %>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index 8f38f935..c5b416d3 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -17,6 +17,10 @@ module.exports = {
       },
       colors: {
         gray: '#C6C6C8',
+        'gray-8': '#F3F2F8',
+        'gray-7': '#D7D7D8',
+        'gray-6': '#C6C6C8',
+        'gray-3': '#262626',
         'purple-dark': '#432463',
         'purple-light': '#4E2A73',
         red: '#CB0C1C',

From 1e503ccf995ede437e4a1246bfce4fa46ce33f0f Mon Sep 17 00:00:00 2001
From: Edgar Bustillos <edgar_daniel_1996@hotmail.com>
Date: Mon, 29 Jul 2024 14:29:36 -0600
Subject: [PATCH 2/2] update flash message

---
 app/views/layouts/_flash_message.html.erb | 5 +++++
 app/views/layouts/application.html.erb    | 6 +-----
 config/tailwind.config.js                 | 5 ++++-
 3 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 app/views/layouts/_flash_message.html.erb

diff --git a/app/views/layouts/_flash_message.html.erb b/app/views/layouts/_flash_message.html.erb
new file mode 100644
index 00000000..dfdca38d
--- /dev/null
+++ b/app/views/layouts/_flash_message.html.erb
@@ -0,0 +1,5 @@
+<div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-20">
+    <div data-controller="closable" class="bg-black/70 shadow-simple backdrop-blur-[25px] rounded-lg px-5 py-4 absolute transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
+        <%= message %>
+    </div>
+</div>
\ No newline at end of file
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 4479dd0c..f6d52aa0 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -24,11 +24,7 @@
       <% end %>
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
-          <div class="flex flex-col items-center justify-center fixed bottom-[64px] w-full z-20">
-            <div data-controller="closable" class="bg-gray-3 rounded-lg px-5 py-4 absolute transition-all bottom-0 max-w-screen-sm text-white z-20 sticky">
-              <%= message %>
-            </div>
-          </div>
+          <%= render partial: "layouts/flash_message", locals: { message: message }%>
         <% end %>
       <% end %>
       <%= yield %>
diff --git a/config/tailwind.config.js b/config/tailwind.config.js
index c5b416d3..2ba76973 100644
--- a/config/tailwind.config.js
+++ b/config/tailwind.config.js
@@ -9,6 +9,9 @@ module.exports = {
   ],
   theme: {
     extend: {
+      boxShadow: {
+        'simple': '0px 0px 25px 0px rgba(0, 0, 0, 0.50)'
+      },
       fontFamily: {
         sans: ['Roboto', ...defaultTheme.fontFamily.sans]
       },
@@ -27,7 +30,7 @@ module.exports = {
         blue: '#0A4E6B',
         'green-dark': '#62C554',
         'green-light': '#D8F1D4'
-      }
+      },
     }
   },
   plugins: [