minor styling

Vizzuality · Sep 25, 2023 · 5fddb18 · 5fddb18
1 parent 7f4846a
commit 5fddb18
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 31 deletions.
diff --git a/app/components/map/legend/index.tsx b/app/components/map/legend/index.tsx
@@ -36,7 +36,7 @@ export const Legend = ({
     >
       {open && (
         <ScrollArea className="relative flex w-full flex-col rounded-3xl bg-black px-2 py-2 before:pointer-events-none before:absolute before:left-0 before:top-0 before:z-10 before:h-6 before:w-full before:bg-gradient-to-b before:from-black before:via-black after:pointer-events-none after:absolute after:bottom-0 after:left-0 after:z-10 after:h-6 after:w-full after:bg-gradient-to-t after:from-black after:via-black">
-          <div className="divide-y divide-gray-600 divide-opacity-50 py-2">
+          <div className="divide-y divide-dashed divide-gray-700 py-2">
             {!!sortable && (
               <SortableList sortable={sortable} onChangeOrder={onChangeOrder}>
                 {children}

diff --git a/app/layout/projects/show/map/index.tsx b/app/layout/projects/show/map/index.tsx
@@ -584,24 +584,26 @@ export const ProjectMap = (): JSX.Element => {
                     defaultOpen
                     disabled={!c.layers?.length && !c.subgroups?.[0]?.layers?.length}
                   >
-                    {c.layers?.map((layer) => {
-                      if (layer) {
-                        return (
-                          <LegendItem
-                            key={layer.id}
-                            onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
-                            settings={layerSettings[layer.id]}
-                            {...layer}
-                          >
-                            {renderLegendItems(layer)}
-                          </LegendItem>
-                        );
-                      }
-                    })}
+                    <div className="divide-y divide-dashed divide-gray-700">
+                      {c.layers?.map((layer) => {
+                        if (layer) {
+                          return (
+                            <LegendItem
+                              key={layer.id}
+                              onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
+                              settings={layerSettings[layer.id]}
+                              {...layer}
+                            >
+                              {renderLegendItems(layer)}
+                            </LegendItem>
+                          );
+                        }
+                      })}
+                    </div>
                     {c.subgroups?.map((subgroup) => {
                       return (
                         <LegendGroup key={subgroup.name} title={subgroup.name} className="pl-5">
-                          <div className="divide-y divide-dashed divide-gray-400">
+                          <div className="divide-y divide-dashed divide-gray-700">
                             {subgroup.layers?.map((layer) => {
                               if (layer) {
                                 return (
@@ -611,6 +613,7 @@ export const ProjectMap = (): JSX.Element => {
                                       onChangeOpacity(opacity, layer.id)
                                     }
                                     settings={layerSettings[layer.id]}
+                                    className="pl-[2px]"
                                     {...layer}
                                   >
                                     {renderLegendItems(layer)}

diff --git a/app/layout/scenarios/edit/map/component.tsx b/app/layout/scenarios/edit/map/component.tsx
@@ -651,31 +651,34 @@ export const ScenariosEditMap = (): JSX.Element => {
                 defaultOpen
                 disabled={!c.layers?.length && !c.subgroups?.[0]?.layers?.length}
               >
-                {c.layers?.map((layer) => {
-                  if (layer) {
-                    return (
-                      <LegendItem
-                        key={layer.id}
-                        onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
-                        settings={layerSettings[layer.id]}
-                        {...layer}
-                      >
-                        {renderLegendItems(layer)}
-                      </LegendItem>
-                    );
-                  }
-                })}
+                <div className="divide-y divide-dashed divide-gray-700">
+                  {c.layers?.map((layer) => {
+                    if (layer) {
+                      return (
+                        <LegendItem
+                          key={layer.id}
+                          onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
+                          settings={layerSettings[layer.id]}
+                          {...layer}
+                        >
+                          {renderLegendItems(layer)}
+                        </LegendItem>
+                      );
+                    }
+                  })}
+                </div>
                 {c.subgroups?.map((subgroup) => {
                   return (
                     <LegendGroup key={subgroup.name} title={subgroup.name} className="pl-5">
-                      <div className="divide-y divide-dashed divide-gray-400">
+                      <div className="divide-y divide-dashed divide-gray-700">
                         {subgroup.layers?.map((layer) => {
                           if (layer) {
                             return (
                               <LegendItem
                                 key={layer.id}
                                 onChangeOpacity={(opacity) => onChangeOpacity(opacity, layer.id)}
                                 settings={layerSettings[layer.id]}
+                                className="pl-[2px]"
                                 {...layer}
                               >
                                 {renderLegendItems(layer as any)}