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 <s-section
heading="Recent invoices" heading="Recent invoices"
padding="none"
accessibilityLabel="Recent invoices table" accessibilityLabel="Recent invoices table"
> >
{recent.length === 0 ? ( {recent.length === 0 ? (
<s-box padding="base"> <s-stack direction="block" gap="base" alignItems="center">
<s-stack direction="block" gap="base" alignItems="center"> <s-text type="strong">No invoices yet</s-text>
<s-text type="strong">No invoices yet</s-text> <s-paragraph tone="neutral">
<s-paragraph tone="neutral"> Generate your first invoice from the Invoices page or directly
Generate your first invoice from the Invoices page or directly from a Shopify order.
from a Shopify order. </s-paragraph>
</s-paragraph> <s-link href="/app/invoices">Open invoices →</s-link>
<s-link href="/app/invoices">Open invoices →</s-link> </s-stack>
</s-stack>
</s-box>
) : ( ) : (
<s-table> <s-table>
<s-table-header-row> <s-table-header-row>
@@ -171,11 +168,9 @@ export default function Index() {
</s-table-body> </s-table-body>
</s-table> </s-table>
)} )}
<s-box padding="base"> <s-stack direction="inline" justifyContent="end">
<s-stack direction="inline" justifyContent="end"> <Link to="/app/invoices">View all invoices →</Link>
<Link to="/app/invoices">View all invoices →</Link> </s-stack>
</s-stack>
</s-box>
</s-section> </s-section>
<s-section heading="How it works"> <s-section heading="How it works">
app/routes/app.invoices.tsx
+31 -37
View File
@@ -140,48 +140,42 @@ export default function InvoicesPage() {
return ( return (
<s-page heading="Invoices"> <s-page heading="Invoices">
<s-section heading="Recent orders" padding="none"> <s-section heading="Recent orders">
<s-box padding="base"> <s-stack direction="block" gap="base">
<s-stack direction="block" gap="base"> <s-paragraph>
<s-paragraph> Generate the invoice for an order, regenerate an unsent draft,
Generate the invoice for an order, regenerate an unsent draft, or cancel-and-reissue a sent one. Newest orders appear first.
or cancel-and-reissue a sent one. Newest orders appear first. </s-paragraph>
</s-paragraph>
<s-stack direction="inline" gap="small" alignItems="center"> <s-stack direction="inline" gap="small" alignItems="center">
<FilterChip to="?filter=all" active={filter === "all"} count={counts.all}> <FilterChip to="?filter=all" active={filter === "all"} count={counts.all}>
All All
</FilterChip> </FilterChip>
<FilterChip <FilterChip
to="?filter=missing" to="?filter=missing"
active={filter === "missing"} active={filter === "missing"}
count={counts.missing} count={counts.missing}
> >
Missing invoice Missing invoice
</FilterChip> </FilterChip>
<FilterChip to="?filter=with" active={filter === "with"} count={counts.with}> <FilterChip to="?filter=with" active={filter === "with"} count={counts.with}>
Has invoice Has invoice
</FilterChip> </FilterChip>
</s-stack>
</s-stack> </s-stack>
</s-box> </s-stack>
{isLoading ? ( {isLoading ? (
<s-box padding="base"> <s-stack direction="inline" gap="small" alignItems="center">
<s-stack direction="inline" gap="small" alignItems="center"> <s-spinner size="small" accessibilityLabel="Loading orders" />
<s-spinner size="small" accessibilityLabel="Loading orders" /> <s-text tone="neutral">Loading…</s-text>
<s-text tone="neutral">Loading…</s-text> </s-stack>
</s-stack>
</s-box>
) : orders.length === 0 ? ( ) : orders.length === 0 ? (
<s-box padding="base"> <s-stack direction="block" gap="base" alignItems="center">
<s-stack direction="block" gap="base" alignItems="center"> <s-text type="strong">No orders match this filter</s-text>
<s-text type="strong">No orders match this filter</s-text> <s-paragraph tone="neutral">
<s-paragraph tone="neutral"> Try a different filter or wait for new orders.
Try a different filter or wait for new orders. </s-paragraph>
</s-paragraph> </s-stack>
</s-stack>
</s-box>
) : ( ) : (
<s-table> <s-table>
<s-table-header-row> <s-table-header-row>