bonamin/bellsystems-cp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed Color Palette to something more pleasing

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 18:26:37 +02:00
parent bec0e606e6
commit 9c953d5ade
6 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/ConfirmDialog.jsx
View File

@@ -35,7 +35,7 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
onClick={onConfirm}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{
backgroundColor: "var(--danger)",
backgroundColor: "var(--danger-btn)",
color: "#fff",
}}
>

2
frontend/src/components/SearchBar.jsx
View File

@@ -38,7 +38,7 @@ export default function SearchBar({ onSearch, placeholder = "Search..." }) {
type="submit"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{
backgroundColor: "var(--btn-primary)",
backgroundColor: "var(--btn-neutral)",
color: "var(--text-heading)",
}}
>

2
frontend/src/devices/DeviceDetail.jsx
View File

@@ -142,7 +142,7 @@ export default function DeviceDetail() {
<button
onClick={() => setShowDelete(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
>
Delete
</button>

60
frontend/src/index.css
View File

@@ -2,40 +2,44 @@
/* BellSystems Dark Theme - Custom Properties */
:root {
--bg-primary: #2f3e46;
--bg-secondary: #354f52;
--bg-card: #354f52;
--bg-card-hover: #3d5a5e;
--bg-input: #2f3e46;
--bg-sidebar: #2f3e46;
--bg-header: #354f52;
--bg-primary: #111827;
--bg-secondary: #1f2937;
--bg-card: #1f2937;
--bg-card-hover: #2a3544;
--bg-input: #111827;
--bg-sidebar: #111827;
--bg-header: #1f2937;
--border-primary: #52796f;
--border-secondary: #4a6b63;
--border-input: #52796f;
--border-primary: #374151;
--border-secondary: #2d3748;
--border-input: #374151;
--text-primary: #cad2c5;
--text-secondary: #a3b8a0;
--text-muted: #84a98c;
--text-heading: #e0e7dc;
--text-primary: #e3e5ea;
--text-secondary: #9ca3af;
--text-muted: #9ca3af;
--text-heading: #e3e5ea;
--accent: #84a98c;
--accent-hover: #9abea2;
--accent: #74b816;
--accent-hover: #82c91e;
--btn-primary: #52796f;
--btn-primary-hover: #5d8a7f;
--btn-primary: #74b816;
--btn-primary-hover: #82c91e;
--btn-neutral: #778ca8;
--btn-neutral-hover: #8a9dba;
--danger: #e57373;
--danger-hover: #ef5350;
--danger-bg: #4a2c2c;
--danger-text: #ffcdd2;
--danger: #f34b4b;
--danger-hover: #e53e3e;
--danger-btn: #f76707;
--danger-btn-hover: #e55d06;
--danger-bg: #3b1a1a;
--danger-text: #f34b4b;
--success: #81c784;
--success-bg: #2c4a2e;
--success-text: #c8e6c9;
--success: #74b816;
--success-bg: #1a2e0a;
--success-text: #a3d977;
--badge-blue-bg: #2e4a52;
--badge-blue-text: #80cbc4;
--badge-blue-bg: #1e3a5f;
--badge-blue-text: #63b3ed;
}
/* Ensure all interactive elements show pointer cursor */
@@ -97,7 +101,7 @@ input:focus,
textarea:focus,
select:focus {
border-color: var(--accent) !important;
box-shadow: 0 0 0 2px rgba(132, 169, 140, 0.3) !important;
box-shadow: 0 0 0 2px rgba(116, 184, 22, 0.3) !important;
}
/* Checkbox dark styling */

2
frontend/src/melodies/MelodyDetail.jsx
View File

@@ -143,7 +143,7 @@ export default function MelodyDetail() {
<button
onClick={() => setShowDelete(true)}
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
>
Delete
</button>

2
frontend/src/melodies/MelodySettings.jsx
View File

@@ -212,7 +212,7 @@ export default function MelodySettings() {
onClick={() => removeColor(color)}
disabled={saving}
className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full text-xs opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center"
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
>
&times;
</button>