From f4b5a4ebb9e0b6c302c7890a81ae603c41e71ffc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 6 Nov 2024 17:14:35 +0100
Subject: [PATCH] refactor(client): Reorganise the map controls

SS-100
---
 .../map/controls/contextual-layers.tsx        |  6 ++---
 client/src/components/map/controls/index.tsx  | 23 ++++---------------
 .../components/map/controls/map-settings.tsx  |  2 +-
 client/src/components/ui/popover.tsx          |  2 +-
 4 files changed, 10 insertions(+), 23 deletions(-)

diff --git a/client/src/components/map/controls/contextual-layers.tsx b/client/src/components/map/controls/contextual-layers.tsx
index 0f5f9a5..97417fa 100644
--- a/client/src/components/map/controls/contextual-layers.tsx
+++ b/client/src/components/map/controls/contextual-layers.tsx
@@ -7,9 +7,9 @@ const ContextualLayersControls = () => {
   return (
     <Sheet>
       <SheetTrigger asChild>
-        <Button type="button" variant="yellow" className="w-8 font-sans xl:w-auto">
-          <LayersIcon aria-hidden className="xl:!size-5" />
-          <span className="sr-only xl:not-sr-only">Contextual layers</span>
+        <Button type="button" variant="yellow" size="icon">
+          <span className="sr-only">Contextual layers</span>
+          <LayersIcon aria-hidden />
         </Button>
       </SheetTrigger>
       <SheetContent
diff --git a/client/src/components/map/controls/index.tsx b/client/src/components/map/controls/index.tsx
index b9c9228..5ed2478 100644
--- a/client/src/components/map/controls/index.tsx
+++ b/client/src/components/map/controls/index.tsx
@@ -1,31 +1,18 @@
-import useMapLayers from "@/hooks/use-map-layers";
-import { cn } from "@/lib/utils";
-
 import ContextualLayersControls from "./contextual-layers";
 import LegendControls from "./legend";
 import MapSettingsControls from "./map-settings";
 import ZoomControls from "./zoom";
 
 const Controls = () => {
-  const [layers] = useMapLayers();
-
   return (
     <>
-      <div
-        className={cn({
-          "absolute right-5 z-10 leading-none xl:bottom-auto xl:right-10 xl:top-6": true,
-          "bottom-[120px]": layers.length > 0,
-          "bottom-[80px]": layers.length === 0,
-        })}
-      >
+      <div className="absolute right-5 top-5 z-10 flex flex-col gap-2 xl:right-10 xl:top-6">
         <ContextualLayersControls />
-      </div>
-      <div className="absolute bottom-10 right-5 z-10 flex flex-col items-end gap-2 xl:bottom-6 xl:right-10">
         <ZoomControls />
-        <div className="flex flex-col gap-2 xl:flex-row-reverse xl:gap-6">
-          <MapSettingsControls />
-          <LegendControls />
-        </div>
+        <MapSettingsControls />
+      </div>
+      <div className="absolute bottom-10 right-5 z-10 xl:bottom-6 xl:right-10">
+        <LegendControls />
       </div>
     </>
   );
diff --git a/client/src/components/map/controls/map-settings.tsx b/client/src/components/map/controls/map-settings.tsx
index e7fcaaa..8b22151 100644
--- a/client/src/components/map/controls/map-settings.tsx
+++ b/client/src/components/map/controls/map-settings.tsx
@@ -12,7 +12,7 @@ const MapSettingsControls = () => {
           <GlobeIcon aria-hidden />
         </Button>
       </PopoverTrigger>
-      <PopoverContent side="left" align="end" className="w-[250px]">
+      <PopoverContent side="left" align="start" className="w-[250px]">
         <MapSettingsPanel />
       </PopoverContent>
     </Popover>
diff --git a/client/src/components/ui/popover.tsx b/client/src/components/ui/popover.tsx
index 93d7f0f..666e41d 100644
--- a/client/src/components/ui/popover.tsx
+++ b/client/src/components/ui/popover.tsx
@@ -29,7 +29,7 @@ const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> &
     VariantProps<typeof popoverContentVariants>
->(({ variant, className, align = "center", sideOffset = 24, ...props }, ref) => (
+>(({ variant, className, align = "center", sideOffset = 16, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}