From c94dc0b62e2658f5ef56e25ff867d6fe4f20753c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20Prod=27homme?= <contact@clementprodhomme.fr>
Date: Wed, 20 Nov 2024 14:49:43 +0100
Subject: [PATCH] refactor(client): Separate dataset toggle from other icons

---
 client/src/components/dataset-card/index.tsx            | 5 ++++-
 client/src/components/panels/contextual-layers/item.tsx | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/client/src/components/dataset-card/index.tsx b/client/src/components/dataset-card/index.tsx
index 88fcd91..f811411 100644
--- a/client/src/components/dataset-card/index.tsx
+++ b/client/src/components/dataset-card/index.tsx
@@ -224,7 +224,7 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
         <Label htmlFor={`dataset-${id}-toggle`} className="text-[20px]">
           {name}
         </Label>
-        <div className="flex items-center gap-0.5 pt-1">
+        <div className="flex items-center gap-1 pt-1.5">
           {!!selectedLayer?.attributes!.download_link && (
             <TooltipProvider>
               <Tooltip>
@@ -270,6 +270,9 @@ const DatasetCard = ({ id, name, defaultLayerId, layers, metadata }: DatasetCard
               </DialogContent>
             </Dialog>
           )}
+          {(!!selectedLayer?.attributes!.download_link || !!metadata) && (
+            <div className="mx-0.5 h-5 w-px bg-casper-blue-400" />
+          )}
           <Switch
             id={`dataset-${id}-toggle`}
             checked={isDatasetActive}
diff --git a/client/src/components/panels/contextual-layers/item.tsx b/client/src/components/panels/contextual-layers/item.tsx
index 53b4fc3..d7ed59c 100644
--- a/client/src/components/panels/contextual-layers/item.tsx
+++ b/client/src/components/panels/contextual-layers/item.tsx
@@ -34,7 +34,7 @@ const Item = ({ name, layers }: ItemProps) => {
             <Label htmlFor={`${layer.id}-toggle`} className="text-xl">
               {layer.name}
             </Label>
-            <div className="flex items-center gap-0.5 pt-1">
+            <div className="flex items-center gap-1 pt-1.5">
               {!!layer.downloadLink && (
                 <TooltipProvider>
                   <Tooltip>
@@ -80,6 +80,9 @@ const Item = ({ name, layers }: ItemProps) => {
                   </DialogContent>
                 </Dialog>
               )}
+              {(!!layer.downloadLink || !!layer.metadata) && (
+                <div className="mx-0.5 h-5 w-px bg-casper-blue-400" />
+              )}
               <Switch
                 id={`${layer.id}-toggle`}
                 checked={layersConfiguration.findIndex(({ id }) => id === layer.id) !== -1}