Merge pull request #2366 from Plant-for-the-Planet-org/develop

Release Map Key and Profile Icon
Plant-for-the-Planet-org · Jan 14, 2025 · c910f7e · c910f7e
2 parents 1eda984 + 9a1e372
commit c910f7e
Show file tree

Hide file tree

Showing 7 changed files with 326 additions and 20 deletions.
diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx
@@ -1,13 +1,23 @@
 const DefaultProfileImageIcon = () => {
   return (
-    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <circle cx="12" cy="12" r="12" fill="#DFF4E8" />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16.4632 9.93092C16.4632 9.93092 15.6142 9.97331 15.423 10.8185C15.423 10.8185 15.4202 8.32812 13.5176 6.94321C13.5176 6.94321 12.9615 7.37839 12.9727 8.28421C12.9727 8.28421 11.3727 6.4935 7.93948 5.60212C6.98604 9.05149 7.74561 11.3021 7.74561 11.3021C6.96679 10.8394 6.31185 11.1034 6.31185 11.1034C6.56035 13.4433 8.71523 14.6912 8.71523 14.6912C7.88769 14.4342 7.42645 15.1483 7.42645 15.1483C9.48192 17.8293 12.2914 18.2031 14.3401 17.1436C14.4749 17.0738 14.6066 16.9978 14.7344 16.9159C16.6763 15.6714 17.7575 13.0519 16.4632 9.93092ZM14.3401 17.1436L13.4524 15.6061L10.8222 15.3421L10.8748 14.8956L13.1756 15.1267L11.9034 12.9232L9.27324 12.6591L9.32553 12.2122L11.6264 12.4434L9.97035 9.57501L10.3647 9.34735L12.0207 12.2157L12.971 10.1075L13.3841 10.2857L12.2977 12.6955L13.57 14.8991L14.5202 12.7909L14.9331 12.9686L13.8467 15.3784L16.1366 19.3447L15.7423 19.5724L14.3401 17.1436Z"
-        fill="#219653"
-      />
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="48" height="48" rx="24" fill="#DFF4E8" />
+      <g clipPath="url(#clip0_65_29)">
+        <path
+          d="M26.0541 24.7993C28.5227 23.8038 30.2559 21.4379 30.2559 18.6582C30.2559 14.9865 27.2227 12 23.4936 12C19.7645 12 16.7445 14.9865 16.7445 18.6582C16.7445 21.4379 18.4777 23.8167 20.9463 24.7993C17.1384 25.8595 14.2628 29.1304 14.0002 33.1771C13.9739 33.6425 14.1446 34.1079 14.4598 34.457C14.788 34.8061 15.2607 35 15.7466 35H31.2407C31.7134 35 32.1992 34.8061 32.5275 34.457C32.8558 34.1209 33.0265 33.6425 32.9871 33.1771C32.7245 29.1304 29.8357 25.8465 26.041 24.7993H26.0541Z"
+          fill="#219653"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_65_29">
+          <rect
+            width="19"
+            height="23"
+            fill="white"
+            transform="translate(14 12)"
+          />
+        </clipPath>
+      </defs>
     </svg>
   );
 };

diff --git a/public/assets/images/icons/projectV2/PointMarkerIconsSymbol.tsx b/public/assets/images/icons/projectV2/PointMarkerIconsSymbol.tsx
diff --git a/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx b/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx
@@ -6,13 +6,33 @@ import { useMemo } from 'react';
 import { useTranslations } from 'next-intl';
 import styles from '../styles/ProjectListControls.module.scss';
 import { availableFilters } from '../../../../utils/projectV2';
+import {
+  TreePlanting,
+  Agroforestry,
+  NaturalRegeneration,
+  ManagedRegeneration,
+  UrbanRestoration,
+  OtherPlanting,
+  Mangroves,
+} from '../../../../../public/assets/images/icons/projectV2/PointMarkerIconsSymbol';
+// import TreePlanting from '../../../../../public/assets/images/icons/project/TreePlanting';
 
 interface ClassificationDropDownProps {
   selectedClassification: TreeProjectClassification[];
   setSelectedClassification: SetState<TreeProjectClassification[]>;
   selectedMode?: ViewMode;
 }
 
