Reverse chevron orientations for layers and legend in the map

Vizzuality · Feb 27, 2024 · a98d262 · a98d262
1 parent 1fca13d
commit a98d262
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/layers-list/index.tsx
@@ -83,8 +83,10 @@ const LayersDropdown = (): JSX.Element => {
       <Collapsible defaultOpen={Boolean(activeLayers.length)}>
         <CollapsibleTrigger className={COLLAPSIBLE_TRIGGER_CLASSES}>
           <span>Data Layers</span>
-          <LuChevronDown className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
-          <LuChevronUp className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`} />
+          <LuChevronDown
+            className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`}
+          />
+          <LuChevronUp className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
         </CollapsibleTrigger>
         <CollapsibleContent className="border-b border-dashed border-black/20">
           <ul className="my-3 flex flex-col space-y-5">
@@ -121,8 +123,10 @@ const LayersDropdown = (): JSX.Element => {
           className={`${COLLAPSIBLE_TRIGGER_CLASSES} pb-0 data-[state=open]:pb-2`}
         >
           <span>basemap Layers</span>
-          <LuChevronDown className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
-          <LuChevronUp className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`} />
+          <LuChevronDown
+            className={`hidden group-data-[state=closed]:block ${TABS_ICONS_CLASSES}`}
+          />
+          <LuChevronUp className={`hidden group-data-[state=open]:block ${TABS_ICONS_CLASSES}`} />
         </CollapsibleTrigger>
         <CollapsibleContent>
           <ul className="my-3 flex flex-col space-y-5 overflow-y-hidden">

diff --git a/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx b/frontend/src/containers/map/content/map/layers-toolbox/legend/index.tsx
@@ -179,7 +179,7 @@ const Legend: FC = () => {
                   <TooltipProvider>
                     <Tooltip>
                       <TooltipTrigger asChild>
-                        <AccordionTrigger className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 [&_svg]:aria-[expanded=false]:rotate-180">
+                        <AccordionTrigger className="overflow-hidden text-ellipsis whitespace-nowrap text-xs font-bold ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2 [&_svg]:aria-[expanded=true]:rotate-180">
                           <ChevronDown className="mr-2 inline-block h-4 w-4" aria-hidden />
                           {title}
                         </AccordionTrigger>