Merge pull request #3660 from LiteFarmOrg/LF-4629-nice-to-have-implem…

…ent-map-footer-redesign

Lf 4629 [nice to have] implement map footer redesign

packages/webapp/public/locales/en/translation.json

@@ -714,6 +714,7 @@
     "RESET_PASSWORD_LINK": "Send new password link."
   },
   "FARM_MAP": {
+    "ADD_LOCATION": "Add Location",
     "AREA_DETAILS": {
       "NETWORK": "Network connectivity issues.",
       "PERIMETER": "Perimeter",
@@ -797,6 +798,7 @@
       "ZERO_AREA_DETECTED": "Field with no area detected. Please add more points to current drawing or draw again.",
       "ZERO_LENGTH_DETECTED": "Line with no length detected. Please draw again."
     },
+    "EXPORT_MAP": "Export Map",
     "EXPORT_MODAL": {
       "BODY": "How do you want to export your farm map?",
       "DOWNLOAD": "Download",
@@ -826,6 +828,7 @@
       "TITLE": "Add field",
       "TRANSITIONING": "Transitioning"
     },
+    "FILTER_MAP": "Filter Map",
     "GARDEN": {
       "DATE": "Eligible transition date",
       "EDIT_TITLE": "Edit garden",

packages/webapp/src/components/Form/Button/button.module.scss

@@ -77,6 +77,26 @@
   --focus-box-shadow: none;
 }
 
+.btn.accent {
+  --background: var(--White);
+  --border: none;
+  --box-shadow: 0px 0px 1px 0px var(--Colors-Accent---singles-Blue-full);
+  --color: var(--Colors-Accent---singles-Blue-dark);
+
+  --hover-background: var(--Colors-Accent---singles-Blue-full);
+  --hover-border: none;
+  --hover-box-shadow: none;
+  --hover-color: var(--White);
+
+  --active-background: var(--Colors-Accent---singles-Blue-dark);
+  --active-border: none;
+  --active-color: var(--White);
+
+  --focus-border: none;
+  --focus-box-shadow: 0px 0px 1px 0px var(--Colors-Accent---singles-Blue-full);
+  --focus-outline: none;
+}
+
 .btn.error {
   --background: var(--error);
   --color: var(--White);

packages/webapp/src/components/Form/Button/index.tsx

@@ -18,7 +18,15 @@ import styles from './button.module.scss';
 import clsx from 'clsx';
 
 export type ButtonProps = {
-  color?: 'primary' | 'secondary' | 'secondary-2' | 'secondary-cta' | 'warning' | 'error' | 'none';
+  color?:
+    | 'primary'
+    | 'secondary'
+    | 'secondary-2'
+    | 'secondary-cta'
+    | 'accent'
+    | 'warning'
+    | 'error'
+    | 'none';
   children?: ReactNode;
   sm?: boolean;
   md?: boolean;

packages/webapp/src/components/Map/Footer/MapNavigationButtons.tsx

@@ -0,0 +1,93 @@
+/*
+ *  Copyright 2025 LiteFarm.org
+ *  This file is part of LiteFarm.
+ *
+ *  LiteFarm is free software: you can redistribute it and/or modify
+ *  it under the terms of the GNU General Public License as published by
+ *  the Free Software Foundation, either version 3 of the License, or
+ *  (at your option) any later version.
+ *
+ *  LiteFarm is distributed in the hope that it will be useful,
+ *  but WITHOUT ANY WARRANTY; without even the implied warranty of
+ *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ *  GNU General Public License for more details, see <https://www.gnu.org/licenses/>.
+ */
+
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+import Button from '../../Form/Button';
+import styles from './styles.module.scss';
+import { ReactComponent as AddLogo } from '../../../assets/images/map/addSkew.svg';
+import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter-funnel.svg';
+import { ReactComponent as ExportLogo } from '../../../assets/images/map/download.svg';
+
+export interface MapNavigationButtonsProps {
+  isAdmin?: boolean;
+  showAddDrawer?: boolean;
+  showMapFilter?: boolean;
+  showModal?: boolean;
+  isMapFilterSettingActive?: boolean;
+  onClickAdd: () => void;
+  handleClickFilter: () => void;
+  onClickExport?: () => void;
+}
+
+const MapNavigationButtons = ({
+  isAdmin,
+  showAddDrawer,
+  showMapFilter,
+  showModal,
+  onClickAdd,
+  handleClickFilter,
+  onClickExport,
+  isMapFilterSettingActive,
+}: MapNavigationButtonsProps) => {
+  const { t } = useTranslation();
+
+  return (
+    <div className={styles.container}>
+      {isAdmin && (
+        <Button
+          color="accent"
+          data-cy="map-addFeature"
+          className={clsx(styles.button, showAddDrawer && styles.selected)}
+          id="mapFirstStep"
+          onClick={onClickAdd}
+          sm
+        >
+          <span className={styles.buttonText}>
+            <AddLogo className={styles.svg} />
+            <span className={styles.label}>{t('FARM_MAP.ADD_LOCATION')}</span>
+          </span>
+        </Button>
+      )}
+      <Button
+        color="accent"
+        className={clsx(styles.button, showMapFilter && styles.selected)}
+        id="mapSecondStep"
+        onClick={handleClickFilter}
+        sm
+      >
+        <span className={styles.buttonText}>
+          {isMapFilterSettingActive && <span className={styles.circle} />}
+          <FilterLogo className={styles.svg} />
+          <span className={styles.label}>{t('FARM_MAP.FILTER_MAP')}</span>
+        </span>
+      </Button>
+      <Button
+        color="accent"
+        className={clsx(styles.button, showModal && styles.selected)}
+        id="mapThirdStep"
+        onClick={onClickExport}
+        sm
+      >
+        <span className={styles.buttonText}>
+          <ExportLogo className={styles.svg} />
+          <span className={styles.label}>{t('FARM_MAP.EXPORT_MAP')}</span>
+        </span>
+      </Button>
+    </div>
+  );
+};
+
+export default MapNavigationButtons;

packages/webapp/src/components/Map/Footer/index.jsx

@@ -1,24 +1,19 @@
-import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import styles from './styles.module.scss';
-import { ReactComponent as AddLogo } from '../../../assets/images/map/add.svg';
-import { ReactComponent as FilterLogo } from '../../../assets/images/map/filter.svg';
-import { ReactComponent as ExportLogo } from '../../../assets/images/map/export.svg';
-import clsx from 'clsx';
 import { useTranslation } from 'react-i18next';
 import MapDrawer from '../../MapDrawer';
 import { locationEnum } from '../../../containers/Map/constants';
 import { TourProviderWrapper } from '../../TourProviderWrapper/TourProviderWrapper';
+import FloatingContainer from '../../FloatingContainer';
+import MapNavigationButtons from './MapNavigationButtons';
 
 export default function PureMapFooter({
-  style,
   isAdmin,
   showSpotlight,
   resetSpotlight,
   onClickAdd,
+  showModal,
   onClickExport,
   handleClickFilter,
-  showModal,
   setShowMapFilter,
   showMapFilter,
   setShowAddDrawer,
@@ -43,11 +38,10 @@ export default function PureMapFooter({
     point: [locationEnum.gate, locationEnum.water_valve, locationEnum.sensor],
   },
   isMapFilterSettingActive = false,
+  isCompactSideMenu,
 }) {
   const { t } = useTranslation();
-  const [stepSpotlighted, setStepSpotlighted] = useState(null);
 
-  const { container, button, svg, spotlighted } = styles;
   return (
     <TourProviderWrapper
       padding={0}
@@ -81,33 +75,18 @@ export default function PureMapFooter({
         },
       ]}
     >
-      <div className={clsx(container)} style={style}>
-        {isAdmin && (
-          <button
-            data-cy="map-addFeature"
-            className={clsx(button, (stepSpotlighted === 0 || showAddDrawer) && spotlighted)}
-            id="mapFirstStep"
-            onClick={onClickAdd}
-          >
-            <AddLogo className={svg} />
-          </button>
-        )}
-        <button
-          className={clsx(button, (stepSpotlighted === 1 || showMapFilter) && spotlighted)}
-          id="mapSecondStep"
-          onClick={handleClickFilter}
-        >
-          {isMapFilterSettingActive && <div className={styles.circle} />}
-          <FilterLogo className={svg} />
-        </button>
-        <button
-          className={clsx(button, (stepSpotlighted === 2 || showModal) && spotlighted)}
-          id="mapThirdStep"
-          onClick={onClickExport}
-        >
-          <ExportLogo className={svg} />
-        </button>
-      </div>
+      <FloatingContainer isCompactSideMenu={isCompactSideMenu}>
+        <MapNavigationButtons
+          isAdmin={isAdmin}
+          showAddDrawer={showAddDrawer}
+          showMapFilter={showMapFilter}
+          showModal={showModal}
+          onClickAdd={onClickAdd}
+          handleClickFilter={handleClickFilter}
+          onClickExport={onClickExport}
+          isMapFilterSettingActive={isMapFilterSettingActive}
+        />
+      </FloatingContainer>
       <MapDrawer
         key={'filter'}
         setShowMapDrawer={setShowMapFilter}
@@ -138,8 +117,8 @@ PureMapFooter.prototype = {
   resetSpotlight: PropTypes.func,
   onClickAdd: PropTypes.func,
   onClickFilter: PropTypes.func,
-  onClickExport: PropTypes.func,
   showModal: PropTypes.bool,
+  onClickExport: PropTypes.func,
   setShowMapFilter: PropTypes.func,
   showMapFilter: PropTypes.bool,
   drawerDefaultHeight: PropTypes.number,