Move routes around, tweak navigation, fix CardButton

src/lib/components/CardButton.svelte

@@ -2,19 +2,21 @@
   import Icon from "@lib/components/Icon.svelte"
 </script>
 
-<div class="btn btn-neutral btn-lg h-24 w-full text-left">
-  <div class="flex w-full flex-row items-center justify-between gap-2 {$$props.class}">
-    <div class="flex items-center gap-6">
-      <div class="center w-12">
-        <slot name="icon" />
-      </div>
-      <div class="flex flex-grow flex-col gap-2">
-        <p class="text-bold"><slot name="title" /></p>
-        <p class="text-xs"><slot name="info" /></p>
-      </div>
+<div class="btn btn-neutral h-[unset] flex flex-nowrap w-full text-left py-4 {$$props.class}">
+  <div class="flex flex-row items-start gap-1 flex-grow">
+    <div class="w-12 h-14 flex items-center flex-shrink-0">
+      <slot name="icon" />
     </div>
-    <div class="center w-12">
-      <Icon size={7} icon="alt-arrow-right" />
+    <div class="flex flex-col gap-1">
+      <p class="text-lg text-bold pt-2">
+        <slot name="title" />
+      </p>
+      <p class="text-sm">
+        <slot name="info" />
+      </p>
     </div>
   </div>
+  <div class="w-14 h-14 flex items-center justify-end">
+    <Icon size={7} icon="alt-arrow-right" />
+  </div>
 </div>

src/lib/components/Divider.svelte

@@ -1,5 +1,7 @@
 <div class="flex items-center gap-2 p-2 text-xs uppercase opacity-50">
   <div class="h-px flex-grow bg-base-content opacity-25" />
-  <p><slot /></p>
-  <div class="h-px flex-grow bg-base-content opacity-25" />
+  {#if $$slots.default}
+    <p><slot /></p>
+    <div class="h-px flex-grow bg-base-content opacity-25" />
+  {/if}
 </div>

src/lib/components/Icon.svelte

@@ -48,6 +48,7 @@
   import InfoSquare from "@assets/icons/Info Square.svg?dataurl"
   import Key from "@assets/icons/Key.svg?dataurl"
   import KeyMinimalisticSquare3 from "@assets/icons/Key Minimalistic Square 3.svg?dataurl"
+  import Letter from "@assets/icons/Letter.svg?dataurl"
   import LinkRound from "@assets/icons/Link Round.svg?dataurl"
   import Login from "@assets/icons/Login.svg?dataurl"
   import Login2 from "@assets/icons/Login 2.svg?dataurl"
@@ -123,6 +124,7 @@
     "info-square": InfoSquare,
     key: Key,
     "key-minimalistic-square-3": KeyMinimalisticSquare3,
+    letter: Letter,
     "link-round": LinkRound,
     login: Login,
     "login-2": Login2,

src/lib/components/Page.svelte

@@ -1,3 +1,3 @@
-<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0">
+<div class="scroll-container max-h-screen flex-grow overflow-auto bg-base-200 pb-14 md:pb-0 {$$props.class}">
   <slot />
 </div>