New explore dropdown UI

public/static/locales/en/maps.json

@@ -47,6 +47,39 @@
     "showProjectDetails": "Show Project Details",
     "hideProjectList": "Hide Project List",
     "hideProjectDetails": "Hide Project Details",
-    "countries": "Countries"
+    "countries": "Countries",
+    "exploreLayers": {
+      "groups": {
+        "forests": "Forest",
+        "soil": "Soil",
+        "biodiversity": "Biodiversity",
+        "risks": "Risks"
+      },
+      "settingsLabels": {
+        "projects": "Projects",
+        "forestCover": "Forest Cover",
+        "forestBiomass": "Forest Biomass",
+        "potentialForestBiomass": "Potential Additional Forest Biomass",
+        "deforestation": "Deforestation",
+        "canopyHeight": "Canopy Height",
+        "soilNitrogen": "Soil Nitrogen",
+        "soilPH": "Soil pH",
+        "soilOrganicCarbon": "Soil Organic Carbon",
+        "soilBulkDensity": "Soil Bulk Density",
+        "treeSpeciesDensity": "Tree Species Density",
+        "birdsDensity": "Birds Density",
+        "mammalsDensity": "Mammals Density",
+        "amphibiansDensity": "Amphibians Density",
+        "fireRisk": "Fire Risk",
+        "deforestationRisk": "Deforestation Risk"
+      },
+      "additionalInfo": {
+        "dataYears": "Data years",
+        "resolution": "Resolution",
+        "description": "Description",
+        "underlyingData": "Underlying Data",
+        "source": "Source"
+      }
+    }
   }
 }

src/features/projectsV2/ProjectListControls/ProjectListControlForMobile.tsx

@@ -133,6 +133,7 @@ const ProjectListControlForMobile = ({
             <MapFeatureExplorer
               mapOptions={mapOptions}
               updateMapOption={updateMapOption}
+              isMobile={true}
             />
           )}
           <ViewModeTabs {...viewModeTabsProps} />

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/CustomButton.tsx

