diff options
| author | ivarlovlie <git@ivarlovlie.no> | 2022-10-02 11:35:06 +0200 |
|---|---|---|
| committer | ivarlovlie <git@ivarlovlie.no> | 2022-10-02 11:35:06 +0200 |
| commit | 70347722fa1f959a5b224ed43b6b64bf289f36cf (patch) | |
| tree | eb13a0cb69788191dc81732baa824c6adc3c6c50 /apps/kit/src/lib/components/button.svelte | |
| parent | d953fc6decd8365dd054a971af6a4cf25b9439f0 (diff) | |
| download | greatoffice-70347722fa1f959a5b224ed43b6b64bf289f36cf.tar.xz greatoffice-70347722fa1f959a5b224ed43b6b64bf289f36cf.zip | |
feat/refactor: Initial surroundings for (app) and normalise icon names
Diffstat (limited to 'apps/kit/src/lib/components/button.svelte')
| -rw-r--r-- | apps/kit/src/lib/components/button.svelte | 19 |
1 files changed, 7 insertions, 12 deletions
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte index 323c7ad..d345b37 100644 --- a/apps/kit/src/lib/components/button.svelte +++ b/apps/kit/src/lib/components/button.svelte @@ -4,7 +4,7 @@ </script> <script lang="ts"> - import { Spinner } from "./icons"; + import { SpinnerIcon } from "./icons"; export let kind = "primary" as ButtonKind; export let size = "md" as ButtonSize; @@ -54,18 +54,15 @@ $: switch (kind) { case "secondary": - kindClasses = - "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500"; + kindClasses = "border-transparent text-teal-800 bg-teal-100 hover:bg-teal-200 focus:ring-teal-500"; spinnerTextClasses = "teal-800"; break; case "primary": - kindClasses = - "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500"; + kindClasses = "border-transparent text-teal-900 bg-teal-300 hover:bg-teal-400 focus:ring-teal-500"; spinnerTextClasses = "text-teal-900"; break; case "white": - kindClasses = - "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400"; + kindClasses = "border-gray-300 text-gray-700 bg-white hover:bg-gray-50 focus:ring-gray-400"; spinnerTextClasses = "text-gray-700"; break; } @@ -76,14 +73,12 @@ {...shared_props} {href} on:click - class="{sizeClasses} {kindClasses} {loading - ? 'disabled:' - : ''} {$$restProps.class ?? ''} {fullWidth + class="{sizeClasses} {kindClasses} {loading ? 'disabled:' : ''} {$$restProps.class ?? ''} {fullWidth ? 'w-full justify-center' : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2" > {#if loading} - <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} /> + <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} /> {/if} {text} </a> @@ -95,7 +90,7 @@ : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2" > {#if loading} - <Spinner class={spinnerTextClasses + " " + spinnerMarginClasses} /> + <SpinnerIcon class={spinnerTextClasses + " " + spinnerMarginClasses} /> {/if} {text} </button> |