add modal style

app/javascript/application.js

@@ -9,6 +9,10 @@ import FileDropzone from './elements/file_dropzone'
 
 import FlowBuilder from './flow_builder/builder'
 
+document.addEventListener('turbo:before-cache', () => {
+  window.flash?.remove()
+})
+
 window.customElements.define('toggle-visible', ToggleVisible)
 window.customElements.define('disable-hidden', DisableHidden)
 window.customElements.define('turbo-modal', TurboModal)

app/views/flows/new.html.erb

@@ -1,9 +1,11 @@
-<%= render 'shared/turbo_modal' do %>
+<%= render 'shared/turbo_modal', title: 'New Flow' do %>
   <%= form_for @flow, data: { turbo_frame: :_top } do |f| %>
-    <div>
-      <%= f.label :name %>
-      <%= f.text_field :name, required: true %>
+    <div class="form-control">
+      <%= f.label :name, 'Flow name', class: 'label' %>
+      <%= f.text_field :name, required: true, class: 'base-input' %>
+    </div>
+    <div class="form-control mt-4">
+      <%= f.button button_title('Create'), class: 'base-button' %>
     </div>
-    <%= f.button button_title %>
   <% end %>
 <% end %>

app/views/shared/_turbo_modal.html.erb

@@ -1,11 +1,17 @@
 <turbo-frame id="modal">
-  <turbo-modal class="left-52 absolute top-0 z-50 bg-white h-[100vh] w-full">
-    <div>
-      Modal window Title
-      <a href="#" data-action="click:turbo-modal#close">&times;</a>
-    </div>
-    <div>
-      <%= yield %>
+  <turbo-modal class="modal modal-open items-start">
+    <div class="modal-box pt-4 pb-6 px-6 mt-20">
+      <% if local_assigns[:title] %>
+        <div class="flex justify-between items-center border-b pb-2 mb-2 font-medium">
+          <span>
+            <%= local_assigns[:title] %>
+          </span>
+          <a href="#" class="text-xl" data-action="click:turbo-modal#close">&times;</a>
+        </div>
+      <% end %>
+      <div>
+        <%= yield %>
+      </div>
     </div>
   </turbo-modal>
 </turbo-frame>