tooltips

Vizzuality · Feb 23, 2024 · d4fed32 · d4fed32
1 parent ea1d6df
commit d4fed32
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>