Add a success dialog variant (#1841)

Resolves #1639

Based on a [PR review
discussion](https://codeapprove.com/pr/tiny-pilot/tinypilot/1833#thread-59475250-2fc2-4e74-9b4f-359067e9a3c8),
this PR adds an event (i.e., `DialogVariantChangedEvent`) that allows us
to change the dialog's visual variant style in order to make it more
engaging for the user.

For example, we can now change the dialog variant when a successful
state is reached:

<img width="556" alt="Screen Shot 2024-08-14 at 16 44 18"
src="https://github.com/user-attachments/assets/dd9c4597-45ba-4a1b-b3b7-2d97e6c5760c">


<a data-ca-tag
href="https://codeapprove.com/pr/tiny-pilot/tinypilot/1841"><img
src="https://codeapprove.com/external/github-tag-allbg.png" alt="Review
on CodeApprove" /></a>

app/static/css/style.css

@@ -38,6 +38,7 @@
   --brand-green-dark: hsl(var(--brand-hue-green), 43%, 33%);
   --brand-green-light: hsl(var(--brand-hue-green), 34%, 70%);
   --brand-green-bright: hsl(var(--brand-hue-green), 70%, 45%);
+  --brand-green-background: hsl(var(--brand-hue-green), 54%, 95%);
 
   /* This is the green color that is used in the logo. It should only be
      scarcely used outside the logo, for example for brand- or marketing-related

app/static/js/events.js

@@ -49,6 +49,22 @@ export class DialogCloseStateChangedEvent extends CustomEvent {
   }
 }
 
+export class DialogVariantChangedEvent extends CustomEvent {
+  /**
+   * Event that advises a visual variant style change of the dialog.
+   * @param {("default"|"danger"|"success")} variant
+   */
+  constructor(variant) {
+    super("dialog-variant-changed", {
+      detail: {
+        variant,
+      },
+      bubbles: true,
+      composed: true,
+    });
+  }
+}
+
 export class VideoStreamingModeChangedEvent extends CustomEvent {
   /**
    * Event, which indicates that the video streaming mode has changed.

app/templates/custom-elements/overlay-panel.html

@@ -50,6 +50,11 @@
       border-top: 0.4rem solid var(--brand-red-bright);
       background-color: var(--brand-red-background);
     }
+
+    :host([variant="success"]) #panel {
+      border-top: 0.4rem solid var(--brand-green-bright);
+      background-color: var(--brand-green-background);
+    }
   </style>
 
   <dialog id="panel">
@@ -80,25 +85,27 @@
             dialog: this.shadowRoot.querySelector("#panel"),
           };
           this.show = this.show.bind(this);
+          this._initialAttributes = {
+            variant: this.getAttribute("variant") || "default",
+            showCloseButton: this.hasAttribute("show-close-button") || true,
+          };
+
           this.shadowRoot.addEventListener("dialog-closed", () =>
             this.show(false)
           );
           this.shadowRoot.addEventListener("dialog-failed", () =>
             // This event is further handled in `app.js`.
             this.show(false)
           );
-
-          this.setAttribute("show-close-button", "");
           this.shadowRoot.addEventListener(
             "dialog-close-state-changed",
-            (e) => {
-              if (e.detail.canBeClosed) {
-                this.setAttribute("show-close-button", "");
-              } else {
-                this.removeAttribute("show-close-button");
-              }
+            (evt) => {
+              this.toggleAttribute("show-close-button", evt.detail.canBeClosed);
             }
           );
+          this.shadowRoot.addEventListener("dialog-variant-changed", (evt) => {
+            this.setAttribute("variant", evt.detail.variant);
+          });
           this.shadowRoot
             .querySelector("#close-button")
             .addEventListener("click", () => this.show(false));
@@ -110,6 +117,14 @@
         }
 
         show(isShown = true) {
+          // Restore element's initial attributes that might have been changed
+          // programmatically.
+          this.setAttribute("variant", this._initialAttributes.variant);
+          this.toggleAttribute(
+            "show-close-button",
+            this._initialAttributes.showCloseButton
+          );
+
           if (isShown) {
             this._elements.dialog.showModal();
             this._injectEvent(

app/templates/custom-elements/shutdown-dialog.html

@@ -61,6 +61,7 @@ <h3>Shutdown Complete</h3>
     DialogClosedEvent,
     DialogFailedEvent,
     DialogCloseStateChangedEvent,
+    DialogVariantChangedEvent,
   } from "/js/events.js";
   import { shutdown } from "/js/controllers.js";
 
@@ -134,6 +135,7 @@ <h3>Shutdown Complete</h3>
                 // that it's done after 30 seconds.
                 setTimeout(() => {
                   this._state = this._states.SHUTDOWN_COMPLETE;
+                  this.dispatchEvent(new DialogVariantChangedEvent("success"));
                 }, 30 * 1000);
               }
             })

app/templates/custom-elements/update-dialog.html

@@ -117,6 +117,7 @@ <h3>Update Complete</h3>
     DialogClosedEvent,
     DialogFailedEvent,
     DialogCloseStateChangedEvent,
+    DialogVariantChangedEvent,
   } from "/js/events.js";
   import { UpdateLogsStreamer } from "/js/updatelogs.js";
   import {
@@ -289,6 +290,7 @@ <h3>Update Complete</h3>
               this._state = this._states.UPDATE_FINISHED;
               this._elements.updateLogs.textContent +=
                 "Update is now complete.\n";
+              this.dispatchEvent(new DialogVariantChangedEvent("success"));
             })
             .catch((error) => {
               this.dispatchEvent(

app/templates/custom-elements/wifi-dialog.html

@@ -153,6 +153,7 @@ <h3>Wi-Fi Credentials Removed</h3>
     DialogClosedEvent,
     DialogFailedEvent,
     DialogCloseStateChangedEvent,
+    DialogVariantChangedEvent,
   } from "/js/events.js";
   import {
     getNetworkStatus,
@@ -334,6 +335,7 @@ <h3>Wi-Fi Credentials Removed</h3>
             return;
           }
           this._state = this._states.SUCCESS_ENABLED;
+          this.dispatchEvent(new DialogVariantChangedEvent("success"));
         }
 
         async _disable() {
@@ -350,6 +352,7 @@ <h3>Wi-Fi Credentials Removed</h3>
             return;
           }
           this._state = this._states.SUCCESS_DISABLED;
+          this.dispatchEvent(new DialogVariantChangedEvent("success"));
         }
       }
     );

app/templates/styleguide.html

@@ -143,6 +143,10 @@ <h2 class="section">Colors</h2>
           class="colorcard"
           style="background-color: var(--brand-green-light)"
         ></div>
+        <div
+          class="colorcard"
+          style="background-color: var(--brand-green-background)"
+        ></div>
         <br style="clear: both" />
         <div
           class="colorcard"
@@ -562,6 +566,32 @@ <h3>Secondary State</h3>
             document.getElementById("error-overlay").show();
           });
       </script>
+      <!-- Success overlay: -->
+      <overlay-panel id="success-overlay" variant="success">
+        <h3>Example Success Message</h3>
+        <p>
+          This overlay style is used for when the user reaches a successful
+          state.
+        </p>
+        <button id="close-success-overlay-btn">Close</button>
+      </overlay-panel>
+      <button id="show-success-overlay-btn" class="btn-success">
+        Open Success Overlay
+      </button>
+      <script type="module">
+        import { DialogClosedEvent } from "/js/events.js";
+
+        document
+          .getElementById("show-success-overlay-btn")
+          .addEventListener("click", () => {
+            document.getElementById("success-overlay").show();
+          });
+        document
+          .getElementById("close-success-overlay-btn")
+          .addEventListener("click", (evt) => {
+            evt.target.dispatchEvent(new DialogClosedEvent());
+          });
+      </script>
       <h3>Loading States</h3>
       <p>
         When the overlay is in a loading state, we generally do not want the