Release August 16th, 2022

package.json

@@ -72,7 +72,7 @@
     "luma.gl": "^7.3.2",
     "mapbox-gl": "^1.13.0",
     "mapbox-gl-compare": "^0.4.0",
-    "moment": "^2.29.2",
+    "moment": "^2.29.4",
     "next": "^11.1.4",
     "next-compose-plugins": "^2.2.1",
     "next-i18next": "^6.0.3",

public/static/locales/en/common.json

@@ -91,7 +91,5 @@
   "forbidden": "You are not allowed to view this page!",
   "internalServerError": "Internal Server Error - Please try again later!",
   "validationFailed": "Validation Failed!",
-  "add": "Add",
-  "poweredBy": "Powered by",
-  "pftp": "Plant-for-the-Planet"
+  "add": "Add"
 }

src/features/common/InputTypes/MuiButton.tsx

@@ -0,0 +1,22 @@
+import { Button, styled } from '@mui/material';
+import themeProperties from '../../../theme/themeProperties';
+
+// replace styles here with theme when consolidating the Mui Themes. Use theme palette etc.
+const MuiButton = styled(Button)({
+  '&.MuiButton-root': {
+    textTransform: 'capitalize',
+    borderRadius: 28,
+    fontWeight: 600,
+  },
+  '&.MuiButton-outlinedPrimary': {
+    backgroundColor: themeProperties.light.light,
+    color: themeProperties.primaryColor,
+    borderColor: themeProperties.primaryColor,
+  },
+  '&.MuiButton-containedPrimary': {
+    color: themeProperties.light.light,
+    background: themeProperties.primaryColor,
+  },
+});
+
+export default MuiButton;

src/features/common/LandingVideo/PlayButton.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { useRouter } from 'next/router';
 import PlayIcon from '../../../../public/assets/images/icons/PlayIcon';
 import styles from './styles.module.scss';
 import i18next from '../../../../i18n';
