rouggy/OpsLog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 25 Wiki Activity

fix: changed colors on qsl info tab

Browse Source
This commit is contained in:
rouggy
2026-07-14 20:02:52 +02:00
parent 04b6431726
commit ee844564de
2 changed files with 131 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/QSOEditModal.tsx
+24 -8
View File
@@ -80,11 +80,23 @@ function StatusCell({ value }: { value?: string }) {
if (v === '') {
return <span className="block text-center text-[11px] text-muted-foreground">—</span>;
}
// One colour per state, and each colour means something:
// Yes green — confirmed, the thing you wanted
// Requested blue — in flight, waiting on the other end. Not a problem.
// Modified orange — uploaded, then the QSO changed: it needs re-uploading.
// This is the ONLY state asking for action, so it gets the
// only alarming colour.
// No neutral — nothing done yet. Every freshly logged QSO is "No" on
// every row; painting that orange (as it used to be, in the
// same orange as Requested) made the table shout about a
// non-problem and told you nothing apart.
// Ignore dashed — deliberately excluded, on purpose.
const label = v === 'Y' ? t('qedit.qslYes') : v === 'R' ? t('qedit.qslRequested') : v === 'I' ? t('qedit.qslIgnore') : v === 'M' ? t('qedit.statusModified') : t('qedit.qslNo');
const cls = v === 'Y' ? 'bg-success text-success-foreground'
: v === 'R' ? 'bg-warning text-warning-foreground'
: v === 'I' ? 'bg-muted-foreground text-background'
: 'bg-warning text-warning-foreground';
const cls = v === 'Y' ? 'bg-success text-success-foreground border border-success'
: v === 'R' ? 'bg-info-muted text-info-muted-foreground border border-info-border'
: v === 'M' ? 'bg-warning text-warning-foreground border border-warning'
: v === 'I' ? 'bg-muted text-muted-foreground border border-dashed border-border italic'
: 'bg-muted text-muted-foreground border border-border';
return <span className={cn('block text-center text-[11px] font-semibold rounded px-1 py-0.5', cls)}>{label}</span>;
}
@@ -571,9 +583,13 @@ export function QSOEditModal({ qso, onSave, onDelete, onClose, countries = [], b
</p>
</div>
{/* Right: live status grid for every channel */}
<div className="w-72 shrink-0">
<table className="w-full border-separate" style={{ borderSpacing: 4 }}>
{/* Right: live status grid for every channel.
Sized by its content, not pinned to a width: a fixed 288px box
left the label column too narrow, so "QSL (paper)" wrapped onto
two lines and padded out the whole row. There is spare width to
the right — spend it on the label. */}
<div className="shrink-0">
<table className="border-separate" style={{ borderSpacing: 4 }}>
<thead>
<tr className="text-[10px] uppercase tracking-wider text-muted-foreground">
<th className="text-left font-semibold">{t('qedit.thType')}</th>
@@ -584,7 +600,7 @@ export function QSOEditModal({ qso, onSave, onDelete, onClose, countries = [], b
<tbody>
{CONFIRMATIONS.map((c) => (
<tr key={c.key} className="text-xs">
<td className="font-medium pr-2 py-0.5">{CONF_LABEL_KEYS[c.key] ? t(CONF_LABEL_KEYS[c.key]) : c.label}</td>
<td className="font-medium pr-3 py-0.5 whitespace-nowrap">{CONF_LABEL_KEYS[c.key] ? t(CONF_LABEL_KEYS[c.key]) : c.label}</td>
<td className="w-24"><StatusCell value={val(c.sent)} /></td>
<td className="w-24">{c.rcvd ? <StatusCell value={val(c.rcvd)} /> : <span className="block text-center text-[11px] text-muted-foreground">—</span>}</td>
</tr>