From 3ef1b8136e530c17e4e459517dd09f38effe6c41 Mon Sep 17 00:00:00 2001
From: Adam Soltys <adam@coinos.io>
Date: Tue, 5 Nov 2024 14:47:22 -0800
Subject: dark styles

---
 src/components/Footer.svelte         | 19 ++++++++++++++-----
 src/components/HowItWorksCard.svelte |  2 +-
 src/components/LandingHero.svelte    | 11 +++++++----
 3 files changed, 22 insertions(+), 10 deletions(-)

(limited to 'src/components')

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>
-- 
cgit v1.2.3