minor template improvements

app/views/dashboard/index.html.erb

@@ -13,7 +13,7 @@
           <div class="pb-4 text-xl font-semibold" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
             <%= template.name %>
           </div>
-          <div class="pb-6 pt-1">
+          <div class="pb-6 pt-1 space-y-1">
             <p class="flex items-center space-x-1 text-xs text-base-content/60">
               <%= svg_icon('user', class: 'w-4 h-4') %>
               <span><%= template.author.full_name %></span>

app/views/icons/_adjustments.html.erb

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" 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="M4 10a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+  <path d="M6 4v4" />
+  <path d="M6 12v8" />
+  <path d="M10 16a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+  <path d="M12 4v10" />
+  <path d="M12 18v2" />
+  <path d="M16 7a2 2 0 1 0 4 0a2 2 0 0 0 -4 0" />
+  <path d="M18 4v1" />
+  <path d="M18 9v11" />
+</svg>

app/views/icons/_logout.html.erb

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="<%= local_assigns[:class] %>" 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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2" />
+  <path d="M9 12h12l-3 -3" />
+  <path d="M18 15l3 -3" />
+</svg>

app/views/shared/_button_title.html.erb

@@ -1,7 +1,9 @@
 <span class="enabled">
   <span class="flex items-center justify-center space-x-2">
     <%= icon %>
+    <% if title %>
       <span><%= title %></span>
+    <% end %>
   </span>
 </span>
 <span class="disabled">

app/views/shared/_navbar.html.erb

@@ -10,12 +10,18 @@
         <label tabindex="0" class="cursor-pointer bg-base-content text-purple-300 rounded-full p-2 w-9 justify-center flex">
           <span class="text-sm align-text-top"><%= current_user.initials %></span>
         </label>
-        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap">
+        <ul tabindex="0" class="z-10 dropdown-content p-2 mt-2 shadow menu text-base bg-base-100 rounded-box whitespace-nowrap text-right">
           <li>
-            <%= link_to 'Profile', settings_profile_index_path, class: 'text-right' %>
+            <%= link_to settings_profile_index_path do %>
+              <%= svg_icon('adjustments', class: 'w-5 h-5 stroke-2') %>
+              <span class="mr-1">Profile</span>
+            <% end %>
           </li>
           <li>
-            <%= link_to 'Sign out', destroy_user_session_path, data: { turbo_method: :delete } %>
+            <%= link_to destroy_user_session_path, data: { turbo_method: :delete } do %>
+              <%= svg_icon('logout', class: 'w-5 h-5 stroke-2') %>
+              <span class="mr-1">Sign out</span>
+            <% end %>
           </li>
         </ul>
       </div>

app/views/shared/_settings_nav.html.erb

@@ -1,6 +1,6 @@
 <menu-active class="block w-full md:w-52">
-  <div class="">
+  <div>
-    <ul class="menu px-0">
+    <ul class="menu px-0 space-y-1">
       <li class="menu-title py-0"><span>Settings</span></li>
       <li></li>
       <li>

app/views/templates/show.html.erb

@@ -1,14 +1,14 @@
-<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:justify-between items-start mb-6">
+<div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:justify-between items-start mb-8">
   <h1 class="text-4xl font-semibold mr-4" style="overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;">
     <%= @template.name %>
   </h1>
   <div class="flex md:justify-between space-x-2 flex-none">
-    <%= button_to button_title(title: 'Remove', disabled_with: 'Removing', icon: svg_icon('trash', class: 'w-6 h-6')), template_path(@template), class: 'btn btn-outline', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
+    <%= button_to button_title(title: 'Remove', disabled_with: 'Removing', icon: svg_icon('trash', class: 'w-6 h-6')), template_path(@template), class: 'btn btn-outline btn-sm', method: :delete, data: { turbo_confirm: 'Are you sure?' } %>
-    <%= link_to new_template_path(base_template_id: @template.id), class: 'btn btn-outline', data: { turbo_frame: :modal } do %>
+    <%= link_to new_template_path(base_template_id: @template.id), class: 'btn btn-outline btn-sm', data: { turbo_frame: :modal } do %>
       <%= svg_icon('copy', class: 'w-6 h-6') %>
       <span>Clone</span>
     <% end %>
