Merge pull request #68 from TelosLabs/feature/update-flash-messages

Update flash messages

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)
+  }
+}

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>

app/views/layouts/application.html.erb

@@ -24,8 +24,7 @@
       <% end %>
       <% flash.each do |type, message| %>
         <% if message.present? && message.is_a?(String) %>
-          <div><%= notice %></div>
-          <div><%= alert %></div>
+          <%= render partial: "layouts/flash_message", locals: { message: message }%>
         <% end %>
       <% end %>
       <%= yield %>

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]
       },
@@ -21,13 +24,14 @@ module.exports = {
         'gray-7': '#D7D7D8',
         'gray-6': '#C6C6C8',
         'gray-5': '#A2A2A2',
+        'gray-3': '#262626',
         'purple-dark': '#432463',
         'purple-light': '#4E2A73',
         red: '#CB0C1C',
         blue: '#0A4E6B',
         'green-dark': '#62C554',
         'green-light': '#D8F1D4'
-      }
+      },
     }
   },
   plugins: [