@cosmicdrift/kumiko-bundled-features 0.79.3 → 0.81.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -243,7 +243,7 @@ function DangerZoneSection({
243
243
  readonly onChanged: () => void;
244
244
  }): ReactNode {
245
245
  const t = useTranslation();
246
- const { Button, Banner, Dialog, Heading } = usePrimitives();
246
+ const { Button, Banner, Dialog, Card } = usePrimitives();
247
247
  const dispatcher = useDispatcher();
248
248
  const [dialogOpen, setDialogOpen] = useState(false);
249
249
  const [status, setStatus] = useState<SectionStatus>({ kind: "idle" });
@@ -270,52 +270,54 @@ function DangerZoneSection({
270
270
  onChanged();
271
271
  };
272
272
 
273
+ const footer = deletionRequested ? (
274
+ <Button
275
+ variant="secondary"
276
+ onClick={() => void cancelDeletion()}
277
+ testId="profile-danger-cancel"
278
+ >
279
+ {t("profile.danger.cancelDeletion")}
280
+ </Button>
281
+ ) : (
282
+ <Button variant="danger" onClick={() => setDialogOpen(true)} testId="profile-danger-delete">
283
+ {t("profile.danger.delete")}
284
+ </Button>
285
+ );
286
+
273
287
  return (
274
- <section
275
- data-testid="profile-danger"
276
- className="flex flex-col gap-4 rounded-lg border border-destructive/40 bg-card p-6"
288
+ <Card
289
+ testId="profile-danger"
290
+ className="border-destructive/40"
291
+ slots={{ title: t("profile.danger.title"), footer }}
277
292
  >
278
- <Heading variant="section">{t("profile.danger.title")}</Heading>
279
- {deletionRequested ? (
280
- <>
281
- <Banner variant="error" testId="profile-danger-requested">
282
- {t("profile.danger.requested", {
283
- date: formatDeletionDate(me.gracePeriodEnd),
284
- })}
285
- </Banner>
286
- <StatusBanner status={status} />
287
- <Button
288
- variant="secondary"
289
- onClick={() => void cancelDeletion()}
290
- testId="profile-danger-cancel"
291
- >
292
- {t("profile.danger.cancelDeletion")}
293
- </Button>
294
- </>
295
- ) : (
296
- <>
297
- <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
298
- <StatusBanner status={status} />
299
- <Button
300
- variant="danger"
301
- onClick={() => setDialogOpen(true)}
302
- testId="profile-danger-delete"
303
- >
304
- {t("profile.danger.delete")}
305
- </Button>
306
- <Dialog
307
- open={dialogOpen}
308
- onOpenChange={setDialogOpen}
309
- title={t("profile.danger.dialogTitle")}
310
- description={t("profile.danger.dialogDescription")}
311
- variant="danger"
312
- confirmLabel={t("profile.danger.delete")}
313
- onConfirm={requestDeletion}
314
- testId="profile-danger-dialog"
315
- />
316
- </>
317
- )}
318
- </section>
293
+ <div className="flex flex-col gap-4">
294
+ {deletionRequested ? (
295
+ <>
296
+ <Banner variant="error" testId="profile-danger-requested">
297
+ {t("profile.danger.requested", {
298
+ date: formatDeletionDate(me.gracePeriodEnd),
299
+ })}
300
+ </Banner>
301
+ <StatusBanner status={status} />
302
+ </>
303
+ ) : (
304
+ <>
305
+ <p className="text-sm text-muted-foreground">{t("profile.danger.explainer")}</p>
306
+ <StatusBanner status={status} />
307
+ <Dialog
308
+ open={dialogOpen}
309
+ onOpenChange={setDialogOpen}
310
+ title={t("profile.danger.dialogTitle")}
311
+ description={t("profile.danger.dialogDescription")}
312
+ variant="danger"
313
+ confirmLabel={t("profile.danger.delete")}
314
+ onConfirm={requestDeletion}
315
+ testId="profile-danger-dialog"
316
+ />
317
+ </>
318
+ )}
319
+ </div>
320
+ </Card>
319
321
  );
320
322
  }
321
323