diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/DarkToggle.svelte | 17 | ||||
| -rw-r--r-- | src/components/Footer.svelte | 17 | ||||
| -rw-r--r-- | src/components/LandingHeader.svelte | 39 | ||||
| -rw-r--r-- | src/components/Menu.svelte | 16 |
4 files changed, 43 insertions, 46 deletions
diff --git a/src/components/DarkToggle.svelte b/src/components/DarkToggle.svelte new file mode 100644 index 00000000..7ed2ba1c --- /dev/null +++ b/src/components/DarkToggle.svelte @@ -0,0 +1,17 @@ +<script> + import { t } from "$lib/translations"; + import { theme } from "$lib/store"; + let dark = () => ($theme = $theme === "dark" ? "light" : "dark"); +</script> + +<button + class="flex justify-center items-center hover:opacity-80 gap-2 font-bold" + on:click={dark} +> + <iconify-icon + icon={$theme === "dark" ? "ph:sun-bold" : "ph:moon-stars-bold"} + width="30" + /> + + {$t(`nav.${$theme === "dark" ? "light" : "dark"}`)} +</button> diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte index e8646a4a..3f92ba85 100644 --- a/src/components/Footer.svelte +++ b/src/components/Footer.svelte @@ -1,8 +1,7 @@ <script> - import Icon from "$comp/Icon.svelte"; + import DarkToggle from "$comp/DarkToggle.svelte"; import LocaleSelector from "$comp/LocaleSelector.svelte"; import { t } from "$lib/translations"; - import { theme } from "$lib/store"; const followLinks = [ { @@ -17,7 +16,6 @@ { url: "/docs", titleID: "documentation" }, { url: "/support", titleID: "support" }, ]; - let dark = () => ($theme = $theme === "dark" ? "light" : "dark"); </script> <footer @@ -38,17 +36,10 @@ </a> </div> </div> - <div class="w-full flex flex-wrap sm:flex-nowrap gap-2 justify-center items-center"> + <div + class="w-full flex flex-wrap sm:flex-nowrap 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> diff --git a/src/components/LandingHeader.svelte b/src/components/LandingHeader.svelte index 64349a99..7a4c5d18 100644 --- a/src/components/LandingHeader.svelte +++ b/src/components/LandingHeader.svelte @@ -4,6 +4,9 @@ import { t } from "$lib/translations"; import { page } from "$app/stores"; + import DarkToggle from "$comp/DarkToggle.svelte"; + import LocaleSelector from "$comp/LocaleSelector.svelte"; + export let howItWorks; export let faq; export let about; @@ -22,18 +25,14 @@ bind:this={header} > <nav class="block lg:flex justify-between items-center"> - <div - class="flex justify-start lg:justify-center items-center lg:space-x-10" - > + <div class="flex justify-start lg:justify-center items-center lg:space-x-5"> <a href="/" on:click={() => scroll(header)}> <iconify-icon icon="coinos:logo" width="224" /> </a> </div> <!-- desktop nav --> - <div - class="hidden space-x-10 lg:flex justify-center items-center font-bold" - > + <div class="hidden space-x-5 lg:flex justify-center items-center font-bold"> {#if $page.url.pathname === "/"} <button class="hover:opacity-80" on:click={() => scroll(howItWorks)} >{$t("howItWorks.header")}</button @@ -59,7 +58,7 @@ </button> {:else} <button - class="btn !w-auto !rounded-full" + class="btn btn-accent !w-auto !rounded-full" on:click={() => goto("/register")} >{$t("nav.register")} </button> @@ -76,15 +75,20 @@ class="block lg:hidden absolute top-[34.5px] right-10 z" on:click={() => (showMobileMenu = !showMobileMenu)} > - <iconify-icon icon={!showMobileMenu ? "ph:list-bold" : "ph:x-bold"} width="32" /> + <iconify-icon + icon={!showMobileMenu ? "ph:list-bold" : "ph:x-bold"} + width="32" + /> </button> <div - class="container w-full px-10 lg:hidden absolute top-0 {showMobileMenu + class="container w-full p-10 lg:hidden absolute top-0 {showMobileMenu ? 'right-0' - : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-white" + : 'right-[-100%]'} transition-all ease-in-out duration-300 h-[100vh] w-full bg-base-100" > - <div class="space-y-8 mt-24 font-bold text-xl"> + <div class="space-y-5 mt-24 font-bold text-xl"> + <LocaleSelector /> + <DarkToggle /> <button on:click={() => mobileMenuButtonClick(howItWorks)} class="block" >{$t("howItWorks.header")}</button > @@ -95,15 +99,10 @@ >{$t("about.header")}</button > {#if !user} - <button - class="border rounded-full px-6 py-2 font-bold block w-full" - on:click={() => goto("/register")} - >{$t("nav.startInSeconds")} + <button class="btn btn-accent" on:click={() => goto("/register")} + >{$t("nav.register")} </button> - <button - class="bg-black text-white border rounded-full px-6 py-2 font-bold block w-full" - on:click={() => goto("/login")} - > + <button class="btn" on:click={() => goto("/login")}> {$t("nav.signIn")} </button> {:else} @@ -113,7 +112,7 @@ >{$t("nav.account")} </button> <button - class="bg-black text-white border rounded-full px-6 py-2 font-bold block" + class="bg-primary text-white border rounded-full px-6 py-2 font-bold block" on:click={() => goto("/logout")} > {$t("nav.signOut")} diff --git a/src/components/Menu.svelte b/src/components/Menu.svelte index 6402928e..3ce6d9ce 100644 --- a/src/components/Menu.svelte +++ b/src/components/Menu.svelte @@ -1,5 +1,6 @@ <script> import { theme } from "$lib/store"; + import DarkToggle from "$comp/DarkToggle.svelte"; import OutClick from "svelte-outclick"; export let t, user, w, opacity; @@ -40,18 +41,7 @@ {#each menuButtons as { href, icon, key }} <li> {#if key.includes("dark")} - <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="32" - /> - {t(`nav.${$theme === "dark" ? "light" : "dark"}`)} - </button> + <DarkToggle /> {:else} <a {href} @@ -71,7 +61,7 @@ {/each} </ul> <hr class="my-4" /> - <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="130" /></a> + <a href="/?stay=true"><iconify-icon icon="coinos:logo" width="160" /></a> </div> </OutClick> </div> |