Merge pull request #1019 from Vizzuality/fix/style-tweeks

styles fixes
Vizzuality · Jan 12, 2024 · b1ea9bf · b1ea9bf
2 parents e532cbb + 4f91300
commit b1ea9bf
Show file tree

Hide file tree

Showing 21 changed files with 72 additions and 42 deletions.
diff --git a/src/components/contextual/basemaps.tsx b/src/components/contextual/basemaps.tsx
@@ -60,7 +60,12 @@ const BasemapsMapSettings = () => {
             </Checkbox>
           </button>
 
-          <span className="flex-1 cursor-pointer py-1 text-center text-sm font-semibold text-brand-800">
+          <span
+            className={cn({
+              'flex-1 cursor-pointer py-1 text-center text-sm text-black/85': true,
+              'font-semibold text-brand-800': basemapStored === id,
+            })}
+          >
             {name}
           </span>
         </div>

diff --git a/src/components/contextual/contextual-basemaps.tsx b/src/components/contextual/contextual-basemaps.tsx
@@ -42,11 +42,12 @@ const BasemapsMapSettings = () => {
 
   return (
     <div className="relative flex flex-col text-sm text-black/85">
-      <RadioGroup onValueChange={handleClick}>
+      <RadioGroup onValueChange={handleClick} defaultValue={defaultActive}>
         <div className="flex space-x-4">
           <RadioGroupItem
             option={{ value: 'no-layer', label: 'No layer' }}
-            data-testid='"no-layer"'
+            data-testid="no-layer"
+            label={false}
           />
           <label
             className={cn({
@@ -62,7 +63,11 @@ const BasemapsMapSettings = () => {
           return (
             <div key={id} className="space-y-2">
               <div className="flex space-x-4">
-                <RadioGroupItem option={{ value: id, label: name }} data-testid={id} />
+                <RadioGroupItem
+                  option={{ value: id, label: name }}
+                  data-testid={id}
+                  label={false}
+                />
                 <label
                   className={cn({
                     'font-semibold text-brand-800': isActive === id,

diff --git a/src/components/map/controls/basemap-settings/index.tsx b/src/components/map/controls/basemap-settings/index.tsx
@@ -15,7 +15,7 @@ export const BasemapSettings = ({ className }: { className?: string }) => {
       <DialogTrigger>
         <div
           className={cn({
-            'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full  border bg-white shadow-control hover:bg-gray-100 disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
+            'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full bg-white shadow-control backdrop-blur-sm backdrop-filter hover:bg-gray-100 disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
               true,
             [className]: !!className,
           })}
@@ -27,7 +27,7 @@ export const BasemapSettings = ({ className }: { className?: string }) => {
           />
         </div>
       </DialogTrigger>
-      <DialogContent className="scroll-y left-18 top-16 max-h-[90%] min-h-fit rounded-3xl">
+      <DialogContent className="scroll-y left-18 top-16 max-h-[90%] min-h-fit rounded-4xl">
         <div className="no-scrollbar max-h-[85vh] space-y-6 overflow-y-auto">
           <h2 className="font-black/85 text-3xl font-light leading-10">Basemap settings</h2>
           <Helper

diff --git a/src/components/map/controls/constants.ts b/src/components/map/controls/constants.ts
diff --git a/src/components/map/controls/fullscreen/index.tsx b/src/components/map/controls/fullscreen/index.tsx
@@ -37,7 +37,7 @@ export const FullScreen = ({ className }: { className?: string }) => {
   return (
     <div
       className={cn({
-        'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full border bg-white shadow-control disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
+        'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full bg-white shadow-control disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
           true,
         'border-brand-800 bg-brand-800': isFullScreen,
         'hover:bg-gray-100': !isFullScreen,

diff --git a/src/components/map/controls/share/index.tsx b/src/components/map/controls/share/index.tsx
@@ -63,7 +63,7 @@ export const Share = ({ className }: { className?: string }) => {
       <DialogTrigger>
         <div
           className={cn({
-            'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full border bg-white shadow-control hover:bg-gray-100 disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
+            'group inline-flex h-11 w-11 cursor-pointer flex-col items-center justify-center rounded-full bg-white shadow-control hover:bg-gray-100 disabled:cursor-default disabled:bg-gray-50 disabled:outline-none':
               true,
             [className]: !!className,
           })}

diff --git a/src/components/map/controls/zoom/component.tsx b/src/components/map/controls/zoom/component.tsx
@@ -10,7 +10,7 @@ import ZOOM_IN_SVG from 'svgs/map/zoom-in.svg?sprite';
 import ZOOM_OUT_SVG from 'svgs/map/zoom-out.svg?sprite';
 
 const COMMON_CLASSES =
-  'group w-full bg-white p-3 hover:bg-gray-100 active:outline active:outline-2 active:-outline-offset-[5px] active:outline-brand-400/40 disabled:bg-gray-50 disabled:outline-none';
+  'group w-full p-3 hover:bg-gray-100 active:outline active:outline-2 active:-outline-offset-[5px] active:outline-brand-400/40 disabled:bg-gray-50 disabled:outline-none';
 
 const SVG_COMMON_CLASSES = 'h-5 w-5 group-disabled:fill-grey-75';
 
@@ -43,14 +43,13 @@ export const ZoomControl = ({ className, mapId }: { className?: string; mapId: s
   return (
     <div
       className={cn({
-        'inline-flex w-full flex-col rounded-t-full': true,
+        'inline-flex w-full flex-col bg-white ': true,
         [className]: !!className,
       })}
     >
       <button
         className={cn({
           [COMMON_CLASSES]: true,
-          'rounded-t-full': true,
         })}
         aria-label="Zoom in"
         type="button"

diff --git a/src/components/radio-group/radio-group-item/index.tsx b/src/components/radio-group/radio-group-item/index.tsx
@@ -5,7 +5,15 @@ import { CgRadioCheck } from 'react-icons/cg';
 
 import type { RadioOption } from '../types';
 
-const RadioGroupItem = ({ option, className }: { option: RadioOption; className?: string }) => (
+const RadioGroupItem = ({
+  option,
+  className,
+  label = true,
+}: {
+  option: RadioOption;
+  className?: string;
+  label?: boolean;
+}) => (
   <div className="flex items-center space-x-4">
     <RadioGroup.Item
       className={cn({
@@ -20,6 +28,11 @@ const RadioGroupItem = ({ option, className }: { option: RadioOption; className?
         <CgRadioCheck className="h-2.5 w-2.5 text-brand-800" />
       </RadioGroup.Indicator>
     </RadioGroup.Item>
+    {label && (
+      <label className="font-sm m-0 text-sm font-semibold text-brand-800" htmlFor={option.value}>
+        {option.label}
+      </label>
+    )}
   </div>
 );
 

diff --git a/src/containers/datasets/contextual-layers/protected-areas/index.tsx b/src/containers/datasets/contextual-layers/protected-areas/index.tsx
@@ -5,7 +5,21 @@ import ProtectedAreasLegend from './legend';
 const ProtectedAreas = () => {
   return (
     <div className={WIDGET_CARD_WRAPPER_STYLE}>
-      <p>pending layer description</p>
+      <p>
+        Displays areas that are legally protected according to various designations (e.g., national
+        parks, state reserves, and wildlife reserves) and managed to achieve conservation
+        objectives. The World Database on Protected Areas (WDPA) is the most comprehensive global
+        database of marine and terrestrial protected areas. For more info, visit{' '}
+        <a
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://www.protectedplanet.net/en/thematic-areas/wdpa?tab=WDPA"
+          className="font-semibold text-brand-800 underline"
+        >
+          Protected Planet
+        </a>
+        .
+      </p>
       <ProtectedAreasLegend />
     </div>
   );

diff --git a/src/containers/datasets/contextual-layers/protected-areas/legend.tsx b/src/containers/datasets/contextual-layers/protected-areas/legend.tsx
@@ -2,7 +2,7 @@ const ProtectedAreasLegend = () => {
   return (
     <div className="flex">
       <div className="my-0.5 mr-2.5 h-4 w-2 shrink-0 rounded-md border border-[#286ce2] border-opacity-30 bg-[#286ce2] bg-opacity-10 text-sm" />
-      <p className="text-sm font-normal">WDPA</p>
+      <p className="text-sm font-normal">Protected areas</p>
     </div>
   );
 };

diff --git a/src/containers/datasets/flood-protection/widget.tsx b/src/containers/datasets/flood-protection/widget.tsx
@@ -176,7 +176,7 @@ const FloodProtection = ({
           <div className="flex flex-1 flex-col items-center space-y-2">
             <FloodProtectionChart data={data.config} />
           </div>
-          <div className="relative flex flex-1 flex-col font-sans text-sm text-black/85 ">
+          <div className="relative flex flex-1 flex-col font-sans text-sm text-black/85">
             <p className="w-full text-end text-sm">{UNITS_LABELS[data.unit]}</p>
 
             <div

diff --git a/src/containers/datasets/species-distribution/widget.tsx b/src/containers/datasets/species-distribution/widget.tsx
@@ -49,7 +49,7 @@ const SpeciesDistribution = () => {
             <span className="font-bold">{total}</span> species of mangroves distributed by country
             as map shows.
           </p>
-          <div className="relative flex flex-1 flex-col font-sans text-sm text-black/85 ">
+          <div className="relative flex flex-1 flex-col font-sans text-sm text-black/85">
             <p className="w-full text-end opacity-50">total species</p>
 
             <div

diff --git a/src/containers/location-widget/index.tsx b/src/containers/location-widget/index.tsx
@@ -87,8 +87,7 @@ const LocationWidget = () => {
 
   return (
     <>
-      <div className="relative flex h-52 flex-col rounded-2xl border bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-widget print:hidden">
-        <button className="h-10.5 flex w-10.5 cursor-pointer items-center justify-center rounded-full"></button>
+      <div className="relative flex h-52 flex-col rounded-4xl border bg-brand-600 bg-[url('/images/location-bg.svg')] bg-cover bg-center text-center shadow-widget print:hidden">
         <Dialog open={isOpen}>
           <DialogTrigger asChild>
             <button onClick={handleOnClickTitle} disabled={isGuideActive || !locationName}>

diff --git a/src/containers/map/index.tsx b/src/containers/map/index.tsx
@@ -315,7 +315,7 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
   const handleMapLoad = useCallback(() => {
     setLoaded(true);
   }, []);
-
+  const pitch = map?.getPitch();
   return (
     <div
       className="print:page-break-after print:page-break-inside-avoid absolute top-0 left-0 z-0 h-screen w-screen print:relative print:h-[90vh] print:w-screen"
@@ -363,9 +363,9 @@ const MapContainer = ({ mapId }: { mapId: string }) => {
                   <FullScreenControl />
                   <ShareControl />
                   <BasemapSettingsControl />
-                  <div className="border-box flex flex-col rounded-full border shadow-control">
+                  <div className="border-box flex flex-col overflow-hidden rounded-4xl bg-white shadow-control">
                     <ZoomControl mapId={mapId} />
-                    <PitchReset mapId={mapId} />
+                    {pitch !== 0 && <PitchReset mapId={mapId} />}
                   </div>
                 </div>
               </Helper>

diff --git a/src/containers/map/legend/index.tsx b/src/containers/map/legend/index.tsx
@@ -120,12 +120,12 @@ const Legend = ({ embedded = false }: { embedded?: boolean }) => {
           <button
             onClick={openLegend}
             className={cn({
-              'flex h-11 cursor-pointer items-center justify-center space-x-2 rounded-3xl border bg-white py-2 px-5 shadow-control':
+              'flex h-11 cursor-pointer items-center justify-center space-x-2 rounded-4xl bg-white py-2 px-5 shadow-control':
                 true,
               hidden: isOpen,
             })}
           >
-            <p className="opacity-85 whitespace-nowrap text-xs font-bold uppercase text-black">
+            <p className="opacity-85 whitespace-nowrap text-xs font-bold uppercase text-black/85">
               Show legend
             </p>
 

diff --git a/src/containers/map/mobile/legend/index.tsx b/src/containers/map/mobile/legend/index.tsx
@@ -123,12 +123,12 @@ const Legend = () => {
           <button
             onClick={openLegend}
             className={cn({
-              'flex h-11 w-[360px] cursor-pointer items-center justify-between rounded-3xl border bg-white py-2 px-10 shadow-control':
+              'flex h-11 w-[360px] cursor-pointer items-center justify-between rounded-4xl bg-white py-2 px-10 shadow-control':
                 true,
               hidden: isOpen,
             })}
           >
-            <p className="opacity-85 whitespace-nowrap text-xs font-bold uppercase text-black">
+            <p className="opacity-85 whitespace-nowrap text-xs font-bold uppercase text-black/85">
               Show legend
             </p>
 

diff --git a/src/containers/navigation/index.tsx b/src/containers/navigation/index.tsx
@@ -7,7 +7,7 @@ import News from 'containers/navigation/news';
 const HELPER_ID = 'menu-categories';
 
 const AppTools = () => (
-  <div className="absolute top-2 left-4 z-20 h-11 w-[526px] rounded-full bg-brand-800 px-5 shadow-md print:hidden">
+  <div className="fixed top-2 left-4 z-20 h-11 w-[526px] rounded-4xl bg-brand-800 px-5 shadow-md print:hidden">
     <div className="grid grid-cols-4 gap-4">
       <div className="flex items-center justify-center">
         <Menu />

diff --git a/src/containers/widget/index.tsx b/src/containers/widget/index.tsx
@@ -12,7 +12,7 @@ import WidgetControls from 'components/widget-controls';
 import { WidgetSlugType } from 'types/widget';
 
 import Info from './info.mdx';
-import { getWidgetActive } from './selector';
+import { getLayerActive } from './selector';
 
 type ChildrenType = ReactElement & { type?: () => null };
 
@@ -29,7 +29,7 @@ type WidgetLayoutProps = {
 const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
   const { children, title, id, className, applicability, info } = props;
 
-  const isWidgetActive = useRecoilValue(getWidgetActive(id));
+  const isLayerActive = useRecoilValue(getLayerActive(id));
 
   const [widgetsCollapsed, setWidgetsCollapsed] = useRecoilState(widgetsCollapsedAtom);
 
@@ -61,18 +61,19 @@ const WidgetWrapper: FC<WidgetLayoutProps> = (props: WidgetLayoutProps) => {
         variants={widgetVariants}
         animate={widgetsCollapsed[id] ? 'collapsed' : 'expanded'}
         exit="expanded"
-        transition={{ type: 'spring', bounce: 0, duration: 0.8 }}
+        transition={{ type: 'tween', bounce: 0, duration: 0.6 }}
         className={cn({
-          'md:h-fit-content z-2 group w-full rounded-2xl border border-[#DADED0] bg-white px-1 py-1 shadow-widget md:ml-[3%] md:ml-0':
+          'md:h-fit-content z-2 group w-full rounded-4xl border border-[#DADED0] bg-white px-1 py-1 shadow-widget md:ml-[3%] md:ml-0':
             true,
           '!w-[100%] border-none !p-0 !shadow-none': info,
           [className]: !!className,
         })}
       >
         <div
           className={cn({
-            'rounded-2xl border border-transparent px-9 py-3': true,
-            'border-brand-800 transition delay-150 ease-in-out': isWidgetActive,
+            'rounded-3xl border border-transparent px-9 py-3': true,
+            'border-2 border-brand-800 border-opacity-25 transition delay-150 ease-in-out':
+              isLayerActive,
             'border-none p-0': info,
           })}
           data-testid={`widget-${id}`}

diff --git a/src/containers/widgets/index.tsx b/src/containers/widgets/index.tsx
@@ -100,7 +100,7 @@ const WidgetsContainer: React.FC = () => {
                 type="button"
                 data-testid="expand-collapse-button"
                 className={cn({
-                  'h-8 w-[262px] rounded-4xl border bg-white px-4 py-1 font-sans text-sm font-semibold text-brand-800 shadow-md transition-colors md:ml-0':
+                  'h-8 w-[262px] rounded-4xl bg-white px-4 py-1 font-sans text-sm font-semibold text-brand-800 shadow-control transition-colors md:ml-0':
                     true,
                   'bg-white': widgetsCollapsedChecker,
                   'print:hidden': screenWidth >= breakpoints.md,
@@ -126,7 +126,7 @@ const WidgetsContainer: React.FC = () => {
                   type="button"
                   data-testid="configure-widgets-button"
                   className={cn({
-                    'flex h-8 w-[262px] items-center justify-center rounded-4xl border bg-white py-1 px-10 font-sans text-sm font-semibold text-brand-800 shadow-md transition-colors md:ml-0 print:hidden':
+                    'flex h-8 w-[262px] items-center justify-center rounded-4xl bg-white py-1 px-10 font-sans text-sm font-semibold text-brand-800 shadow-control transition-colors md:ml-0 print:hidden':
                       true,
                   })}
                 >

diff --git a/src/svgs/map/basemap-settings.svg b/src/svgs/map/basemap-settings.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -66,7 +66,7 @@ module.exports = {
         soft: '0px 2px 5px 0px rgba(7, 127, 172, 0.43)',
         medium: '0px 4px 12px 0px rgba(168, 168, 168, 0.25)',
         '3xl': '0px 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 12px rgba(0, 0, 0, 0.08)',
-        control: '0px 4px 12px 0px rgba(0, 0, 0, 0.08), 0px 0px 0px 1px rgba(0, 0, 0, 0.10)',
+        control: '0px 4px 12px 0px rgba(0, 0, 0, 0.08)',
         dropdown: '0px 40px 80px 0px rgba(0, 60, 57, 0.15), 0px 0px 0px 1px rgba(0, 0, 0, 0.10)',
       },
       width: {