k1nq/TREK
1
0
Fork 0
mirror of https://github.com/mauriceboe/TREK.git synced 2026-11-14 00:01:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

style(mail-ingest): a more compact admin status

Browse Source
This commit is contained in:
Maurice
2026-11-13 19:55:13 +01:00
parent 4806c62976
commit 7ed15a77b4
2 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/Admin/mailIngest/MailIngestAdminCard.tsx
+7 -7
View File
@@ -192,13 +192,13 @@ function StatTile({
}) {
const look = STAT_TONE[tone];
return (
<div className="flex min-w-0 items-center gap-2.5 rounded-xl border border-edge-faint bg-surface-card px-3 py-2.5 shadow-sm">
<span className={`grid h-8 w-8 flex-none place-items-center rounded-full ${look.icon}`}>
<Icon size={15} strokeWidth={2.1} />
<div className="flex min-w-0 items-center gap-2 rounded-lg border border-edge-faint bg-surface-card px-2.5 py-1.5 shadow-sm">
<span className={`grid h-6 w-6 flex-none place-items-center rounded-full ${look.icon}`}>
<Icon size={12} strokeWidth={2.2} />
</span>
<div className="min-w-0">
<div className={`text-subtitle font-semibold tabular-nums leading-none ${look.value}`}>{value}</div>
<div className="mt-1 truncate text-caption text-content-faint">{label}</div>
<div className={`text-body font-semibold tabular-nums leading-tight ${look.value}`}>{value}</div>
<div className="truncate text-caption leading-tight text-content-faint">{label}</div>
</div>
</div>
);
@@ -218,7 +218,7 @@ function StatusBlock({ admin, t, locale }: { admin: MailIngestAdmin; t: T; local
: t('mailAdmin.status.never');
const healthy = !status.last_error && !!status.last_ok_at;
return (
<div className="flex flex-col gap-3 rounded-xl border border-edge-faint bg-surface-secondary p-3.5">
<div className="flex flex-col gap-2 rounded-xl border border-edge-faint bg-surface-secondary p-2.5">
<div className="flex flex-wrap items-center justify-between gap-2">
<span className="text-caption font-semibold uppercase tracking-[0.08em] text-content-faint">
{t('mailAdmin.status.title')}
@@ -228,7 +228,7 @@ function StatusBlock({ admin, t, locale }: { admin: MailIngestAdmin; t: T; local
{t('mailAdmin.status.lastRead', { time: lastRead })}
</span>
</div>
<div className="grid grid-cols-4 gap-2 max-md:grid-cols-2">
<div className="grid grid-cols-4 gap-1.5 max-md:grid-cols-2">
<StatTile icon={Mail} label={t('mailAdmin.status.mails')} value={facts.mails} tone="neutral" />
<StatTile icon={CheckCircle} label={t('mailAdmin.status.added')} value={facts.added} tone="success" />
<StatTile icon={Clock} label={t('mailAdmin.status.waiting')} value={facts.waiting} tone="warning" />
client/src/mobile/screens/admin/MMailIngestAdminCard.tsx
+7 -7
View File
@@ -134,21 +134,21 @@ function StatTile({
}) {
const color = STAT_COLOR[tone];
return (
<div className="flex min-w-0 items-center gap-[9px] rounded-[12px] bg-[color:var(--m-inner)] px-[10px] py-[9px] shadow-sm">
<div className="flex min-w-0 items-center gap-[7px] rounded-[10px] bg-[color:var(--m-inner)] px-[8px] py-[6px] shadow-sm">
<span
className="grid h-7 w-7 flex-none place-items-center rounded-full"
className="grid h-6 w-6 flex-none place-items-center rounded-full"
style={{ background: `color-mix(in srgb, ${color} 15%, transparent)`, color }}
>
<Icon size={13} strokeWidth={2.2} />
<Icon size={12} strokeWidth={2.2} />
</span>
<div className="min-w-0">
<div
className="font-geist text-subtitle font-bold tabular-nums leading-none"
className="font-geist text-body font-bold tabular-nums leading-tight"
style={{ color: tone === 'danger' ? color : 'var(--m-ink)' }}
>
{value}
</div>
<div className="mt-[3px] truncate text-caption text-m-faint">{label}</div>
<div className="truncate text-caption leading-tight text-m-faint">{label}</div>
</div>
</div>
);
@@ -164,7 +164,7 @@ function Status({ admin, t, locale }: { admin: MailIngestAdmin; t: TranslationFn
: t('mailAdmin.status.never');
const healthy = !status.last_error && !!status.last_ok_at;
return (
<div className="mt-3 rounded-[14px] bg-[color:var(--m-ic)] p-[10px]">
<div className="mt-3 rounded-[12px] bg-[color:var(--m-ic)] p-[8px]">
<p className="flex items-center gap-[6px] px-[2px] text-caption font-semibold text-m-ink">
<span
className="h-[7px] w-[7px] flex-none rounded-full"
@@ -172,7 +172,7 @@ function Status({ admin, t, locale }: { admin: MailIngestAdmin; t: TranslationFn
/>
{t('mailAdmin.status.lastRead', { time: lastRead })}
</p>
<div className="mt-[9px] grid grid-cols-2 gap-[6px]">
<div className="mt-[7px] grid grid-cols-2 gap-[5px]">
<StatTile icon={Mail} label={t('mailAdmin.status.mails')} value={facts.mails} tone="neutral" />
<StatTile icon={CheckCircle} label={t('mailAdmin.status.added')} value={facts.added} tone="success" />
<StatTile icon={Clock} label={t('mailAdmin.status.waiting')} value={facts.waiting} tone="warning" />