From b8901b904da8b8baf7bd80be39b452bce4196b5e Mon Sep 17 00:00:00 2001
From: Nulo <git@nulo.in>
Date: Thu, 31 Aug 2023 13:47:09 -0300
Subject: [PATCH] theme linktooltip

---
 src/app.css                              |  4 +-
 src/editor/bubblemenu/LinkTooltip.svelte | 56 +++++++-----------------
 2 files changed, 17 insertions(+), 43 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4297daf..d0546f3 100644
--- a/src/app.css
+++ b/src/app.css
@@ -53,8 +53,8 @@ a {
   @apply rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-white  dark:bg-neutral-200 dark:text-neutral-800;
 }
 .btn-outline {
-  @apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-950 dark:text-neutral-200;
+  @apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-900 dark:text-neutral-200;
 }
 .input {
-  @apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900;
+  @apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700/70 dark:bg-neutral-900;
 }
diff --git a/src/editor/bubblemenu/LinkTooltip.svelte b/src/editor/bubblemenu/LinkTooltip.svelte
index 097aab4..a59d150 100644
--- a/src/editor/bubblemenu/LinkTooltip.svelte
+++ b/src/editor/bubblemenu/LinkTooltip.svelte
@@ -44,15 +44,15 @@
 </script>
 
 <div
-  class="x-tooltip bg-gray"
+  class="absolute z-30 w-max items-center overflow-hidden rounded border border-neutral-200/70 bg-white px-1 leading-none shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
   class:flex={shown}
   class:hidden={!shown}
   bind:this={tooltipEl}
   style={$style}
 >
-  <!-- TODO: hacer que el clickeable sea relativo a la url final del sitio? -->
-  <span>
+  <span class=" ">
     <a
+      class="block max-w-[50vw] overflow-x-hidden text-ellipsis whitespace-nowrap p-2 text-blue-500 dark:text-blue-300"
       href={link?.mark.attrs.href}
       rel="noopener noreferrer nofollow"
       target="_blank"
@@ -60,46 +60,20 @@
       {link?.mark.attrs.href}
     </a>
   </span>
-  <button type="button" on:click={editLink} title={"Editar enlace"}>
+  <button
+    class="my-1 appearance-none rounded border-none p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+    type="button"
+    on:click={editLink}
+    title={"Editar enlace"}
+  >
     <EditIcon class="h-6 w-6 fill-current" />
   </button>
-  <button type="button" on:click={removeLink} title={"Borrar enlace"}>
+  <button
+    class="my-1 appearance-none rounded border-none p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"
+    type="button"
+    on:click={removeLink}
+    title={"Borrar enlace"}
+  >
     <CloseIcon class="h-6 w-6 fill-current" />
   </button>
 </div>
-
-<style>
-  .x-tooltip {
-    width: max-content;
-    position: absolute;
-    background: #222;
-    color: white;
-    border-radius: 4px;
-    z-index: 420;
-    line-height: 1;
-
-    align-items: center;
-  }
-  .x-tooltip > * {
-    padding: 0.4rem 0.5rem;
-  }
-  a {
-    display: block;
-    color: lightblue;
-    max-width: 50vw;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-  button {
-    background: #222;
-    color: white;
-    border: none;
-    appearance: none;
-    font-size: 1.5rem;
-    border-radius: 4px;
-  }
-  button:hover {
-    background: #444;
-  }
-</style>