wip: use new toast message

Lewis Youl · Lewis Youl · commit c4ac81afe7fb · 2021-03-13T21:12:55.000Z
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -30,8 +30,8 @@
   </head>
 
   <body>
-    <%= render partial: 'shared/toast' %>
     <%= render partial: 'shared/topbar' %>
+    <!-- This example requires Tailwind CSS v2.0+ -->
 
     <div class="max-w-6xl mx-auto py-4 md:px-4 lg:px-8">
       <div class="min-h-screen bg-gray-100">
@@ -47,5 +47,6 @@
       </div>
     </div>
 
+    <%= render partial: 'shared/toast' %>
   </body>
 </html>
diff --git a/app/views/shared/_toast.html.erb b/app/views/shared/_toast.html.erb
@@ -1,12 +1,37 @@
+
+
 <div
+  class="z-20 fixed bottom-0 left-0 right-0 mx-auto mb-4 max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto ring-1 ring-black ring-opacity-5 overflow-hidden hidden"
   id="toast"
-  class="toast--container-notice hidden"
-  data-toast-notice-class="toast--container-notice"
-  data-toast-alert-class="toast--container-alert"
+  data-toast-notice-class="''"
+  data-toast-alert-class="''"
   data-controller="toast"
   data-toast-target="toast"
   data-toast-notice="<%= notice %>"
   data-toast-alert="<%= alert %>"
 >
-  <span data-toast-target="message"></span>
+  <div class="p-4">
+    <div class="flex items-start">
+      <div class="flex-shrink-0">
+        <!-- Heroicon name: outline/check-circle -->
+        <svg class="h-6 w-6 text-green-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+          <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>
+      <div class="ml-3 w-0 flex-1 pt-0.5">
+        <p class="text-sm font-medium text-gray-900" data-toast-target="message">
+          Successfully saved!
+        </p>
+      </div>
+      <div class="ml-4 flex-shrink-0 flex">
+        <button class="bg-white rounded-md inline-flex text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
+          <span class="sr-only">Close</span>
+          <!-- Heroicon name: solid/x -->
+          <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </div>
 </div>
