From 2e132d8b5a38b08c5086c8492007322e327c2f1f Mon Sep 17 00:00:00 2001
From: Oleksandr Turchyn <lexfox777@gmail.com>
Date: Fri, 13 Sep 2024 20:20:30 +0300
Subject: [PATCH] update submission modal

---
 app/javascript/application.scss               |  8 ++++++--
 app/views/submissions/_detailed_form.html.erb | 12 ++++++------
 app/views/submissions/_email_form.html.erb    |  8 ++++----
 app/views/submissions/_phone_form.html.erb    | 12 ++++++------
 app/views/submissions/_send_email.html.erb    |  2 +-
 app/views/submissions/new.html.erb            |  6 +++---
 6 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/app/javascript/application.scss b/app/javascript/application.scss
index 26ad688a..b29a6bf8 100644
--- a/app/javascript/application.scss
+++ b/app/javascript/application.scss
@@ -51,6 +51,10 @@ button[disabled] .enabled {
   @apply input input-bordered bg-white;
 }
 
+.base-input-slim {
+  @apply input input-bordered bg-white h-10;
+}
+
 .base-textarea {
   @apply textarea textarea-bordered bg-white rounded-3xl;
 }
@@ -100,7 +104,7 @@ button[disabled] .enabled {
 .autocomplete {
   background: white;
   z-index: 1000;
-  font: 14px/22px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font: 16px/25px "-apple-system", BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   overflow: auto;
   box-sizing: border-box;
   @apply border border-base-300 mt-1 rounded-md;
@@ -111,7 +115,7 @@ button[disabled] .enabled {
 }
 
 .autocomplete > div {
-  @apply px-2 py-1 font-normal text-sm;
+  @apply px-2 py-1.5 font-normal;
 }
 
 .autocomplete .group {
diff --git a/app/views/submissions/_detailed_form.html.erb b/app/views/submissions/_detailed_form.html.erb
index a4b4b26f..8c68acbf 100644
--- a/app/views/submissions/_detailed_form.html.erb
+++ b/app/views/submissions/_detailed_form.html.erb
@@ -2,10 +2,10 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="card card-compact bg-base-200" data-targets="dynamic-list.items">
+      <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
         <div class="card-body">
           <div class="absolute right-4 top-5">
-            <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
+            <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
               <%= svg_icon('trash', class: 'w-4 h-4') %>
             </a>
           </div>
@@ -13,25 +13,25 @@
             <% submitters.each_with_index do |item, index| %>
               <submitter-item class="form-control">
                 <% if submitters.size > 1 %>
-                  <label class="label pt-0 pb-1 text-xs">
+                  <label class="label pt-0 pb-1">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                 <% end %>
                 <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                 <submitters-autocomplete data-field="name">
                   <linked-input data-target-id="<%= "detailed_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                    <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Name', required: index.zero?, value: (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '', dir: 'auto', id: "detailed_name_#{item['uuid']}" %>
+                    <%= tag.input type: 'text', name: 'submission[1][submitters][][name]', autocomplete: 'off', class: 'base-input-slim w-full', placeholder: 'Name', required: index.zero?, value: (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '', dir: 'auto', id: "detailed_name_#{item['uuid']}" %>
                   </linked-input>
                 </submitters-autocomplete>
                 <div class="grid <%= 'md:grid-cols-2 gap-1' if submitters.size == 1 %>">
                   <submitters-autocomplete data-field="email">
                     <linked-input data-target-id="<%= "detailed_email_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                      <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Email (optional)" value="<%= item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : '') %>" id="detailed_email_<%= item['uuid'] %>">
+                      <input type="email" multiple name="submission[1][submitters][][email]" autocomplete="off" class="base-input-slim mt-1.5 w-full" placeholder="Email (optional)" value="<%= item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : '') %>" id="detailed_email_<%= item['uuid'] %>">
                     </linked-input>
                   </submitters-autocomplete>
                   <submitters-autocomplete data-field="phone">
                     <linked-input data-target-id="<%= "detailed_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                      <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Phone (optional)" id="detailed_phone_<%= item['uuid'] %>">
+                      <input type="tel" pattern="^\+[0-9\s\-]+$" oninvalid="this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''" oninput="this.setCustomValidity('')" name="submission[1][submitters][][phone]" autocomplete="off" class="base-input-slim mt-1.5 w-full" placeholder="Phone (optional)" id="detailed_phone_<%= item['uuid'] %>">
                     </linked-input>
                   </submitters-autocomplete>
                 </div>
diff --git a/app/views/submissions/_email_form.html.erb b/app/views/submissions/_email_form.html.erb
index cd58298c..5d9c6241 100644
--- a/app/views/submissions/_email_form.html.erb
+++ b/app/views/submissions/_email_form.html.erb
@@ -5,7 +5,7 @@
       <emails-textarea data-bulk-enabled="<%= Docuseal.demo? || !Docuseal.multitenant? || can?(:manage, :bulk_send) %>" data-limit="<%= Docuseal.multitenant? ? (can?(:manage, :bulk_send) ? 40 : 1) : nil %>">
         <submitters-autocomplete data-field="email" class="block relative">
           <autoresize-textarea>
-            <%= f.text_area :emails, required: true, class: 'base-textarea w-full', placeholder: 'Type emails here...' %>
+            <%= f.text_area :emails, required: true, class: 'base-textarea w-full !text-lg', placeholder: 'Type emails here...', rows: 4 %>
           </autoresize-textarea>
         </submitters-autocomplete>
       </emails-textarea>
@@ -13,7 +13,7 @@
   <% else %>
     <dynamic-list class="space-y-4">
       <div class="space-y-4">
-        <div class="card card-compact bg-base-200" data-targets="dynamic-list.items">
+        <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
           <div class="card-body">
             <div class="absolute right-4 top-5">
               <a href="#" data-action="click:dynamic-list#removeItem" class="-top-3 relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
@@ -23,13 +23,13 @@
             <div class="grid md:grid-cols-2 gap-4">
               <% submitters.each_with_index do |item, index| %>
                 <submitter-item class="form-control">
-                  <label class="label pt-0 pb-1 text-xs">
+                  <label class="label pt-0 pb-1">
                     <span class="label-text"> <%= item['name'] %></span>
                   </label>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="email">
                     <linked-input data-target-id="<%= "email_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                      <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Email', required: index.zero?, value: item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : ''), id: "email_#{item['uuid']}" %>
+                      <%= tag.input type: 'email', multiple: true, name: 'submission[1][submitters][][email]', autocomplete: 'off', class: 'base-input-slim w-full', placeholder: 'Email', required: index.zero?, value: item['email'].presence || ((params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.email : ''), id: "email_#{item['uuid']}" %>
                     </linked-input>
                   </submitters-autocomplete>
                 </submitter-item>
diff --git a/app/views/submissions/_phone_form.html.erb b/app/views/submissions/_phone_form.html.erb
index 1ad02235..7066a628 100644
--- a/app/views/submissions/_phone_form.html.erb
+++ b/app/views/submissions/_phone_form.html.erb
@@ -2,10 +2,10 @@
   <% submitters = template.submitters.reject { |e| e['invite_by_uuid'].present? } %>
   <dynamic-list class="space-y-4">
     <div class="space-y-4">
-      <div class="card card-compact bg-base-200" data-targets="dynamic-list.items">
+      <div class="card card-compact bg-base-300/40" data-targets="dynamic-list.items">
         <div class="card-body">
           <div class="absolute right-4 top-5">
-            <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
+            <a href="#" data-action="click:dynamic-list#removeItem" class="<%= submitters.size == 1 ? 'right-2 top-1' : '-top-3' %> relative block w-6 h-6 rounded-lg text-neutral-700 text-center bg-base-300 p-1 hidden hover:bg-neutral hover:text-white">
               <%= svg_icon('trash', class: 'w-4 h-4') %>
             </a>
           </div>
@@ -14,20 +14,20 @@
               <submitter-item class="grid <%= submitters.size > 1 ? 'gap-4' : 'md:grid-cols-2 gap-1' %>">
                 <div class="form-control">
                   <% if submitters.size > 1 %>
-                    <label class="label pt-0 pb-1 text-xs">
+                    <label class="label pt-0 pb-1">
                       <span class="label-text"> <%= item['name'] %></span>
                     </label>
                   <% end %>
                   <input type="hidden" name="submission[1][submitters][][uuid]" value="<%= item['uuid'] %>">
                   <submitters-autocomplete data-field="phone">
                     <linked-input data-target-id="<%= "phone_phone_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                      <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'input input-sm input-bordered w-full', placeholder: 'Phone', required: index.zero?, id: "phone_phone_#{item['uuid']}" %>
+                      <%= tag.input type: 'tel', pattern: '^\+[0-9\s\-]+$', oninvalid: "this.value ? this.setCustomValidity('Use internatioanl format: +1xxx...') : ''", oninput: "this.setCustomValidity('')", name: 'submission[1][submitters][][phone]', autocomplete: 'off', class: 'base-input-slim w-full', placeholder: 'Phone', required: index.zero?, id: "phone_phone_#{item['uuid']}" %>
                     </linked-input>
                   </submitters-autocomplete>
                   <% if submitters.size > 1 %>
                     <submitters-autocomplete data-field="name">
                       <linked-input data-target-id="<%= "phone_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered mt-1.5 w-full" placeholder="Name (optional)" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
+                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="base-input-slim mt-1.5 w-full" placeholder="Name (optional)" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
                       </linked-input>
                     </submitters-autocomplete>
                   <% end %>
@@ -36,7 +36,7 @@
                   <div class="form-control flex">
                     <submitters-autocomplete data-field="name">
                       <linked-input data-target-id="<%= "phone_name_#{item['linked_to_uuid']}" if item['linked_to_uuid'].present? %>">
-                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="input input-sm input-bordered w-full" placeholder="Name (optional)" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
+                        <input type="text" name="submission[1][submitters][][name]" autocomplete="off" class="base-input-slim w-full" placeholder="Name (optional)" value="<%= (params[:selfsign] && index.zero?) || item['is_requester'] ? current_user.full_name : '' %>" dir="auto" id="phone_name_<%= item['uuid'] %>">
                       </linked-input>
                     </submitters-autocomplete>
                   </div>
diff --git a/app/views/submissions/_send_email.html.erb b/app/views/submissions/_send_email.html.erb
index 04f352fa..b1353c0f 100644
--- a/app/views/submissions/_send_email.html.erb
+++ b/app/views/submissions/_send_email.html.erb
@@ -30,7 +30,7 @@
   <% end %>
 </div>
 <% config = AccountConfigs.find_or_initialize_for_key(current_account, AccountConfig::SUBMITTER_INVITATION_EMAIL_KEY) %>
-<div id="message_field" class="card card-compact bg-base-200 hidden">
+<div id="message_field" class="card card-compact bg-base-300/40 hidden">
   <div class="card-body">
     <div class="form-control space-y-2">
       <div class="form-control">
diff --git a/app/views/submissions/new.html.erb b/app/views/submissions/new.html.erb
index fd08441c..2cbff3d7 100644
--- a/app/views/submissions/new.html.erb
+++ b/app/views/submissions/new.html.erb
@@ -1,6 +1,6 @@
-<%= render 'shared/turbo_modal', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
+<%= render 'shared/turbo_modal_large', title: params[:selfsign] ? 'Add Recipients' : 'Add New Recipients' do %>
   <% options = [['via Email', 'email'], ['via Phone', 'phone'], %w[Detailed detailed], ['Upload List', 'list']].compact %>
-  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center mt-4 block">
+  <toggle-visible data-element-ids="<%= options.map(&:last).to_json %>" class="relative text-center px-2 mt-4 block">
     <div class="join">
       <% options.each_with_index do |(label, value), index| %>
         <span>
@@ -12,7 +12,7 @@
       <% end %>
     </div>
   </toggle-visible>
-  <div class="mt-4">
+  <div class="px-5 my-4">
     <div id="email">
       <%= render 'email_form', template: @template %>
     </div>