From 2696c47556f47911f9822410d7a94eaca1e859e7 Mon Sep 17 00:00:00 2001 From: lizerk Date: Mon, 1 Jun 2026 17:06:32 +0300 Subject: [PATCH] Improve status color contrast --- frontend/src/app/attendance/page.tsx | 20 ++-- frontend/src/app/globals.css | 138 ++++++++++++++++++++++++++ frontend/src/app/procurement/page.tsx | 4 +- 3 files changed, 150 insertions(+), 12 deletions(-) diff --git a/frontend/src/app/attendance/page.tsx b/frontend/src/app/attendance/page.tsx index 0ae352dd..b87d2db8 100644 --- a/frontend/src/app/attendance/page.tsx +++ b/frontend/src/app/attendance/page.tsx @@ -433,19 +433,19 @@ function getMonthKeysBetween(start: string, end: string) { } function matrixCellTone(status: string) { - if (status === "technical") return "bg-red-500/15 text-red-200 hover:bg-red-500/20"; + if (status === "technical") return "attendance-matrix-cell--technical"; if ( status === "personnel_issue" || status === "underwork" || status === "late" || status === "absent" ) { - return "bg-amber-500/15 text-amber-100 hover:bg-amber-500/20"; + return "attendance-matrix-cell--issue"; } - if (status === "overtime") return "bg-emerald-500/15 text-emerald-100 hover:bg-emerald-500/20"; - if (status === "non_working") return "bg-slate-500/15 text-slate-300 hover:bg-slate-500/20"; - if (status === "normal") return "bg-[var(--surface-primary)] text-[var(--foreground)] hover:bg-[var(--surface-tertiary)]"; - return "bg-transparent text-[var(--muted-foreground)] hover:bg-[var(--surface-secondary)]"; + if (status === "overtime") return "attendance-matrix-cell--overtime"; + if (status === "non_working") return "attendance-matrix-cell--non-working"; + if (status === "normal") return "attendance-matrix-cell--normal"; + return "attendance-matrix-cell--empty"; } function matrixCellSourceTone(cell: MonthlyAttendanceMatrixCell) { @@ -2112,7 +2112,7 @@ export default function AttendancePage() { {row.label} @@ -2138,7 +2138,7 @@ export default function AttendancePage() { }`} title={cell.primary_label || matrixStatusLabel(cell.status)} > - + {matrixCellDisplay(cell)} @@ -2258,14 +2258,14 @@ export default function AttendancePage() { {matrixCellIssueLabels(selectedCell.cell).length > 0 ? (
{matrixCellIssueLabels(selectedCell.cell).map((issue) => ( - + {formatAttendanceIssueLabel(issue)} ))}
) : null} {selectedCell.cell.is_manually_edited ? ( -
+
Ручная корректировка EUSRR
) : null} diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 16b1e01c..ccb2197b 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -438,6 +438,17 @@ html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator { border-color: color-mix(in srgb, #f59e0b 30%, var(--border-strong)); } +.app-action-approval { + border: 1px solid #ea580c; + background: #f97316; + color: #ffffff; +} + +.app-action-approval:hover { + background: #ea580c; + border-color: #c2410c; +} + .app-action-secondary { border: 1px solid var(--border-strong); background: var(--surface-elevated); @@ -554,6 +565,133 @@ html[data-bs-theme="dark"] .app-input::-webkit-calendar-picker-indicator { color: #b45309; } +.app-feedback-approval { + border: 1px solid color-mix(in srgb, #f97316 24%, var(--border-subtle)); + background: color-mix(in srgb, #f97316 14%, var(--surface-primary)); + color: #c2410c; +} + +.attendance-matrix-cell--technical { + background: color-mix(in srgb, #ef4444 14%, var(--surface-primary)); + color: #b91c1c; +} + +.attendance-matrix-cell--technical:hover { + background: color-mix(in srgb, #ef4444 20%, var(--surface-primary)); +} + +.attendance-matrix-cell--issue { + background: color-mix(in srgb, #f59e0b 20%, var(--surface-primary)); + color: #92400e; +} + +.attendance-matrix-cell--issue:hover { + background: color-mix(in srgb, #f59e0b 28%, var(--surface-primary)); +} + +.attendance-matrix-cell--overtime { + background: color-mix(in srgb, #10b981 16%, var(--surface-primary)); + color: #047857; +} + +.attendance-matrix-cell--overtime:hover { + background: color-mix(in srgb, #10b981 22%, var(--surface-primary)); +} + +.attendance-matrix-cell--non-working { + background: color-mix(in srgb, #64748b 14%, var(--surface-primary)); + color: #475569; +} + +.attendance-matrix-cell--non-working:hover { + background: color-mix(in srgb, #64748b 20%, var(--surface-primary)); +} + +.attendance-matrix-cell--normal { + background: var(--surface-primary); + color: var(--foreground); +} + +.attendance-matrix-cell--normal:hover, +.attendance-matrix-cell--empty:hover { + background: var(--surface-tertiary); +} + +.attendance-matrix-cell--empty { + background: transparent; + color: var(--muted-foreground); +} + +.attendance-matrix-date--weekend { + background: color-mix(in srgb, #64748b 10%, var(--surface-secondary)); + color: #64748b; +} + +.attendance-matrix-issue-pill { + border-color: color-mix(in srgb, #f59e0b 24%, var(--border-subtle)); + background: color-mix(in srgb, #f59e0b 16%, var(--surface-primary)); + color: #92400e; +} + +.attendance-matrix-manual-pill { + border: 1px solid color-mix(in srgb, #8b5cf6 26%, var(--border-subtle)); + background: color-mix(in srgb, #8b5cf6 12%, var(--surface-primary)); + color: #6d28d9; +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--technical { + background: color-mix(in srgb, #ef4444 18%, transparent); + color: #fecaca; +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--technical:hover { + background: color-mix(in srgb, #ef4444 24%, transparent); +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--issue { + background: color-mix(in srgb, #f59e0b 18%, transparent); + color: #fde68a; +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--issue:hover { + background: color-mix(in srgb, #f59e0b 24%, transparent); +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--overtime { + background: color-mix(in srgb, #10b981 17%, transparent); + color: #a7f3d0; +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--overtime:hover { + background: color-mix(in srgb, #10b981 23%, transparent); +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--non-working { + background: color-mix(in srgb, #64748b 18%, transparent); + color: #cbd5e1; +} + +html[data-bs-theme="dark"] .attendance-matrix-cell--non-working:hover { + background: color-mix(in srgb, #64748b 24%, transparent); +} + +html[data-bs-theme="dark"] .attendance-matrix-date--weekend { + background: color-mix(in srgb, #64748b 16%, var(--surface-secondary)); + color: #cbd5e1; +} + +html[data-bs-theme="dark"] .attendance-matrix-issue-pill { + border-color: color-mix(in srgb, #f59e0b 32%, var(--border-subtle)); + background: color-mix(in srgb, #f59e0b 16%, transparent); + color: #fde68a; +} + +html[data-bs-theme="dark"] .attendance-matrix-manual-pill { + border-color: color-mix(in srgb, #a78bfa 34%, var(--border-subtle)); + background: color-mix(in srgb, #8b5cf6 16%, transparent); + color: #ddd6fe; +} + .reaction-picker-surface { border: 1px solid var(--border-subtle); background: var(--surface-secondary); diff --git a/frontend/src/app/procurement/page.tsx b/frontend/src/app/procurement/page.tsx index 8d9e7702..d79ade73 100644 --- a/frontend/src/app/procurement/page.tsx +++ b/frontend/src/app/procurement/page.tsx @@ -46,7 +46,7 @@ import { Modal } from "@/components/ui"; const statusMeta: Record = { draft: { label: "Черновик", cls: "app-badge" }, waiting: { label: "Ожидает", cls: "app-feedback-warning" }, - pending: { label: "На согласовании", cls: "app-feedback-warning" }, + pending: { label: "На согласовании", cls: "app-feedback-approval" }, approved: { label: "Одобрено", cls: "app-feedback-success" }, in_progress: { label: "В работе", cls: "app-selected" }, completed: { label: "Завершено", cls: "app-feedback-success" }, @@ -196,7 +196,7 @@ function ProcurementRequestActionButtons({ onClick={() => onSubmit(request.id)} disabled={busyKey === `submit-${request.id}`} title="Отправить на согласование" - className={buttonClass("app-action-warning")} + className={buttonClass("app-action-approval")} > {label("Отправить на согласование")}