@@ -13,11 +14,16 @@ interface Props {
 export default function PlayButton({ setshowVideo }: Props): ReactElement {
   const { embed } = React.useContext(ParamsContext);
   const { t } = useTranslation(['common']);
+  const { pathname } = useRouter();
+
+  const playButtonClasses = `${
+    embed === 'true' ? styles.embed_playButton : styles.playButton
+  } ${pathname === '/[p]' ? styles['playButton--reduce-right-offset'] : ''}`;
   return (
     <div
       title={t('howDoesThisWork')}
       onClick={() => setshowVideo(true)}
-      className={embed === 'true' ? styles.embed_playButton : styles.playButton}
+      className={playButtonClasses}
     >
       <PlayIcon />
     </div>

src/features/common/LandingVideo/styles.module.scss

@@ -113,9 +113,14 @@
   line-height: 16px;
   cursor: pointer;
   z-index: 11;
+
   > svg {
     width: 15px;
   }
+
+  &.playButton--reduce-right-offset {
+    right: 10px;
+  }
 }
 
 .playButton {
@@ -136,14 +141,21 @@
   }
 }
 @include mdTabletView {
-  .playButton {
-    top: 110px;
+  .playButton,
+  .embed_playButton {
     right: 125px;
     flex-direction: row;
+
+    &.playButton--reduce-right-offset {
+      right: 20px;
+    }
+  }
+
+  .playButton {
+    top: 110px;
   }
 
   .embed_playButton {
-    right: 125px;
     top: 30px;
   }
 }

src/features/common/Layout/Navbar/index.tsx

@@ -66,7 +66,7 @@ export default function NavbarComponent(props: any) {
   async function gotoUserPage() {
     if (user) {
       if (typeof window !== 'undefined') {
-        router.push(`/t/${user.slug}`);
+        router.push(`/profile`);
       }
     } else {
       //----------------- To do - redirect to slug -----------------

src/features/common/Layout/QueryParamsContext.tsx

@@ -7,24 +7,32 @@ const { useTranslation } = i18next;
 type QueryParamType = string | undefined | string[] | null;
 export interface ParamsContextType {
   embed: QueryParamType;
-  singleProject: QueryParamType;
+  showBackIcon: QueryParamType;
   callbackUrl: QueryParamType;
   language: QueryParamType;
+  showProjectDetails: QueryParamType;
+  showProjectList: QueryParamType;
 }
 export const ParamsContext = createContext<ParamsContextType>({
   embed: undefined,
-  singleProject: undefined,
+  showBackIcon: undefined,
   callbackUrl: undefined,
   language: undefined,
+  showProjectDetails: undefined,
+  showProjectList: undefined,
 });
 
 const QueryParamsProvider: FC = ({ children }) => {
   const { i18n } = useTranslation();
 
   const [embed, setEmbed] = useState<QueryParamType>(undefined);
-  const [singleProject, setSingleProject] = useState<QueryParamType>(undefined);
+  const [showBackIcon, setShowBackIcon] = useState<QueryParamType>(undefined);
   const [callbackUrl, setCallbackUrl] = useState<QueryParamType>(undefined);
   const [language, setLanguage] = useState<QueryParamType>(undefined);
+  const [showProjectDetails, setShowProjectDetails] =
+    useState<QueryParamType>(undefined);
+  const [showProjectList, setShowProjectList] =
+    useState<QueryParamType>(undefined);
   const router = useRouter();
   const { query } = router;
 
@@ -33,8 +41,8 @@ const QueryParamsProvider: FC = ({ children }) => {
   }, [query.embed]);
 
   useEffect(() => {
-    if (query.singleProject) setSingleProject(query.singleProject);
-  }, [query.singleProject]);
+    if (query.back_icon) setShowBackIcon(query.back_icon);
+  }, [query.back_icon]);
 
   useEffect(() => {
     if (query.callback) setCallbackUrl(query.callback);
@@ -44,6 +52,16 @@ const QueryParamsProvider: FC = ({ children }) => {
     if (query.locale) setLanguage(query.locale);
   }, [query.locale]);
 
+  useEffect(() => {
+    if (query.project_details === 'true' || query.project_details === 'false')
+      setShowProjectDetails(query.project_details);
+  }, [query.project_details]);
+
+  useEffect(() => {
+    if (query.project_list === 'true' || query.project_list === 'false')
+      setShowProjectList(query.project_list);
+  }, [query.project_list]);
+
   useEffect(() => {
     if (i18n && i18n.isInitialized && language) {
       i18n.changeLanguage(language as string);
@@ -55,9 +73,11 @@ const QueryParamsProvider: FC = ({ children }) => {
     <ParamsContext.Provider
       value={{
         embed,
-        singleProject,
+        showBackIcon,
         callbackUrl,
         language,
+        showProjectDetails,
+        showProjectList,
       }}
     >
       {children}

src/features/common/Layout/UserLayout/UserLayout.module.scss

@@ -12,6 +12,7 @@
   }
   @include xsPhoneView {
     padding-left: 0;
+    margin-left: 0;
     & .hamburgerIcon {
       display: block;
       position: fixed;

src/features/projects/components/maps/Credits.tsx

@@ -136,10 +136,10 @@ export default function Credits({ setCurrencyCode }: Props): ReactElement {
 
         {isEmbed && (
           <span>
-            {t('common:poweredBy')}
+            Powered by
             <a href="https://www.plant-for-the-planet.org" target="_top">
               {' '}
-              {t('common:pftp')}
+              Plant-for-the-Planet
             </a>
           </span>
         )}

src/features/projects/components/maps/ImageDropdown.tsx

@@ -31,7 +31,7 @@ export default function ImageDropdown({
   setSelectedSource2,
   isMobile,
 }: Props): ReactElement {
-  const { embed } = React.useContext(ParamsContext);
+  const { embed, showProjectDetails } = React.useContext(ParamsContext);
 
   const [isSource1MenuOpen, setIsSource1MenuOpen] = React.useState(
     isMobile ? false : true
@@ -59,15 +59,16 @@ export default function ImageDropdown({
     if (isMobile) setIsSource2MenuOpen(false);
   };
 
+  const containerClasses =
+    embed !== 'true'
+      ? styles.dropdownContainer
+      : showProjectDetails === 'false'
+      ? `${styles.embed_dropdownContainer} ${styles['no-project-details']}`
+      : styles.embed_dropdownContainer;
+
   return (
     <>
-      <div
-        className={
-          embed === 'true'
-            ? styles.embed_dropdownContainer
-            : styles.dropdownContainer
-        }
-      >
+      <div className={containerClasses}>
         <div className={styles.beforeYear}>
           <FormControl variant="standard">
             <NativeSelect

src/features/projects/components/maps/ProjectTabs.tsx

@@ -1,4 +1,5 @@
 import React, { ReactElement } from 'react';
+import { useRouter } from 'next/router';
 import i18next from '../../../../../i18n';
 import LocationIcon from '../../../../../public/assets/images/icons/LocationIcon';
 import ResearchIcon from '../../../../../public/assets/images/icons/ResearchIcon';
@@ -10,20 +11,23 @@ import { ParamsContext } from '../../../common/Layout/QueryParamsContext';
 interface Props {}
 
 export default function ProjectTabs({}: Props): ReactElement {
-  const { embed } = React.useContext(ParamsContext);
+  const { embed, showProjectDetails } = React.useContext(ParamsContext);
+  const { pathname } = useRouter();
   const { useTranslation } = i18next;
   const { i18n, t } = useTranslation(['maps']);
   const { selectedMode, setSelectedMode, rasterData } =
     React.useContext(ProjectPropsContext);
+
+  const containerClasses =
+    embed !== 'true'
+      ? styles.VegetationChangeContainer
+      : pathname === '/[p]' && showProjectDetails === 'false'
+      ? `${styles.embed_VegetationChangeContainer} ${styles['no-project-details']}`
+      : styles.embed_VegetationChangeContainer;
+
   return (
     <>
-      <div
-        className={
-          embed === 'true'
-            ? styles.embed_VegetationChangeContainer
-            : styles.VegetationChangeContainer
-        }
-      >
+      <div className={containerClasses}>
         <div
           onClick={() => {
             setSelectedMode('location');

src/features/projects/components/maps/SitesDropdown.tsx

@@ -1,5 +1,6 @@
 import { FormControl, NativeSelect } from '@mui/material';
 import React, { ReactElement } from 'react';
+import { useRouter } from 'next/router';
 import PolygonIcon from '../../../../../public/assets/images/icons/PolygonIcon';
 import styles from '../../styles/ProjectsMap.module.scss';
 import BootstrapInput from '../../../common/InputTypes/BootstrapInput';
@@ -16,12 +17,28 @@ export default function SitesDropdown(): ReactElement {
     isPolygonMenuOpen,
     setIsPolygonMenuOpen,
   } = React.useContext(ProjectPropsContext);
+  const { embed } = React.useContext(ParamsContext);
+  const { pathname } = useRouter();
 
   const handleChangeSite = (event: React.ChangeEvent<{ value: unknown }>) => {
     setSelectedSite(event.target.value as string);
     if (isMobile) setIsPolygonMenuOpen(false);
   };
-  const { embed } = React.useContext(ParamsContext);
+
+  const dropdownContainerClasses = `${
+    embed === 'true' ? styles.embed_dropdownContainer : styles.dropdownContainer
+  } ${
+    pathname === '/[p]' ? styles['dropdownContainer--reduce-right-offset'] : ''
+  }`;
+
+  const projectSitesButtonClasses = `${
+    embed === 'true'
+      ? styles.embed_projectSitesButton
+      : styles.projectSitesButton
+  } ${
+    pathname === '/[p]' ? styles['projectSitesButton--reduce-right-offset'] : ''
+  }`;
+
   return (
     <>
       {geoJson.features.length > 1 && (
@@ -34,23 +51,13 @@ export default function SitesDropdown(): ReactElement {
               onClick={() => {
                 if (!isMobile) setIsPolygonMenuOpen(true);
               }}
-              className={
-                embed === 'true'
-                  ? styles.embed_projectSitesButton
-                  : styles.projectSitesButton
-              }
+              className={projectSitesButtonClasses}
             >
               <PolygonIcon />
             </div>
           ) : null}
           {isPolygonMenuOpen ? (
-            <div
-              className={
-                embed === 'true'
-                  ? styles.embed_dropdownContainer
-                  : styles.dropdownContainer
-              }
-            >
+            <div className={dropdownContainerClasses}>
               <div className={styles.projectSitesDropdown}>
                 <FormControl variant="standard">
                   <div className={styles.polygonIcon}>