Merge pull request #5442 from nebulab/rainerd/admin/toast-improvements

[Admin] Enhance toast component: Background color and animations
solidusio · Oct 20, 2023 · b4690fb · b4690fb
2 parents f2303d9 + 788d7f0
commit b4690fb
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 17 deletions.
diff --git a/admin/app/components/solidus_admin/ui/badge/component.rb b/admin/app/components/solidus_admin/ui/badge/component.rb
@@ -4,12 +4,12 @@ class SolidusAdmin::UI::Badge::Component < SolidusAdmin::BaseComponent
   include ViewComponent::InlineTemplate
 
   COLORS = {
-    graphite_light: "text-black bg-graphiteLight",
+    graphite_light: "text-black bg-graphite-light",
     red: 'text-red-500 bg-red-100',
     green: 'text-forest bg-seafoam',
     blue: 'text-blue bg-sky',
     black: 'text-white bg-black',
-    yellow: 'text-orange bg-papayaWhip',
+    yellow: 'text-orange bg-papaya-whip',
   }.freeze
 
   SIZES = {

diff --git a/admin/app/components/solidus_admin/ui/toast/component.html.erb b/admin/app/components/solidus_admin/ui/toast/component.html.erb
@@ -1,21 +1,23 @@
 <div
   class="
+    flex items-center justify-between
     rounded inline-block px-3 py-2
+    transform translate-y-full opacity-0 transition-all duration-500
     <%= SCHEMES.fetch(@scheme.to_sym).join(' ') %>
   "
   data-controller="<%= stimulus_id %>"
-  data-<%= stimulus_id %>-closing-class="transform opacity-0 transition duration-500"
+  data-<%= stimulus_id %>-animation-class="translate-y-full opacity-0"
   data-<%= stimulus_id %>-transition-value="500"
   role="dialog"
   aria-label="<%= t(".#{@scheme}_label") %>"
   aria-live="polite"
 >
-  <%= icon_tag(@icon, class: 'inline-block w-[1.125rem] h-[1.125rem] mr-3 fill-current') if @icon %>
+  <%= icon_tag(@icon, class: 'w-[1.125rem] h-[1.125rem] mr-2 fill-current') if @icon %>
 
-  <p class="inline-block body-tiny-bold"><%= @text %></p>
+  <p class="body-tiny-bold leading-none"><%= @text %></p>
 
   <button
-    class="inline-block ml-3 align-text-bottom"
+    class="ml-2 align-text-bottom"
     title="<%= t('.close_text') %>"
     data-action="<%= stimulus_id %>#close"
     aria-label="<%= t('.close_text') %>"

diff --git a/admin/app/components/solidus_admin/ui/toast/component.js b/admin/app/components/solidus_admin/ui/toast/component.js
@@ -2,16 +2,19 @@ import { Controller } from '@hotwired/stimulus'
 
 export default class extends Controller {
   static targets = ['closeButton']
-  static classes = ['closing']
+  static classes = ['animation']
   static values = { transition: Number }
 
-  connect () {
-    // Give focus to the close button
-    this.closeButtonTarget.focus();
+  connect() {
+    this.closeButtonTarget.focus()
+
+    requestAnimationFrame(() => {
+      this.element.classList.remove(...this.animationClasses)
+    })
   }
 
-  close () {
-    this.element.classList.add(...this.closingClasses);
+  close() {
+    this.element.classList.add(...this.animationClasses)
     setTimeout(() => this.element.remove(), this.transitionValue)
   }
 }
diff --git a/admin/app/components/solidus_admin/ui/toast/component.rb b/admin/app/components/solidus_admin/ui/toast/component.rb
@@ -3,7 +3,7 @@
 class SolidusAdmin::UI::Toast::Component < SolidusAdmin::BaseComponent
   SCHEMES = {
     default: %w[
-      bg-gray-800 text-white
+      bg-full-black text-white
     ],
     error: %w[
       bg-red-500 text-white

diff --git a/admin/app/views/solidus_admin/base/unauthorized.html.erb b/admin/app/views/solidus_admin/base/unauthorized.html.erb
@@ -1,4 +1,4 @@
 <div class="p-4">
-  <h1 class="text-3xl font-semibold text-solidusRed mb-4"><%= t('solidus_admin.errors.authorization.access_denied.title') %></h1>
+  <h1 class="text-3xl font-semibold text-solidus-red mb-4"><%= t('solidus_admin.errors.authorization.access_denied.title') %></h1>
   <p class="text-lg text-gray-700"><%= t('solidus_admin.errors.authorization.access_denied.description') %></p>
 </div>
diff --git a/admin/config/solidus_admin/tailwind.config.js.erb b/admin/config/solidus_admin/tailwind.config.js.erb
@@ -18,10 +18,10 @@ module.exports = {
         current: "currentColor",
 
         // Primary palette
-        solidusRed: "#ef3023",
+        'solidus-red': "#ef3023",
         black: "#222222",
         graphite: "#c7ccc7",
-        graphiteLight: "#d8dad8",
+        'graphite-light': "#d8dad8",
         sand: "#f5f3f0",
         white: "#ffffff",
 
@@ -37,9 +37,10 @@ module.exports = {
         sky: "#cbdff1",
         seafoam: "#c1e0de",
         dune: "#e6bf9b",
+        'full-black': "#000000",
 
         // Extra colors (not part of the original palette)
-        papayaWhip: "#f9e3d9",
+        'papaya-whip': "#f9e3d9",
 
         // UI Red
         red: {