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>