Fix messagebox colors

Author: luc-github

.claude/settings.json

@@ -24,7 +24,14 @@
       "Bash(then echo:*)",
       "Bash(for class:*)",
       "Bash(do echo:*)",
-      "Bash(grep -r \"class.*$class\" \"C:\\\\Users\\\\luc\\\\Documents\\\\GitHub\\\\ESP3D-WEBUI\\\\src\" --include=\"*.js\")"
+      "Bash(grep -r \"class.*$class\" \"C:\\\\Users\\\\luc\\\\Documents\\\\GitHub\\\\ESP3D-WEBUI\\\\src\" --include=\"*.js\")",
+      "Bash(grep -r \"ScanApList\\\\|ScanAp\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src --include=*.js --include=*.jsx --include=*.ts --include=*.tsx)",
+      "Bash(grep -r \"S45|S48|S49|S50|S51\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src/targets/translations/ --include=*.json)",
+      "Bash(xargs cat:*)",
+      "Bash(grep -r \"extra.*scan\\\\|extra=.*scan\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src --include=*.js --include=*.jsx)",
+      "Bash(grep -r \"ssid_sta\\\\|extra.*scan\" /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/src --include=*.json --include=*.js)",
+      "Bash(xargs grep:*)",
+      "Bash(grep -r ssid_sta /c/Users/luc/Documents/GitHub/ESP3D-WEBUI/config --include=*.json)"
     ]
   }
 }

src/components/Controls/Fields/Input.js

@@ -305,6 +305,7 @@ const Input = ({
                                 cb: refreshList,
                                 text: T("S50"),
                                 noclose: true,
+                                class: "btn-primary",
                             },
                             icon: <Search />,
                             id: modalId,

src/components/Controls/ScanAp.js

@@ -23,7 +23,7 @@ import { useHttpQueue } from "../../hooks"
 import { espHttpURL } from "../../components/Helpers"
 import { useUiContext, useUiContextFn } from "../../contexts"
 import { T } from "./../Translations"
-import { Lock, CheckCircle } from "preact-feather"
+import { Lock, Wifi } from "preact-feather"
 
 const ScanApList = ({ id, setValue, refreshfn }) => {
     const { modals, toasts } = useUiContext()
@@ -90,8 +90,9 @@ const ScanApList = ({ id, setValue, refreshfn }) => {
                                         <ButtonImg
                                             m2
                                             ltooltip
+                                            className="btn-scan-wifi"
                                             data-tooltip={T("S51")}
-                                            icon={<CheckCircle />}
+                                            icon={<Wifi class="scan-wifi-icon" />}
                                             onClick={() => {
                                                 useUiContextFn.haptic()
                                                 setValue(SSID)

src/components/Controls/ScanExtensions.js

@@ -269,15 +269,17 @@ const ScanExtensionsList = ({ id, refreshfn, extensionCheckConfig, addedPaths =
                                     <tr key={e.id}>
                                         <td>
                                             {showCheckbox ? (
-                                                <input
-                                                    type="checkbox"
-                                                    class="form-checkbox"
-                                                    checked={selectedIds.has(e.id)}
-                                                    onChange={() => {
-                                                        useUiContextFn.haptic()
-                                                        toggleSelected(e.id)
-                                                    }}
-                                                />
+                                                <label class="form-switch">
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={selectedIds.has(e.id)}
+                                                        onChange={() => {
+                                                            useUiContextFn.haptic()
+                                                            toggleSelected(e.id)
+                                                        }}
+                                                    />
+                                                    <i class="form-icon" />
+                                                </label>
                                             ) : (
                                                 <span />
                                             )}

src/style/index.scss

@@ -1112,6 +1112,11 @@ code {
     &.table-hover tbody tr:hover { background: var(--bg-hover); }
     &.table-scroll { display: block; overflow-x: auto; padding-bottom: 0.75rem; white-space: nowrap; }
 }
+.table thead th { color: var(--txt-dim); font-weight: 600; }
+.table tbody td { color: var(--txt-bright) !important; }
+.btn-scan-wifi { color: var(--warn); background: rgba(255,179,0,0.08); border-color: rgba(255,179,0,0.4); }
+.btn-scan-wifi:hover { background: rgba(255,179,0,0.16); border-color: var(--warn); filter: none; box-shadow: none; }
+.btn-scan-wifi .scan-wifi-icon { color: var(--warn); stroke: var(--warn); }
 
 // ═══════════════════════════════════════════════════════════════════════════════
 // APP LAYOUT
@@ -1179,16 +1184,18 @@ code {
 // ═══════════════════════════════════════════════════════════════════════════════
 .temp-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
     gap: 4px;
-    padding: 0.2rem;
+    padding: 0.1rem;
 }
+#temperaturesPanel .panel-body { padding: 0.2rem; padding-bottom: 0; }
 .temp-cell {
     background: var(--bg-base);
     border: 1px solid var(--border-dim);
     border-radius: var(--r);
-    padding: 0.65rem 0.8rem 0.55rem;
+    padding: 0.65rem 0.55rem 0.55rem;
     position: relative;
+    min-width: 175px;
     transition: border-color var(--t), box-shadow var(--t);
 }
 .temp-cell:hover { border-color: var(--a-dim); box-shadow: 0 0 10px var(--a-g); }
@@ -1251,7 +1258,8 @@ code {
 
 .temp-input-wrap {
     display: flex; align-items: stretch; gap: 4px;
-    margin-top: 0.4rem;
+    margin: 0.4rem auto 0;
+    width: fit-content;
 }
 .temp-input {
     font-family: var(--font-chart);

src/tabs/interface/index.js

@@ -355,10 +355,12 @@ const InterfaceTab = () => {
                 button1: {
                     text: T("S50"),
                     noclose: true,
+                    class: "btn-primary",
                     cb: () => scanExtensionsRef.current?.(),
                 },
                 button2: {
                     text: T("S254"),
+                    class: "btn-warning",
                     cb: () => {
                         const ref = addSelectedRef?.current
                         if (!ref) return
@@ -398,7 +400,6 @@ const InterfaceTab = () => {
                             const idxField = item.value?.find((s) => s.name === "index")
                             if (idxField) idxField.value = i
                         })
-                        extraEntry.nb = list.length
                         extraEntry.hasmodified = true
                         const panelsOrderEl = useUiContextFn.getElement("panelsorder", settings)
                         if (panelsOrderEl && Array.isArray(panelsOrderEl.value)) {