@@ -5,7 +5,7 @@ const { fontSizes, light, primaryColorNew } = theme;
 
 const CustomButton = styled(Button)(() => ({
   '&.MuiButton-root': {
-    width: '182px',
+    width: '240px',
     height: '47px',
     backgroundColor: `${light.light}`,
     borderRadius: '12px',

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/CustomSwitch.tsx

@@ -1,4 +1,5 @@
 import { Switch, styled } from '@mui/material';
+import themeProperties from '../../../../theme/themeProperties';
 
 interface SwitchProps {
   customColor?: string;
@@ -34,9 +35,9 @@ export const StyledSwitch = styled(SmallSwitch, {
   shouldForwardProp: (prop) => prop !== 'customColor',
 })<SwitchProps>(({ customColor }) => ({
   '.MuiSwitch-switchBase.Mui-checked': {
-    color: customColor,
+    color: customColor || themeProperties.primaryDarkColor,
   },
   '.MuiSwitch-switchBase.Mui-checked+.MuiSwitch-track': {
-    backgroundColor: customColor,
+    backgroundColor: customColor || themeProperties.primaryDarkColor,
   },
 }));

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapFeatureExplorer.module.scss

@@ -7,28 +7,137 @@
   }
 }
 
+.exploreButtonContent {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  h3 {
+    font-size: $fontSmall;
+    @include xsPhoneView {
+      font-size: $fontXXSmall;
+    }
+  }
+
+  p {
+    font-weight: 400;
+  }
+}
+
 .exploreMainContainer {
-  max-width: 182px;
-  background-color: $backgroundColor;
+  max-width: 240px;
+  background-color: #fff;
   border-radius: 12px;
   margin-top: 10px;
-  padding: 14px 16px;
+  padding: 12px;
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.12);
+  max-height: 485px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
 
   @include xsPhoneView {
     position: absolute;
+    max-height: 100vh;
+    height: 100vh;
+    overflow-y: scroll;
+    min-width: 293px;
+    border-radius: 12px 0 0 12px;
+    right: 0px;
+    margin-top: 0;
   }
 }
 
-.exploreContainer {
-  width: 150px;
+.exploreItemsContainer {
+  max-height: 400px;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  @include xsPhoneView {
+    max-height: max-content;
+  }
+}
+
+.exploreItemSection {
+  background: rgba(0, 122, 73, 0.05);
+  border-radius: 8px;
+  padding: 8px 9px;
+  font-size: 12px;
+  margin-bottom: 10px;
+
+  h2 {
+    font-weight: 600;
+    margin-bottom: 6px;
+    font-size: $fontSmall;
+  }
+}
+
+.singleLayerOption {
+  display: flex;
+  justify-content: space-between;
+  gap: 10px;
+  align-items: center;
+  padding: 6px 0;
+  border-bottom: 1px solid $horizontalLineColor;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .layerLabel {
+    cursor: default;
+
+    &.additionalInfo {
+      cursor: help;
+      p {
+        text-decoration: $horizontalLineColor dashed underline;
+        text-underline-offset: 2px;
+      }
+    }
+  }
+
+  .mapLayer {
+    cursor: pointer;
+  }
+
+  hr {
+    border-top: 1px dashed rgba(189, 189, 189, 1);
+    margin-top: 0px;
+    margin-bottom: 0px;
+  }
+}
+
+.layerInfoPopupContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  max-width: 189px;
+  background: #fff;
+  padding: 12px;
+  font-size: 10px;
+
+  .label {
+    font-weight: 600;
+    color: rgba(130, 130, 130, 1);
+    text-transform: uppercase;
+  }
+  .source {
+    color: $primaryDarkColor;
+  }
 }
 
 .toggleMainContainer {
+  padding: 15px 9px;
   height: 14px;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  background: rgba(0, 122, 73, 0.05);
+  border-radius: 8px;
 }
 
 .toggleContainer {
@@ -86,11 +195,8 @@
 }
 
 .exploreDescription {
-  padding: 8px;
   height: fit-content;
-  margin-top: 14px;
-  background-color: rgba(var(--explore-description-background-color-new), 1);
-  font-size: $fontXXSmall;
+  font-size: var(--font-xx-extra-small);
   border-radius: 6px;
 }
 

src/features/projectsV2/ProjectsMap/MapFeatureExplorer/MapSettings.tsx

@@ -1,73 +1,68 @@
-import type { ChangeEvent, FC } from 'react';
+import type { FC } from 'react';
 import type { MapOptions } from '../../ProjectsMapContext';
+import type { SetState } from '../../../common/types/common';
 
 import styles from './MapFeatureExplorer.module.scss';
-import { MapLayerToggle } from '.';
+// // import { MapLayerToggle } from '.';
 // import InfoIcon from '../../../../../public/assets/images/icons/projectV2/InfoIcon';
-import { StyledSwitch } from './CustomSwitch';
+// import { StyledSwitch } from './CustomSwitch';
 // import { YearRangeSlider } from '.';
 import { useTranslations } from 'next-intl';
-// import themeProperties from '../../../../theme/themeProperties';
+import MapSettingsSection from './microComponents/MapSettingsSection';
+import MobileMapSettingsLayout from './MobileMapSettingsLayout';
+import { mapSettingsConfig } from '../../../../utils/mapsV2/mapSettings.config';
 
 type MapSettingsProps = {
   mapOptions: MapOptions;
   updateMapOption: (option: keyof MapOptions, value: boolean) => void;
+  isMobile?: boolean;
+  setIsOpen?: SetState<boolean>;
 };
 
-const MapSettings: FC<MapSettingsProps> = ({ mapOptions, updateMapOption }) => {
-  const tAllProjects = useTranslations('AllProjects');
+const MapSettings: FC<MapSettingsProps> = ({
+  mapOptions,
+  updateMapOption,
+  isMobile,
+  setIsOpen,
+}) => {
   const tMaps = useTranslations('Maps');
-  /* const {
-    primaryColorNew,
-    restorationToggleColorNew,
-    deforestrationToggleColorNew,
-  } = themeProperties; */
+
+  const content = (
+    <>
+      <MapSettingsSection config={mapSettingsConfig.projects} />
+      <MapSettingsSection
+        groupKey="forests"
+        config={mapSettingsConfig.forests}
+      />
+      <MapSettingsSection groupKey="soil" config={mapSettingsConfig.soil} />
+      <MapSettingsSection
+        groupKey="biodiversity"
+        config={mapSettingsConfig.biodiversity}
+      />
+      <MapSettingsSection groupKey="risks" config={mapSettingsConfig.risks} />
+      <div className={styles.exploreDescription}>{tMaps('3trilliontrees')}</div>
+    </>
+  );
+
+  if (isMobile && setIsOpen) {
+    return (
+      <MobileMapSettingsLayout setIsOpen={setIsOpen}>
+        {content}
+      </MobileMapSettingsLayout>
+    );
+  }
 
   return (
     <div className={styles.exploreMainContainer}>
-      <div className={styles.exploreContainer}>
-        <div>
-          {/* <MapLayerToggle
-            infoIcon={<InfoIcon width={'10px'} />}
-            label={tAllProjects('currentForests')}
-            switchComponent={
-              <StyledSwitch customColor={`${primaryColorNew}`} />
-            }
-          />
-          <div className={styles.hrLine} />
-          <MapLayerToggle
-            infoIcon={<InfoIcon width={'10px'} />}
-            label={tAllProjects('restorationPotential')}
-            switchComponent={
-              <StyledSwitch customColor={`${restorationToggleColorNew}`} />
-            }
-          />
-          <div className={styles.hrLine} />
-          <MapLayerToggle
+      <div className={styles.exploreItemsContainer}>
+        {/* <MapLayerToggle
             infoIcon={<InfoIcon width={'10px'} />}
             label={tAllProjects('deforestation')}
             switchComponent={
               <StyledSwitch customColor={`${deforestrationToggleColorNew}`} />
             }
-          />
-          <div className={styles.hrLine} /> */}
-          <MapLayerToggle
-            infoIcon={undefined}
-            label={tAllProjects('projects')}
-            switchComponent={
-              <StyledSwitch
-                checked={mapOptions['showProjects']}
-                onChange={(
-                  _event: ChangeEvent<HTMLInputElement>,
-                  checked: boolean
-                ) => updateMapOption('showProjects', checked)}
-              />
-            }
-          />
-        </div>
-        <div className={styles.exploreDescription}>
-          {tMaps('3trilliontrees')}
-        </div>
+          /> */}
+        {content}
       </div>
     </div>
   );