fix: out-of-stock button styling and schedule visual cleanup (#431)

- Add distinct styling for out-of-stock dose buttons (.dose-btn.take.out-of-stock)
- Remove redundant .time-row.taken opacity dimming
- Include Playwright regression test for stock status visuals
This commit is contained in:
Daniel Volz
2026-03-14 21:53:58 +01:00
committed by GitHub
parent 63b07e0da8
commit 99160c14ed
2 changed files with 47 additions and 9 deletions
+16 -9
View File
@@ -2618,6 +2618,22 @@ button.has-validation-error {
filter: none;
}
.dose-btn.take.out-of-stock,
.dose-btn.take.out-of-stock:disabled,
.dashboard-schedules-section .dose-btn.take.out-of-stock,
.dashboard-schedules-section .dose-btn.take.out-of-stock:disabled,
[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock,
[data-theme="light"] .dashboard-schedules-section .dose-btn.take.out-of-stock:disabled,
[data-theme="light"] .dose-btn.take.out-of-stock,
[data-theme="light"] .dose-btn.take.out-of-stock:disabled {
opacity: 1;
background: var(--danger);
border-color: var(--danger);
color: white;
box-shadow: 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent);
filter: none;
}
.dose-item.future {
opacity: 0.5;
}
@@ -2749,15 +2765,6 @@ button.has-validation-error {
color: #0f172a;
}
.time-row.taken {
opacity: 0.6;
}
.time-row.taken .med-name {
text-decoration: line-through;
color: var(--text-secondary);
}
.highlights {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));