Add new claymorphic component library

This commit is contained in:
2026-06-23 17:44:30 +00:00
parent fd4e7a9f2d
commit 949359dca5
291 changed files with 6460 additions and 2581 deletions
+22 -22
View File
@@ -6,17 +6,17 @@
import Paperclip from "@assets/icons/paperclip-2.svg?dataurl"
import Bolt from "@assets/icons/bolt.svg?dataurl"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Field from "@lib/components/Field.svelte"
import FieldInline from "@lib/components/FieldInline.svelte"
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"
import Icon from "@lib/components2/Icon.svelte"
import Field from "@lib/components2/Field.svelte"
import FieldInline from "@lib/components2/FieldInline.svelte"
import Button from "@lib/components2/Button.svelte"
import Spinner from "@lib/components2/Spinner.svelte"
import ModalHeader from "@lib/components2/ModalHeader.svelte"
import ModalTitle from "@lib/components2/ModalTitle.svelte"
import ModalSubtitle from "@lib/components2/ModalSubtitle.svelte"
import ModalFooter from "@lib/components2/ModalFooter.svelte"
import Modal from "@lib/components2/Modal.svelte"
import ModalBody from "@lib/components2/ModalBody.svelte"
import EditorContent from "@app/editor/EditorContent.svelte"
import {pushToast} from "@app/toast"
import {PROTECTED, publishRoomQuote} from "@app/groups"
@@ -145,18 +145,17 @@
<ModalTitle>Create a Funding Goal</ModalTitle>
<ModalSubtitle>Request contributions for your fundraiser.</ModalSubtitle>
</ModalHeader>
<div class="col-8 relative">
<div class="relative flex flex-col gap-8">
<Field>
{#snippet label()}
<p>Title*</p>
{/snippet}
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<label class="input-cl input-cl-group">
<!-- svelte-ignore a11y_autofocus -->
<input
autofocus={!isMobile}
bind:value={title}
class="grow"
type="text"
placeholder="What do funds go towards?" />
</label>
@@ -175,11 +174,11 @@
</Field>
<Button
data-tip="Add an image"
class="tooltip tooltip-left absolute bottom-1 right-2"
class="absolute bottom-1 right-2"
onclick={selectFiles}
disabled={loading}>
{#if $uploading}
<span class="loading loading-spinner loading-xs"></span>
<span class="cl-spinner"></span>
{:else}
<Icon icon={Paperclip} size={3} />
{/if}
@@ -192,16 +191,17 @@
{/snippet}
{#snippet input()}
<div class="flex grow justify-end">
<label class="input input-bordered flex w-auto items-center gap-2">
<label class="input-cl input-cl-group w-auto">
<Icon icon={Bolt} />
<input bind:value={amount} type="number" class="w-28 grow" />
<p class="shrink-0 opacity-50">sats</p>
<input bind:value={amount} type="number" class="input-cl-bare w-28" />
<p class="cl-text-subtle shrink-0">sats</p>
</label>
</div>
{/snippet}
</FieldInline>
<input
class="range range-primary -mt-2 w-full"
class="-mt-2 w-full"
style="accent-color: var(--cl-primary);"
type="range"
min="1000"
max="100000"
@@ -211,11 +211,11 @@
</div>
</ModalBody>
<ModalFooter>
<Button class="btn btn-link" onclick={back} disabled={loading}>
<Button variant="ghost" onclick={back} disabled={loading}>
<Icon icon={AltArrowLeft} />
Go back
</Button>
<Button type="submit" class="btn btn-primary" disabled={$uploading || loading}>
<Button type="submit" variant="primary" disabled={$uploading || loading}>
<Spinner {loading}>Create Goal</Spinner>
</Button>
</ModalFooter>