style(accounting): align tax-export buttons + solid divider between groups

- Give all four export controls (CSV / PDF / format select / Accountant export)
  a matching min-width so the two rows form a tidy right-aligned button grid
  (CSV over format select, Export PDF over Accountant export).
- Replace the dashed sub-divider between the Report and Accounting journal
  groups with a solid line so the separation reads clearly.
This commit is contained in:
Luca
2026-06-15 19:30:22 +02:00
parent 3edd832103
commit 7e586cd3a1
@@ -314,6 +314,7 @@ export const TaxReportPage: React.FC = () => {
</div> </div>
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Button <Button
className="min-w-[150px]"
variant="outline" variant="outline"
onClick={() => handleExport('csv')} onClick={() => handleExport('csv')}
disabled={exportsDisabled} disabled={exportsDisabled}
@@ -323,6 +324,7 @@ export const TaxReportPage: React.FC = () => {
{t('taxReport.exportCsv', 'Export CSV')} {t('taxReport.exportCsv', 'Export CSV')}
</Button> </Button>
<Button <Button
className="min-w-[150px]"
variant="primary" variant="primary"
onClick={() => handleExport('pdf')} onClick={() => handleExport('pdf')}
disabled={exportsDisabled} disabled={exportsDisabled}
@@ -334,9 +336,10 @@ export const TaxReportPage: React.FC = () => {
</div> </div>
</div> </div>
{/* Group 2 — Accounting journal (for your accountant) */} {/* Group 2 — Accounting journal (for your accountant). Solid
divider above to separate it from the Report group. */}
{flags.accounting && ( {flags.accounting && (
<div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-3 border-t border-dashed border-neutral-200 dark:border-neutral-800"> <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1 pt-3 border-t border-neutral-200 dark:border-neutral-700">
<div className="min-w-0"> <div className="min-w-0">
<div className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400"> <div className="text-xs font-semibold uppercase tracking-wider text-neutral-500 dark:text-neutral-400">
{t('taxReport.export.journalTitle', 'Accounting journal')} {t('taxReport.export.journalTitle', 'Accounting journal')}
@@ -354,13 +357,14 @@ export const TaxReportPage: React.FC = () => {
onChange={(e) => setLedgerFormat(e.target.value as ExportFormat)} onChange={(e) => setLedgerFormat(e.target.value as ExportFormat)}
disabled={exportsDisabled} disabled={exportsDisabled}
aria-label={t('ledger.export.format', 'Target tool') as string} aria-label={t('ledger.export.format', 'Target tool') as string}
className={`${selectClassName} w-auto`} className={`${selectClassName} min-w-[150px] w-auto`}
> >
{LEDGER_FORMATS.map((f) => ( {LEDGER_FORMATS.map((f) => (
<option key={f} value={f}>{t(`ledger.export.format_${f}`, f)}</option> <option key={f} value={f}>{t(`ledger.export.format_${f}`, f)}</option>
))} ))}
</select> </select>
<Button <Button
className="min-w-[150px]"
variant="outline" variant="outline"
onClick={handleLedgerExport} onClick={handleLedgerExport}
disabled={exportsDisabled} disabled={exportsDisabled}