ui

src/features/store-admin/DeliverySlotsCard.tsx

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { errorMessage } from '@/api/client';
 import { DEFAULT_SLOTS, deliverySlotsApi, slotProblems, type DeliverySlot } from '@/api/deliverySlots';
+import { Button } from '@astryxdesign/core/Button';
 import { DeliverySlotsEditor } from './DeliverySlotsEditor';
-import { DrawerButton } from './drawerKit';
 
 /**
  * A branch's delivery windows, on the shop profile.
@@ -72,7 +72,6 @@ export function DeliverySlotsCard({
   }
 
   const problems = slotProblems(draft);
-  const hasNone = (query.data?.details ?? []).length === 0;
 
   return (
     <div>
@@ -83,21 +82,17 @@ export function DeliverySlotsCard({
           setSaved(false);
         }}
         isDisabled={save.isPending}
-        {...(hasNone
-          ? {
-              // Said plainly, because the difference matters: this branch is
-              // taking orders right now with no window chosen, and will keep
-              // doing so until these are saved.
-              intro:
-                'This branch has no delivery windows yet, so customers order without choosing a time. Set them below to start offering a choice.',
-            }
-          : {})}
       />
 
       <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 14 }}>
-        <DrawerButton
+        {/* The design system's Button, matching the Save on every other card on
+            this page. `DrawerButton` is the drawer's own styling and read as a
+            different product standing on a profile card. */}
+        <Button
           label={save.isPending ? 'Saving…' : 'Save delivery windows'}
           variant="primary"
+          size="sm"
+          isLoading={save.isPending}
           isDisabled={save.isPending || problems.length > 0}
           onClick={() => save.mutate(draft)}
         />

src/features/store-admin/DeliverySlotsEditor.tsx

@@ -28,7 +28,14 @@ export function DeliverySlotsEditor({
   slots,
   onChange,
   isDisabled,
-  /** Shown above the rows. Onboarding and the profile screen say different things. */
+  /**
+   * Shown above the rows, and only when a caller asks for it.
+   *
+   * No default: onboarding explains what a window is because it is new to the
+   * person reading, while the shop profile does not, because they are editing
+   * something they already set. A paragraph that cannot be turned off is one
+   * every screen has to live with.
+   */
   intro,
 }: {
   slots: DeliverySlot[];
@@ -50,12 +57,9 @@ export function DeliverySlotsEditor({
 
   return (
     <div>
-      <Note>
-        {intro ??
-          'Customers choose one of these when they order. A window takes orders right up until it ends — after that it disappears for the day and only the later windows are offered.'}
-      </Note>
+      {intro ? <Note>{intro}</Note> : null}
 
-      <div style={{ display: 'grid', gap: 2, marginTop: 12 }}>
+      <div style={{ display: 'grid', gap: 4, marginTop: 10 }}>
         {ordered.map((slot) => (
           <SlotRow
             key={slot.slotkey}
@@ -103,8 +107,7 @@ function SlotRow({
         display: 'flex',
         alignItems: 'center',
         gap: 10,
-        padding: '11px 0',
-        borderTop: '1px solid var(--color-line, #e0e4ea)',
+        padding: '7px 0',
         // A window that is off stays legible but stops competing for attention.
         opacity: isOff ? 0.55 : 1,
       }}