From cbb36416d950d63b4ba0409c90cd6b02aceae822 Mon Sep 17 00:00:00 2001
From: Christopher Loverich <1010084+cloverich@users.noreply.github.com>
Date: Sat, 10 Aug 2024 09:17:25 -0700
Subject: [PATCH] darken tooltip styles; clean-up media popover

---
 src/index.css                                   | 10 ++++++++++
 src/views/edit/editor/components/Input.tsx      |  2 +-
 src/views/edit/editor/components/Tooltip.tsx    |  2 +-
 src/views/edit/editor/elements/MediaPopover.tsx | 11 ++++++-----
 tailwind.config.js                              |  4 ++++
 5 files changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/index.css b/src/index.css
index 2f0451e..4c7093b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -11,6 +11,13 @@
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
+    /* NOTE: Separated tooltip from popover, where dropdown, popover, and tooltip all shared before
+     * This was to avoid bikeshedding once I changed the tooltip color to black, but proibably this is 
+     * worth tying back together once I can dedicate more time to just these styles
+     */
+    --tooltip: 222.2 84% 4.9%;
+    --tooltip-foreground: 0 0% 100%;
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
@@ -44,6 +51,9 @@
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 
+    --tooltip: 222.2 84% 4.9%;
+    --tooltip-foreground: 210 40% 98%;
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 
diff --git a/src/views/edit/editor/components/Input.tsx b/src/views/edit/editor/components/Input.tsx
index 2f688a4..f4a132d 100644
--- a/src/views/edit/editor/components/Input.tsx
+++ b/src/views/edit/editor/components/Input.tsx
@@ -11,7 +11,7 @@ export const inputVariants = cva(
         ghost: "border-none focus-visible:ring-transparent",
       },
       h: {
-        sm: "h-9 px-2 py-1",
+        sm: "h-9 px-1",
         md: "h-10 px-3 py-2",
       },
     },
diff --git a/src/views/edit/editor/components/Tooltip.tsx b/src/views/edit/editor/components/Tooltip.tsx
index b538502..6f29b68 100644
--- a/src/views/edit/editor/components/Tooltip.tsx
+++ b/src/views/edit/editor/components/Tooltip.tsx
@@ -11,7 +11,7 @@ export const TooltipContent = withCn(
   withProps(TooltipPrimitive.Content, {
     sideOffset: 4,
   }),
-  "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+  "z-50 overflow-hidden py-0.5 px-1.5 rounded-sm border bg-popover text-sm text-tooltip-foreground bg-tooltip shadow-md",
 );
 
 // Added along with @radix-ui/react-tooltip to support the Plate Toolbar
diff --git a/src/views/edit/editor/elements/MediaPopover.tsx b/src/views/edit/editor/elements/MediaPopover.tsx
index 79990a9..7abbde6 100644
--- a/src/views/edit/editor/elements/MediaPopover.tsx
+++ b/src/views/edit/editor/elements/MediaPopover.tsx
@@ -58,13 +58,13 @@ export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
       <PopoverAnchor>{children}</PopoverAnchor>
 
       <PopoverContent
-        className="w-auto p-1"
+        className="w-auto"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
         {isEditing ? (
           <div className="flex w-[330px] flex-col">
-            <div className="flex items-center">
-              <div className="flex items-center pl-3 text-muted-foreground">
+            <div className="flex items-center px-2">
+              <div className="flex items-center text-muted-foreground px-1">
                 <Icons.link className="h-4 w-4" />
               </div>
 
@@ -78,14 +78,15 @@ export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
             </div>
           </div>
         ) : (
-          <div className="box-content flex h-9 items-center gap-1">
+          <div className="box-content flex items-center">
             <FloatingMediaPrimitive.EditButton
               className={buttonVariants({ variant: "ghost", size: "sm" })}
             >
               Edit link
             </FloatingMediaPrimitive.EditButton>
 
-            <Separator orientation="vertical" className="my-1" />
+            {/* Ah, I broke this (invisible). Fix it at some point */}
+            <Separator orientation="vertical" />
 
             <Button variant="ghost" size="sms" {...buttonProps}>
               <Icons.delete className="h-4 w-4" />
diff --git a/tailwind.config.js b/tailwind.config.js
index 93f363f..6e9227e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,6 +44,10 @@ export const theme = {
         DEFAULT: "hsl(var(--popover))",
         foreground: "hsl(var(--popover-foreground))",
       },
+      tooltip: {
+        DEFAULT: "hsl(var(--tooltip))",
+        foreground: "hsl(var(--tooltip-foreground))",
+      },
       card: {
         DEFAULT: "hsl(var(--card))",
         foreground: "hsl(var(--card-foreground))",