From 348c54541915886a45e33982bc7990f42c769e9e Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Sat, 20 Apr 2024 00:53:01 +0000
Subject: [PATCH] Update dependencies and add new features

---
 package-lock.json                       | 17 ++++++++
 package.json                            |  1 +
 src/lib/components/AdventureCard.svelte | 55 +++++++++----------------
 src/lib/components/Navbar.svelte        | 46 ++++++++++++++++++---
 src/lib/components/UserAvatar.svelte    |  2 +-
 src/routes/+layout.svelte               |  1 +
 src/routes/+page.server.ts              | 13 ++++--
 src/routes/+page.svelte                 |  2 +-
 src/routes/featured/+page.svelte        |  1 -
 tailwind.config.js                      |  2 +-
 10 files changed, 92 insertions(+), 48 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 428a14d..2e78dd8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@vercel/analytics": "^1.2.2",
         "@vercel/speed-insights": "^1.0.10",
         "drizzle-orm": "^0.30.6",
+        "iconify-icon": "^2.1.0",
         "oslo": "^1.2.0",
         "postgres": "^3.4.4"
       },
@@ -877,6 +878,11 @@
         "zod": "^3.19.1"
       }
     },
+    "node_modules/@iconify/types": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@iconify/types/-/types-2.0.0.tgz",
+      "integrity": "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
@@ -4460,6 +4466,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/iconify-icon": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/iconify-icon/-/iconify-icon-2.1.0.tgz",
+      "integrity": "sha512-lto4XU3bwTQnb+D/CsJ4dWAo0aDe+uPMxEtxyOodw9l7R9QnJUUab3GCehlw2M8mDHdeUu/ufx8PvRQiJphhXg==",
+      "dependencies": {
+        "@iconify/types": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/cyberalien"
+      }
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
diff --git a/package.json b/package.json
index 96ef5db..c0ff76f 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "@vercel/analytics": "^1.2.2",
     "@vercel/speed-insights": "^1.0.10",
     "drizzle-orm": "^0.30.6",
+    "iconify-icon": "^2.1.0",
     "oslo": "^1.2.0",
     "postgres": "^3.4.4"
   }
