refactor(client): Separate dataset toggle from other icons

Vizzuality · Nov 20, 2024 · c94dc0b · c94dc0b
1 parent 3797546
commit c94dc0b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -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}