From 16552888b810d1cacad219883bf80730966433ca Mon Sep 17 00:00:00 2001
From: Scott Halver <76669202+scott-tp@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:34:21 -0400
Subject: [PATCH] Polish add-device modal for v0.2.1

Fix modal backdrop hover styling, unify add-device copy, center the submit
button with clearer spacing, and bump version to 0.2.1.
---
 app/__init__.py                |  2 +-
 app/static/css/dashboard.css   | 17 +++++++++++++++++
 app/static/js/dashboard-app.js | 13 ++++++++-----
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/app/__init__.py b/app/__init__.py
index f888bb2..0661c38 100644
--- a/app/__init__.py
+++ b/app/__init__.py
@@ -14,7 +14,7 @@
 #   0.5.x          -> beta
 #   1.0.0          -> first stable release
 # Bump this on every customer-visible release.
-__version__ = '0.2.0'
+__version__ = '0.2.1'
 
 
 def create_app(test_config=None):
diff --git a/app/static/css/dashboard.css b/app/static/css/dashboard.css
index e0555a3..64f1b6a 100644
--- a/app/static/css/dashboard.css
+++ b/app/static/css/dashboard.css
@@ -283,6 +283,12 @@ summary {
   gap: var(--space-2);
 }
 
+.form-grid .form-submit {
+  margin-top: var(--space-4);
+  justify-self: center;
+  min-width: 10rem;
+}
+
 label {
   display: grid;
   gap: var(--space-1);
@@ -609,6 +615,12 @@ button:active {
   cursor: pointer;
 }
 
+.modal-backdrop:hover,
+.modal-backdrop:active {
+  background: rgba(15, 23, 42, 0.55);
+  transform: none;
+}
+
 .modal-panel {
   position: relative;
   z-index: 1;
@@ -653,6 +665,11 @@ button:active {
   background: rgba(0, 0, 0, 0.65);
 }
 
+:root[data-theme="dark"] .modal-backdrop:hover,
+:root[data-theme="dark"] .modal-backdrop:active {
+  background: rgba(0, 0, 0, 0.65);
+}
+
 :root[data-theme="dark"] .modal-close {
   border-color: rgba(255, 255, 255, 0.25);
   color: hsl(220, 18%, 82%);
diff --git a/app/static/js/dashboard-app.js b/app/static/js/dashboard-app.js
index 5b24123..19517bd 100644
--- a/app/static/js/dashboard-app.js
+++ b/app/static/js/dashboard-app.js
@@ -1,6 +1,9 @@
 import './components/device-card.js';
 import { formatRelativeTime } from './lib/strings.js';
 
+const ADD_DEVICE_TOGGLE_LABEL = 'Add a device';
+const ADD_DEVICE_MODAL_LABEL = 'Add a TinyPilot device';
+const ADD_DEVICE_SUBMIT_LABEL = 'Add device';
 const DEVICES_PER_PAGE = 4;
 const CONNECTED_STATUS_REFRESH_INTERVAL_MS = 30_000;
 
@@ -26,7 +29,7 @@ class DashboardApp extends HTMLElement {
           ${dashboardVersion ? `<span class="topbar-version" title="Dashboard version">v${dashboardVersion}</span>` : ''}
         </div>
         <div class="topbar-actions">
-          <button id="add-device-toggle" type="button" class="theme-toggle">Add a device</button>
+          <button id="add-device-toggle" type="button" class="theme-toggle">${ADD_DEVICE_TOGGLE_LABEL}</button>
           <button id="theme-toggle" type="button" class="theme-toggle">Dark mode</button>
         </div>
       </header>
@@ -38,7 +41,7 @@ class DashboardApp extends HTMLElement {
         <button type="button" class="modal-backdrop" id="add-device-modal-backdrop" tabindex="-1" aria-label="Close dialog"></button>
         <section class="modal-panel panel">
           <header class="modal-header">
-            <h2 id="add-device-heading">Add a device</h2>
+            <h2 id="add-device-heading">${ADD_DEVICE_MODAL_LABEL}</h2>
             <button type="button" class="modal-close" id="add-device-modal-close" aria-label="Close">&times;</button>
           </header>
           <form id="add-device-form" class="form-grid">
@@ -54,7 +57,7 @@ class DashboardApp extends HTMLElement {
               API key
               <input name="api_key" type="password" required autocomplete="off" spellcheck="false">
             </label>
-            <button type="submit">Add a device</button>
+            <button type="submit" class="form-submit">${ADD_DEVICE_SUBMIT_LABEL}</button>
           </form>
           <p id="add-device-status" class="subtitle"></p>
         </section>
@@ -81,7 +84,7 @@ class DashboardApp extends HTMLElement {
 
   _bind() {
     const e = this._elements;
-    e.addDeviceToggle.textContent = 'Add a device';
+    e.addDeviceToggle.textContent = ADD_DEVICE_TOGGLE_LABEL;
     e.addDeviceToggle.addEventListener('click', () => {
       if (e.addDeviceModal.hasAttribute('hidden')) {
         this._openAddDeviceModal();
@@ -133,7 +136,7 @@ class DashboardApp extends HTMLElement {
   }
 
   _addDeviceModalHeadingText() {
-    return this._allDevices.length === 0 ? 'Add your first device' : 'Add a device';
+    return ADD_DEVICE_MODAL_LABEL;
   }
 
   _syncAddDeviceModalState() {