From 43b99338b08ef638f3ca833aa1457e69b758d0ed Mon Sep 17 00:00:00 2001
From: pvincent <pvincent@artcode.re>
Date: Fri, 29 Aug 2025 09:30:56 +0000
Subject: [PATCH] toastify css apply tailwind

---
 .vscode/settings.json                         |  4 ++--
 app/assets/stylesheets/toastify.css           | 23 -------------------
 app/assets/tailwind/application.css           |  6 ++---
 app/assets/tailwind/toastify.css              | 18 +++++++++++++++
 .../controllers/flash_controller.js           |  2 +-
 .../controllers/hello_controller.js           |  7 ------
 .../layouts/components/_flashbar.html.erb     | 17 +++++++++++---
 app/views/notification/index.html.erb         | 17 +-------------
 8 files changed, 38 insertions(+), 56 deletions(-)
 delete mode 100644 app/assets/stylesheets/toastify.css
 create mode 100644 app/assets/tailwind/toastify.css
 delete mode 100644 app/javascript/controllers/hello_controller.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 7b4d521..450b40d 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -26,7 +26,7 @@
   },
   "files.associations": {
     "*.html.erb": "erb",
-    "*.tailwind.css": "tailwindcss",
+    "**/app/assets/tailwind/*.css": "tailwindcss",
   },
   "tailwindCSS.emmetCompletions": true,
   "todohighlight.enableDiagnostics": true,
@@ -53,4 +53,4 @@
   "class-collapse.style.openCollapseOpacity": 0.7,
   "class-collapse.style.placeholderTextColor": "#FFFF0055",
   "class-collapse.style.placeholderText": "≈",
-}    
+}
\ No newline at end of file
diff --git a/app/assets/stylesheets/toastify.css b/app/assets/stylesheets/toastify.css
deleted file mode 100644
index aed8c71..0000000
--- a/app/assets/stylesheets/toastify.css
+++ /dev/null
@@ -1,23 +0,0 @@
-.toastify {
-  position: fixed;
-  opacity: 0;
-  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
-  cursor: pointer;
-  max-width: inherit;
-  z-index: 1000;
-}
-
-.toastify.on {
-  opacity: 1;
-}
-
-.toastify-center {
-  margin-left: auto;
-  margin-right: auto;
-  left: 0;
-  right: 0;
-}
-
-.toastify-top {
-  top: -150px;
-}
\ No newline at end of file
diff --git a/app/assets/tailwind/application.css b/app/assets/tailwind/application.css
index c5e3944..e02c43f 100644
--- a/app/assets/tailwind/application.css
+++ b/app/assets/tailwind/application.css
@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 
 @plugin "./daisyui.js" {
   themes: dracula --default;
@@ -8,6 +8,4 @@
   logs: false;
 }
 
-.toast-close {
-  @apply btn btn-outline;
-}
\ No newline at end of file
+@import './toastify.css';
diff --git a/app/assets/tailwind/toastify.css b/app/assets/tailwind/toastify.css
new file mode 100644
index 0000000..9b01974
--- /dev/null
+++ b/app/assets/tailwind/toastify.css
@@ -0,0 +1,18 @@
+.toastify {
+  @apply 
+    fixed max-w-1/2 z-1000
+    cursor-progress
+    opacity-0
+    transition-all duration-300 ease-in-out;
+  
+  .toast-close { 
+    @apply invisible btn btn-outline btn-sm; 
+  }
+  
+  &:hover { 
+    .toast-close { @apply visible; } 
+  }
+}
+
+.toastify.on { @apply opacity-100; }
+.toastify-top { @apply -top-150; }
\ No newline at end of file
diff --git a/app/javascript/controllers/flash_controller.js b/app/javascript/controllers/flash_controller.js
index 1641bdc..fa69bb7 100644
--- a/app/javascript/controllers/flash_controller.js
+++ b/app/javascript/controllers/flash_controller.js
@@ -26,7 +26,7 @@ export default class extends Controller {
   }
 
   iconNotice() { return this.icon('M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z') }
-  iconAlert() { return this.icon('M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z') }
+  iconAlert() { return this.icon('M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z') }
   className(toastType) { return `alert alert-${toastType} inset-ring-2 shadow-xl/50` }
   classNameNotice() { return this.className('success') }
   classNameAlert() { return this.className('error') }
diff --git a/app/javascript/controllers/hello_controller.js b/app/javascript/controllers/hello_controller.js
deleted file mode 100644
index 5975c07..0000000
--- a/app/javascript/controllers/hello_controller.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}
diff --git a/app/views/layouts/components/_flashbar.html.erb b/app/views/layouts/components/_flashbar.html.erb
index 9d48c57..4c28b71 100644
--- a/app/views/layouts/components/_flashbar.html.erb
+++ b/app/views/layouts/components/_flashbar.html.erb
@@ -1,14 +1,25 @@
 <div 
-    id='flashbar' 
-    style='max-width: calc(50% - 20px)' 
+    id='flashbar'
+    class='flex justify-center'
     data-controller='flash' data-turbo-permanent
     data-action="popup-toast@window->flash#popup" 
   >
   <!-- 
   here is a shadow root which serves as a placeholder for the toaster area.
-  max-width gets inherited from this node.
   data-turbo-permant prevents morphing to dismiss active toasts
   -->
+
+  <%# <div role="alert" class="toastify on toastify-center alert alert-success inset-ring-2">
+    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+    </svg>
+    <div>
+      super long sentence which should wrap at least once or various lines.
+      super long sentence which should wrap at least once or various lines.
+    </div>
+    <button class='toast-close'>x</button>
+  </div> %>
+
 </div>
 
 <div class='hidden'
diff --git a/app/views/notification/index.html.erb b/app/views/notification/index.html.erb
index c94ce8d..83d4a5f 100644
--- a/app/views/notification/index.html.erb
+++ b/app/views/notification/index.html.erb
@@ -23,21 +23,6 @@
   </ul>
 </div>
 
-<%# <section class='w-full max-w-96'>
-  <div role="alert" class="alert alert-success inset-ring-2">
-    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
-      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-    </svg>
-    <div>
-      Your purchase has been confirmed!<br/>
-      Your purchase has been confirmed!<br/>
-      Your purchase has been confirmed!<br/>
-    </div>
-    <button class='toast-close'>x</button>
-  </div>
-
-</section> %>
-
 <div>
   <h2 class="text-bold text-2xl">By using <span class="italic">stimulus</span></h2>
   <ul class="flex flex-row list bg-base-100 rounded-box shadow-md">
@@ -50,7 +35,7 @@
     <li class="p-4 pb-2 text-xs opacity-60 tracking-wide">
       <%= link_to 'Alert', "javascript: window.dispatchEvent(new CustomEvent('popup-toast', {detail: {
         type: 'alert',
-        message: 'this is an alert from Stimulus'
+        message: 'this is an alert'
       }}))", class: 'btn btn-secondary'%>
     </li>
   </ul>