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

Fixes to Add Melody Page, minor UI Tweaks

Browse Source
This commit is contained in:
Vasileios Kousaridas
2026-02-17 18:11:04 +02:00
parent dff1ec921d
commit bec0e606e6
21 changed files with 863 additions and 899 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,24 +3,41 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="fixed inset-0 bg-black/50" onClick={onCancel} />
<div className="relative bg-white rounded-lg shadow-xl p-6 w-full max-w-sm mx-4">
<h3 className="text-lg font-semibold text-gray-900 mb-2">
<div className="fixed inset-0 bg-black/60" onClick={onCancel} />
<div
className="relative rounded-lg shadow-xl p-6 w-full max-w-sm mx-4 border"
style={{
backgroundColor: "var(--bg-card)",
borderColor: "var(--border-primary)",
}}
>
<h3
className="text-lg font-semibold mb-2"
style={{ color: "var(--text-heading)" }}
>
{title || "Confirm"}
</h3>
<p className="text-sm text-gray-600 mb-6">
<p className="text-sm mb-6" style={{ color: "var(--text-secondary)" }}>
{message || "Are you sure?"}
</p>
<div className="flex justify-end gap-3">
<button
onClick={onCancel}
className="px-4 py-2 text-sm text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{
backgroundColor: "var(--bg-card-hover)",
color: "var(--text-primary)",
}}
>
Cancel
</button>
<button
onClick={onConfirm}
className="px-4 py-2 text-sm text-white bg-red-600 rounded-md hover:bg-red-700 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{
backgroundColor: "var(--danger)",
color: "#fff",
}}
>
Delete
</button>

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

@@ -21,13 +21,14 @@ export default function SearchBar({ onSearch, placeholder = "Search..." }) {
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder={placeholder}
className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"
className="w-full px-3 py-2 rounded-md text-sm border"
/>
{value && (
<button
type="button"
onClick={handleClear}
className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
className="absolute right-2 top-1/2 -translate-y-1/2"
style={{ color: "var(--text-muted)" }}
>
&times;
</button>
@@ -35,7 +36,11 @@ export default function SearchBar({ onSearch, placeholder = "Search..." }) {
</div>
<button
type="submit"
className="px-4 py-2 bg-blue-600 text-white text-sm rounded-md hover:bg-blue-700 transition-colors"
className="px-4 py-2 text-sm rounded-md transition-colors"
style={{
backgroundColor: "var(--btn-primary)",
color: "var(--text-heading)",
}}
>
Search
</button>