From b6bb10b45ca00c1033899b22477930402853daf8 Mon Sep 17 00:00:00 2001 From: Alex Turchyn Date: Tue, 13 Jun 2023 23:01:52 +0300 Subject: [PATCH] add initial styles for start form --- app/javascript/form.scss | 27 +++++++++++++ app/views/icons/_download.html.erb | 6 +++ app/views/icons/_mail_forward.html.erb | 7 ++++ app/views/layouts/form.html.erb | 8 ++-- app/views/shared/_button_title.html.erb | 4 +- app/views/shared/_logo.html.erb | 2 +- app/views/start_form/show.html.erb | 51 ++++++++++++++++++++---- app/views/submit_form/completed.html.erb | 44 +++++++++++++++++--- 8 files changed, 130 insertions(+), 19 deletions(-) create mode 100644 app/views/icons/_download.html.erb create mode 100644 app/views/icons/_mail_forward.html.erb diff --git a/app/javascript/form.scss b/app/javascript/form.scss index 993772d6..8abce89f 100644 --- a/app/javascript/form.scss +++ b/app/javascript/form.scss @@ -30,3 +30,30 @@ button .enabled { button[disabled] .enabled { display: none; } + +button .disabled { + display: none; +} + +button[disabled] .disabled { + display: initial; +} + +button .enabled { + display: initial; +} + +button[disabled] .enabled { + display: none; +} + +.btn { + @apply no-animation; +} + +.base-input { + @apply input input-bordered bg-white; +} +.base-button { + @apply btn btn-neutral text-white text-base; +} diff --git a/app/views/icons/_download.html.erb b/app/views/icons/_download.html.erb new file mode 100644 index 00000000..bd8b92ae --- /dev/null +++ b/app/views/icons/_download.html.erb @@ -0,0 +1,6 @@ + + + + + + diff --git a/app/views/icons/_mail_forward.html.erb b/app/views/icons/_mail_forward.html.erb new file mode 100644 index 00000000..f2e09dca --- /dev/null +++ b/app/views/icons/_mail_forward.html.erb @@ -0,0 +1,7 @@ + + + + + + + diff --git a/app/views/layouts/form.html.erb b/app/views/layouts/form.html.erb index be847490..7836adf6 100644 --- a/app/views/layouts/form.html.erb +++ b/app/views/layouts/form.html.erb @@ -1,5 +1,5 @@ - + Docuseal @@ -11,7 +11,9 @@ <%= stylesheet_pack_tag 'form', media: 'all' %> <%= yield :head %> </head> - <body class="font-sans antialiased font-normal leading-normal bg-white text-gray-700"> - <%= yield %> + <body class="h-full"> + <div class="max-w-6xl mx-auto px-4 md:px-2"> + <%= yield %> + </div> </body> </html> diff --git a/app/views/shared/_button_title.html.erb b/app/views/shared/_button_title.html.erb index 99d9cbfb..9e8e1968 100644 --- a/app/views/shared/_button_title.html.erb +++ b/app/views/shared/_button_title.html.erb @@ -1,11 +1,11 @@ <span class="enabled"> - <span class="flex justify-center space-x-3"> + <span class="flex justify-center space-x-2"> <%= icon if icon %> <span><%= title %></span> </span> </span> <span class="disabled"> - <span class="flex justify-center space-x-3"> + <span class="flex justify-center space-x-2"> <%= svg_icon('loader', class: 'w-6 h-6 animate-spin') %> <span><%= disabled_with %>...</span> </span> diff --git a/app/views/shared/_logo.html.erb b/app/views/shared/_logo.html.erb index e0555585..f0d5bef2 100644 --- a/app/views/shared/_logo.html.erb +++ b/app/views/shared/_logo.html.erb @@ -1,4 +1,4 @@ -<svg height="37px" width="37px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.998 511.998" xml:space="preserve"> +<svg height="<%= local_assigns.fetch(:height, '37px') %>" width="<%= local_assigns.fetch(:width, '37px') %>" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 511.998 511.998" xml:space="preserve"> <path style="fill:#C8AF9B;" d="M503.999,247.999c0,128.13-111.033,240-248,240S8,376.129,8,247.999s111.033-224,248-224 S503.999,119.869,503.999,247.999z" /> <path style="fill:#AA968C;" d="M255.999,23.999C119.033,23.999,8,119.868,8,247.999c0,24.631,4.138,48.647,11.74,71.397 diff --git a/app/views/start_form/show.html.erb b/app/views/start_form/show.html.erb index ddcd6193..14e33f9b 100644 --- a/app/views/start_form/show.html.erb +++ b/app/views/start_form/show.html.erb @@ -1,9 +1,44 @@ -You have been invited to submit template <%= @template.name %> -<%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put do |f| %> - Provide youe email to start - <div> - <%= f.label :email %> - <%= f.email_field :email, required: true %> +<div class="max-w-xl mx-auto px-2 mt-12"> + <div class="card bg-base-200"> + <div class="card-body"> + <div class="space-y-4 mx-auto"> + <div class="space-y-4"> + <div class="flex items-center justify-center"> + <div class="flex items-center"> + <div class="mr-3"> + <%= render 'shared/logo', width: "50px", height: "50px"%> + </div> + <h1 class="text-5xl font-bold text-center">DocuSeal</h1> + </div> + </div> + <h2 class="text-xl font-semibold text-center">You have been invited to submit the document</h2> + <div class="flex items-center justify-center bg-neutral rounded-xl p-4 md:justify-start"> + <div class="flex items-center"> + <div class="mr-3"> + <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-100 " width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"/> + <path d="M3 19c3.333 -2 5 -4 5 -6c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 2.877 2.5 4c1.5 2 2.5 2.5 3.5 1c.667 -1 1.167 -1.833 1.5 -2.5c1 2.333 2.333 3.5 4 3.5h2.5" /> + <path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z" /> + <path d="M16 7h4" /> + </svg> + </div> + <div> + <h3 class="text-gray-100 font-bold mb-1"><%= @template.name %></h3> + <p class="text-sm text-gray-300">Invited by <%= @template.account.name %></p> + </div> + </div> + </div> + </div> + <%= form_for @submitter, url: start_form_path(@template.slug), data: { turbo_frame: :_top }, method: :put, html: { class: 'space-y-4' } do |f| %> + <div class="form-control !mt-0"> + <%= f.label :email, class: 'label' %> + <%= f.email_field :email, required: true, class: 'base-input', placeholder: 'Provide youe email to start' %> + </div> + <div class="form-control"> + <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing'), class: 'base-button' %> + </div> + <% end %> + </div> + </div> </div> - <%= f.button button_title(title: 'Confirm', disabled_with: 'Processing') %> -<% end %> +</div> diff --git a/app/views/submit_form/completed.html.erb b/app/views/submit_form/completed.html.erb index 88bb2b15..a56600f2 100644 --- a/app/views/submit_form/completed.html.erb +++ b/app/views/submit_form/completed.html.erb @@ -1,5 +1,39 @@ -<p> - Form completed - thanks! -</p> -<%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending'), send_submission_email_index_path, params: { submitter_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' } %> -<%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading'), submitter_download_index_path(@submitter.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' } %> +<div class="max-w-xl mx-auto px-2 mt-12"> + <div class="card bg-base-200"> + <div class="card-body"> + <div class="space-y-4 mx-auto"> + <div class="space-y-4"> + <div class="flex items-center justify-center"> + <div class="flex items-center"> + <div class="mr-3"> + <%= render 'shared/logo', width: "50px", height: "50px"%> + </div> + <h1 class="text-5xl font-bold text-center">DocuSeal</h1> + </div> + </div> + <div class="flex items-center justify-center bg-base-300 rounded-xl p-4 md:justify-start mb-4"> + <div class="flex items-center"> + <div class="mr-3"> + <svg xmlns="http://www.w3.org/2000/svg" class="w-10 h-10 text-gray-700 " width="44" height="44" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> + <path stroke="none" d="M0 0h24v24H0z" fill="none"/> + <path d="M3 19c3.333 -2 5 -4 5 -6c0 -3 -1 -3 -2 -3s-2.032 1.085 -2 3c.034 2.048 1.658 2.877 2.5 4c1.5 2 2.5 2.5 3.5 1c.667 -1 1.167 -1.833 1.5 -2.5c1 2.333 2.333 3.5 4 3.5h2.5" /> + <path d="M20 17v-12c0 -1.121 -.879 -2 -2 -2s-2 .879 -2 2v12l2 2l2 -2z" /> + <path d="M16 7h4" /> + </svg> + </div> + <div> + <h3 class="text-lg text-gray-700 font-bold mb-1">Document signed</h3> + <p class="text-sm text-gray-500">Signed on <%= l(@submission.completed_at.to_date, format: :short) %></p> + </div> + </div> + </div> + </div> + <div> + <%= button_to button_title(title: 'Send copy to Email', disabled_with: 'Sending', icon: svg_icon('mail_forward', class: 'w-6 h-6')), send_submission_email_index_path, params: { submission_slug: @submitter.slug }, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %> + <div class="divider">OR</div> + <%= button_to button_title(title: 'Download documents', disabled_with: 'Downloading', icon: svg_icon('download', class: 'w-6 h-6')), submission_download_index_path(@submitter.slug), method: :get, form: { onsubmit: 'event.submitter.disabled = true' }, class: 'base-button w-full' %> + </div> + </div> + </div> + </div> +</div>