From 992d92340faf3ed1f0ae3015012294723e08f53f Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Fri, 10 Jan 2025 18:38:07 +0530 Subject: [PATCH 1/8] Switched default profile image Icon --- .../headerIcons/DefaultProfileImageIcon.tsx | 46 ++++++++++++++++--- 1 file changed, 39 insertions(+), 7 deletions(-) diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx index d5304e9b17..58f464fafd 100644 --- a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx +++ b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx @@ -1,13 +1,45 @@ const DefaultProfileImageIcon = () => { return ( - - - + + + + + + + + + + ); }; From 7fc01fddd17b6aeecf11ed316e40552b10f0a279 Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Fri, 10 Jan 2025 19:53:19 +0530 Subject: [PATCH 2/8] Updated icons on Filter Classifications --- .../PointMarkerIconsSymbol.tsx | 250 ++++++++++++++++++ .../ClassificationDropDown.tsx | 33 ++- .../styles/ProjectListControls.module.scss | 7 + 3 files changed, 288 insertions(+), 2 deletions(-) create mode 100644 public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx diff --git a/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx b/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx new file mode 100644 index 0000000000..49b63073dc --- /dev/null +++ b/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx @@ -0,0 +1,250 @@ +// Todo - move to a common location +import type { IconProps } from '../../../../../src/features/common/types/common'; + +export const Agroforestry = ({ color, width, height }: IconProps) => { + return ( + + + + ); +}; + +export const Conservation = ({ color }: IconProps) => { + return ( + + + + + + + + + + + + ); +}; + +export const ManagedRegeneration = ({ color, width, height }: IconProps) => { + return ( + + + + + + + + + + + + + + + + ); +}; + +export const Mangroves = ({ color, width, height }: IconProps) => { + return ( + + + + ); +}; + +export const NaturalRegeneration = ({ color, width, height }: IconProps) => { + return ( + + + + ); +}; + +export const OtherPlanting = ({ color, width, height }: IconProps) => { + return ( + + + + ); +}; + +export const RegisteredTreeIcon = () => { + return ( + + + + + + + ); +}; + +export const TreePlanting = ({ color, width, height }: IconProps) => { + return ( + + + + + + + + + + + ); +}; + +export const UrbanRestoration = ({ color, width, height }: IconProps) => { + return ( + + + + + + + + + + + + + + ); +}; diff --git a/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx b/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx index ae5794ecf3..9e3b1a54f0 100644 --- a/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx +++ b/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx @@ -6,6 +6,16 @@ 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/myForestMapIcons/PointMarkerIconsSymbol'; +// import TreePlanting from '../../../../../public/assets/images/icons/project/TreePlanting'; interface ClassificationDropDownProps { selectedClassification: TreeProjectClassification[]; @@ -13,6 +23,24 @@ interface ClassificationDropDownProps { selectedMode?: ViewMode; } +const classificationItemIcons = { + 'large-scale-planting': ( + + ), + agroforestry: , + 'natural-regeneration': ( + + ), + 'managed-regeneration': ( + + ), + 'urban-planting': ( + + ), + 'other-planting': , + mangroves: , +}; + export const ClassificationDropDown = ({ selectedClassification, setSelectedClassification, @@ -67,12 +95,13 @@ export const ClassificationDropDown = ({ onClick={() => handleFilterSelection(filterItem)} >
+ {classificationItemIcons[filterItem]} {tAllProjects(`classificationTypes.${filterItem}`)}
{index !== availableFilters.length - 1 && ( diff --git a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss index f75910deb1..6fb33706ce 100644 --- a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss +++ b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss @@ -236,6 +236,13 @@ top: 67px; } +.classificationItem { + display: flex; + width: 100%; + align-items: center; + gap: 4px; +} + .classificationUnselected { font-size: $fontXXSmall; line-height: normal; From f0f3e44febf8ebe3cc7e519ddf3f6ea86d5e3210 Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Mon, 13 Jan 2025 15:09:29 +0530 Subject: [PATCH 3/8] Profie placeholder Icon changes inside /profile & /profile/edit --- .../headerIcons/DefaultProfileImageIcon.tsx | 27 ++++++++----------- .../user/Profile/ProfileCard/index.tsx | 8 +++--- .../Settings/EditProfile/EditProfileForm.tsx | 4 +-- 3 files changed, 16 insertions(+), 23 deletions(-) diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx index 58f464fafd..2f4f56652e 100644 --- a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx +++ b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx @@ -1,26 +1,21 @@ -const DefaultProfileImageIcon = () => { +import { IconProps } from '../../../../../src/features/common/types/common'; + +const DefaultProfileImageIcon = ({ width = 48, height = 48 }: IconProps) => { return ( + - diff --git a/src/features/user/Profile/ProfileCard/index.tsx b/src/features/user/Profile/ProfileCard/index.tsx index 42bccac9be..5a37e4655d 100644 --- 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'; @@ -28,7 +26,7 @@ const ProfileCard = ({ userProfile, profilePageType }: ProfileV2Props) => { ) : ( - + )} diff --git a/src/features/user/Settings/EditProfile/EditProfileForm.tsx b/src/features/user/Settings/EditProfile/EditProfileForm.tsx index bd9bdc9ef4..e8e9ceeeed 100644 --- 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 DefaultUserProfileImageIcon 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() { ) : (
- +
)} From 45d27e8d4dbdcb0bd2bd572195792b42786386b1 Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Mon, 13 Jan 2025 15:22:47 +0530 Subject: [PATCH 4/8] icon color adjusted --- .../PointMarkerIconsSymbol.tsx | 50 +++++++++++++------ .../ClassificationDropDown.tsx | 22 +++----- .../styles/ProjectListControls.module.scss | 1 + 3 files changed, 44 insertions(+), 29 deletions(-) diff --git a/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx b/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx index 49b63073dc..741608297a 100644 --- a/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx +++ b/public/assets/images/icons/myForestMapIcons/PointMarkerIconsSymbol.tsx @@ -1,11 +1,14 @@ // Todo - move to a common location import type { IconProps } from '../../../../../src/features/common/types/common'; -export const Agroforestry = ({ color, width, height }: IconProps) => { +export const Agroforestry = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( { export const Conservation = ({ color }: IconProps) => { return ( - + { ); }; -export const ManagedRegeneration = ({ color, width, height }: IconProps) => { +export const ManagedRegeneration = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( @@ -93,14 +99,17 @@ export const ManagedRegeneration = ({ color, width, height }: IconProps) => { ); }; -export const Mangroves = ({ color, width, height }: IconProps) => { +export const Mangroves = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( { ); }; -export const NaturalRegeneration = ({ color, width, height }: IconProps) => { +export const NaturalRegeneration = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( { ); }; -export const OtherPlanting = ({ color, width, height }: IconProps) => { +export const OtherPlanting = ({ + color = 'currentColor', + width, + height, +}: IconProps) => { return ( { ); }; -export const TreePlanting = ({ color, width, height }: IconProps) => { +export const TreePlanting = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( { ); }; -export const UrbanRestoration = ({ color, width, height }: IconProps) => { +export const UrbanRestoration = ({ + color = 'defaultColor', + width, + height, +}: IconProps) => { return ( diff --git a/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx b/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx index 9e3b1a54f0..452145e048 100644 --- a/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx +++ b/src/features/projectsV2/ProjectListControls/microComponents/ClassificationDropDown.tsx @@ -24,21 +24,13 @@ interface ClassificationDropDownProps { } const classificationItemIcons = { - 'large-scale-planting': ( - - ), - agroforestry: , - 'natural-regeneration': ( - - ), - 'managed-regeneration': ( - - ), - 'urban-planting': ( - - ), - 'other-planting': , - mangroves: , + 'large-scale-planting': , + agroforestry: , + 'natural-regeneration': , + 'managed-regeneration': , + 'urban-planting': , + 'other-planting': , + mangroves: , }; export const ClassificationDropDown = ({ diff --git a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss index 6fb33706ce..3289303ad9 100644 --- a/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss +++ b/src/features/projectsV2/ProjectListControls/styles/ProjectListControls.module.scss @@ -238,6 +238,7 @@ .classificationItem { display: flex; + color: rgba($dark, 1); width: 100%; align-items: center; gap: 4px; From 9695d69ab4fc44a04296da114404d1faa88e8c06 Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Mon, 13 Jan 2025 15:42:16 +0530 Subject: [PATCH 5/8] file moved & path changes --- .../icons/headerIcons/DefaultProfileImageIcon.tsx | 12 ++---------- .../PointMarkerIconsSymbol.tsx | 0 .../microComponents/ClassificationDropDown.tsx | 2 +- .../user/Settings/EditProfile/EditProfileForm.tsx | 4 ++-- 4 files changed, 5 insertions(+), 13 deletions(-) rename public/assets/images/icons/{myForestMapIcons => projectV2}/PointMarkerIconsSymbol.tsx (100%) diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx index 2f4f56652e..75eea8895a 100644 --- a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx +++ b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx @@ -1,14 +1,6 @@ -import { IconProps } from '../../../../../src/features/common/types/common'; - -const DefaultProfileImageIcon = ({ width = 48, height = 48 }: IconProps) => { +const DefaultProfileImageIcon = () => { return ( - + ) : (
- +
)} From 35f4c74c0dcbbb9ab9ee5195d4b082680d0e78f5 Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Mon, 13 Jan 2025 16:14:20 +0530 Subject: [PATCH 6/8] Removed background behind profile default images --- src/features/user/Profile/ProfileCard/index.tsx | 4 +--- .../user/Settings/EditProfile/EditProfile.module.scss | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/features/user/Profile/ProfileCard/index.tsx b/src/features/user/Profile/ProfileCard/index.tsx index 5a37e4655d..e9d8189c20 100644 --- a/src/features/user/Profile/ProfileCard/index.tsx +++ b/src/features/user/Profile/ProfileCard/index.tsx @@ -25,9 +25,7 @@ const ProfileCard = ({ userProfile, profilePageType }: ProfileV2Props) => { {userImageUrl && !userImageUrl.includes('development') ? ( ) : ( - - - + )}
diff --git a/src/features/user/Settings/EditProfile/EditProfile.module.scss b/src/features/user/Settings/EditProfile/EditProfile.module.scss index 840ea04f8e..c8bb23b2c0 100644 --- 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; From 12d1b5fdf0be695726f0c8e4a3d2d08e8870d27e Mon Sep 17 00:00:00 2001 From: Rupam Kairi Date: Tue, 14 Jan 2025 11:40:16 +0530 Subject: [PATCH 7/8] reduced whitespace around the svg --- .../icons/headerIcons/DefaultProfileImageIcon.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx index 75eea8895a..7b033e6926 100644 --- a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx +++ b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx @@ -1,16 +1,8 @@ const DefaultProfileImageIcon = () => { return ( - - + + Date: Tue, 14 Jan 2025 12:32:56 +0530 Subject: [PATCH 8/8] minor adjustments --- .../icons/headerIcons/DefaultProfileImageIcon.tsx | 1 - .../icons/projectV2/PointMarkerIconsSymbol.tsx | 12 ++++++------ 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx index 7b033e6926..c23e9e9f62 100644 --- a/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx +++ b/public/assets/images/icons/headerIcons/DefaultProfileImageIcon.tsx @@ -2,7 +2,6 @@ const DefaultProfileImageIcon = () => { return ( - { @@ -48,7 +48,7 @@ export const Conservation = ({ color }: IconProps) => { }; export const ManagedRegeneration = ({ - color = 'defaultColor', + color = 'currentColor', width, height, }: IconProps) => { @@ -100,7 +100,7 @@ export const ManagedRegeneration = ({ }; export const Mangroves = ({ - color = 'defaultColor', + color = 'currentColor', width, height, }: IconProps) => { @@ -122,7 +122,7 @@ export const Mangroves = ({ }; export const NaturalRegeneration = ({ - color = 'defaultColor', + color = 'currentColor', width, height, }: IconProps) => { @@ -196,7 +196,7 @@ export const RegisteredTreeIcon = () => { }; export const TreePlanting = ({ - color = 'defaultColor', + color = 'currentColor', width, height, }: IconProps) => { @@ -228,7 +228,7 @@ export const TreePlanting = ({ }; export const UrbanRestoration = ({ - color = 'defaultColor', + color = 'currentColor', width, height, }: IconProps) => {