-    <%= link_to edit_template_path(@template), class: 'btn btn-outline' do %>
+    <%= link_to edit_template_path(@template), class: 'btn btn-outline btn-sm' do %>
       <span class="flex items-center justify-center space-x-2">
         <%= svg_icon('pencil', class: 'w-6 h-6') %>
         <span>Edit</span>
@@ -17,7 +17,7 @@
   </div>
 </div>
 <% if !@pagy.count.zero? || @template.submitters.to_a.size == 1 %>
-  <div class="flex justify-between mb-4 items-end">
+  <div class="flex justify-between mb-6 items-end">
     <p class="text-3xl font-bold">Submissions</p>
     <div class="flex space-x-2">
       <% if @template.submitters.to_a.size == 1 %>
@@ -38,35 +38,35 @@
     <% @submissions.each do |submission| %>
       <a href="<%= submission_path(submission) %>" class="bg-base-200 w-full flex flex-col md:flex-row space-y-4 md:space-y-0 md:justify-between rounded-2xl px-6 py-5 md:items-center">
         <% submitters = submission.template.submitters.filter_map { |item| submission.submitters.find { |e| e.uuid == item['uuid'] } } %>
+        <% is_submission_complated = submitters.all?(&:completed_at?) %>
         <% if submitters.size == 1 %>
           <div>
             <% submitter = submitters.first %>
             <div class="flex items-center space-x-4">
-              <span class="flex items-center space-x-2">
+              <span class="flex items-center space-x-3">
-                <%= svg_icon('user', class: 'w-6 h-6 stroke-2') %>
+                <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                <span class="text-lg">
+                  <span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg bg-opacity-50 uppercase text-sm font-semibold">
+                    <%= submitter.status %>
+                  </span>
+                </div>
+                <span class="text-lg break-all">
                   <%= submitter.email %>
                 </span>
               </span>
             </div>
           </div>
           <div class="flex space-x-2 items-center">
-            <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-              <span class="badge <%= status_badges[submitter.status] %> md:w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
-                <%= submitter.status %>
-              </span>
-            </div>
             <% if submitter.completed_at? %>
               <form onsubmit="event.preventDefault()">
                 <button onclick="event.stopPropagation()">
                   <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
                     <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
-                      <span class="hidden md:inline">Download</span>
+                      <span class="inline">Download</span>
                     </span>
                     <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
                       <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-                      <span class="hidden md:inline">Downloa...</span>
+                      <span class="inline">Downloa...</span>
                     </span>
                   </download-button>
                 </button>
@@ -74,55 +74,80 @@
             <% else %>
               <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-sm btn-neutral text-white md:w-36 flex', icon_class: 'w-6 h-6 text-white', copy_title: 'Copy Link' %>
             <% end %>
