diff options
| author | Adam Soltys <[email protected]> | 2024-11-05 14:47:22 -0800 |
|---|---|---|
| committer | Adam Soltys <[email protected]> | 2024-11-05 14:47:22 -0800 |
| commit | 3ef1b8136e530c17e4e459517dd09f38effe6c41 (patch) | |
| tree | 990f3f07e37d4b150b8d8a5aaf230c81a1733ac8 /src/components | |
| parent | e3afaf16b32558ac2ac407777760e462b4896a92 (diff) | |
| download | coinos-ui-dark.tar.gz coinos-ui-dark.zip | |
dark stylesdark
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Footer.svelte | 19 | ||||
| -rw-r--r-- | src/components/HowItWorksCard.svelte | 2 | ||||
| -rw-r--r-- | src/components/LandingHero.svelte | 11 |
3 files changed, 22 insertions, 10 deletions
diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index 9b311d35..381d19c8 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -2,6 +2,7 @@ import Icon from "$comp/Icon.svelte"; import LocaleSelector from "$comp/LocaleSelector.svelte"; import { t } from "$lib/translations"; + import { theme } from "$lib/store"; const followLinks = [ { @@ -16,6 +17,7 @@ { url: "/docs", titleID: "documentation" }, { url: "/support", titleID: "support" }, ]; + let dark = () => ($theme = $theme === "dark" ? "light" : "dark"); </script> <footer @@ -36,10 +38,17 @@ </a> </div> </div> - <div class="w-full flex"> - <div class="mx-auto"> - <LocaleSelector /> - </div> + <div class="w-full flex gap-2 justify-center items-center"> + <LocaleSelector /> + <button + class="flex justify-center items-center font-semibold hover:opacity-80 gap-2" + on:click={dark} + > + <iconify-icon + icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"} + width="30" + /> + </button> </div> </div> @@ -72,5 +81,5 @@ </ul> </div> - <Icon icon="shield" style="mx-auto md:mx-0" /> + <iconify-icon icon="coinos:shield" class="mx-auto md:mx-0" width="96" /> </footer> diff --git a/src/components/HowItWorksCard.svelte b/src/components/HowItWorksCard.svelte index e5e62d05..a8fe63fd 100644 --- a/src/components/HowItWorksCard.svelte +++ b/src/components/HowItWorksCard.svelte @@ -6,7 +6,7 @@ </script> <div class="space-y-5"> - <Icon icon={image} style="mx-auto w-32 h-32" /> + <iconify-icon icon={image} class="mx-auto" width="128" /> <p class="text-2xl font-medium">{$t("howItWorks." + stepID + ".header")}</p> <p class="text-secondary text-xl font-medium w-full md:w-2/3 mx-auto"> {$t("howItWorks." + stepID + ".description")} diff --git a/src/components/LandingHero.svelte b/src/components/LandingHero.svelte index 32a6d6f4..8d47283e 100644 --- a/src/components/LandingHero.svelte +++ b/src/components/LandingHero.svelte @@ -14,9 +14,9 @@ {$t("landing.header_before_icon")} <span class="relative"> {$t("landing.header_with_icon")} - <Icon - icon="rays" - style="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" + <iconify-icon + icon="coinos:rays" + class="absolute -top-16 left-5 md:left-8 lg:left-14 2xl:left-24" /> </span> {$t("landing.header_after_icon")} @@ -29,7 +29,10 @@ <div class="flex justify-center"> <a href="/register"> - <button use:focus class="btn !rounded-full bg-primary text-primary-content hover:bg-primary hover:bg-opacity-80"> + <button + use:focus + class="btn !rounded-full bg-primary text-primary-content hover:bg-primary hover:bg-opacity-80" + > {$t("nav.startInSeconds")} </button> </a> |