Merge pull request #20 from Vizzuality/AF-map-settings-styles

[FE](styles): fix map settings

client/src/components/map/controls/settings/index.tsx

@@ -48,7 +48,7 @@ export const SettingsControl: FC<SettingsControlProps> = ({
             </TooltipContent>
           </TooltipPortal>
 
-          <PopoverContent side="left" align="start">
+          <PopoverContent side="left" align="start" className="bg-white">
             {children}
             <PopoverArrow className="fill-white" width={10} height={5} />
           </PopoverContent>

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 bg-green-400 p-4 text-green-400 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-50 w-72 rounded-md border p-4 shadow-md outline-none',
         className
       )}
       {...props}

client/src/containers/map/settings/basemaps/index.tsx

@@ -1,11 +1,13 @@
 import { BASEMAPS } from '@/constants/basemaps';
 
+import BasemapItem from './item';
+
 const Basemaps = () => {
   return (
     <ul className="grid grid-flow-col gap-4">
       {BASEMAPS.map((b) => (
         <li className="col-span-6" key={b.value}>
-          {/* <BasemapItem {...b} /> */}
+          <BasemapItem {...b} />
         </li>
       ))}
     </ul>

client/src/containers/map/settings/basemaps/item/index.tsx

@@ -0,0 +1,59 @@
+import { useCallback } from 'react';
+
+import Image from 'next/image';
+
+import { useAtomValue, useSetAtom } from 'jotai';
+
+import { cn } from '@/lib/classnames';
+
+import { mapSettingsAtom } from '@/store/index';
+
+export interface BasemapItemProps {
+  label: string;
+  value: string;
+  preview: string;
+}
+
+const BasemapItem = ({ label, value, preview }: BasemapItemProps) => {
+  const { basemap } = useAtomValue(mapSettingsAtom);
+  const setMapSettings = useSetAtom(mapSettingsAtom);
+
+  const handleToggleBasemap = useCallback(() => {
+    setMapSettings((prev) => ({
+      ...prev,
+      basemap: value,
+    }));
+  }, [value, setMapSettings]);
+
+  return (
+    <div className="flex w-full items-center justify-between space-x-8">
+      <button className="group grow" type="button" onClick={handleToggleBasemap}>
+        <div className="space-y-2">
+          <div
+            className={cn({
+              'shrink-0 overflow-hidden rounded transition-opacity': true,
+              'group-hover:opacity-75 group-active:outline group-active:outline-2 group-active:outline-slate-400':
+                true,
+              'outline outline-2 outline-slate-500 group-hover:opacity-100 group-active:outline-slate-500':
+                value === basemap,
+            })}
+          >
+            <Image src={preview} alt={label} width={96} height={64} className="w-full rounded" />
+          </div>
+
+          <span
+            className={cn({
+              'block text-sm font-light text-slate-500 transition-colors': true,
+              'group-hover:text-slate-400': true,
+              'group-hover:text-slate-500': value === basemap,
+            })}
+          >
+            {label}
+          </span>
+        </div>
+      </button>
+    </div>
+  );
+};
+
+export default BasemapItem;