Minor Refinements to Colours
This commit is contained in:
@@ -97,7 +97,7 @@ export default function LoginPage() {
|
|||||||
className="w-full py-2 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
|
className="w-full py-2 rounded-md transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm font-medium"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "var(--btn-primary)",
|
backgroundColor: "var(--btn-primary)",
|
||||||
color: "var(--text-heading)",
|
color: "#fff",
|
||||||
}}
|
}}
|
||||||
onMouseEnter={(e) => !isLoading && (e.target.style.backgroundColor = "var(--btn-primary-hover)")}
|
onMouseEnter={(e) => !isLoading && (e.target.style.backgroundColor = "var(--btn-primary-hover)")}
|
||||||
onMouseLeave={(e) => (e.target.style.backgroundColor = "var(--btn-primary)")}
|
onMouseLeave={(e) => (e.target.style.backgroundColor = "var(--btn-primary)")}
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ export default function ConfirmDialog({ open, title, message, onConfirm, onCance
|
|||||||
onClick={onConfirm}
|
onClick={onConfirm}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{
|
style={{
|
||||||
backgroundColor: "var(--danger-btn)",
|
backgroundColor: "var(--danger)",
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -135,14 +135,14 @@ export default function DeviceDetail() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate(`/devices/${id}/edit`)}
|
onClick={() => navigate(`/devices/${id}/edit`)}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowDelete(true)}
|
onClick={() => setShowDelete(true)}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
|
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -225,7 +225,7 @@ export default function DeviceForm() {
|
|||||||
form="device-form"
|
form="device-form"
|
||||||
disabled={saving}
|
disabled={saving}
|
||||||
className="px-4 py-2 text-sm rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
className="px-4 py-2 text-sm rounded-md hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
{saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
|
{saving ? "Saving..." : isEdit ? "Update Device" : "Create Device"}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -65,7 +65,7 @@ export default function DeviceList() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate("/devices/new")}
|
onClick={() => navigate("/devices/new")}
|
||||||
className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
|
className="px-4 py-2 text-sm rounded-md hover:opacity-90 transition-colors cursor-pointer"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
Add Device
|
Add Device
|
||||||
</button>
|
</button>
|
||||||
@@ -219,7 +219,7 @@ export default function DeviceList() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate(`/devices/${device.id}/edit`)}
|
onClick={() => navigate(`/devices/${device.id}/edit`)}
|
||||||
className="hover:opacity-80 text-xs cursor-pointer"
|
className="hover:opacity-80 text-xs cursor-pointer"
|
||||||
style={{ color: "var(--accent)" }}
|
style={{ color: "var(--text-link)" }}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -18,6 +18,8 @@
|
|||||||
--text-secondary: #9ca3af;
|
--text-secondary: #9ca3af;
|
||||||
--text-muted: #9ca3af;
|
--text-muted: #9ca3af;
|
||||||
--text-heading: #e3e5ea;
|
--text-heading: #e3e5ea;
|
||||||
|
--text-white: #f7f7f7;
|
||||||
|
--text-link: #93befa;
|
||||||
|
|
||||||
--accent: #74b816;
|
--accent: #74b816;
|
||||||
--accent-hover: #82c91e;
|
--accent-hover: #82c91e;
|
||||||
|
|||||||
@@ -136,14 +136,14 @@ export default function MelodyDetail() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate(`/melodies/${id}/edit`)}
|
onClick={() => navigate(`/melodies/${id}/edit`)}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--text-link)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
onClick={() => setShowDelete(true)}
|
onClick={() => setShowDelete(true)}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{ backgroundColor: "var(--danger-btn)", color: "#fff" }}
|
style={{ backgroundColor: "var(--danger)", color: "#fff" }}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -337,7 +337,7 @@ export default function MelodyForm() {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||||
<div className="flex items-center gap-2 pt-2">
|
<div className="flex items-center gap-2 pt-2">
|
||||||
<input type="checkbox" id="isTrueRing" checked={information.isTrueRing} onChange={(e) => updateInfo("isTrueRing", e.target.checked)} className="h-4 w-4 rounded" />
|
<input type="checkbox" id="isTrueRing" checked={information.isTrueRing} onChange={(e) => updateInfo("isTrueRing", e.target.checked)} className="h-4 w-4 rounded" />
|
||||||
<label htmlFor="isTrueRing" className="text-sm font-medium" style={labelStyle}>True Ring</label>
|
<label htmlFor="isTrueRing" className="text-sm font-medium" style={labelStyle}>True Ring</label>
|
||||||
|
|||||||
@@ -256,7 +256,7 @@ export default function MelodyList() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate("/melodies/new")}
|
onClick={() => navigate("/melodies/new")}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors cursor-pointer"
|
className="px-4 py-2 text-sm rounded-md transition-colors cursor-pointer"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
Add Melody
|
Add Melody
|
||||||
</button>
|
</button>
|
||||||
@@ -443,7 +443,7 @@ export default function MelodyList() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => navigate(`/melodies/${row.id}/edit`)}
|
onClick={() => navigate(`/melodies/${row.id}/edit`)}
|
||||||
className="text-xs cursor-pointer"
|
className="text-xs cursor-pointer"
|
||||||
style={{ color: "var(--accent)" }}
|
style={{ color: "var(--text-link)" }}
|
||||||
>
|
>
|
||||||
Edit
|
Edit
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
@@ -192,7 +192,7 @@ export default function MelodySettings() {
|
|||||||
<option value="">Select language...</option>
|
<option value="">Select language...</option>
|
||||||
{availableLangsToAdd.map((l) => (<option key={l.code} value={l.code}>{l.name} ({l.code})</option>))}
|
{availableLangsToAdd.map((l) => (<option key={l.code} value={l.code}>{l.name} ({l.code})</option>))}
|
||||||
</select>
|
</select>
|
||||||
<button type="button" onClick={addLanguage} disabled={!langToAdd || saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
|
<button type="button" onClick={addLanguage} disabled={!langToAdd || saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -234,7 +234,7 @@ export default function MelodySettings() {
|
|||||||
placeholder="#FF0000"
|
placeholder="#FF0000"
|
||||||
className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
|
className="w-28 px-3 py-2 rounded-md text-sm font-mono border"
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
|
<button type="button" onClick={addColor} disabled={saving} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -272,7 +272,7 @@ export default function MelodySettings() {
|
|||||||
placeholder="Seconds (e.g. 45)"
|
placeholder="Seconds (e.g. 45)"
|
||||||
className="w-40 px-3 py-2 rounded-md text-sm border"
|
className="w-40 px-3 py-2 rounded-md text-sm border"
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}>Add</button>
|
<button type="button" onClick={addDuration} disabled={saving || !durationToAdd} className={btnPrimary} style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}>Add</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -83,7 +83,7 @@ export default function TranslationModal({
|
|||||||
type="button"
|
type="button"
|
||||||
onClick={handleSave}
|
onClick={handleSave}
|
||||||
className="px-4 py-2 text-sm rounded-md transition-colors"
|
className="px-4 py-2 text-sm rounded-md transition-colors"
|
||||||
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-heading)" }}
|
style={{ backgroundColor: "var(--btn-primary)", color: "var(--text-white)" }}
|
||||||
>
|
>
|
||||||
Save Translations
|
Save Translations
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user