landing nav

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>