Merge pull request #2437 from nqst/dialog-ux-improvements

Modal dialogs: smoother animations and QR code dialog improvements

Author: andyra

app/assets/stylesheets/dialog.css

@@ -7,32 +7,37 @@
   :is(.dialog) {
     border: 0;
     opacity: 0;
-    transform: scale(0.2);
-    transform-origin: top center;
-    transition: var(--dialog-duration) allow-discrete;
+    transform: scale(0.85);
+    transform-origin: center;
+    transition-behavior: allow-discrete;
+    transition-duration: calc(var(--dialog-duration) / 2); /* Faster closing */
     transition-property: display, opacity, overlay, transform;
+    transition-timing-function: ease-out;
 
     &::backdrop {
       background-color: var(--color-black);
       opacity: 0;
-      transform: scale(1);
-      transition: var(--dialog-duration) allow-discrete;
+      transition-behavior: allow-discrete;
+      transition-duration: calc(var(--dialog-duration) / 2);
       transition-property: display, opacity, overlay;
+      transition-timing-function: ease-out;
     }
 
     &[open] {
       opacity: 1;
       transform: scale(1);
+      transition-duration: var(--dialog-duration); /* Normal opening speed */
 
       &::backdrop {
         opacity: 0.5;
+        transition-duration: var(--dialog-duration);
       }
     }
 
     @starting-style {
       &[open] {
         opacity: 0;
-        transform: scale(0.2);
+        transform: scale(0.85);
       }
 
       &[open]::backdrop {

app/views/account/join_codes/show.html.erb

@@ -39,8 +39,10 @@
         <span>Get QR code</span>
       <% end %>
 
-      <dialog class="dialog panel shadow" data-dialog-target="dialog">
-        <p class="margin-none-block-start"><strong>Scan this code with the camera on your mobile device</strong></p>
+      <dialog class="dialog panel shadow" data-dialog-target="dialog" style="--panel-size: 50ch;">
+        <p class="margin-none-block-start txt-balance">
+          <strong>Scan this code to join <%= Current.account.name %>:</strong>
+        </p>
 
         <%= qr_code_image(url) %>
 

app/views/users/_transfer.html.erb

@@ -15,13 +15,16 @@
         <span class="for-screen-reader">Display auto-login QR code</span>
       <% end %>
 
-      <dialog class="dialog panel shadow" data-dialog-target="dialog">
+      <dialog class="dialog panel shadow" data-dialog-target="dialog" style="--panel-size: 50ch;">
+        <p class="margin-none-block-start txt-balance">
+          <strong>Scan this code to instantly log in on another device:</strong>
+        </p>
+
         <%= qr_code_image(url) %>
 
         <form method="dialog" class="margin-block-start flex justify-center">
-          <button class="btn" data-controller="tooltip">
-            <%= icon_tag "remove" %>
-            <span class="for-screen-reader">Close dialog</span>
+          <button class="btn">
+            <span>Done</span>
           </button>
         </form>
       </dialog>