diff --git a/src/lib/components/AdventureCard.svelte b/src/lib/components/AdventureCard.svelte
index 357635d..79684f2 100644
--- a/src/lib/components/AdventureCard.svelte
+++ b/src/lib/components/AdventureCard.svelte
@@ -45,22 +45,16 @@
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
       {#if location !== ""}
-        <p>
-          <img
-            src={locationDot}
-            class="inline-block -mt-1 mr-1"
-            alt="Logo"
-          />{location}
-        </p>
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
+          <p class="ml-.5">{location}</p>
+        </div>
       {/if}
       {#if created !== ""}
-        <p>
-          <img
-            src={calendar}
-            class="inline-block -mt-1 mr-1"
-            alt="Logo"
-          />{created}
-        </p>
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
+          <p class="ml-1">{created}</p>
+        </div>
       {/if}
       <div class="card-actions justify-end">
         <button class="btn btn-primary" on:click={edit}>Edit</button>
@@ -77,13 +71,10 @@
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
       {#if location != ""}
-        <p>
-          <img
-            src={locationDot}
-            class="inline-block -mt-1 mr-1"
-            alt="Logo"
-          />{location}
-        </p>
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
+          <p class="ml-.5">{location}</p>
+        </div>
       {/if}
       <div class="card-actions justify-end">
         <button class="btn btn-primary" on:click={add}>Add</button>
@@ -99,22 +90,16 @@
     <div class="card-body">
       <h2 class="card-title overflow-ellipsis">{name}</h2>
       {#if location !== ""}
-        <p>
-          <img
-            src={locationDot}
-            class="inline-block -mt-1 mr-1"
-            alt="Logo"
-          />{location}
-        </p>
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:map-marker" class="text-xl"></iconify-icon>
+          <p class="ml-.5">{location}</p>
+        </div>
       {/if}
       {#if created !== ""}
-        <p>
-          <img
-            src={calendar}
-            class="inline-block -mt-1 mr-1"
-            alt="Logo"
-          />{created}
-        </p>
+        <div class="inline-flex items-center">
+          <iconify-icon icon="mdi:calendar" class="text-xl"></iconify-icon>
+          <p class="ml-1">{created}</p>
+        </div>
       {/if}
     </div>
   </div>
diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 386413f..48997b2 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -104,21 +104,55 @@
       <p class="font-bold">Adventures: {count}</p>
       <UserAvatar {user} />
     {/if}
-    <button class="btn btn-neutral ml-4" on:click={showModal}>About</button>
+    <button class="btn btn-neutral ml-4 btn-circle" on:click={showModal}
+      ><iconify-icon icon="mdi:information" class="text-xl"
+      ></iconify-icon></button
+    >
     <div class="dropdown dropdown-bottom dropdown-end">
-      <div tabindex="0" role="button" class="btn m-1 ml-4">Themes</div>
+      <div tabindex="0" role="button" class="btn m-1 ml-4">
+        <iconify-icon icon="mdi:theme-light-dark" class="text-xl"
+        ></iconify-icon>
+      </div>
       <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
       <ul
         tabindex="0"
         class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
       >
         <form method="POST" use:enhance={submitUpdateTheme}>
-          <li><button formaction="/?/setTheme&theme=light">Light</button></li>
-          <li><button formaction="/?/setTheme&theme=dark">Dark</button></li>
-          <li><button formaction="/?/setTheme&theme=night">Night</button></li>
+          <li>
+            <button formaction="/?/setTheme&theme=light"
+              >Light<iconify-icon icon="mdi:weather-sunny" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+          <li>
+            <button formaction="/?/setTheme&theme=dark"
+              >Dark<iconify-icon icon="mdi:weather-night" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
+          <li>
+            <button formaction="/?/setTheme&theme=night"
+              >Night<iconify-icon icon="mdi:weather-night" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
           <!-- <li><button formaction="/?/setTheme&theme=nord">Nord</button></li> -->
           <!-- <li><button formaction="/?/setTheme&theme=retro">Retro</button></li> -->
-          <li><button formaction="/?/setTheme&theme=forest">Forest</button></li>
+          <li>
+            <button formaction="/?/setTheme&theme=forest"
+              >Forest<iconify-icon icon="mdi:forest" class="text-xl"
+              ></iconify-icon></button
+            >
+            <button formaction="/?/setTheme&theme=garden"
+              >Garden<iconify-icon icon="mdi:flower" class="text-xl"
+              ></iconify-icon></button
+            >
+            <button formaction="/?/setTheme&theme=aqua"
+              >Aqua<iconify-icon icon="mdi:water" class="text-xl"
+              ></iconify-icon></button
+            >
+          </li>
         </form>
       </ul>
     </div>
diff --git a/src/lib/components/UserAvatar.svelte b/src/lib/components/UserAvatar.svelte
index 0af9f6c..b6db2cf 100644
--- a/src/lib/components/UserAvatar.svelte
+++ b/src/lib/components/UserAvatar.svelte
@@ -29,7 +29,7 @@
   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
   <ul
     tabindex="0"
-    class="dropdown-content z-[1] menu p-2 shadow bg-neutral mt-2 rounded-box w-52"
+    class="dropdown-content z-[1] menu p-2 shadow bg-primary-content mt-2 rounded-box w-52"
   >
     <!-- svelte-ignore a11y-missing-attribute -->
     <!-- svelte-ignore a11y-missing-attribute -->
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 839675f..67b0334 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -9,6 +9,7 @@
   import { page } from "$app/stores";
   import { inject } from "@vercel/analytics";
   import { injectSpeedInsights } from "@vercel/speed-insights/sveltekit";
+  import "iconify-icon";
 
   if (data.usingVercel === "true") {
     inject();
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index e007790..13be4aa 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -3,7 +3,9 @@ import { fail, redirect } from "@sveltejs/kit";
 
 import type { Actions, PageServerLoad } from "./$types";
 
-export const load: PageServerLoad = async (event: { locals: { user: any; }; }) => {
+export const load: PageServerLoad = async (event: {
+  locals: { user: any };
+}) => {
   if (event.locals.user)
     return {
       user: event.locals.user,
@@ -28,10 +30,15 @@ export const actions: Actions = {
     });
     return redirect(302, "/login");
   },
-  setTheme: async ( { url, cookies }) => {
+  setTheme: async ({ url, cookies }) => {
     const theme = url.searchParams.get("theme");
     // change the theme only if it is one of the allowed themes
-    if (theme && ["light", "dark", "night", "retro", "forest", "nord"].includes(theme)) {
+    if (
+      theme &&
+      ["light", "dark", "night", "retro", "forest", "aqua", "forest"].includes(
+        theme
+      )
+    ) {
       cookies.set("colortheme", theme, {
         path: "/",
         maxAge: 60 * 60 * 24 * 365,
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 22a9617..673d702 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -22,7 +22,7 @@
   {/if}
 
   <img src={campingDrawing} class="w-1/4 mb-4" alt="Logo" />
-  <button on:click={navToLog} class="btn btn-primary">Open Log</button>
+  <button on:click={navToLog} class="btn btn-primary mb-4">Open Log</button>
 
   <div class="stats shadow">
     <div class="stat">
diff --git a/src/routes/featured/+page.svelte b/src/routes/featured/+page.svelte
index f16c409..fe453ff 100644
--- a/src/routes/featured/+page.svelte
+++ b/src/routes/featured/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   export let data;
-  console.log(data.result);
   import { goto } from "$app/navigation";
   import AdventureCard from "$lib/components/AdventureCard.svelte";
   import { visitCount } from "$lib/utils/stores/visitCountStore.js";
diff --git a/tailwind.config.js b/tailwind.config.js
index f63f6e2..cde0de5 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,6 @@ export default {
   },
   plugins: [require("@tailwindcss/typography"), require("daisyui")],
   daisyui: {
-    themes: ["light", "dark", "night", "retro", "forest", "nord"],
+    themes: ["light", "dark", "night", "retro", "forest", "aqua", "garden"],
   },
 };