From 81f376cf50a30c452dcf5b93437e98f2d2ee4e95 Mon Sep 17 00:00:00 2001
From: Alex Turchyn <lexfox777@gmail.com>
Date: Mon, 29 May 2023 23:08:55 +0300
Subject: [PATCH] add modal style

---
 app/javascript/application.js          |  4 ++++
 app/views/flows/new.html.erb           | 12 +++++++-----
 app/views/shared/_turbo_modal.html.erb | 20 +++++++++++++-------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/app/javascript/application.js b/app/javascript/application.js
index 226850d3..b4db160c 100644
--- a/app/javascript/application.js
+++ b/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)
diff --git a/app/views/flows/new.html.erb b/app/views/flows/new.html.erb
index b7e518e4..e47d9dd9 100644
--- a/app/views/flows/new.html.erb
+++ b/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 %>
diff --git a/app/views/shared/_turbo_modal.html.erb b/app/views/shared/_turbo_modal.html.erb
index bcc4dd7b..ab764cea 100644
--- a/app/views/shared/_turbo_modal.html.erb
+++ b/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>