Merge pull request #1045 from Vizzuality/GMW-749-design-refinements

[FE](styles): refinement [GMW-749]

src/components/contextual/basemaps.tsx

@@ -23,9 +23,9 @@ const BasemapsMapSettings = () => {
   };
 
   return (
-    <div className="flex items-center space-x-4 py-1">
+    <div className="flex w-full space-x-4 pr-4">
       {BASEMAPS.map(({ id, name }) => (
-        <div key={id} className="relative flex w-full flex-1 flex-col space-y-0.5">
+        <div key={id} className="relative flex w-1/3 flex-col space-y-0.5">
           <button
             id={id}
             type="button"

src/components/dialog/index.tsx

@@ -34,19 +34,26 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & { overlay?: boolean }
->(({ className, children, overlay = true, ...props }, ref) => (
+>(({ className, children, overlay = false, ...props }, ref) => (
   <DialogPortal>
     {overlay && <DialogOverlay />}
     <DialogPrimitive.Content
       ref={ref}
-      className={cn({
-        'left-1/12 fixed grid gap-4 bg-white p-6 animate-in duration-300 md:top-[5%] md:left-18 md:max-h-[85vh] md:min-h-[100px] md:w-10/12 md:w-full md:max-w-[540px] md:data-[state=open]:fade-in-60 md:data-[state=close]:slide-in-from-left-0 md:data-[state=open]:slide-in-from-left-96':
-          true,
-        [className]: !!className,
-      })}
+      className="fixed w-full animate-in duration-300 md:left-0 md:w-auto md:py-[100%] md:pl-14 md:data-[state=open]:fade-in-60 md:data-[state=close]:slide-in-from-left-0 md:data-[state=open]:slide-in-from-left-96"
+      style={{
+        background: 'linear-gradient(90deg, #003C391A 0%, rgba(0, 60, 57, 0.00) 100%)',
+      }}
       {...props}
     >
-      {children}
+      <div
+        className={cn({
+          'relative flex shrink-0 flex-col bg-white p-8 shadow-widget md:max-h-[85vh] md:min-h-[100px] md:w-full md:max-w-[540px] md:rounded-3xl':
+            true,
+          [className]: !!className,
+        })}
+      >
+        {children}
+      </div>
     </DialogPrimitive.Content>
   </DialogPortal>
 ));
@@ -73,15 +80,14 @@ const DialogClose = ({
     <button
       type="button"
       className={cn({
-        'absolute right-3 -top-2 z-40 flex h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 md:right-6 md:top-7 md:-right-10 md:border md:bg-white md:bg-opacity-70':
+        'absolute right-3 -top-2 flex h-11 w-10 cursor-pointer items-center justify-end rounded-r-[20px] focus:outline-none focus:ring-1 focus:ring-slate-400 focus:ring-offset-1 md:right-6 md:top-8 md:-right-10 md:-z-10 md:bg-white/70 md:shadow-widget md:backdrop-blur-sm ':
           true,
         [className]: !!className,
       })}
       onClick={onClose}
       aria-label="close dialog"
     >
-      <Icon icon={CLOSE_SVG} className="mr-2.5 h-7 w-7 md:h-5 md:w-5" description="Cross" />
-      <span className="sr-only">Close</span>
+      <Icon icon={CLOSE_SVG} className="mr-2.5 h-7 w-7 md:h-6 md:w-6" description="Cross" />
     </button>
   </DialogPrimitive.Close>
 );

src/components/map/controls/basemap-settings/index.tsx

@@ -27,8 +27,8 @@ export const BasemapSettings = ({ className }: { className?: string }) => {
           />
         </div>
       </DialogTrigger>
-      <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">
+      <DialogContent>
+        <div className="no-scrollbar space-y-6">
           <h2 className="font-black/85 text-3xl font-light leading-10">Basemap settings</h2>
           <Helper
             className={{
@@ -39,7 +39,7 @@ export const BasemapSettings = ({ className }: { className?: string }) => {
             tooltipPosition={{ top: -140, left: 0 }}
             message="use these buttons to switch between basemaps"
           >
-            <div className="w-[490px]">
+            <div className="flex w-[490px] flex-col space-y-2">
               <p className="text-xs font-bold uppercase tracking-[1px]">map style</p>
               <Basemaps />
             </div>

src/components/map/controls/share/index.tsx

@@ -75,7 +75,7 @@ export const Share = ({ className }: { className?: string }) => {
           />
         </div>
       </DialogTrigger>
-      <DialogContent className="top-[35%] rounded-3xl py-10 px-7 text-black/85">
+      <DialogContent className="text-black/85">
         <h3 className="mb-2 text-3xl font-light">Share</h3>
         <div className="flex w-[480px] flex-col space-y-5">
           <div className="flex flex-col space-y-1">

src/components/map/legend/sortable/list.tsx

@@ -9,8 +9,6 @@ import {
   useState,
 } from 'react';
 
-import { fullScreenAtom } from 'store/map-settings';
-
 import {
   DndContext,
   DragOverlay,
@@ -27,7 +25,6 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import { useRecoilValue } from 'recoil';
 
 import { SortableListProps } from 'components/map/legend/types';
 
@@ -39,14 +36,13 @@ export const SortableList: React.FC<SortableListProps> = ({
   onChangeOrder,
 }: SortableListProps) => {
   const uid = useId();
-  const [activeId, setActiveId] = useState(null);
-  const isFullScreen = useRecoilValue(fullScreenAtom);
+  const [activeId, setActiveId] = useState<string>(null);
 
   const ActiveItem = useMemo(() => {
     const activeChildArray = Children.map(children, (Child) => {
       if (isValidElement(Child)) {
-        const { props } = Child;
-        const { id } = props;
+        const { props } = Child as ReactElement<unknown>;
+        const { id } = props as { id: string };
 
         if (id === activeId) {
           return Child;
@@ -62,8 +58,8 @@ export const SortableList: React.FC<SortableListProps> = ({
   const itemsIds = useMemo(() => {
     return Children.map(children, (Child) => {
       if (isValidElement(Child)) {
-        const { props } = Child;
-        const { id } = props;
+        const { props } = Child as ReactElement<unknown>;
+        const { id } = props as { id: string };
         return id;
       }
 
@@ -84,14 +80,14 @@ export const SortableList: React.FC<SortableListProps> = ({
   );
 
   const handleDragStart = useCallback((event) => {
-    const { active } = event;
+    const { active } = event as { active: { id: string } };
     if (!active) return;
     setActiveId(active.id);
   }, []);
 
   const handleDragEnd = useCallback(
     (event) => {
-      const { active, over } = event;
+      const { active, over } = event as { active: { id: string }; over: { id: string } };
       setActiveId(null);
 
       if (active.id !== over?.id) {
@@ -114,15 +110,11 @@ export const SortableList: React.FC<SortableListProps> = ({
       onDragEnd={handleDragEnd}
       onDragCancel={() => setActiveId(null)}
     >
-      <SortableContext
-        items={itemsIds}
-        strategy={verticalListSortingStrategy}
-        disabled={isFullScreen}
-      >
+      <SortableContext items={itemsIds} strategy={verticalListSortingStrategy}>
         {Children.map(children, (Child) => {
           if (isValidElement(Child)) {
-            const { props } = Child;
-            const { id } = props;
+            const { props } = Child as ReactElement<unknown>;
+            const { id } = props as { id: string };
 
             return (
               <SortableItem id={id} sortable={sortable}>

src/components/popover/index.tsx

@@ -18,7 +18,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn({
-        'text-popover-foreground w-fit-content z-50 space-y-2 overflow-y-auto rounded-3xl border bg-white p-4 text-sm text-black/85 shadow-soft outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2':
+        'text-popover-foreground w-fit-content z-50 space-y-2 overflow-y-auto rounded-3xl bg-white p-4 text-sm text-black/85 outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2':
           true,
         [className]: !!className,
       })}

src/components/select-multi/index.tsx

@@ -132,22 +132,6 @@ export const Select: FC<MultiSelectProps> = (props: MultiSelectProps) => {
                   })}
                   description="Arrow"
                 />
-                {/* <span className="pointer-events-none relative flex items-center space-x-2">
-                  <Loading
-                    visible={loading}
-                    className={THEME[theme].loading}
-                    iconClassName="w-3 h-3 shrink-0"
-                  />
-
-                  {} */}
-
-                {/* <Icon
-                    icon={open ? CHEVRON_UP_SVG : CHEVRON_DOWN_SVG}
-                    className={cn({
-                      'h-3 w-3 shrink-0': true,
-                    })}
-                  /> */}
-                {/* </span> */}
               </Listbox.Button>
 
               <Listbox.Options

src/components/select-multi/option/index.tsx

@@ -1,7 +1,12 @@
+import cn from 'lib/classnames';
+
 import { Listbox } from '@headlessui/react';
 import cx from 'classnames';
 
-import { Checkbox } from 'components/checkbox';
+import { Checkbox, CheckboxIndicator } from 'components/checkbox';
+import Icon from 'components/icon';
+
+import CHECK_SVG from 'svgs/ui/check-light.svg?sprite';
 
 import THEME from '../constants/theme';
 
@@ -37,7 +42,15 @@ export const Option = ({ opt, theme }: OptionProps) => {
             [THEME[theme].item.disabled]: d,
           })}
         >
-          <Checkbox className="cursor-pointer" checked={s} />
+          <Checkbox className="h-4 w-4 cursor-pointer" checked={s}>
+            <CheckboxIndicator>
+              <Icon
+                icon={CHECK_SVG}
+                className="h-2.5 w-2.5 fill-brand-800/70"
+                description="Checkmark"
+              />
+            </CheckboxIndicator>
+          </Checkbox>
 
           <span
             className={cx({

src/components/widget-controls/download/index.tsx

@@ -25,8 +25,8 @@ const Download = ({ id, content }) => {
         <DialogTrigger>
           <Icon icon={DOWNLOAD_SVG} className="h-7.5 w-7.5 text-brand-800" description="Download" />
         </DialogTrigger>
-        <DialogContent className="scroll-y top-0 left-0 min-h-screen w-screen md:left-18 md:top-16 md:max-h-[90%] md:min-h-fit md:rounded-3xl">
-          <div className="no-scrollbar overflow-y-auto">
+        <DialogContent>
+          <div className="no-scrollbar w-[480px] overflow-y-auto">
             {id && <DownloadInfo />}
             {content && !id && (
               <div className="flex p-4">

src/components/widget-controls/info/index.tsx

@@ -15,7 +15,7 @@ const Info = ({ id, content }) => {
         <DialogTrigger>
           <Icon icon={INFO_SVG} className="h-7.5 w-7.5 text-brand-800" description="Info" />
         </DialogTrigger>
-        <DialogContent className="scroll-y h-screen pt-12 md:mt-10 md:h-[90%] md:rounded-3xl md:pt-6">
+        <DialogContent>
           <div className="no-scrollbar overflow-y-auto">
             {/* Supports external content or look by id for static info about widgets */}
             {id && <Info />}

src/containers/alert/index.tsx

@@ -91,20 +91,17 @@ const AnalysisAlert = () => {
     <>
       <Dialog open={isAnalysisAlertOpen}>
         <DialogPortal className="z-50">
-          <DialogContent
-            className="space-y-5 rounded-3xl p-10 md:left-auto"
-            onEscapeKeyDown={() => setAnalysisAlert(false)}
-          >
-            <div className="space-y-5">
-              <div className="flex justify-end">
-                <button
-                  type="button"
-                  onClick={() => setAnalysisAlert(false)}
-                  aria-label="Reset analysis"
-                >
-                  <Icon icon={CLOSE_SVG} className="h-8 w-8" description="Close" />
-                </button>
-              </div>
+          <DialogContent onEscapeKeyDown={() => setAnalysisAlert(false)} overlay>
+            <div className="flex justify-end">
+              <button
+                type="button"
+                onClick={() => setAnalysisAlert(false)}
+                aria-label="Reset analysis"
+              >
+                <Icon icon={CLOSE_SVG} className="absolute right-8 h-8 w-8" description="Close" />
+              </button>
+            </div>
+            <div className="flex flex-col space-y-5">
               <h3 className="text-3xl">Reset the page and delete area</h3>
               <div className="space-y-2">
                 <p>
@@ -117,24 +114,25 @@ const AnalysisAlert = () => {
                   <label htmlFor="modal">Don&apos;t ask me again.</label>
                 </div>
               </div>
-            </div>
-            <div className="flex items-center justify-center space-x-5">
-              <button
-                aria-label="Cancel reset page"
-                type="button"
-                onClick={handleCancelResetPage}
-                className="rounded-2xl border-2 border-brand-800/20 px-6 py-[1px] text-sm text-brand-800"
-              >
-                Cancel
-              </button>
-              <button
-                aria-label="Reset page"
-                type="button"
-                onClick={handleResetPage}
-                className="rounded-2xl bg-brand-800 px-6 py-[2px] text-sm text-white"
-              >
-                Reset page
-              </button>
+
+              <div className="flex items-center justify-center space-x-5">
+                <button
+                  aria-label="Cancel reset page"
+                  type="button"
+                  onClick={handleCancelResetPage}
+                  className="rounded-2xl border-2 border-brand-800/20 px-6 py-[1px] text-sm text-brand-800"
+                >
+                  Cancel
+                </button>
+                <button
+                  aria-label="Reset page"
+                  type="button"
+                  onClick={handleResetPage}
+                  className="rounded-2xl bg-brand-800 px-6 py-[2px] text-sm text-white"
+                >
+                  Reset page
+                </button>
+              </div>
             </div>
           </DialogContent>
         </DialogPortal>

src/containers/datasets/alerts/widget.tsx

@@ -73,7 +73,7 @@ const AlertsWidget = () => {
                 </span>
               </PopoverTrigger>
 
-              <PopoverContent className="rounded-2xl px-2 shadow-dropdown">
+              <PopoverContent className="rounded-2xl px-2 shadow-border">
                 <ul className="z-20 max-h-56 space-y-0.5">
                   {startDateOptions?.map((date) => (
                     <li key={date?.label} className="last-of-type:pb-4">
@@ -108,7 +108,7 @@ const AlertsWidget = () => {
                 </span>
               </PopoverTrigger>
 
-              <PopoverContent className="rounded-2xl px-2 shadow-dropdown">
+              <PopoverContent className="rounded-2xl px-2 shadow-border">
                 <ul className="z-20 max-h-56 space-y-0.5">
                   {endDateOptions?.map((date) => (
                     <li key={date?.label} className="last-of-type:pb-4">
@@ -155,7 +155,13 @@ const AlertsWidget = () => {
           There are <span className="font-bold"> 535</span> areas monitored in the world.
         </p>
         <div className="flex space-x-2">
-          <div className="text-brand-900 h-4 w-4 border-2 border-brand-800" />
+          <div className="flex">
+            <div className="flex flex-col">
+              <div className="text-brand-900 h-2 w-2 border-2 border-brand-800" />
+              <div className="text-brand-900 h-2 w-2 border-2 border-brand-800" />
+            </div>
+            <div className="text-brand-900 h-2 w-2 border-2 border-brand-800" />
+          </div>
           <p className="text-sm font-normal">Monitored area</p>
         </div>
       </div>

src/containers/datasets/drawing-tool/index.tsx

@@ -73,7 +73,7 @@ const WidgetDrawingTool = () => {
   return (
     <Helper
       className={{
-        button: '-bottom-3.5 right-2.5 z-[20]',
+        button: 'top-1 right-9 z-[20]',
         tooltip: 'w-fit-content max-w-[400px]',
       }}
       tooltipPosition={{ top: -65, left: 0 }}

src/containers/datasets/drawing-upload-tool/index.tsx

@@ -70,7 +70,7 @@ const WidgetDrawingUploadTool = () => {
   return (
     <Helper
       className={{
-        button: '-bottom-2.5 -right-0',
+        button: 'top-1 right-9',
         tooltip: 'w-fit-content',
         active: 'max-w-[454px]',
       }}

src/containers/datasets/flood-protection/index.tsx

@@ -12,9 +12,7 @@ import FloodProtection from './widget';
 
 const MangrovesFloodProtection = () => {
   const [areaPeriod, setAreaPeriod] = useRecoilState(floodAreaPeriodAtom);
-
   const [populationPeriod, setPopulationPeriod] = useRecoilState(floodPopulationPeriodAtom);
-
   const [stockPeriod, setStockPeriod] = useRecoilState(floodStockPeriodAtom);
   // check data for each indicator
   const selectedAreaPeriod = areaPeriod;