From d4fed329c4a59163c6da41bd2ac7e7aabb1afe44 Mon Sep 17 00:00:00 2001
From: anamontiaga <amontiaga@gmail.com>
Date: Fri, 23 Feb 2024 17:38:14 +0100
Subject: [PATCH] tooltips

---
 client/src/components/ui/popover.tsx      |  2 +-
 client/src/components/ui/slider.tsx       |  2 +-
 client/src/components/ui/tooltip.tsx      |  2 +-
 client/src/containers/map/legend/item.tsx | 10 +++++++---
 4 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/client/src/components/ui/popover.tsx b/client/src/components/ui/popover.tsx
index e95a8edf..fbb3aede 100644
--- a/client/src/components/ui/popover.tsx
+++ b/client/src/components/ui/popover.tsx
@@ -20,7 +20,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-10 w-72 rounded-md border p-4 shadow-md outline-none',
         className
       )}
       {...props}
diff --git a/client/src/components/ui/slider.tsx b/client/src/components/ui/slider.tsx
index 7114d358..9492ff5f 100644
--- a/client/src/components/ui/slider.tsx
+++ b/client/src/components/ui/slider.tsx
@@ -18,7 +18,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-gray-100">
       <SliderPrimitive.Range className="absolute h-full bg-gray-400" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-primary ring-offset-background focus-visible:ring-ring block h-2.5 w-2.5 rounded-full border-2 bg-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="border-primary ring-offset-background focus-visible:ring-ring block h-2.5 w-2.5 cursor-pointer rounded-full border-2 bg-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/client/src/components/ui/tooltip.tsx b/client/src/components/ui/tooltip.tsx
index a1261d33..4eaa9821 100644
--- a/client/src/components/ui/tooltip.tsx
+++ b/client/src/components/ui/tooltip.tsx
@@ -22,7 +22,7 @@ const TooltipContent = React.forwardRef<
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border bg-white px-3 py-1 text-xs text-black shadow-md',
+      'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded border bg-white px-1 py-0.5 text-sm text-black shadow-md',
       className
     )}
     {...props}
diff --git a/client/src/containers/map/legend/item.tsx b/client/src/containers/map/legend/item.tsx
index 9ff2f95e..c5570233 100644
--- a/client/src/containers/map/legend/item.tsx
+++ b/client/src/containers/map/legend/item.tsx
@@ -74,7 +74,9 @@ const MapLegendItem = ({ id, settings }: MapLegendItemProps) => {
                   <PaintBucket size={12} />
                 </div>
               </TooltipTrigger>
-              <TooltipContent sideOffset={0}>Opacity</TooltipContent>
+              <TooltipContent sideOffset={0} className="font-light">
+                Opacity
+              </TooltipContent>
             </Tooltip>
           </PopoverTrigger>
           <PopoverContent sideOffset={2} side="top" align="end" className="w-56 rounded bg-white">
@@ -95,7 +97,7 @@ const MapLegendItem = ({ id, settings }: MapLegendItemProps) => {
               {settings?.visibility === 'visible' ? <Eye size={12} /> : <EyeOff size={12} />}
             </button>
           </TooltipTrigger>
-          <TooltipContent sideOffset={0}>
+          <TooltipContent sideOffset={0} className="font-light">
             {settings?.visibility === 'visible' ? 'Hide Layer' : 'Show Layer'}
           </TooltipContent>
         </Tooltip>
@@ -105,7 +107,9 @@ const MapLegendItem = ({ id, settings }: MapLegendItemProps) => {
               <XCircle size={12} />
             </button>
           </TooltipTrigger>
-          <TooltipContent sideOffset={0}>Remove Layer</TooltipContent>
+          <TooltipContent sideOffset={0} className="font-light">
+            Remove Layer
+          </TooltipContent>
         </Tooltip>
       </div>
     </div>