fix(ui): align section headings (drop padding=none + redundant inner s-box)
This commit is contained in:
@@ -113,11 +113,9 @@ 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">
|
||||||
@@ -126,7 +124,6 @@ export default function Index() {
|
|||||||
</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">
|
||||||
|
|||||||
@@ -140,8 +140,7 @@ 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,
|
||||||
@@ -164,24 +163,19 @@ export default function InvoicesPage() {
|
|||||||
</FilterChip>
|
</FilterChip>
|
||||||
</s-stack>
|
</s-stack>
|
||||||
</s-stack>
|
</s-stack>
|
||||||
</s-box>
|
|
||||||
|
|
||||||
{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>
|
||||||
|
|||||||
Reference in New Issue
Block a user