toastify css apply tailwind

.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": "≈",
-}    
+}

app/assets/stylesheets/toastify.css

@@ -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;
-}

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;
-}
+@import './toastify.css';

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; }

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

app/javascript/controllers/hello_controller.js

@@ -1,7 +0,0 @@
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  connect() {
-    this.element.textContent = "Hello World!"
-  }
-}

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'

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>