LinumIQ/linumiq-invoice
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): align section headings (drop padding=none + redundant inner s-box)

Browse Source
This commit is contained in:
Gerhard Scheikl
2026-05-08 22:47:10 +02:00
parent 093db30b6c
commit 64ac54d3c3
2 changed files with 42 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/routes/app._index.tsx
+11 -16
View File
@@ -113,20 +113,17 @@ export default function Index() {
<s-section
heading="Recent invoices"
padding="none"
accessibilityLabel="Recent invoices table"
>
{recent.length === 0 ? (
<s-box padding="base">
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No invoices yet</s-text>
<s-paragraph tone="neutral">
Generate your first invoice from the Invoices page or directly
from a Shopify order.
</s-paragraph>
<s-link href="/app/invoices">Open invoices →</s-link>
</s-stack>
</s-box>
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No invoices yet</s-text>
<s-paragraph tone="neutral">
Generate your first invoice from the Invoices page or directly
from a Shopify order.
</s-paragraph>
<s-link href="/app/invoices">Open invoices →</s-link>
</s-stack>
) : (
<s-table>
<s-table-header-row>
@@ -171,11 +168,9 @@ export default function Index() {
</s-table-body>
</s-table>
)}
<s-box padding="base">
<s-stack direction="inline" justifyContent="end">
<Link to="/app/invoices">View all invoices →</Link>
</s-stack>
</s-box>
<s-stack direction="inline" justifyContent="end">
<Link to="/app/invoices">View all invoices →</Link>
</s-stack>
</s-section>
<s-section heading="How it works">
app/routes/app.invoices.tsx
+31 -37
View File
@@ -140,48 +140,42 @@ export default function InvoicesPage() {
return (
<s-page heading="Invoices">
<s-section heading="Recent orders" padding="none">
<s-box padding="base">
<s-stack direction="block" gap="base">
<s-paragraph>
Generate the invoice for an order, regenerate an unsent draft,
or cancel-and-reissue a sent one. Newest orders appear first.
</s-paragraph>
<s-section heading="Recent orders">
<s-stack direction="block" gap="base">
<s-paragraph>
Generate the invoice for an order, regenerate an unsent draft,
or cancel-and-reissue a sent one. Newest orders appear first.
</s-paragraph>
<s-stack direction="inline" gap="small" alignItems="center">
<FilterChip to="?filter=all" active={filter === "all"} count={counts.all}>
All
</FilterChip>
<FilterChip
to="?filter=missing"
active={filter === "missing"}
count={counts.missing}
>
Missing invoice
</FilterChip>
<FilterChip to="?filter=with" active={filter === "with"} count={counts.with}>
Has invoice
</FilterChip>
</s-stack>
<s-stack direction="inline" gap="small" alignItems="center">
<FilterChip to="?filter=all" active={filter === "all"} count={counts.all}>
All
</FilterChip>
<FilterChip
to="?filter=missing"
active={filter === "missing"}
count={counts.missing}
>
Missing invoice
</FilterChip>
<FilterChip to="?filter=with" active={filter === "with"} count={counts.with}>
Has invoice
</FilterChip>
</s-stack>
</s-box>
</s-stack>
{isLoading ? (
<s-box padding="base">
<s-stack direction="inline" gap="small" alignItems="center">
<s-spinner size="small" accessibilityLabel="Loading orders" />
<s-text tone="neutral">Loading…</s-text>
</s-stack>
</s-box>
<s-stack direction="inline" gap="small" alignItems="center">
<s-spinner size="small" accessibilityLabel="Loading orders" />
<s-text tone="neutral">Loading…</s-text>
</s-stack>
) : orders.length === 0 ? (
<s-box padding="base">
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No orders match this filter</s-text>
<s-paragraph tone="neutral">
Try a different filter or wait for new orders.
</s-paragraph>
</s-stack>
</s-box>
<s-stack direction="block" gap="base" alignItems="center">
<s-text type="strong">No orders match this filter</s-text>
<s-paragraph tone="neutral">
Try a different filter or wait for new orders.
</s-paragraph>
</s-stack>
) : (
<s-table>
<s-table-header-row>