Merge pull request #327 from Vizzuality/SKY30-502-front-end-tweaks

Implement design feedback
Vizzuality · Oct 24, 2024 · 4b9b155 · 4b9b155
2 parents 0962711 + f316dca
commit 4b9b155
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 17 deletions.
diff --git a/frontend/src/components/charts/conservation-chart/legend/index.tsx b/frontend/src/components/charts/conservation-chart/legend/index.tsx
@@ -47,7 +47,7 @@ const ChartLegend: FCWithMessages<ChartLegendProps> = ({
       </span>
       {displayTarget && (
         <span className="inline-flex w-full items-center gap-3">
-          <span className="block w-10 border-b border-orange"></span>
+          <span className="block w-10 border-b border-dashed border-orange"></span>
           <span>
             {t.rich('target-xx-by', {
               target,

diff --git a/frontend/src/components/map/zoom-controls/index.tsx b/frontend/src/components/map/zoom-controls/index.tsx
@@ -7,7 +7,7 @@ import { Button } from '@/components/ui/button';
 import { FCWithMessages } from '@/types';
 
 const BUTTON_CLASSES = 'group bg-white';
-const ICON_CLASSES = 'h-6 w-6 text-black group-hover:text-white';
+const ICON_CLASSES = 'h-4 w-4 text-black group-hover:text-white';
 
 const ZoomControls: FCWithMessages = () => {
   const t = useTranslations('components.map');

diff --git a/frontend/src/constants/fishing-protection-chart-colors.ts b/frontend/src/constants/fishing-protection-chart-colors.ts
@@ -1,3 +1,3 @@
 export const FISHING_PROTECTION_CHART_COLORS = {
-  highly: '#2768B4',
+  highly: '#526EFF',
 };
diff --git a/frontend/src/containers/map/content/map/popup/boundaries/index.tsx b/frontend/src/containers/map/content/map/popup/boundaries/index.tsx
@@ -203,16 +203,16 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
   if (!geometryData) return null;
 
   return (
-    <div className="space-y-2">
-      <h3 className="text-xl font-semibold">{localizedLocationName || '-'}</h3>
-      {isFetching && <div className="my-4 text-center font-mono text-xs">{t('loading')}</div>}
+    <div className="flex flex-col gap-2">
+      <h3 className="font-sans text-xl font-black">{localizedLocationName || '-'}</h3>
+      {isFetching && <div className="my-4 text-center font-mono text-xl">{t('loading')}</div>}
       {!isFetching && !protectionCoverageStats && (
         <div className="my-4 text-center font-mono text-xs">{t('no-data-available')}</div>
       )}
       {!isFetching && !!protectionCoverageStats && (
         <>
-          <div className="space-y-2">
-            <div className="my-4 max-w-[95%] font-mono">
+          <div className="flex flex-col gap-2">
+            <div className="max-w-[95%] font-mono">
               {environment === 'marine'
                 ? t('marine-conservation-coverage')
                 : t('terrestrial-conservation-coverage')}
@@ -222,18 +222,17 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
                 t.rich('percentage-bold', {
                   percentage: formattedStats.percentage,
                   b1: (chunks) => (
-                    <span className="text-[64px] font-bold leading-[80%]">{chunks}</span>
+                    <span className="text-[32px] font-bold leading-none">{chunks}</span>
                   ),
                   b2: (chunks) => <span className="text-lg">{chunks}</span>,
                 })}
               {formattedStats.percentage === '-' && (
-                <span className="text-[64px] font-bold leading-[80%]">
-                  {formattedStats.percentage}
-                </span>
+                <span className="text-xl font-bold leading-none">{formattedStats.percentage}</span>
               )}
             </div>
             <div className="space-x-1 font-mono font-medium text-black">
-              {t('protected-area', {
+              {t.rich('protected-area', {
+                br: () => <br />,
                 protectedArea: formattedStats.protectedArea,
                 totalArea: formatKM(
                   locale,
@@ -248,7 +247,7 @@ const BoundariesPopup: FCWithMessages<{ layerId: number }> = ({ layerId }) => {
           </div>
           <button
             type="button"
-            className="block w-full border border-black p-4 text-center font-mono uppercase"
+            className="mt-3 block w-full border border-black py-2.5 px-4 text-center font-mono text-xs"
             onClick={handleLocationSelected}
           >
             {t(POPUP_BUTTON_CONTENT_BY_SOURCE[source?.['id']])}

diff --git a/frontend/src/containers/map/content/map/popup/index.tsx b/frontend/src/containers/map/content/map/popup/index.tsx
@@ -125,7 +125,7 @@ const PopupContainer: FCWithMessages = () => {
       offset={10}
       closeOnClick={false}
       closeButton={false}
-      maxWidth="300px"
+      maxWidth="230px"
       onClose={closePopup}
       className={cn({
         'min-w-[250px]': !isHoveredTooltip,

diff --git a/frontend/src/containers/map/sidebar/index.tsx b/frontend/src/containers/map/sidebar/index.tsx
@@ -121,7 +121,7 @@ const MapSidebar: FCWithMessages<MapSidebarProps> = ({ type }) => {
             onClick={() => setSidebarOpen(!isSidebarOpen)}
           >
             <LuChevronLeft
-              className={cn('-ml-px h-6 w-6', { 'rotate-180': !isSidebarOpen })}
+              className={cn('-ml-px h-5 w-5', { 'rotate-180': !isSidebarOpen })}
               aria-hidden
             />
             <span className="sr-only">{t('toggle-sidebar')}</span>

diff --git a/frontend/translations/en.json b/frontend/translations/en.json
@@ -257,7 +257,7 @@
       "terrestrial-conservation-coverage": "Terrestrial Conservation Coverage",
       "percentage": "{percentage}%",
       "percentage-bold": "<b1>{percentage}</b1><b2>%</b2>",
-      "protected-area": "{protectedArea} km² out of {totalArea} km²",
+      "protected-area": "{protectedArea} km² out of<br></br>{totalArea} km²",
       "open-country-insights": "Open country insights",
       "global-coverage": "Global coverage",
       "area-km2": "{area} km²",