Merge pull request #1129 from Vizzuality/GMW-ui-fixes

[FE](styles): UI fixes
Vizzuality · May 31, 2024 · 55d8812 · 55d8812
2 parents d84cae5 + 4dc2b54
commit 55d8812
Show file tree

Hide file tree

Showing 13 changed files with 161 additions and 129 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-18.12
+18.17
diff --git a/src/components/download-links/index.tsx b/src/components/download-links/index.tsx
@@ -39,7 +39,7 @@ const Download = ({ info }) => {
                   href={href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  className="text-brand-800 underline"
+                  className="text-brand-800 underline hover:no-underline"
                 >
                   DOWNLOAD
                 </a>

diff --git a/src/components/map/controls/basemap-settings/index.tsx b/src/components/map/controls/basemap-settings/index.tsx
@@ -6,61 +6,69 @@ import Basemaps from 'components/contextual/basemaps';
 import BasemapsContextualMapSettings from 'components/contextual/contextual-basemaps';
 import { Dialog, DialogClose, DialogContent, DialogTrigger } from 'components/ui/dialog';
 import Icon from 'components/ui/icon';
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip';
 
 import BASEMAP_SETTINGS_SVG from 'svgs/map/basemap-settings.svg?sprite';
 
 export const BasemapSettings = ({ className }: { className?: string }) => {
   return (
-    <Dialog>
-      <DialogTrigger>
-        <div
-          className={cn({
-            'group inline-flex h-12 w-12 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,
-          })}
-        >
-          <Icon
-            icon={BASEMAP_SETTINGS_SVG}
-            className="h-4 w-4 bg-white group-hover:bg-gray-100 group-disabled:fill-grey-75"
-            description="Basemap settings"
-          />
-        </div>
-      </DialogTrigger>
-      <DialogContent className="top-52">
-        <div className="no-scrollbar space-y-6">
-          <h2 className="font-black/85 text-3xl font-light leading-10">Basemap settings</h2>
-          <Helper
-            className={{
-              button: 'top-4 left-[308px] z-[20]',
-              tooltip: 'w-fit-content',
-              container: 'space-y-2',
-            }}
-            tooltipPosition={{ top: -140, left: 0 }}
-            message="use these buttons to switch between basemaps"
-          >
-            <div className="flex w-[490px] flex-col space-y-2">
-              <p className="text-xs font-bold uppercase tracking-[1px]">map style</p>
-              <Basemaps />
+    <Tooltip>
+      <TooltipTrigger>
+        <Dialog>
+          <DialogTrigger>
+            <div
+              className={cn({
+                'group inline-flex h-12 w-12 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,
+              })}
+            >
+              <Icon
+                icon={BASEMAP_SETTINGS_SVG}
+                className="h-4 w-4 bg-white group-hover:bg-gray-100 group-disabled:fill-grey-75"
+                description="Basemap settings"
+              />
             </div>
-          </Helper>
-          <Helper
-            className={{
-              button: '-top-2 left-32 z-[20]',
-              tooltip: 'w-fit-content',
-              container: 'space-y-2',
-            }}
-            tooltipPosition={{ top: -80, left: 0 }}
-            message="Chose between different planet imagery layers and dates"
-          >
-            <p className="text-xs font-semibold uppercase tracking-[1px]">planet imagery</p>
+          </DialogTrigger>
+          <DialogContent className="top-52">
+            <div className="no-scrollbar space-y-6">
+              <h2 className="font-black/85 text-3xl font-light leading-10">Basemap settings</h2>
+              <Helper
+                className={{
+                  button: 'top-4 left-[308px] z-[20]',
+                  tooltip: 'w-fit-content',
+                  container: 'space-y-2',
+                }}
+                tooltipPosition={{ top: -140, left: 0 }}
+                message="use these buttons to switch between basemaps"
+              >
+                <div className="flex w-[490px] flex-col space-y-2">
+                  <p className="text-xs font-bold uppercase tracking-[1px]">map style</p>
+                  <Basemaps />
+                </div>
+              </Helper>
+              <Helper
+                className={{
+                  button: '-top-2 left-32 z-[20]',
+                  tooltip: 'w-fit-content',
+                  container: 'space-y-2',
+                }}
+                tooltipPosition={{ top: -80, left: 0 }}
+                message="Chose between different planet imagery layers and dates"
+              >
+                <p className="text-xs font-semibold uppercase tracking-[1px]">planet imagery</p>
 
-            <BasemapsContextualMapSettings />
-          </Helper>
-        </div>
-        <DialogClose />
-      </DialogContent>
-    </Dialog>
+                <BasemapsContextualMapSettings />
+              </Helper>
+            </div>
+            <DialogClose />
+          </DialogContent>
+        </Dialog>
+      </TooltipTrigger>
+      <TooltipContent side="left" align="start" className="bg-gray-600 px-2 text-white">
+        Basemap settings
+      </TooltipContent>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/map/controls/fullscreen/index.tsx b/src/components/map/controls/fullscreen/index.tsx
@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 
 import cn from 'lib/classnames';
+import { Tooltip, TooltipContent, TooltipTrigger } from 'components/ui/tooltip';
 
 import { fullScreenAtom } from 'store/map-settings';
 
@@ -19,26 +20,32 @@ export const FullScreen = ({ className }: { className?: string }) => {
   }, [setFullScreen, isFullScreen]);
 
   return (
-    <div
-      className={cn({
-        'group inline-flex h-12 w-12 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,
-        [className]: !!className,
-      })}
-      onClick={toggleFullScreen}
-    >
-      <Icon
-        icon={isFullScreen ? DISABLE_FULLSCREEN_SVG : ENABLE_FULLSCREEN_SVG}
-        className={cn({
-          'h-4 w-4 bg-white group-disabled:fill-grey-75': true,
-          'bg-brand-800': isFullScreen,
-          'group-hover:bg-gray-100': !isFullScreen,
-        })}
-        description="Fullscreen"
-      />
-    </div>
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <div
+          className={cn({
+            'group inline-flex h-12 w-12 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,
+            [className]: !!className,
+          })}
+          onClick={toggleFullScreen}
+        >
+          <Icon
+            icon={isFullScreen ? DISABLE_FULLSCREEN_SVG : ENABLE_FULLSCREEN_SVG}
+            className={cn({
+              'h-4 w-4 bg-white group-disabled:fill-grey-75': true,
+              'bg-brand-800': isFullScreen,
+              'group-hover:bg-gray-100': !isFullScreen,
+            })}
+          />
+        </div>
+      </TooltipTrigger>
+      <TooltipContent side="left" align="start" className="bg-gray-600 px-2 text-white">
+        Fullscreen
+      </TooltipContent>
+    </Tooltip>
   );
 };
 

diff --git a/src/components/map/controls/share/index.tsx b/src/components/map/controls/share/index.tsx
@@ -68,54 +68,61 @@ export const Share = ({
   return (
     <>
       {!disabled && (
-        <Dialog>
-          <DialogTrigger>
-            <div
-              className={cn({
-                'group inline-flex h-12 w-12 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,
-              })}
-            >
-              <Icon
-                icon={SHARE_SVG}
-                className="h-4 w-4 bg-white group-hover:bg-gray-100"
-                description="Share"
-              />
-            </div>
-          </DialogTrigger>
-
-          <DialogContent className="top-[30%] 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">
-                <h4 className="ml-4 text-[13px] font-semibold">Public url to share</h4>
-                <div className="flex h-12 items-center justify-between space-x-4 rounded-3xl bg-brand-600/10 p-4 text-sm">
-                  <p className="truncate">{currentUrl}</p>
-                  <button
-                    onClick={copyShareLink}
-                    className="whitespace-nowrap rounded-3xl border border-brand-800/20 py-1 px-5 font-semibold text-brand-800 hover:bg-brand-800/20"
-                  >
-                    {shareLinkBtnText}
-                  </button>
+        <Tooltip>
+          <TooltipTrigger>
+            <Dialog>
+              <DialogTrigger>
+                <div
+                  className={cn({
+                    'group inline-flex h-12 w-12 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,
+                  })}
+                >
+                  <Icon
+                    icon={SHARE_SVG}
+                    className="h-4 w-4 bg-white group-hover:bg-gray-100"
+                    description="Share"
+                  />
                 </div>
-              </div>
-              <div>
-                <h4 className="ml-4 text-[13px] font-semibold">Code to embed map</h4>
-                <div className="flex h-12  items-center space-x-4 rounded-3xl bg-brand-600/10 p-4 text-sm">
-                  <p className="truncate">{embeddedLink}</p>
-                  <button
-                    onClick={copyEmbeddedCode}
-                    className="whitespace-nowrap rounded-3xl border border-brand-800/20 py-1 px-5 font-semibold text-brand-800 hover:bg-brand-800/20"
-                  >
-                    {shareEmbedCodeBtnText}
-                  </button>
+              </DialogTrigger>
+
+              <DialogContent className="top-[30%] 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">
+                    <h4 className="ml-4 text-[13px] font-semibold">Public url to share</h4>
+                    <div className="flex h-12 items-center justify-between space-x-4 rounded-3xl bg-brand-600/10 p-4 text-sm">
+                      <p className="truncate">{currentUrl}</p>
+                      <button
+                        onClick={copyShareLink}
+                        className="whitespace-nowrap rounded-3xl border border-brand-800/20 py-1 px-5 font-semibold text-brand-800 hover:bg-brand-800/20"
+                      >
+                        {shareLinkBtnText}
+                      </button>
+                    </div>
+                  </div>
+                  <div>
+                    <h4 className="ml-4 text-[13px] font-semibold">Code to embed map</h4>
+                    <div className="flex h-12  items-center space-x-4 rounded-3xl bg-brand-600/10 p-4 text-sm">
+                      <p className="truncate">{embeddedLink}</p>
+                      <button
+                        onClick={copyEmbeddedCode}
+                        className="whitespace-nowrap rounded-3xl border border-brand-800/20 py-1 px-5 font-semibold text-brand-800 hover:bg-brand-800/20"
+                      >
+                        {shareEmbedCodeBtnText}
+                      </button>
+                    </div>
+                  </div>
                 </div>
-              </div>
-            </div>
-            <DialogClose />
-          </DialogContent>
-        </Dialog>
+                <DialogClose />
+              </DialogContent>
+            </Dialog>
+          </TooltipTrigger>
+          <TooltipContent side="left" align="start" className="bg-gray-600 px-2 text-white">
+            Share
+          </TooltipContent>
+        </Tooltip>
       )}
       {disabled && (
         <Tooltip>

diff --git a/src/containers/datasets/drawing-tool/index.tsx b/src/containers/datasets/drawing-tool/index.tsx
@@ -68,7 +68,7 @@ const WidgetDrawingTool = () => {
         button: 'top-1 right-9 z-[20]',
         tooltip: 'w-fit-content max-w-[400px]',
       }}
-      tooltipPosition={{ top: -65, left: 0 }}
+      tooltipPosition={{ top: -65, left: -20 }}
       message="use this function to calculate statistics for your own custom area of interest"
     >
       <button

diff --git a/src/containers/datasets/drawing-upload-tool/index.tsx b/src/containers/datasets/drawing-upload-tool/index.tsx
@@ -83,11 +83,11 @@ const WidgetDrawingUploadTool = () => {
   return (
     <Helper
       className={{
-        button: 'top-1 right-9',
+        button: '-top-0.5 right-9',
         tooltip: 'w-fit-content',
         active: 'max-w-[454px]',
       }}
-      tooltipPosition={{ top: -100, left: -100 }}
+      tooltipPosition={{ top: -62, left: 0 }}
       message="use this to upload an existing GIS file"
     >
       <>

diff --git a/src/containers/map/legend/item/index.tsx b/src/containers/map/legend/item/index.tsx
@@ -224,7 +224,7 @@ const LegendItem = ({
                   })}
                   overlay={false}
                 >
-                  <div className="no-scrollbar overflow-y-auto px-3">
+                  <div className="no-scrollbar overflow-y-auto">
                     <div className="no-scrollbar overflow-y-auto">
                       {WidgetInfo && <WidgetInfo />}
                     </div>

diff --git a/src/containers/navigation/language-selector/index.tsx b/src/containers/navigation/language-selector/index.tsx
@@ -52,7 +52,7 @@ const LanguageSelector = () => {
         tooltip: 'w-fit-content',
       }}
       theme="dark"
-      tooltipPosition={{ top: -40, left: 0 }}
+      tooltipPosition={{ top: -50, left: 0 }}
       message="Choose your preferred language here. There is a choice between English, French and Spanish"
     >
       <DropdownMenu>

diff --git a/src/containers/navigation/location-tools/index.tsx b/src/containers/navigation/location-tools/index.tsx
@@ -73,7 +73,7 @@ const LocationTools = () => {
           <>
             <Helper
               className={{
-                button: '-top-1 right-9 z-20',
+                button: 'top-1 right-9 z-20',
                 tooltip: 'w-fit-content max-w-[400px]',
               }}
               tooltipPosition={{ top: -65, left: -10 }}

diff --git a/src/containers/navigation/menu/about/index.tsx b/src/containers/navigation/menu/about/index.tsx
@@ -69,13 +69,15 @@ const About = () => {
             <Image
               src={CONVENED_PNG as StaticImageData}
               alt="Convened by Aberystwyth University, soloEO, TNC, Wetlands International"
+              className="-ml-3"
             />
           </div>
           <div>
             <p>Supported by</p>
             <Image
               src={SUPPORTED_PNG as StaticImageData}
               alt="Supported by University of Cambridge, JAXA, NASA, IUCN, Griffith University, Conservation International, WWF, Scripps Institution of Oceanography"
+              className="-ml-2"
             />
           </div>
 
@@ -84,6 +86,7 @@ const About = () => {
             <Image
               src={DONORS_PNG as StaticImageData}
               alt="DOB Ecology, Oak Foundation, Dutch Postcode Lottery, COmON Foundation"
+              className="-ml-6 -mt-1"
             />
           </div>
 
@@ -95,12 +98,18 @@ const About = () => {
               rel="noopener noreferrer"
               className="m-10"
             >
-              <Image src={VIZZUALITY_PNG as StaticImageData} alt="vizzuality" width={200} />
+              <Image
+                src={VIZZUALITY_PNG as StaticImageData}
+                alt="vizzuality"
+                width={300}
+                height={300}
+                className="ml-2 -mt-1 w-40"
+              />
             </a>
           </div>
         </div>
 
-        <h3 className="py-6 text-xl font-bold leading-8">Disclaimer</h3>
+        <h3 className="py-4 text-xl font-bold leading-8">Disclaimer</h3>
         <p>
           THE USE OF THESE SERVICES AND CONTENT IS AT YOUR SOLE RISK. THE SERVICES AND CONTENT ARE
           PROVIDED ON AN “AS IS” BASIS AND WITHOUT WARRANTIES OR REPRESENTATIONS OF ANY KIND, EITHER