From 878e84e98a3cc5c3821e1bba4720a08873d51a5d Mon Sep 17 00:00:00 2001
From: David Montero <davidmonterocrespo24@gmail.com>
Date: Thu, 11 Jun 2026 05:19:40 +0200
Subject: [PATCH] fix(microsd): match the SD Card upload panel to the dark
 property dialog

The panel was styled with light-theme CSS-var fallbacks that render wrong on
the editor's dark (#2d2d2d) property dialog:
- "Add files" button used `var(--surface, #f6f6f6)` + light border, so it
  rendered a washed-out light-gray box that looked broken. Restyle it as a
  primary action like `.rotate-button` (solid #007acc, white text, hover lift).
- Section divider and secondary text used light fallbacks (#e2e2e2 / #777);
  switch to the dialog's dark values (#444 border, #aaa text).

Cosmetic only.
---
 .../simulator/ComponentPropertyDialog.css     | 21 ++++++++++++-------
 1 file changed, 13 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/simulator/ComponentPropertyDialog.css b/frontend/src/components/simulator/ComponentPropertyDialog.css
index d5892569..8a64f847 100644
--- a/frontend/src/components/simulator/ComponentPropertyDialog.css
+++ b/frontend/src/components/simulator/ComponentPropertyDialog.css
@@ -331,7 +331,7 @@
 
 /* ── microSD "SD Card" upload panel ─────────────────────────────────────── */
 .sd-card-section {
-  border-top: 1px solid var(--border-color, #e2e2e2);
+  border-top: 1px solid #444;
   padding: 8px 10px;
   display: flex;
   flex-direction: column;
@@ -356,7 +356,7 @@
 }
 .sd-card-hint {
   font-size: 11px;
-  color: var(--text-secondary, #777);
+  color: #aaa;
   line-height: 1.3;
 }
 .sd-card-file {
@@ -373,7 +373,7 @@
 }
 .sd-card-file-size {
   flex: 0 0 auto;
-  color: var(--text-secondary, #777);
+  color: #aaa;
   font-variant-numeric: tabular-nums;
 }
 .sd-card-file-remove {
@@ -399,17 +399,22 @@
 }
 .sd-card-add {
   font-size: 12px;
-  padding: 4px 10px;
-  border: 1px solid var(--border-color, #ccc);
+  font-weight: 500;
+  padding: 5px 12px;
+  border: none;
   border-radius: 4px;
-  background: var(--surface, #f6f6f6);
+  background-color: #007acc;
+  color: #fff;
   cursor: pointer;
+  transition: all 0.2s;
 }
 .sd-card-add:hover {
-  background: var(--surface-hover, #ececec);
+  background-color: #005a9e;
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 122, 204, 0.3);
 }
 .sd-card-total {
   font-size: 11px;
-  color: var(--text-secondary, #777);
+  color: #aaa;
   font-variant-numeric: tabular-nums;
 }