Rework modal header structure

src/app/components/CalendarEventCreate.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -13,12 +15,8 @@
 <CalendarEventForm {url} {h}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Create an Event</ModalTitle>
-        <div>Create an Event</div>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>

src/app/components/CalendarEventEdit.svelte

@@ -2,6 +2,8 @@
   import type {TrustedEvent} from "@welshman/util"
   import {getTagValue} from "@welshman/util"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import CalendarEventForm from "@app/components/CalendarEventForm.svelte"
 
   type Props = {
@@ -24,12 +26,8 @@
 <CalendarEventForm {url} {initialValues}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Edit this Event</ModalTitle>
-        <div>Edit this Event</div>
+      <ModalSubtitle>Invite other group members to events online or in real life.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Invite other group members to events online or in real life.</div>
-      {/snippet}
     </ModalHeader>
   {/snippet}
 </CalendarEventForm>

src/app/components/ChatEnable.svelte

@@ -10,6 +10,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
   import {clearModals} from "@app/util/modal"
@@ -38,12 +40,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Enable Messages</ModalTitle>
-        <div>Enable Messages</div>
+      <ModalSubtitle>Do you want to enable direct messages?</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Do you want to enable direct messages?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       By default, direct messages are disabled, since loading them requires

src/app/components/ChatMembers.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -16,9 +17,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>People in this conversation</ModalTitle>
-        <div>People in this conversation</div>
-      {/snippet}
     </ModalHeader>
     {#each pubkeys as pubkey (pubkey)}
       <div class="card2 bg-alt">

src/app/components/ChatStart.svelte

@@ -14,6 +14,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {makeChatPath} from "@app/util/routes"
@@ -57,12 +59,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Start a Chat</ModalTitle>
-        <div>Start a Chat</div>
+      <ModalSubtitle>Create an encrypted chat room for private conversations.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Create an encrypted chat room for private conversations.</div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet input()}

src/app/components/EventInfo.svelte

@@ -14,6 +14,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import {clip} from "@app/util/toast"
 
   type Props = {
@@ -41,12 +43,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Event Details</ModalTitle>
-        <div>Event Details</div>
+      <ModalSubtitle>The full details of this event are shown below.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>The full details of this event are shown below.</div>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/EventShare.svelte

@@ -8,6 +8,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -34,12 +36,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Share {noun}</ModalTitle>
-        <div>Share {noun}</div>
+      <ModalSubtitle>Which room would you like to share this event to?</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Which room would you like to share this event to?</div>
-      {/snippet}
     </ModalHeader>
     <div class="grid grid-cols-3 gap-2">
       {#each $roomsByUrl.get(url) || [] as room (room.h)}

src/app/components/GoalCreate.svelte

@@ -11,6 +11,8 @@
   import FieldInline from "@lib/components/FieldInline.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -87,12 +89,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Create a Funding Goal</ModalTitle>
-        <div>Create a Funding Goal</div>
+      <ModalSubtitle>Request contributions for your fundraiser.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Request contributions for your fundraiser.</div>
-      {/snippet}
     </ModalHeader>
     <div class="col-8 relative">
       <Field>

src/app/components/InfoBunker.svelte

@@ -4,15 +4,14 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What is a bunker link?</ModalTitle>
-        <div>What is a bunker link?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       <Link external class="link" href="https://nostr.com/">Nostr</Link> uses "keys" instead of passwords

src/app/components/InfoHandle.svelte

@@ -4,15 +4,14 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What is a nostr address?</ModalTitle>
-        <div>What is a nostr address?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"

src/app/components/InfoKeys.svelte

@@ -8,6 +8,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import KeyRecoveryRequest from "@app/components/KeyRecoveryRequest.svelte"
   import {PLATFORM_NAME} from "@app/core/state"
@@ -21,9 +22,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What is a private key?</ModalTitle>
-        <div>What is a private key?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       Most online services keep track of users by giving them a username and password. This gives

src/app/components/InfoNostr.svelte

@@ -4,14 +4,13 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
 </script>
 
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What is nostr?</ModalTitle>
-        <div>What is nostr?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       <Link external href="https://nostr.com/" class="link">Nostr</Link> is way to build social apps that

src/app/components/InfoRelay.svelte

@@ -2,6 +2,7 @@
   import Button from "@lib/components/Button.svelte"
   import Link from "@lib/components/Link.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -11,9 +12,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What is a relay?</ModalTitle>
-        <div>What is a relay?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       {PLATFORM_NAME} hosts spaces on the <Link external href="https://nostr.com/" class="underline"

src/app/components/InfoSignatures.svelte

@@ -4,6 +4,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
 
   const back = () => history.back()
 </script>
@@ -11,9 +12,7 @@
 <Modal
   ><ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>What are digital signatures?</ModalTitle>
-        <div>What are digital signatures?</div>
-      {/snippet}
     </ModalHeader>
     <p>
       Most online services ask their users to trust them that they're being honest, and they usually

src/app/components/InfoZapperError.svelte

@@ -4,6 +4,7 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -19,9 +20,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Unable to Zap</ModalTitle>
-        <div>Unable to Zap</div>
-      {/snippet}
     </ModalHeader>
     <p>
       Zapping <ProfileLink {pubkey} class="!text-primary" /> isn't possible right now because

src/app/components/KeyDownload.svelte

@@ -13,6 +13,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
@@ -109,9 +110,7 @@
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Your Keys are Ready!</ModalTitle>
-        <div>Your Keys are Ready!</div>
-      {/snippet}
     </ModalHeader>
     <p>
       A cryptographic key pair has two parts: your <strong>public key</strong> identifies your

src/app/components/KeyRecoveryConfirm.svelte

@@ -12,6 +12,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import KeyDownload from "@app/components/KeyDownload.svelte"
   import {pushToast} from "@app/util/toast"
@@ -86,12 +88,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Recover your Key</ModalTitle>
-        Recover your Key
+      <ModalSubtitle>Take control over your cryptographic identity</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        Take control over your cryptographic identity
-      {/snippet}
     </ModalHeader>
     <p>Your recovery codes have been sent!</p>
     <p>

src/app/components/KeyRecoveryRequest.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushModal} from "@app/util/modal"
   import KeyRecoveryConfirm from "@app/components/KeyRecoveryConfirm.svelte"
@@ -44,12 +46,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Recover your Key</ModalTitle>
-        Recover your Key
+      <ModalSubtitle>Take control over your cryptographic identity</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        Take control over your cryptographic identity
-      {/snippet}
     </ModalHeader>
     <p>
       When you signed up, your Nostr secret key was split into multiple pieces and stored on

src/app/components/LogInBunker.svelte

@@ -13,6 +13,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import BunkerConnect from "@app/components/BunkerConnect.svelte"
   import BunkerUrl from "@app/components/BunkerUrl.svelte"
@@ -125,12 +127,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Log In with a Signer</ModalTitle>
-        <div>Log In with a Signer</div>
+      <ModalSubtitle>Using a remote signer app helps you keep your keys safe.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Using a remote signer app helps you keep your keys safe.</div>
-      {/snippet}
     </ModalHeader>
     <div class:hidden={mode !== "bunker"}></div>
     {#if mode === "connect"}

src/app/components/LogInEmail.svelte

@@ -13,6 +13,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTP from "@app/components/LogInOTP.svelte"
   import {pushModal, clearModals} from "@app/util/modal"
@@ -72,12 +74,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Log In</ModalTitle>
-        <div>Log In</div>
+      <ModalSubtitle>Log in using your email and password</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Log in using your email and password</div>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/LogInKey.svelte

@@ -16,6 +16,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
@@ -76,12 +78,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Log In with Key</ModalTitle>
-        <div>Log In with Key</div>
+      <ModalSubtitle>Enter your nostr private key to log in.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter your nostr private key to log in.</div>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/LogInOTP.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import LogInOTPConfirm from "@app/components/LogInOTPConfirm.svelte"
   import {pushModal} from "@app/util/modal"
@@ -49,12 +51,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Log In</ModalTitle>
-        <div>Log In</div>
+      <ModalSubtitle>Log in using a one-time login code</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Log in using a one-time login code</div>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/LogInOTPConfirm.svelte

@@ -10,6 +10,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {clearModals} from "@app/util/modal"
   import {setChecked} from "@app/util/notifications"
@@ -84,12 +86,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Log In</ModalTitle>
-        <div>Log In</div>
+      <ModalSubtitle>Enter the login codes sent to your email</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter the login codes sent to your email</div>
-      {/snippet}
     </ModalHeader>
     <p>Your login codes have been sent!</p>
     <p>

src/app/components/LogOut.svelte

@@ -7,6 +7,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {Push} from "@app/util/notifications"
   import {kv, db} from "@app/core/storage"
@@ -36,9 +37,7 @@
 <Modal tag="form" onsubmit={preventDefault(doLogout)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Are you sure you want<br />to log out?</ModalTitle>
-        <div>Are you sure you want<br />to log out?</div>
-      {/snippet}
     </ModalHeader>
     <p class="text-center">Your local database will be cleared.</p>
   </ModalBody>

src/app/components/ProfileDelete.svelte

@@ -17,6 +17,8 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -113,12 +115,8 @@
 <Modal tag="form" onsubmit={preventDefault(confirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Delete your account</ModalTitle>
-        Delete your account
+      <ModalSubtitle>From the Nostr network</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        From the Nostr network
-      {/snippet}
     </ModalHeader>
     {#if showProgress}
       <p>

src/app/components/ProfileList.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
   import Button from "@lib/components/Button.svelte"
-  import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Profile from "@app/components/Profile.svelte"
 
   interface Props {
@@ -19,12 +21,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>{restProps.title}</ModalTitle>
-        <div>{restProps.title}</div>
+      <ModalSubtitle>{subtitle}</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>{subtitle}</div>
-      {/snippet}
     </ModalHeader>
     {#each pubkeys as pubkey (pubkey)}
       <div class="card2 bg-alt">

src/app/components/Report.svelte

@@ -7,6 +7,8 @@
   import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -43,12 +45,8 @@
 <Modal tag="form" onsubmit={preventDefault(confirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Report Content</ModalTitle>
-        <div>Report Content</div>
+      <ModalSubtitle>Flag inappropriate content.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Flag inappropriate content.</div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/ReportDetails.svelte

@@ -4,6 +4,8 @@
   import {deriveEventsById} from "@welshman/store"
   import {repository} from "@welshman/app"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import Button from "@lib/components/Button.svelte"
@@ -34,12 +36,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Report Details</ModalTitle>
-        <div>Report Details</div>
+      <ModalSubtitle>All reports for this event are shown below.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>All reports for this event are shown below.</div>
-      {/snippet}
     </ModalHeader>
     {#each $reports.values() as report (report.id)}
       <div class="card2 card2-sm bg-alt">

src/app/components/RoomCreate.svelte

@@ -8,6 +8,8 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RoomForm from "@app/components/RoomForm.svelte"
   import {makeSpacePath} from "@app/util/routes"
@@ -22,14 +24,10 @@
 <RoomForm {url} {onsubmit}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Create a Room</ModalTitle>
-        <div>Create a Room</div>
+      <ModalSubtitle>
-      {/snippet}
+        On <span class="text-primary">{displayRelayUrl(url)}</span>
-      {#snippet info()}
+      </ModalSubtitle>
-        <div>
-          On <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
     </ModalHeader>
   {/snippet}
   {#snippet footer({loading})}

src/app/components/RoomEdit.svelte

@@ -7,6 +7,8 @@
   import Button from "@lib/components/Button.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RoomForm from "@app/components/RoomForm.svelte"
   import {deriveRoom} from "@app/core/state"
@@ -29,14 +31,10 @@
 <RoomForm {url} {onsubmit} initialValues={$room}>
   {#snippet header()}
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Edit a Room</ModalTitle>
-        <div>Edit a Room</div>
+      <ModalSubtitle>
-      {/snippet}
+        On <span class="text-primary">{displayRelayUrl(url)}</span>
-      {#snippet info()}
+      </ModalSubtitle>
-        <div>
-          On <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
     </ModalHeader>
   {/snippet}
   {#snippet footer({loading})}

src/app/components/RoomMembersAdd.svelte

@@ -6,6 +6,8 @@
   import Field from "@lib/components/Field.svelte"
   import Icon from "@lib/components/Icon.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -53,12 +55,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Add Members</ModalTitle>
-        <div>Add Members</div>
+      <ModalSubtitle>to <RoomName {url} {h} /></ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>to <RoomName {url} {h} /></div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/SignUpComplete.svelte

@@ -7,6 +7,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
 
   type Props = {
@@ -21,9 +22,7 @@
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>You're all set!</ModalTitle>
-        <div>You're all set!</div>
-      {/snippet}
     </ModalHeader>
     <p>
       You've created your profile, saved your keys, and now you're ready to start chatting — all

src/app/components/SignUpEmail.svelte

@@ -14,6 +14,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
   import {pushToast} from "@app/util/toast"
@@ -97,12 +99,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Sign up with Email</ModalTitle>
-        <div>Sign up with Email</div>
+      <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Keep your keys safe using multi-signer key sharing</div>
-      {/snippet}
     </ModalHeader>
     <p>
       Under the hood, nostr uses "cryptographic keypairs" to help you prove that your identity is

src/app/components/SignUpEmailConfirm.svelte

@@ -12,6 +12,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
 
   type Props = {
@@ -40,12 +42,8 @@
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Verify your Email Address</ModalTitle>
-        <div>Verify your Email Address</div>
+      <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Enter the one-time confirmation code sent to your email</div>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/SpaceAccessRequest.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {pushToast} from "@app/util/toast"
   import {attemptRelayAccess} from "@app/core/commands"
@@ -49,12 +51,9 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Request Access</ModalTitle>
-        <div>Request Access</div>
+      <ModalSubtitle
-      {/snippet}
+        >Enter an invite code below to request access to {displayUrl(url)}.</ModalSubtitle>
-      {#snippet info()}
-        <div>Enter an invite code below to request access to {displayUrl(url)}.</div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/SpaceAdd.svelte

@@ -9,6 +9,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
   import {pushModal} from "@app/util/modal"
 
@@ -24,12 +26,9 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Add a Space</ModalTitle>
-        <div>Add a Space</div>
+      <ModalSubtitle
-      {/snippet}
+        >Spaces are places where communities come together to work, play, and hang out.</ModalSubtitle>
-      {#snippet info()}
-        <div>Spaces are places where communities come together to work, play, and hang out.</div>
-      {/snippet}
     </ModalHeader>
     {#if !hideDiscover}
       <Link href="/discover">

src/app/components/SpaceAuthError.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
   import {pushModal, clearModals} from "@app/util/modal"
@@ -42,12 +44,8 @@
 <Modal tag="form" onsubmit={preventDefault(requestAccess)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Access Error</ModalTitle>
-        <div>Access Error</div>
+      <ModalSubtitle>We couldn't connect you to this space.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>We couldn't connect you to this space.</div>
-      {/snippet}
     </ModalHeader>
     <p>
       We received an error from the relay indicating you don't have access to {displayRelayUrl(

src/app/components/SpaceEdit.svelte

@@ -14,6 +14,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ImageIcon from "@lib/components/ImageIcon.svelte"
   import IconPickerButton from "@lib/components/IconPickerButton.svelte"
@@ -124,12 +126,8 @@
 <Modal tag="form" onsubmit={preventDefault(trySubmit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Edit a Space</ModalTitle>
-        <div>Edit a Space</div>
+      <ModalSubtitle><span class="text-primary">{displayRelayUrl(url)}</span></ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <span class="text-primary">{displayRelayUrl(url)}</span>
-      {/snippet}
     </ModalHeader>
     <FieldInline>
       {#snippet label()}

src/app/components/SpaceExit.svelte

@@ -9,6 +9,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {removeSpaceMembership, publishLeaveRequest, removeTrustedRelay} from "@app/core/commands"
 
@@ -36,11 +37,9 @@
 <Modal tag="form" onsubmit={preventDefault(exit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>
-        <div>
+        You are leaving<br /><span class="text-primary">{displayRelayUrl(url)}</span>
-          You are leaving<br /><span class="text-primary">{displayRelayUrl(url)}</span>
+      </ModalTitle>
-        </div>
-      {/snippet}
     </ModalHeader>
     <p class="text-center">Are you sure you want to leave?</p>
   </ModalBody>

src/app/components/SpaceInvite.svelte

@@ -12,6 +12,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import QRCode from "@app/components/QRCode.svelte"
   import {clip} from "@app/util/toast"
@@ -57,15 +59,11 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Create an Invite</ModalTitle>
-        <div>Create an Invite</div>
+      <ModalSubtitle>
-      {/snippet}
+        Get a link that you can use to invite people to
-      {#snippet info()}
+        <span class="text-primary">{displayRelayUrl(url)}</span>
-        <div>
+      </ModalSubtitle>
-          Get a link that you can use to invite people to
-          <span class="text-primary">{displayRelayUrl(url)}</span>
-        </div>
-      {/snippet}
     </ModalHeader>
     <div>
       {#if loading}

src/app/components/SpaceInviteAccept.svelte

@@ -13,6 +13,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import RelaySummary from "@app/components/RelaySummary.svelte"
   import {pushToast} from "@app/util/toast"
@@ -62,12 +64,9 @@
 <Modal tag="form" onsubmit={preventDefault(join)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Join a Space</ModalTitle>
-        <div>Join a Space</div>
+      <ModalSubtitle
-      {/snippet}
+        >Enter a relay URL or invite link below to join an existing space.</ModalSubtitle>
-      {#snippet info()}
-        <div>Enter a relay URL or invite link below to join an existing space.</div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/SpaceMembersAdd.svelte

@@ -9,6 +9,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/util/toast"
@@ -54,12 +56,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Add Members</ModalTitle>
-        <div>Add Members</div>
+      <ModalSubtitle>to {displayRelayUrl(url)}</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>to {displayRelayUrl(url)}</div>
-      {/snippet}
     </ModalHeader>
     <Field>
       {#snippet label()}

src/app/components/SpaceMembersBanned.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Profile from "@app/components/Profile.svelte"
   import {deriveSpaceBannedPubkeyItems} from "@app/core/state"
@@ -54,12 +56,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Banned users</ModalTitle>
-        <div>Banned users</div>
+      <ModalSubtitle>on {displayRelayUrl(url)}</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>on {displayRelayUrl(url)}</div>
-      {/snippet}
     </ModalHeader>
     {#each $bans as { pubkey, reason } (pubkey)}
       <div class="card2 bg-alt relative">

src/app/components/SpaceTrustRelay.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import InfoSignatures from "@app/components/InfoSignatures.svelte"
   import {relaysPendingTrust} from "@app/core/state"
@@ -55,14 +57,10 @@
 <Modal tag="form" onsubmit={preventDefault(trustSpace)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Do you trust this space?</ModalTitle>
-        Do you trust this space?
+      <ModalSubtitle>
-      {/snippet}
+        Only join <span class="text-primary">{displayRelayUrl(url)}</span> if you trust the adminstrator
-      {#snippet info()}
+      </ModalSubtitle>
-        <div>
-          Only join <span class="text-primary">{displayRelayUrl(url)}</span> if you trust the adminstrator
-        </div>
-      {/snippet}
     </ModalHeader>
     <div class="m-auto flex flex-col gap-4">
       <p>

src/app/components/ThreadCreate.svelte

@@ -9,6 +9,8 @@
   import Field from "@lib/components/Field.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -79,12 +81,8 @@
 <Modal tag="form" onsubmit={preventDefault(submit)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Create a Thread</ModalTitle>
-        <div>Create a Thread</div>
+      <ModalSubtitle>Share a link, or start a discussion.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>Share a link, or start a discussion.</div>
-      {/snippet}
     </ModalHeader>
     <div class="col-8 relative">
       <Field>

src/app/components/WalletAsReceivingAddress.svelte

@@ -5,6 +5,7 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {updateProfile} from "@app/core/commands"
   import {clearModals} from "@app/util/modal"
@@ -37,9 +38,7 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Set as Receiving Address?</ModalTitle>
-        Set as Receiving Address?
-      {/snippet}
     </ModalHeader>
     {#if $userProfile?.lud16}
       <p>

src/app/components/WalletConnect.svelte

@@ -18,6 +18,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {getWebLn} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
@@ -114,12 +116,9 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Connect a Wallet</ModalTitle>
-        <div>Connect a Wallet</div>
+      <ModalSubtitle
-      {/snippet}
+        >Use Nostr Wallet Connect to send Bitcoin payments over lightning.</ModalSubtitle>
-      {#snippet info()}
-        Use Nostr Wallet Connect to send Bitcoin payments over lightning.
-      {/snippet}
     </ModalHeader>
     {#if getWebLn()}
       <Button

src/app/components/WalletPay.svelte

@@ -11,6 +11,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import {payInvoice} from "@app/core/commands"
   import {pushToast} from "@app/util/toast"
@@ -53,12 +55,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Pay with Lightning</ModalTitle>
-        <div>Pay with Lightning</div>
+      <ModalSubtitle>Use your Nostr wallet to send Bitcoin payments over lightning.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        Use your Nostr wallet to send Bitcoin payments over lightning.
-      {/snippet}
     </ModalHeader>
     {#if invoice}
       <div class="card2 bg-alt flex flex-col gap-2">

src/app/components/WalletUpdateReceivingAddress.svelte

@@ -4,6 +4,8 @@
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -47,12 +49,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Update Lightning Address</ModalTitle>
-        Update Lightning Address
+      <ModalSubtitle>Update your lightning address for receiving payments.</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        Update your lightning address for receiving payments.
-      {/snippet}
     </ModalHeader>
 
     <div class="column gap-4">

src/app/components/Zap.svelte

@@ -13,6 +13,8 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import EmojiButton from "@lib/components/EmojiButton.svelte"
   import ProfileLink from "@app/components/ProfileLink.svelte"
@@ -114,12 +116,8 @@
 <Modal>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>Send a Zap</ModalTitle>
-        <div>Send a Zap</div>
+      <ModalSubtitle>To <ProfileLink {pubkey} class="!text-primary" /></ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>To <ProfileLink {pubkey} class="!text-primary" /></div>
-      {/snippet}
     </ModalHeader>
     <FieldInline class="!grid-cols-3">
       {#snippet label()}

src/lib/components/Confirm.svelte

@@ -6,6 +6,8 @@
   import Button from "@lib/components/Button.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
   import ModalHeader from "@lib/components/ModalHeader.svelte"
+  import ModalTitle from "@lib/components/ModalTitle.svelte"
+  import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
@@ -37,12 +39,8 @@
 <Modal tag="form" onsubmit={preventDefault(tryConfirm)}>
   <ModalBody>
     <ModalHeader>
-      {#snippet title()}
+      <ModalTitle>{restProps.title || "Are you sure?"}</ModalTitle>
-        <div>{restProps.title || "Are you sure?"}</div>
+      <ModalSubtitle>{subtitle}</ModalSubtitle>
-      {/snippet}
-      {#snippet info()}
-        <div>{subtitle}</div>
-      {/snippet}
     </ModalHeader>
     <p class="text-center">{message}</p>
   </ModalBody>

src/lib/components/Dialog.svelte

@@ -37,12 +37,12 @@
   <button
     type="button"
     aria-label="Close dialog"
-    class="absolute inset-0 cursor-pointer bg-[#ccc] opacity-75 dark:bg-black"
+    class="absolute inset-0 cursor-pointer bg-black opacity-50 dark:opacity-75"
-    transition:fade={{duration: 300}}
+    transition:fade={{duration: 200}}
     onclick={onClose}>
   </button>
   <div class={wrapperClass}>
-    <div class={innerClass} transition:fly={{duration: 300}}>
+    <div class={innerClass} transition:fly>
       <children.component {...children.props} />
     </div>
   </div>

src/lib/components/ModalHeader.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
+  import type {Snippet} from "svelte"
+
   interface Props {
-    title?: import("svelte").Snippet
+    children: Snippet
-    info?: import("svelte").Snippet
   }
 
-  const {title, info}: Props = $props()
+  const {children}: Props = $props()
 </script>
 
 <div class="flex flex-col m-auto max-w-xs gap-2 py-4">
-  <h1 class="heading">{@render title?.()}</h1>
+  {@render children()}
-  <p class="text-center text-sm opacity-75">{@render info?.()}</p>
 </div>

src/lib/components/ModalSubtitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<p class="text-center text-sm opacity-75">{@render children()}</p>

src/lib/components/ModalTitle.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import type {Snippet} from "svelte"
+
+  interface Props {
+    children: Snippet
+  }
+
+  const {children}: Props = $props()
+</script>
+
+<h1 class="heading">{@render children()}</h1>