bleese14/004.erp.generic
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix: popravi vidljivost checkboxa u dark modu
Some checks failed
ERP CI/CD Pipeline / test (push) Has been cancelled
Details
ERP CI/CD Pipeline / Deploy (server git pull + compose) (push) Has been cancelled
Details

Browse Source 
Dodaj prilagođeni stil checkboxa kako bi odabrano i neodabrano stanje bilo jasno vidljivo u dark temi, te primijeni novu klasu na checkboxe u modalima slanja emaila.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
2026-07-21 14:56:09 +02:00
parent 5945423346
commit ebb642e572
3 changed files with 50 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/dashboard/WorkOrderDetailModal.jsx
View File

@@ -701,6 +701,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="mt-3 flex items-center gap-2 text-sm text-text-main"> <label className="mt-3 flex items-center gap-2 text-sm text-text-main">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={form.has_travel_order} checked={form.has_travel_order}
onChange={(event) => { onChange={(event) => {
const checked = event.currentTarget.checked; const checked = event.currentTarget.checked;
@@ -911,6 +912,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2 text-xs text-text-muted"> <label className="flex items-center gap-2 text-xs text-text-muted">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={sendToAllTeamMembers} checked={sendToAllTeamMembers}
onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)} onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)}
/> />
@@ -957,6 +959,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={emailPayload.includeWorkOrderPdf} checked={emailPayload.includeWorkOrderPdf}
onChange={(event) => setEmailPayload({ ...emailPayload, includeWorkOrderPdf: event.currentTarget.checked })} onChange={(event) => setEmailPayload({ ...emailPayload, includeWorkOrderPdf: event.currentTarget.checked })}
/> />
@@ -965,6 +968,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={emailPayload.includeServiceRecordsPdf} checked={emailPayload.includeServiceRecordsPdf}
onChange={(event) => setEmailPayload({ ...emailPayload, includeServiceRecordsPdf: event.currentTarget.checked })} onChange={(event) => setEmailPayload({ ...emailPayload, includeServiceRecordsPdf: event.currentTarget.checked })}
/> />
@@ -973,6 +977,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={emailPayload.includeInvoicesPdf} checked={emailPayload.includeInvoicesPdf}
onChange={(event) => setEmailPayload({ ...emailPayload, includeInvoicesPdf: event.currentTarget.checked })} onChange={(event) => setEmailPayload({ ...emailPayload, includeInvoicesPdf: event.currentTarget.checked })}
/> />
@@ -981,6 +986,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2"> <label className="flex items-center gap-2">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={emailPayload.includeImages} checked={emailPayload.includeImages}
onChange={(event) => setEmailPayload({ ...emailPayload, includeImages: event.currentTarget.checked })} onChange={(event) => setEmailPayload({ ...emailPayload, includeImages: event.currentTarget.checked })}
/> />
@@ -989,6 +995,7 @@ export default function WorkOrderDetailModal({ open, workOrder, onClose, onSubmi
<label className="flex items-center gap-2 sm:col-span-2"> <label className="flex items-center gap-2 sm:col-span-2">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={emailPayload.includeMonthlyTasks} checked={emailPayload.includeMonthlyTasks}
onChange={(event) => setEmailPayload({ ...emailPayload, includeMonthlyTasks: event.currentTarget.checked })} onChange={(event) => setEmailPayload({ ...emailPayload, includeMonthlyTasks: event.currentTarget.checked })}
/> />

1
frontend/src/components/fleet/ServiceRecordDetailModal.jsx
View File

@@ -472,6 +472,7 @@ export default function ServiceRecordDetailModal({
<label className="flex items-center gap-2 text-xs text-text-muted"> <label className="flex items-center gap-2 text-xs text-text-muted">
<input <input
type="checkbox" type="checkbox"
className="erp-checkbox"
checked={sendToAllTeamMembers} checked={sendToAllTeamMembers}
onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)} onChange={(event) => setSendToAllTeamMembers(event.currentTarget.checked)}
/> />

42
frontend/src/styles/global.css
View File

@@ -72,3 +72,45 @@ body.modal-open #main-content {
from { opacity: 0; } from { opacity: 0; }
to { opacity: 1; } to { opacity: 1; }
} }
/* Checkbox readability across light/dark themes */
input[type="checkbox"].erp-checkbox {
appearance: none;
width: 1rem;
height: 1rem;
border: 1px solid var(--app-border-hairline);
border-radius: 0.25rem;
background: var(--app-canvas-base);
display: inline-grid;
place-content: center;
cursor: pointer;
}
input[type="checkbox"].erp-checkbox::before {
content: "";
width: 0.55rem;
height: 0.55rem;
transform: scale(0);
transition: transform 120ms ease-in-out;
clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
box-shadow: inset 1em 1em #ffffff;
}
input[type="checkbox"].erp-checkbox:checked {
background: var(--app-brand-primary);
border-color: var(--app-brand-primary);
}
input[type="checkbox"].erp-checkbox:checked::before {
transform: scale(1);
}
input[type="checkbox"].erp-checkbox:disabled {
opacity: 0.65;
cursor: not-allowed;
}
input[type="checkbox"].erp-checkbox:focus-visible {
outline: 2px solid var(--app-brand-primary);
outline-offset: 2px;
}