+const classificationItemIcons = {
+  'large-scale-planting': <TreePlanting width={'20'} height={'20'} />,
+  agroforestry: <Agroforestry width={'20'} height={'20'} />,
+  'natural-regeneration': <NaturalRegeneration width={'20'} height={'20'} />,
+  'managed-regeneration': <ManagedRegeneration width={'20'} height={'20'} />,
+  'urban-planting': <UrbanRestoration width={'20'} height={'20'} />,
+  'other-planting': <OtherPlanting width={'20'} height={'20'} />,
+  mangroves: <Mangroves width={'20'} height={'20'} />,
+};
+
 export const ClassificationDropDown = ({
   selectedClassification,
   setSelectedClassification,
@@ -67,12 +87,13 @@ export const ClassificationDropDown = ({
               onClick={() => handleFilterSelection(filterItem)}
             >
               <div
-                className={
+                className={`${
                   selectedClassification?.includes(filterItem)
                     ? styles.classificationSelected
                     : styles.classificationUnselected
-                }
+                } ${styles.classificationItem}`}
               >
+                {classificationItemIcons[filterItem]}
                 {tAllProjects(`classificationTypes.${filterItem}`)}
               </div>
               {index !== availableFilters.length - 1 && (

diff --git a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss
@@ -236,6 +236,14 @@
   top: 67px;
 }
 
+.classificationItem {
+  display: flex;
+  color: rgba($dark, 1);
+  width: 100%;
+  align-items: center;
+  gap: 4px;
+}
+
 .classificationUnselected {
   font-size: $fontXXSmall;
   line-height: normal;

diff --git a/src/features/user/Profile/ProfileCard/index.tsx b/src/features/user/Profile/ProfileCard/index.tsx
@@ -4,10 +4,8 @@ import React from 'react';
 import { Avatar } from '@mui/material';
 import getImageUrl from '../../../../utils/getImageURL';
 import styles from './ProfileCard.module.scss';
-import {
-  DefaultUserProfileImage,
-  SettingsIcon,
-} from '../../../../../public/assets/images/icons/ProfilePageV2Icons';
+import { SettingsIcon } from '../../../../../public/assets/images/icons/ProfilePageV2Icons';
+import DefaultProfileImageIcon from '../../../../../public/assets/images/icons/headerIcons/DefaultProfileImageIcon';
 import Link from 'next/link';
 import ProfileActions from './ProfileActions';
 import DonorCircleMemberBadge from './MicroComponents/DonorCircleMemberBadge';
@@ -27,9 +25,7 @@ const ProfileCard = ({ userProfile, profilePageType }: ProfileV2Props) => {
         {userImageUrl && !userImageUrl.includes('development') ? (
           <Avatar alt={userProfile.displayName} src={userImageUrl} />
         ) : (
-          <Avatar>
-            <DefaultUserProfileImage />
-          </Avatar>
+          <DefaultProfileImageIcon />
         )}
       </div>
       <div className={styles.profileDetailsContainer}>

diff --git a/src/features/user/Settings/EditProfile/EditProfile.module.scss b/src/features/user/Settings/EditProfile/EditProfile.module.scss
@@ -266,7 +266,6 @@
 
 .noProfilePic {
   text-align: center;
-  background-color: $backgroundColorDark;
   height: 100px;
   width: 100px;
   border-radius: 100px;

diff --git a/src/features/user/Settings/EditProfile/EditProfileForm.tsx b/src/features/user/Settings/EditProfile/EditProfileForm.tsx
@@ -28,7 +28,7 @@ import Delete from '../../../../../public/assets/images/icons/manageProjects/Del
 import CustomTooltip from '../../../common/Layout/CustomTooltip';
 import NewToggleSwitch from '../../../common/InputTypes/NewToggleSwitch';
 import { useRouter } from 'next/router';
-import { DefaultUserProfileImage } from '../../../../../public/assets/images/icons/ProfilePageV2Icons';
+import DefaultProfileImageIcon from '../../../../../public/assets/images/icons/headerIcons/DefaultProfileImageIcon';
 import themeProperties from '../../../../theme/themeProperties';
 import NewInfoIcon from '../../../../../public/assets/images/icons/projectV2/NewInfoIcon';
 
@@ -274,7 +274,7 @@ export default function EditProfileForm() {
               </div>
             ) : (
               <div className={styles.noProfilePic}>
-                <DefaultUserProfileImage />
+                <DefaultProfileImageIcon />
               </div>
             )}
           </div>