diff --git a/web/client/src/lib/Button.svelte b/web/client/src/lib/Button.svelte index 6650124360..b553cca41c 100644 --- a/web/client/src/lib/Button.svelte +++ b/web/client/src/lib/Button.svelte @@ -2,7 +2,8 @@ import ButtonContent from './ButtonContent.svelte'; /** @type {string} */ - export let className = ''; + let className = ''; + export { className as class }; /** @type {boolean|null} */ export let disabled = null; @@ -10,6 +11,9 @@ /** @type {string|null} */ export let href = null; + /** @type {'sm'|'md'} */ + export let size = 'md'; + /** @type {string|null} */ export let target = null; @@ -22,11 +26,11 @@ $: buttonClass = [ 'btn', `btn-${variant}`, + `btn-${size}`, `focus-ring`, disabled ? 'cursor-not-allowed opacity-60' : '', 'inline-block', 'font-mono', - 'px-8 py-2', 'rounded', 'shadow', 'transition-transform duration-100 [&:not(:disabled)]:active:scale-95', @@ -69,4 +73,13 @@ @apply bg-none border-0 shadow-none text-mobi-purple-safe; @apply px-4; } + + .btn-sm { + @apply text-sm; + @apply px-3 py-1; + } + + .btn-md { + @apply px-8 py-2; + } diff --git a/web/client/src/lib/CopyButton.svelte b/web/client/src/lib/CopyButton.svelte new file mode 100644 index 0000000000..57c38265d5 --- /dev/null +++ b/web/client/src/lib/CopyButton.svelte @@ -0,0 +1,80 @@ + + + + + {#key status} + + {#if ['ready', 'waiting'].includes(status)} + {#if ready} + {ready} + {:else} + + {/if} + + {#if status == 'waiting'} + + {:else} + + {/if} + {:else if status == 'done'} + Copied + + {:else} + Error + + {/if} + + {/key} + + diff --git a/web/client/src/lib/StatusModal.svelte b/web/client/src/lib/StatusModal.svelte index 474e1be2aa..e85162de13 100644 --- a/web/client/src/lib/StatusModal.svelte +++ b/web/client/src/lib/StatusModal.svelte @@ -1,8 +1,9 @@ @@ -419,4 +441,11 @@ - + { + status = 'processing'; + }} +/>