iconify

4 files changed, 31 insertions, 22 deletions

diff --git a/bun.lockb b/bun.lockb
index e0742e80..6022c722 100755
--- a/bun.lockb
+++ b/bun.lockb
diff --git a/package.json b/package.json
index 1c0c1b84..5063dff8 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "daisyui": "^4.12.14",
     "date-fns": "^2.29.3",
     "html5-qrcode": "^2.3.8",
+    "iconify-icon": "^2.1.0",
     "leaflet": "^1.9.3",
     "leaflet.markercluster": "^1.5.3",
     "maplibre-gl": "^3.3.1",
diff --git a/src/components/AppHeader.svelte b/src/components/AppHeader.svelte
index 8ec0b5ed..4accd0dc 100644
--- a/src/components/AppHeader.svelte
+++ b/src/components/AppHeader.svelte
@@ -14,12 +14,12 @@
   let menuButtons;
   $: if (user)
     menuButtons = [
-      { key: "nav.settings", icon: "settings", href: `/settings` },
-      { key: "nav.support", icon: "support", href: `/support` },
-      { key: "nav.map", icon: "map", href: `/map` },
-      { key: "nav.merch", icon: "shop", href: `https://coinosmerch.com` },
-      { key: "nav.dark", icon: "moon", href: `/dark` },
-      { key: "nav.signOut", icon: "logout", href: `/logout` },
+      { key: "nav.settings", icon: "ph:gear-bold", href: `/settings` },
+      { key: "nav.support", icon: "ph:lifebuoy-bold", href: `/support` },
+      { key: "nav.map", icon: "ph:map-trifold-bold", href: `/map` },
+      { key: "nav.merch", icon: "ph:storefront-bold", href: `https://coinosmerch.com` },
+      { key: "nav.dark", icon: "ph:moon-stars-bold", href: `/dark` },
+      { key: "nav.signOut", icon: "ph:sign-out-bold", href: `/logout` },
     ];
 
   let showMenu = false;
@@ -40,37 +40,39 @@
 
 {#if !$loading}
   <header
-    class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative bg-cover mb-20 text-secondary"
+    class="bg-gradient-to-r from-primary to-gradient h-[175px] w-full relative bg-cover mb-20"
     style:background-image={bg}
   >
     <nav class="flex justify-end items-center space-x-4 p-5">
       {#if user}
         <a href={`/${user.username}`} data-sveltekit-preload-code="eager">
           <button
-            class="bg-base p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
+            class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/${user.username}`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="home" style="mx-auto w-6 sm:w-8" />
+          >
+            <iconify-icon icon="pepicons-pop:house" width="32" />
           </button>
         </a>
         <a href={`/${user.username}/receive`}>
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page.url.pathname.includes(
+            class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page.url.pathname.includes(
               'invoice',
             )
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="receive" style="mx-auto w-6 sm:w-8" />
+          >
+            <iconify-icon icon="ph:hand-coins-bold" flip="horizontal" width="32" />
           </button>
         </a>
         <a href={`/payments`} data-sveltekit-preload-code="eager">
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
+            class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/payments`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'} relative"
-            ><Icon icon="clock" style="mx-auto w-6 sm:w-8" />
+            ><iconify-icon icon="ph:clock-bold" width="32" />
             {#if $newPayment}
               <span class="absolute top-0 right-0">
                 <span class="flex h-3 w-3">
@@ -87,17 +89,17 @@
         </a>
         <a href={`/send`} data-sveltekit-preload-code="eager">
           <button
-            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
+            class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
               .url.pathname === `/send`
               ? 'opacity-100'
               : 'opacity-70 hover:opacity-80'}"
-            ><Icon icon="send" style="mx-auto w-6 sm:w-8" />
+            ><iconify-icon icon="majesticons:send-line" width="32" />
           </button>
         </a>
         <div class="relative">
           <OutClick on:outclick={() => (showMenu = false)}>
             <button
-              class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
+              class="flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
                 .url.pathname === `/settings` ||
               $page.url.pathname === `/support`
                 ? 'opacity-100'
@@ -105,7 +107,7 @@
                     showMenu ? 'opacity-80' : ''
                   }`}"
               on:click={() => (showMenu = !showMenu)}
-              ><Icon icon="menu" style="mx-auto w-6 sm:w-8" />
+              ><iconify-icon icon="ph:list-bold" width="32" />
             </button>
 
             <div
@@ -118,15 +120,20 @@
                   <li>
                     {#if key.includes("dark")}
                       <button
-                        class="flex justify-center items-center font-semibold hover:opacity-80"
+                        class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
                         on:click={dark}
-                        ><Icon {icon} style="mr-2 w-6 sm:w-8" /> {$t(key)}
+                        > 
+                        
+                        <iconify-icon icon={icon} width="30" />
+                        {$t(key)}
                       </button>
                     {:else}
                       <a {href} data-sveltekit-preload-code="eager">
                         <button
-                          class="flex justify-center items-center font-semibold hover:opacity-80"
-                          ><Icon {icon} style="mr-2 w-6 sm:w-8" /> {$t(key)}
+                          class="flex justify-center items-center font-semibold hover:opacity-80 gap-2"
+                          >
+                          <iconify-icon icon={icon} width="30" />
+                          {$t(key)}
                         </button>
                       </a>
                     {/if}
@@ -142,7 +149,7 @@
         </div>
       {:else}
         <a href={`/login?redirect=${$page.url.pathname}`}>
-          <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
+          <button class="bg-base-100 px-5 py-2 rounded-xl font-semibold text-sm"
             >{$t("nav.signIn")}</button
           >
         </a>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 20892e44..46c47c84 100644
--- a/src/routes/+layout.ts
+++ b/src/routes/+layout.ts
@@ -1,4 +1,5 @@
 import { addTranslations, setLocale, setRoute } from "$lib/translations/index";
+import "iconify-icon";
 
 /** @type {import('@sveltejs/kit').Load} */
 export const load = async ({ data }) => {