-            <%= button_to button_title(title: submitter.completed_at? ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm md:w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+            <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
+            <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
           </div>
         <% else %>
           <div class="space-y-1 w-full md:mr-2">
-            <% submitters.each_with_index do |submitter, index| %>
-              <div class="flex justify-between items-center">
-                <span class="flex space-x-2 text-lg">
-                  <%= render 'icons/user_number', class: 'w-6 h-6 stroke-2', number: index + 1 %>
-                  <span class="break-all">
-                    <%= submitter.email %>
-                  </span>
-                </span>
-                <% unless submitters.all?(&:completed_at?) %>
             <div class="flex items-center space-x-3">
+              <% if is_submission_complated %>
+                <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
+                <div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
+                  <span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 bg-opacity-50 badge-lg uppercase text-sm font-semibold">
+                    <%= latest_submitter.status %>
+                  </span>
+                </div>
+              <% end %>
+              <div class="w-full">
+                <% submitters.each_with_index do |submitter, index| %>
+                  <div class="flex justify-between items-center space-x-3">
+                    <span class="flex items-center space-x-3">
+                      <% unless is_submission_complated %>
                         <div class="tooltip flex" data-tip="<%= l(submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                      <span class="badge md:w-24 <%= status_badges[submitter.status] %> btn-xs uppercase text-xs font-medium border-1">
+                          <span class="badge md:w-24 <%= status_badges[submitter.status] %> bg-opacity-50 uppercase text-xs font-semibold">
                             <%= submitter.status %>
                           </span>
                         </div>
-                    <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-32 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
+                      <% end %>
+                      <span class="text-lg break-all">
+                        <%= submitter.email %>
+                      </span>
+                    </span>
+                    <% if submitter.completed_at? && !is_submission_complated %>
+                      <form onsubmit="event.preventDefault()">
+                        <button onclick="event.stopPropagation()">
+                          <download-button data-src="<%= submitter_download_index_path(submitter.slug) %>" class="btn btn-xs btn-neutral text-white md:w-36">
+                            <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
+                              <%= svg_icon('download', class: 'w-4 h-4 stroke-2') %>
+                              <span class="hidden md:inline">Download</span>
+                            </span>
+                            <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
+                              <%= svg_icon('loader', class: 'w-4 h-4 animate-spin') %>
+                              <span class="hidden md:inline">Downloa...</span>
+                            </span>
+                          </download-button>
+                        </button>
+                      </form>
+                    <% elsif !is_submission_complated %>
+                      <div class="flex items-center space-x-3">
+                        <%= render 'shared/clipboard_copy', text: submit_form_url(slug: submitter.slug), class: 'btn btn-xs text-xs btn-neutral text-white md:w-36 flex', icon_class: 'w-4 h-4 text-white', copy_title: 'Copy Link' %>
                       </div>
                     <% end %>
                   </div>
                 <% end %>
               </div>
+            </div>
+          </div>
           <div class="flex space-x-2 items-center">
-            <% if submitters.all?(&:completed_at?) %>
+            <% if is_submission_complated %>
               <% latest_submitter = submitters.select(&:completed_at?).max_by(&:completed_at) %>
-              <div class="tooltip flex" data-tip="<%= l(latest_submitter.status_event_at.in_time_zone(current_account.timezone), format: :short, locale: current_account.locale) %>">
-                <span class="badge <%= status_badges[latest_submitter.status] %> md:w-32 badge-lg btn-sm uppercase text-sm font-medium border-1">
-                  <%= latest_submitter.status %>
-                </span>
-              </div>
               <form onsubmit="event.preventDefault()">
                 <button onclick="event.stopPropagation()">
                   <download-button data-src="<%= submitter_download_index_path(latest_submitter.slug) %>" class="btn btn-sm btn-neutral text-white md:w-36">
                     <span class="flex items-center justify-center space-x-2" data-target="download-button.defaultButton">
                       <%= svg_icon('download', class: 'w-5 h-5 stroke-2') %>
-                      <span class="hidden md:inline">Download</span>
+                      <span class="inline">Download</span>
                     </span>
                     <span class="flex items-center justify-center space-x-2 hidden" data-target="download-button.loadingButton">
                       <%= svg_icon('loader', class: 'w-5 h-5 animate-spin') %>
-                      <span class="hidden md:inline">Downloa...</span>
+                      <span class="inline">Downloa...</span>
                     </span>
                   </download-button>
                 </button>
               </form>
             <% end %>
-            <%= button_to button_title(title: submitters.all?(&:completed_at?) ? 'Archive' : 'Remove', disabled_with: 'Remov'), submission_path(submission), class: 'btn btn-outline btn-sm md:w-28', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
+            <span class="btn btn-outline btn-sm w-20 md:w-24">View</span>
+            <%= button_to button_title(title: nil, disabled_with: 'Remov', icon: svg_icon('trash', class: 'w-6 h-6')), submission_path(submission), class: 'btn btn-outline btn-sm', title: 'Delete', method: :delete, data: { turbo_confirm: 'Are you sure?' }, onclick: 'event.stopPropagation()' %>
           </div>
         <% end %>
       </a>