Re work modal scrolling

This commit is contained in:
Jon Staab
2026-01-30 14:14:12 -08:00
parent 4169db33e6
commit 38c0a9d403
75 changed files with 2340 additions and 2030 deletions
+32 -24
View File
@@ -5,6 +5,8 @@
import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Modal from "@lib/components/Modal.svelte"
import ModalBody from "@lib/components/ModalBody.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import KeyRecoveryRequest from "@app/components/KeyRecoveryRequest.svelte"
@@ -16,29 +18,37 @@
const startRecoveryRequest = () => pushModal(KeyRecoveryRequest)
</script>
<div class="column gap-4">
<ModalHeader>
{#snippet title()}
<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 the
service <strong>total control</strong> over their users, allowing them to ban them at any time, or
sell their activity.
</p>
<p>
On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your own
identity and social data, through the magic of cryptography. The basic idea is that you have a
<strong>public key</strong>, which acts as your user ID, and a
<strong>private key</strong> which allows you to prove your identity.
</p>
{#if $session?.email}
<Modal>
<ModalBody>
<ModalHeader>
{#snippet title()}
<div>What is a private key?</div>
{/snippet}
</ModalHeader>
<p>
It's very important to keep private keys safe, but this can sometimes be tricky, which is why {PLATFORM_NAME}
supports a traditional account-based login for new users.
Most online services keep track of users by giving them a username and password. This gives
the service <strong>total control</strong> over their users, allowing them to ban them at any time,
or sell their activity.
</p>
<p>If you'd like to switch to self-custody, please click below to get started.</p>
<p>
On <Link external href="https://nostr.com/">Nostr</Link>, <strong>you</strong> control your
own identity and social data, through the magic of cryptography. The basic idea is that you
have a
<strong>public key</strong>, which acts as your user ID, and a
<strong>private key</strong> which allows you to prove your identity.
</p>
{#if $session?.email}
<p>
It's very important to keep private keys safe, but this can sometimes be tricky, which is
why {PLATFORM_NAME}
supports a traditional account-based login for new users.
</p>
<p>If you'd like to switch to self-custody, please click below to get started.</p>
{:else}
<Button class="btn btn-primary" onclick={back}>Got it</Button>
{/if}
</ModalBody>
{#if $session?.email}
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} />
@@ -49,7 +59,5 @@
I want to hold my own keys
</Button>
</ModalFooter>
{:else}
<Button class="btn btn-primary" onclick={back}>Got it</Button>
{/if}
</div>
</Modal>