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

feat: Themes added, 4 themes available (3 dark, 1 light)

Browse Source
This commit is contained in:
rouggy
2026-07-06 09:08:47 +02:00
parent fafa0c22ab
commit 06183bd5d4
43 changed files with 982 additions and 457 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BandMap.tsx
+27 -27
View File
@@ -61,17 +61,17 @@ const BAND_RANGES: Record<string, [number, number]> = {
};
const SEGMENT_COLORS: Record<string, [number, number, string][]> = {
'160m': [[1800, 1838, 'fill-emerald-50'], [1838, 1840, 'fill-sky-50'], [1840, 2000, 'fill-amber-50']],
'80m': [[3500, 3580, 'fill-emerald-50'], [3580, 3600, 'fill-sky-50'], [3600, 3800, 'fill-amber-50']],
'60m': [[5350, 5450, 'fill-amber-50']],
'40m': [[7000, 7040, 'fill-emerald-50'], [7040, 7100, 'fill-sky-50'], [7100, 7200, 'fill-amber-50']],
'30m': [[10100, 10130, 'fill-emerald-50'], [10130, 10150, 'fill-sky-50']],
'20m': [[14000, 14070, 'fill-emerald-50'], [14070, 14100, 'fill-sky-50'], [14100, 14350, 'fill-amber-50']],
'17m': [[18068, 18095, 'fill-emerald-50'], [18095, 18110, 'fill-sky-50'], [18110, 18168, 'fill-amber-50']],
'15m': [[21000, 21070, 'fill-emerald-50'], [21070, 21150, 'fill-sky-50'], [21150, 21450, 'fill-amber-50']],
'12m': [[24890, 24915, 'fill-emerald-50'], [24915, 24940, 'fill-sky-50'], [24940, 24990, 'fill-amber-50']],
'10m': [[28000, 28070, 'fill-emerald-50'], [28070, 28300, 'fill-sky-50'], [28300, 29700, 'fill-amber-50']],
'6m': [[50000, 50100, 'fill-emerald-50'], [50100, 50500, 'fill-amber-50']],
'160m': [[1800, 1838, 'fill-success-muted'], [1838, 1840, 'fill-info-muted'], [1840, 2000, 'fill-warning-muted']],
'80m': [[3500, 3580, 'fill-success-muted'], [3580, 3600, 'fill-info-muted'], [3600, 3800, 'fill-warning-muted']],
'60m': [[5350, 5450, 'fill-warning-muted']],
'40m': [[7000, 7040, 'fill-success-muted'], [7040, 7100, 'fill-info-muted'], [7100, 7200, 'fill-warning-muted']],
'30m': [[10100, 10130, 'fill-success-muted'], [10130, 10150, 'fill-info-muted']],
'20m': [[14000, 14070, 'fill-success-muted'], [14070, 14100, 'fill-info-muted'], [14100, 14350, 'fill-warning-muted']],
'17m': [[18068, 18095, 'fill-success-muted'], [18095, 18110, 'fill-info-muted'], [18110, 18168, 'fill-warning-muted']],
'15m': [[21000, 21070, 'fill-success-muted'], [21070, 21150, 'fill-info-muted'], [21150, 21450, 'fill-warning-muted']],
'12m': [[24890, 24915, 'fill-success-muted'], [24915, 24940, 'fill-info-muted'], [24940, 24990, 'fill-warning-muted']],
'10m': [[28000, 28070, 'fill-success-muted'], [28070, 28300, 'fill-info-muted'], [28300, 29700, 'fill-warning-muted']],
'6m': [[50000, 50100, 'fill-success-muted'], [50100, 50500, 'fill-warning-muted']],
};
// Small coloured dot + label used in the band-map legend strip.
@@ -103,22 +103,22 @@ function statusStyle(s: string): { pill: string; bar: string; line: string; dot:
// dot = small marker on the freq scale
switch (s) {
case 'new': return {
pill: 'bg-rose-50 text-rose-900 border-rose-200 hover:bg-rose-100',
bar: 'bg-rose-500',
line: 'stroke-rose-400',
dot: 'fill-rose-500',
pill: 'bg-danger-muted text-danger-muted-foreground border-danger-border hover:bg-danger-muted',
bar: 'bg-danger',
line: 'stroke-danger',
dot: 'fill-danger',
};
case 'new-band': return {
pill: 'bg-amber-50 text-amber-900 border-amber-200 hover:bg-amber-100',
bar: 'bg-amber-500',
line: 'stroke-amber-400',
dot: 'fill-amber-500',
pill: 'bg-warning-muted text-warning-muted-foreground border-warning-border hover:bg-warning-muted',
bar: 'bg-warning',
line: 'stroke-warning',
dot: 'fill-warning',
};
case 'new-slot': return {
pill: 'bg-yellow-50 text-yellow-900 border-yellow-200 hover:bg-yellow-100',
bar: 'bg-yellow-500',
line: 'stroke-yellow-500',
dot: 'fill-yellow-500',
pill: 'bg-caution-muted text-caution-muted-foreground border-caution-border hover:bg-caution-muted',
bar: 'bg-caution',
line: 'stroke-caution',
dot: 'fill-caution',
};
case 'worked': return {
pill: 'bg-card text-muted-foreground border-border/60 hover:bg-muted/50',
@@ -520,14 +520,14 @@ export function BandMap({ band, spots, spotStatus, currentFreqHz, onSpotClick, o
</div>
{/* Colour legend — what each pill colour means. */}
<div className="px-3 py-1 flex flex-wrap items-center gap-x-2.5 gap-y-0.5 text-[9px] text-muted-foreground bg-muted/20 border-t border-border">
<LegendDot cls="bg-rose-400" label={t('bmp.legendNewDxcc')} />
<LegendDot cls="bg-amber-400" label={t('bmp.legendNewBand')} />
<LegendDot cls="bg-yellow-300" label={t('bmp.legendNewSlot')} />
<LegendDot cls="bg-danger" label={t('bmp.legendNewDxcc')} />
<LegendDot cls="bg-warning" label={t('bmp.legendNewBand')} />
<LegendDot cls="bg-caution" label={t('bmp.legendNewSlot')} />
<LegendDot cls="bg-muted-foreground/30" label={t('bmp.legendWorked')} />
</div>
<div className="px-3 py-1 text-[9px] text-muted-foreground bg-muted/30 border-t border-border font-mono text-center shrink-0">
{t('bmp.footerHint')}
{hidden > 0 && <span className="text-amber-600"> · {t('bmp.spotsHidden', { n: hidden, max: MAX_VISIBLE_SPOTS })}</span>}
{hidden > 0 && <span className="text-warning"> · {t('bmp.spotsHidden', { n: hidden, max: MAX_VISIBLE_SPOTS })}</span>}
</div>
</div>
);