Add a submit state to buttons, like Saving... (#306)

AllYourBot · Apr 26, 2024 · dc6413f · dc6413f
1 parent 1db2d8d
commit dc6413f
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 9 deletions.
diff --git a/app/views/messages/_main_column.html.erb b/app/views/messages/_main_column.html.erb
@@ -302,7 +302,7 @@
             Open new chat
           </figcaption>
           <kbd class="w-50 text-right flex flex-row gap-1">
-            <div class="key">Ctrl / ⌘</div>
+            <div class="key">Ctrl or ⌘</div>
             <div class="key">J</div>
           </kbd>
         </figure>
@@ -331,7 +331,7 @@
           </figcaption>
           <kbd class="w-50 text-right flex flex-row gap-1">
             <div class="key">Shift</div>
-            <div class="key">Ctrl / ⌘</div>
+            <div class="key">Ctrl or ⌘</div>
             <div class="key">C</div>
           </kbd>
         </figure>
@@ -340,7 +340,7 @@
             Toggle sidebar
           </figcaption>
           <kbd class="w-50 text-right flex flex-row gap-1">
-            <div class="key">Ctrl / ⌘</div>
+            <div class="key">Ctrl or ⌘</div>
             <div class="key">.</div>
           </kbd>
         </figure>

diff --git a/app/views/messages/edit.html.erb b/app/views/messages/edit.html.erb
@@ -36,7 +36,10 @@
 
       <div class="flex justify-center items-center text-sm font-medium">
         <%= form.submit "Save & Submit",
-          data: { role: "save" },
+          data: {
+            role: "save",
+            turbo_submits_with: "Saving..."
+          },
           class: %|
             inline-block cursor-pointer
             rounded-lg py-2 px-3

diff --git a/app/views/sessions/new.html.erb b/app/views/sessions/new.html.erb
@@ -24,6 +24,16 @@
       placeholder: "Password",
       class: "border border-gray-400 rounded p-3 dark:text-black"
     %>
-    <%= f.submit "Log In", class: 'text-white bg-brand-blue dark:bg-gray-900 border border-white dark:border-gray-400 rounded-lg font-medium p-4 text-center cursor-pointer hover:opacity-95' %>
+    <%= f.submit "Log In",
+        class: %|
+          text-white font-medium
+          bg-brand-blue dark:bg-gray-900
+          border border-white dark:border-gray-400
+          rounded-lg p-4 text-center
+          cursor-pointer
+          hover:opacity-95
+        |,
+        data: { turbo_submits_with: "Authenticating..." }
+    %>
   <% end %>
 </div>
diff --git a/app/views/settings/assistants/_form.html.erb b/app/views/settings/assistants/_form.html.erb
@@ -29,5 +29,14 @@
     %>
   </div>
 
-  <%= form.submit "Save", class: "rounded-lg py-3 px-5 bg-gray-200 dark:bg-gray-900 border border-gray-400 inline-block font-medium cursor-pointer" %>
+  <%= form.submit "Save",
+    class: %|
+      inline-block font-medium
+      bg-gray-200 dark:bg-gray-900
+      border border-gray-400
+      rounded-lg py-3 px-5
+      cursor-pointer
+    |,
+    data: { turbo_submits_with: "Saving..." }
+  %>
 <% end %>
diff --git a/app/views/settings/people/_form.html.erb b/app/views/settings/people/_form.html.erb
@@ -136,7 +136,14 @@
 
   <div class="inline">
     <%= form.submit "Save",
-      class: "rounded-lg py-3 px-5 bg-gray-200 dark:bg-gray-900 border border-gray-400 inline-block font-medium cursor-pointer"
+      class: %|
+        inline-block font-medium
+        bg-gray-200 dark:bg-gray-900
+        border border-gray-400
+        rounded-lg py-3 px-5
+        cursor-pointer
+      |,
+      data: { turbo_submits_with: "Saving..." }
     %>
     <%= link_to "Cancel", root_path, class: "float-right inline-block ml-5 py-3" %>
   </div>

diff --git a/app/views/users/new.html.erb b/app/views/users/new.html.erb
@@ -58,14 +58,24 @@
             data-transition-target="transitionable">
 
           <%= user_fields.label :name, class: "input input-bordered flex items-center justify-between" do %>
-            <span>Name <span class="">*</span></span>
+            <span>Full Name <span class="">*</span></span>
             <%= user_fields.text_field :name,
               placeholder: "First & Last name",
               class: "w-44 border-0 dark:text-black"
             %>
           <% end %>
         </div>
     <% end %>
-    <%= f.submit "Sign Up", class: 'text-white bg-brand-blue dark:bg-gray-900 border border-white dark:border-gray-400 rounded-lg font-medium p-4 text-center cursor-pointer hover:opacity-95' %>
+    <%= f.submit "Sign Up",
+      class: %|
+        text-white font-medium
+        bg-brand-blue dark:bg-gray-900
+        border border-white dark:border-gray-400
+        rounded-lg p-4 text-center
+        cursor-pointer
+        hover:opacity-95
+      |,
+      data: { turbo_submits_with: "Creating..." }
+    %>
   <% end %>
 </div>