Fix device type dropdown styling (dark mode)

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">Register a new upload source.</p>
-    <p class="portal-page-subtitle">
-      Create a named source for uploads like a laptop, phone, tablet, or workstation.
-    </p>
   </div>
 
-  <div class="portal-toolbar" style="display:flex;flex-direction:column;align-items:flex-end;gap:10px;">
+  <div class="portal-toolbar">
-    <div style="display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;">
+    <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back</a>
-      <a class="portal-btn" href="{{ url_for('main.dashboard') }}">Back to Dashboard</a>
   </div>
 </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">
+<form method="post" class="service-card" style="max-width:500px;">
-  <article class="service-card status-beta" style="max-width:900px;">
+  <div style="margin-bottom:16px;">
-    <div class="service-card-header">
+    <label>Device Name</label><br>
-      <div>
+    <input type="text" name="device_name" value="{{ device_name or '' }}" required style="width:100%;padding:10px;border-radius:8px;">
-        <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">
+  <div style="margin-bottom:16px;">
-      <form method="post" action="{{ url_for('main.add_device') }}">
+    <label>Device Type</label><br>
-        <div style="display:grid;gap:16px;max-width:680px;">
+    <select name="device_type" required class="otb-select">
-          <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>
-
-          <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="laptop">Laptop</option>
-              <option value="phone" {% if device_type == 'phone' %}selected{% endif %}>Phone</option>
+      <option value="phone">Phone</option>
-              <option value="tablet" {% if device_type == 'tablet' %}selected{% endif %}>Tablet</option>
+      <option value="tablet">Tablet</option>
-              <option value="desktop" {% if device_type == 'desktop' %}selected{% endif %}>Desktop</option>
+      <option value="workpc">Work PC</option>
-              <option value="workstation" {% if device_type == 'workstation' %}selected{% endif %}>Workstation</option>
+      <option value="homepc">Home PC</option>
-              <option value="other" {% if device_type == 'other' %}selected{% endif %}>Other</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>
+<style>
-</section>
+.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 %}