From b569577ab6af4a53f3c135083b535938dede324f Mon Sep 17 00:00:00 2001
From: Don Kingdon <def@dkc-hvac.com>
Date: Mon, 13 Apr 2026 02:26:19 +0000
Subject: [PATCH] Fix device type dropdown styling (dark mode)

---
 app/templates/cloud/device_new.html | 114 ++++++++++------------------
 1 file changed, 40 insertions(+), 74 deletions(-)

diff --git a/app/templates/cloud/device_new.html b/app/templates/cloud/device_new.html
index f9a721e..d78d648 100644
--- a/app/templates/cloud/device_new.html
+++ b/app/templates/cloud/device_new.html
@@ -1,89 +1,55 @@
 {% extends "portal_base.html" %}
 
-{% block title %}Add Device - OTB Cloud{% endblock %}
+{% block title %}Add Device{% endblock %}
 
 {% block portal_content %}
 <div class="portal-page-header">
   <div>
     <h1 class="portal-page-title">Add Device</h1>
-    <p class="portal-client-name">{{ user_email }}</p>
-    <p class="portal-page-subtitle">
-      Create a named source for uploads like a laptop, phone, tablet, or workstation.
-    </p>
+    <p class="portal-page-subtitle">Register a new upload source.</p>
   </div>
 
-  <div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
-    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
-      <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back to Dashboard</a>
-    </div>
+  <div class="portal-toolbar">
+    <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back</a>
   </div>
 </div>
 
-{% with messages = get_flashed_messages(with_categories=true) %}
-  {% if messages %}
-    <section style="margin-bottom:22px;">
-      {% for category, message in messages %}
-        <div class="service-card" style="padding:14px 18px; margin-bottom:10px;">
-          <strong>{{ category|capitalize }}:</strong> {{ message }}
-        </div>
-      {% endfor %}
-    </section>
-  {% endif %}
-{% endwith %}
-
-<section class="services-grid">
-  <article class="service-card status-beta" style="max-width:900px;">
-    <div class="service-card-header">
-      <div>
-        <h2>Device Details</h2>
-        <p>This creates a device source and its storage folders.</p>
-      </div>
-      <div>
-        <span class="service-badge service-badge-beta">Setup</span>
-      </div>
-    </div>
-
-    <div class="service-card-actions">
-      <form method="post" action="{{ url_for('main.add_device') }}">
-        <div style="display:grid;gap:16px;max-width:680px;">
-          <div>
-            <label for="device_name" style="display:block;margin-bottom:6px;font-weight:700;">Device Name</label>
-            <input
-              id="device_name"
-              name="device_name"
-              type="text"
-              value="{{ device_name or '' }}"
-              placeholder="Example: Main Laptop"
-              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:rgba(255,255,255,0.04);color:white;"
-              required
-            >
-          </div>
+<form method="post" class="service-card" style="max-width:500px;">
+  <div style="margin-bottom:16px;">
+    <label>Device Name</label><br>
+    <input type="text" name="device_name" value="{{ device_name or '' }}" required style="width:100%;padding:10px;border-radius:8px;">
+  </div>
 
-          <div>
-            <label for="device_type" style="display:block;margin-bottom:6px;font-weight:700;">Device Type</label>
-            <select
-              id="device_type"
-              name="device_type"
-              style="width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,0.14);background:#0f1a2b;color:white;"
-              required
-            >
-              <option value="">Select type</option>
-              <option value="laptop" {% if device_type == 'laptop' %}selected{% endif %}>Laptop</option>
-              <option value="phone" {% if device_type == 'phone' %}selected{% endif %}>Phone</option>
-              <option value="tablet" {% if device_type == 'tablet' %}selected{% endif %}>Tablet</option>
-              <option value="desktop" {% if device_type == 'desktop' %}selected{% endif %}>Desktop</option>
-              <option value="workstation" {% if device_type == 'workstation' %}selected{% endif %}>Workstation</option>
-              <option value="other" {% if device_type == 'other' %}selected{% endif %}>Other</option>
-            </select>
-          </div>
+  <div style="margin-bottom:16px;">
+    <label>Device Type</label><br>
+    <select name="device_type" required class="otb-select">
+      <option value="">Select type</option>
+      <option value="laptop">Laptop</option>
+      <option value="phone">Phone</option>
+      <option value="tablet">Tablet</option>
+      <option value="workpc">Work PC</option>
+      <option value="homepc">Home PC</option>
+      <option value="other">Other</option>
+    </select>
+  </div>
 
-          <div style="display:flex;gap:10px;flex-wrap:wrap;">
-            <button class="portal-btn primary" type="submit">Create Device</button>
-            <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Cancel</a>
-          </div>
-        </div>
-      </form>
-    </div>
-  </article>
-</section>
+  <button class="portal-btn primary" type="submit">Create Device</button>
+</form>
+
+<style>
+.otb-select {
+  width: 100%;
+  padding: 10px;
+  border-radius: 8px;
+  background: rgba(8, 18, 37, 0.9);
+  color: #e8eefc;
+  border: 1px solid rgba(255,255,255,0.15);
+}
+
+/* Fix dropdown list colors (some browsers) */
+.otb-select option {
+  background: #081225;
+  color: #e8eefc;
+}
+</style>
 {% endblock %}