feat: extracts ProjectTitle into own component

- creates ProjectTitle component with simplified code - extracts VerifiedBadge (popover) code to separate component - moves specific component styles - from global styles (donations.scss) - moves mui theme based styles to theme - separates logic to show project info from render statement - gives a min width to popover (refer #408) - removes code duplication of popover code (ref #408) - aligns verified icon and project title (ref #408)
Plant-for-the-Planet-org · May 18, 2023 · 804d537 · 804d537
1 parent 989c43a
commit 804d537
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 115 deletions.
diff --git a/src/Donations/LeftPanel/LeftPanel.module.scss b/src/Donations/LeftPanel/LeftPanel.module.scss
@@ -103,6 +103,33 @@
   color: $light;
 }
 
+.project-title {
+  display: flex;
+  align-items: stretch;
+  flex-wrap: wrap;
+  column-gap: 10px;
+  margin-top: 10px;
+
+  a,
+  h1 {
+    color: $light;
+  }
+}
+
+.verified-badge {
+  display: flex;
+  align-items: center;
+  height: 1.43em; //hack to match line height of h1 tag
+}
+
+.verified-badge-popup {
+  max-width: 800px;
+  padding: 0.5rem;
+  margin-right: 20px;
+  margin-left: 10px;
+  pointer-events: none;
+}
+
 @include smTabletView {
   .left-panel-container {
     padding: 30px;

diff --git a/src/Donations/LeftPanel/LeftPanelInfo.tsx b/src/Donations/LeftPanel/LeftPanelInfo.tsx
@@ -1,8 +1,6 @@
-import { ReactElement, useState, MouseEvent } from "react";
-import { Typography, Popover } from "@mui/material";
+import { ReactElement } from "react";
 import { useTranslation } from "next-i18next";
 import { useRouter } from "next/router";
-import VerifiedIcon from "@mui/icons-material/Verified";
 import { ContactDetails, NoGift } from "@planet-sdk/common";
 import {
   FetchedProjectDetails,
@@ -13,6 +11,7 @@ import {
 } from "src/Common/Types";
 import Avatar from "./Avatar";
 import TransactionSummary from "./TransactionSummary";
+import ProjectTitle from "./ProjectTitle";
 
 interface Props {
   isMobile: boolean;
@@ -51,23 +50,13 @@ const LeftPanelInfo = ({
   tenant,
   country,
 }: Props): ReactElement | null => {
-  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
-  const open = Boolean(anchorElement);
-
   const { t, i18n } = useTranslation("common");
   const router = useRouter();
 
   const canShowAvatar = donationStep !== null && donationStep > 0;
   const canShowTransactionSummary =
     paymentSetup !== null && (donationStep === 2 || donationStep === 3);
-
-  const handlePopoverOpen = (event: MouseEvent<HTMLElement>) => {
-    setAnchorElement(event.currentTarget);
-  };
-
-  const handlePopoverClose = () => {
-    setAnchorElement(null);
-  };
+  const canShowProject = donationStep !== null && donationStep > 0;
 
   return projectDetails ? (
     <div className="donations-info text-white">
@@ -80,90 +69,9 @@ const LeftPanelInfo = ({
           paymentSetup={paymentSetup}
         />
       )}
-      {donationStep && donationStep > 0 ? (
+      {canShowProject ? (
         <>
-          {projectDetails.purpose === "trees" ||
-          projectDetails.purpose === "conservation" ? (
-            <div className="project-title-container">
-              <a
-                rel="noreferrer"
-                target="_blank"
-                href={`https://www.trilliontreecampaign.org/${projectDetails.id}`}
-                className="title-text text-white"
-                style={{
-                  marginTop: "10px",
-                }}
-              >
-                {projectDetails.name}
-              </a>
-              {projectDetails?.isApproved && (
-                <div style={{ marginLeft: "10px", marginTop: "auto" }}>
-                  <Typography
-                    aria-owns={open ? "mouse-over-popover" : undefined}
-                    aria-haspopup="true"
-                    onMouseEnter={handlePopoverOpen}
-                    onMouseLeave={handlePopoverClose}
-                  >
-                    <VerifiedIcon sx={{ color: "#fff" }} />
-                  </Typography>
-                  <Popover
-                    id="mouse-over-popover"
-                    className="verified-icon-popup"
-                    open={open}
-                    anchorEl={anchorElement}
-                    anchorOrigin={{
-                      vertical: "bottom",
-                      horizontal: "left",
-                    }}
-                    transformOrigin={{
-                      vertical: "top",
-                      horizontal: isMobile ? "center" : "left",
-                    }}
-                    onClose={handlePopoverClose}
-                    disableRestoreFocus
-                    marginThreshold={0}
-                  >
-                    <Typography>{t("verifiedIconInfo")}</Typography>
-                  </Popover>
-                </div>
-              )}
-            </div>
-          ) : (
-            <h1 className="title-text text-white" style={{ marginTop: "10px" }}>
-              {projectDetails.name ? projectDetails.name : ""}
-              {projectDetails.name && projectDetails?.isApproved && (
-                <div className="d-inline" style={{ marginLeft: "10px" }}>
-                  <Typography
-                    aria-owns={open ? "mouse-over-popover" : undefined}
-                    aria-haspopup="true"
-                    onMouseEnter={handlePopoverOpen}
-                    onMouseLeave={handlePopoverClose}
-                  >
-                    <VerifiedIcon sx={{ color: "#fff" }} />
-                  </Typography>
-                  <Popover
-                    id="mouse-over-popover"
-                    className="verified-icon-popup"
-                    open={open}
-                    anchorEl={anchorElement}
-                    anchorOrigin={{
-                      vertical: "bottom",
-                      horizontal: "left",
-                    }}
-                    transformOrigin={{
-                      vertical: "top",
-                      horizontal: isMobile ? "center" : "left",
-                    }}
-                    onClose={handlePopoverClose}
-                    disableRestoreFocus
-                    marginThreshold={0}
-                  >
-                    <Typography>{t("verifiedIconInfo")}</Typography>
-                  </Popover>
-                </div>
-              )}
-            </h1>
-          )}
+          <ProjectTitle projectDetails={projectDetails} isMobile={isMobile} />
 
           {projectDetails.purpose === "funds" ||
           projectDetails.purpose === "bouquet" ? (

diff --git a/src/Donations/LeftPanel/ProjectTitle.tsx b/src/Donations/LeftPanel/ProjectTitle.tsx
@@ -0,0 +1,39 @@
+import { ReactElement } from "react";
+import {
+  FetchedProjectDetails,
+  PlanetCashSignupDetails,
+} from "src/Common/Types";
+import VerifiedBadge from "./VerifiedBadge";
+import styles from "./LeftPanel.module.scss";
+
+interface Props {
+  projectDetails: FetchedProjectDetails | PlanetCashSignupDetails;
+  isMobile: boolean;
+}
+
+const ProjectTitle = ({ projectDetails, isMobile }: Props): ReactElement => {
+  const isLinked =
+    projectDetails.purpose === "trees" ||
+    projectDetails.purpose === "conservation";
+
+  return (
+    <div className={`${styles["project-title"]} title-text`}>
+      {isLinked ? (
+        <a
+          rel="noreferrer"
+          target="_blank"
+          href={`https://www.trilliontreecampaign.org/${projectDetails.id}`}
+        >
+          <h1>{projectDetails.name}</h1>
+        </a>
+      ) : (
+        <h1>{projectDetails.name}</h1>
+      )}
+      {projectDetails.name && projectDetails?.isApproved && (
+        <VerifiedBadge isMobile={isMobile} />
+      )}
+    </div>
+  );
+};
+
+export default ProjectTitle;
diff --git a/src/Donations/LeftPanel/VerifiedBadge.tsx b/src/Donations/LeftPanel/VerifiedBadge.tsx
@@ -0,0 +1,59 @@
+import { ReactElement, useState, MouseEvent } from "react";
+import { useTranslation } from "next-i18next";
+import VerifiedIcon from "@mui/icons-material/Verified";
+import { Typography, Popover } from "@mui/material";
+import styles from "./LeftPanel.module.scss";
+
+interface Props {
+  isMobile: boolean;
+}
+
+const VerifiedBadge = ({ isMobile }: Props): ReactElement => {
+  const { t } = useTranslation("common");
+
+  const [anchorElement, setAnchorElement] = useState<HTMLElement | null>(null);
+  const isPopoverOpen = anchorElement !== null;
+
+  const handlePopoverOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorElement(event.currentTarget);
+  };
+
+  const handlePopoverClose = () => {
+    setAnchorElement(null);
+  };
+
+  return (
+    <>
+      <div
+        aria-owns={isPopoverOpen ? "mouse-over-popover" : undefined}
+        aria-haspopup="true"
+        onMouseEnter={handlePopoverOpen}
+        onMouseLeave={handlePopoverClose}
+        className={styles["verified-badge"]}
+      >
+        <VerifiedIcon sx={{ color: "#fff" }} />
+      </div>
+      <Popover
+        id="mouse-over-popover"
+        className={styles["verified-badge-popup"]}
+        open={isPopoverOpen}
+        anchorEl={anchorElement}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "left",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: isMobile ? "center" : "left",
+        }}
+        onClose={handlePopoverClose}
+        disableRestoreFocus
+        marginThreshold={0}
+      >
+        <Typography>{t("verifiedIconInfo")}</Typography>
+      </Popover>
+    </>
+  );
+};
+
+export default VerifiedBadge;
diff --git a/styles/donations.scss b/styles/donations.scss
@@ -83,10 +83,6 @@
   }
 }
 
-.project-title-container {
-  display: flex;
-}
-
 .donations-transaction-details {
   font-size: 12px;
   color: $light;
@@ -974,17 +970,3 @@
     text-align: left;
   }
 }
-
-.verified-icon-popup {
-  max-width: 800px;
-  padding: 0.5rem;
-  margin-right: 20px;
-  pointer-events: none;
-}
-
-.MuiTypography-root {
-  display: inline;
-}
-.MuiPaper-root {
-  padding: 10px;
-}
diff --git a/styles/muiTheme.ts b/styles/muiTheme.ts
@@ -24,6 +24,20 @@ const MuiTheme = createTheme({
         },
       },
     },
+    MuiPaper: {
+      styleOverrides: {
+        root: {
+          padding: "10px",
+        },
+      },
+    },
+    MuiPopover: {
+      styleOverrides: {
+        paper: {
+          minWidth: "240px",
+        },
+      },
+    },
   },
 });