Improve status color contrast
This commit is contained in:
lizerk
parent
14d9d4a4dc
commit
2696c47556
@ -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() {
|
||||
<tr key={row.date}>
|
||||
<th className={`sticky left-0 z-10 border-b border-r border-[var(--border-subtle)] px-3 py-2 text-left font-medium ${
|
||||
row.is_weekend
|
||||
? "bg-slate-500/10 text-slate-300"
|
||||
? "attendance-matrix-date--weekend"
|
||||
: "bg-[var(--surface-secondary)] text-[var(--foreground)]"
|
||||
}`}>
|
||||
{row.label}
|
||||
@ -2138,7 +2138,7 @@ export default function AttendancePage() {
|
||||
}`}
|
||||
title={cell.primary_label || matrixStatusLabel(cell.status)}
|
||||
>
|
||||
<span className="block truncate font-medium">
|
||||
<span className="block truncate font-semibold">
|
||||
{matrixCellDisplay(cell)}
|
||||
</span>
|
||||
</button>
|
||||
@ -2258,14 +2258,14 @@ export default function AttendancePage() {
|
||||
{matrixCellIssueLabels(selectedCell.cell).length > 0 ? (
|
||||
<div className="mt-3 flex flex-wrap gap-1.5">
|
||||
{matrixCellIssueLabels(selectedCell.cell).map((issue) => (
|
||||
<span key={issue} className="app-status-pill bg-amber-500/15 text-amber-300">
|
||||
<span key={issue} className="app-status-pill attendance-matrix-issue-pill">
|
||||
{formatAttendanceIssueLabel(issue)}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
{selectedCell.cell.is_manually_edited ? (
|
||||
<div className="mt-3 inline-flex rounded-lg border border-violet-400/30 bg-violet-500/10 px-2.5 py-1 text-xs font-medium text-violet-200">
|
||||
<div className="attendance-matrix-manual-pill mt-3 inline-flex rounded-lg px-2.5 py-1 text-xs font-medium">
|
||||
Ручная корректировка EUSRR
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -46,7 +46,7 @@ import { Modal } from "@/components/ui";
|
||||
const statusMeta: Record<ProcurementStatus, { label: string; cls: string }> = {
|
||||
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")}
|
||||
>
|
||||
<Send size={14} />
|
||||
{label("Отправить на согласование")}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user