From cf01aa26b1add1acc4ae0d15ce9685b9bfadff8c Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Thu, 7 Sep 2023 12:42:32 -0300
Subject: [PATCH] mejorar modal breadcrumbs

---
 src/components/Modal.svelte       | 14 +++++++++-----
 src/views/Page/Breadcrumbs.svelte |  5 +++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 60278e1..35c2722 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -31,17 +31,21 @@
     on:keydown={keydown}
   >
     <div
-      class="h-full w-full overflow-y-auto rounded-2xl bg-neutral-100 px-5 py-4 shadow-xl dark:bg-neutral-800 sm:h-auto sm:w-auto"
+      class="h-full w-full overflow-y-auto bg-neutral-100 shadow-xl dark:bg-neutral-900 sm:h-auto sm:w-auto sm:rounded-2xl dark:sm:bg-neutral-800"
     >
-      <div class="mb-3 flex items-center justify-between">
-        <h3 class="text-2xl" id="modal-title">
+      <div
+        class="flex items-center justify-between border-b bg-neutral-50 dark:border-neutral-600 dark:bg-neutral-800 dark:sm:bg-neutral-700"
+      >
+        <h3 class="px-4 text-2xl font-medium" id="modal-title">
           <slot name="title" />
         </h3>
-        <button on:click={onClose}
+        <button class="px-3 py-2" on:click={onClose}
           ><CloseIcon class="h-10 w-10 fill-current" /></button
         >
       </div>
-      <slot />
+      <div class="p-4">
+        <slot />
+      </div>
       <!--<div
       class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0"
     >
diff --git a/src/views/Page/Breadcrumbs.svelte b/src/views/Page/Breadcrumbs.svelte
index e19db31..b5cec94 100644
--- a/src/views/Page/Breadcrumbs.svelte
+++ b/src/views/Page/Breadcrumbs.svelte
@@ -67,10 +67,11 @@
 
 {#if breadcrumbsModalOpen}
   <Modal onClose={() => (breadcrumbsModalOpen = false)}>
+    <svelte:fragment slot="title">Breadcrumbs</svelte:fragment>
     <ol class="h-full w-full">
       {#each $pageBreadcrumbs as crumb, index}
         <li
-          class="flex items-center overflow-hidden text-ellipsis whitespace-nowrap"
+          class="flex items-center overflow-hidden text-ellipsis whitespace-nowrap border-b dark:border-neutral-700"
         >
           {#if index !== 0}
             <span aria-hidden="true" class="text-lg">↪</span>
@@ -78,7 +79,7 @@
           <a
             href={inject(routes.Page, { worldId, pageId: crumb })}
             on:click={() => ((breadcrumbsModalOpen = false), true)}
-            class="overflow-hidden text-ellipsis whitespace-nowrap py-2 pl-4 text-lg"
+            class="w-full overflow-hidden text-ellipsis whitespace-nowrap py-2 pl-4 text-lg"
             class:active-breadcrumb={crumb === pageId}
             >{$crumbsTitles[index] || crumb}</a
           >