From cab5c17842a2a502b08f5792ff049d14f9da7194 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 11:31:10 -0400
Subject: [PATCH 1/2] update style in terramatch pages

---
 .../PageElements/Footer/PageFooter.tsx        |  6 +-
 src/pages/auth/layout.tsx                     | 36 ++++++++++
 .../signup/components/usePasswordStrength.tsx | 70 +++++++++++++++++++
 .../create/[frameworkUUID].page.tsx           |  2 +
 .../[entityName]/edit/[uuid]/index.page.tsx   |  3 +
 src/pages/home.page.tsx                       |  8 ++-
 src/pages/my-projects/index.page.tsx          |  4 ++
 src/pages/nursery/[uuid]/index.page.tsx       |  2 +-
 src/pages/opportunities/index.page.tsx        |  5 ++
 .../[id]/components/BuildStrongerProfile.tsx  |  2 +-
 .../organization/[id]/components/Files.tsx    |  2 +-
 .../[id]/components/OrganizationHeader.tsx    | 48 +++++++------
 .../financial/FinancialInformation.tsx        |  2 +-
 .../[id]/components/overview/About.tsx        |  4 +-
 .../overview/PastCommunityExperience.tsx      |  4 +-
 .../components/overview/TeamAndResources.tsx  |  5 +-
 .../projects/ProjectsTabContent.tsx           |  4 +-
 .../[id]/components/team/TeamTabContent.tsx   |  4 +-
 src/pages/organization/[id]/index.page.tsx    |  4 +-
 src/pages/project/[uuid]/index.page.tsx       |  4 +-
 src/pages/project/[uuid]/tabs/Details.tsx     |  2 +
 src/pages/project/[uuid]/tabs/Gallery.tsx     |  2 +
 .../project/[uuid]/tabs/GoalsAndProgress.tsx  | 21 +++---
 .../project/[uuid]/tabs/ProjectSites.tsx      |  9 +--
 .../project/[uuid]/tabs/ReportingTasks.tsx    |  2 +
 src/pages/site/[uuid]/index.page.tsx          |  4 +-
 .../site/[uuid]/tabs/CompletedReports.tsx     |  2 +
 src/pages/site/[uuid]/tabs/Details.tsx        |  2 +
 .../site/[uuid]/tabs/GoalsAndProgress.tsx     | 11 ++-
 29 files changed, 211 insertions(+), 63 deletions(-)
 create mode 100644 src/pages/auth/layout.tsx
 create mode 100644 src/pages/auth/signup/components/usePasswordStrength.tsx

diff --git a/src/components/extensive/PageElements/Footer/PageFooter.tsx b/src/components/extensive/PageElements/Footer/PageFooter.tsx
index 1fe973c0c..d31e4db5b 100644
--- a/src/components/extensive/PageElements/Footer/PageFooter.tsx
+++ b/src/components/extensive/PageElements/Footer/PageFooter.tsx
@@ -1,6 +1,6 @@
 import Icon, { IconNames } from "../../Icon/Icon";
 
-const PageFooter = () => {
+const PageFooter = () => (
   <div className="mt-0 flex h-28 items-center justify-between bg-[#353535] px-28 text-white" style={{ marginTop: 0 }}>
     <div className="flex">
       <Icon name={IconNames.FACEBOOK} className="mr-4" />
@@ -9,7 +9,7 @@ const PageFooter = () => {
     </div>
     <Icon name={IconNames.WRI_LOGO} width={108} height={30} className="min-w-[108px]" />
     <p> © TerraMatch 2024</p>
-  </div>;
-};
+  </div>
+);
 
 export default PageFooter;
diff --git a/src/pages/auth/layout.tsx b/src/pages/auth/layout.tsx
new file mode 100644
index 000000000..6d54b1005
--- /dev/null
+++ b/src/pages/auth/layout.tsx
@@ -0,0 +1,36 @@
+"use client";
+import { Button } from "@mui/material";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { When } from "react-if";
+
+import Text from "@/components/elements/Text/Text";
+
+interface LoginLayoutProps {
+  children: React.ReactNode;
+}
+
+const LoginLayout: React.FC<LoginLayoutProps> = props => {
+  const { children } = props;
+  const pathname = usePathname();
+
+  return (
+    <div className="relative flex h-screen w-full bg-square-pattern bg-contain bg-right bg-no-repeat">
+      <div className="mt-[-78px] flex w-[45%] flex-col items-center justify-center py-[78px]">
+        {children}
+        <When condition={pathname !== "/sign-up"}>
+          <div className="absolute bottom-[1.5vh] left-6">
+            <Button>
+              <Text variant="text-12-bold" className="text-primary">
+                English (United Kingdom)
+              </Text>
+            </Button>
+          </div>
+        </When>
+      </div>
+      <div className="flex w-[55%] items-center justify-end" />
+    </div>
+  );
+};
+
+export default LoginLayout;
diff --git a/src/pages/auth/signup/components/usePasswordStrength.tsx b/src/pages/auth/signup/components/usePasswordStrength.tsx
new file mode 100644
index 000000000..76628d154
--- /dev/null
+++ b/src/pages/auth/signup/components/usePasswordStrength.tsx
@@ -0,0 +1,70 @@
+import { useEffect, useState } from "react";
+
+interface UsePasswordStrengthProps {
+  password: string;
+}
+
+interface UsePasswordStrengthResult {
+  passwordStrength: string;
+  values: {
+    hasUppercase: boolean;
+    hasLowercase: boolean;
+    hasNumber: boolean;
+    hasCorrectLength: boolean;
+  };
+  validationCount: number;
+}
+
+const ValidationStrength = {
+  STRONG: 4,
+  FAIR: 3,
+  WEAK: 2,
+  VERY_WEAK: 1
+};
+const usePasswordStrength = (props: UsePasswordStrengthProps): UsePasswordStrengthResult => {
+  const { password } = props;
+  const [passwordStrength, setPasswordStrength] = useState("Very Weak");
+  const [values, setValues] = useState({
+    hasUppercase: false,
+    hasLowercase: false,
+    hasNumber: false,
+    hasCorrectLength: false
+  });
+
+  const [validation, setValidation] = useState<boolean[]>([]);
+
+  useEffect(() => {
+    const hasCorrectLength = password.length >= 8;
+    const hasUppercase = (password.match(/[A-Z]/g) || []).length > 0;
+    const hasLowercase = (password.match(/[a-z]/g) || []).length > 0;
+    const hasNumber = (password.match(/[0-9]/g) || []).length > 0;
+
+    const _validation = [hasUppercase, hasLowercase, hasNumber, hasCorrectLength];
+
+    const strengthMap = {
+      [ValidationStrength.STRONG]: "Strong",
+      [ValidationStrength.FAIR]: "Fair",
+      [ValidationStrength.WEAK]: "Weak"
+    };
+
+    setValues({
+      hasUppercase,
+      hasLowercase,
+      hasNumber,
+      hasCorrectLength
+    });
+
+    setValidation(_validation);
+    const validationCount = _validation.filter(value => value === true).length;
+
+    setPasswordStrength(strengthMap[validationCount]);
+  }, [password]);
+
+  return {
+    passwordStrength,
+    values,
+    validationCount: validation.filter(Boolean).length
+  };
+};
+
+export default usePasswordStrength;
diff --git a/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx b/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
index 5330d01c7..9175fc4cc 100644
--- a/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
+++ b/src/pages/entity/[entityName]/create/[frameworkUUID].page.tsx
@@ -2,6 +2,7 @@ import { useT } from "@transifex/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import WizardFormIntro from "@/components/extensive/WizardForm/WizardFormIntro";
 import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
 import ContentLayout from "@/components/generic/Layout/ContentLayout";
@@ -111,6 +112,7 @@ const EntityIntroPage = () => {
           />
         </LoadingContainer>
       </ContentLayout>
+      <PageFooter />
     </BackgroundLayout>
   );
 };
diff --git a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
index 510e025f3..ffe2ca324 100644
--- a/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
+++ b/src/pages/entity/[entityName]/edit/[uuid]/index.page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation";
 import { useRouter } from "next/router";
 import { useMemo } from "react";
 
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import WizardForm from "@/components/extensive/WizardForm";
 import BackgroundLayout from "@/components/generic/Layout/BackgroundLayout";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
@@ -154,6 +155,8 @@ const EditEntityPage = () => {
           }}
         />
       </LoadingContainer>
+      <br />
+      <PageFooter />
     </BackgroundLayout>
   );
 };
diff --git a/src/pages/home.page.tsx b/src/pages/home.page.tsx
index 710b46183..73df2e65c 100644
--- a/src/pages/home.page.tsx
+++ b/src/pages/home.page.tsx
@@ -8,6 +8,7 @@ import ActionTracker from "@/components/extensive/ActionTracker/ActionTracker";
 import FundingCarouselList from "@/components/extensive/FundingsCarouselList/FundingsCarouselList";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import TaskList from "@/components/extensive/TaskList/TaskList";
 import { useGetHomeTourItems } from "@/components/extensive/WelcomeTour/useGetHomeTourItems";
@@ -39,7 +40,7 @@ const HomePage = () => {
         <title>{t("Home")}</title>
       </Head>
       <PageSection>
-        <Text variant="text-heading-700" className="text-center">
+        <Text variant="text-36-bold" className="text-center">
           {t("What would you like to do?")}
         </Text>
       </PageSection>
@@ -65,9 +66,9 @@ const HomePage = () => {
         </LoadingContainer>
       </When>
       <When condition={!!myOrg}>
-        <PageSection>
+        <PageSection className="flex justify-center bg-white pb-10" hasFull>
           <TaskList
-            title={t("Get Ready for Funding Opportunities")}
+            title={t(`Get Ready for <br> Funding Opportunities`)}
             subtitle={t("Keep your information updated to have more chances of having a successful application.")}
             items={[
               {
@@ -96,6 +97,7 @@ const HomePage = () => {
           />
         </PageSection>
       </When>
+      <PageFooter />
     </PageBody>
   );
 };
diff --git a/src/pages/my-projects/index.page.tsx b/src/pages/my-projects/index.page.tsx
index 7c55b732a..6c4e7f49c 100644
--- a/src/pages/my-projects/index.page.tsx
+++ b/src/pages/my-projects/index.page.tsx
@@ -11,6 +11,7 @@ import Text from "@/components/elements/Text/Text";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import List from "@/components/extensive/List/List";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
@@ -88,6 +89,9 @@ const MyProjectsPage = () => {
             </Else>
           </If>
         </LoadingContainer>
+        <br />
+        <br />
+        <PageFooter />
       </PageBody>
     </>
   );
diff --git a/src/pages/nursery/[uuid]/index.page.tsx b/src/pages/nursery/[uuid]/index.page.tsx
index 364552260..d81a0c6a5 100644
--- a/src/pages/nursery/[uuid]/index.page.tsx
+++ b/src/pages/nursery/[uuid]/index.page.tsx
@@ -147,7 +147,7 @@ const NurseryDetailPage = () => {
             body: <CompletedReportsTab nursery={nursery} />
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full  overflow-y-hidden"
       />
     </LoadingContainer>
   );
diff --git a/src/pages/opportunities/index.page.tsx b/src/pages/opportunities/index.page.tsx
index 5b3f7693b..9b80013fb 100644
--- a/src/pages/opportunities/index.page.tsx
+++ b/src/pages/opportunities/index.page.tsx
@@ -12,6 +12,7 @@ import FundingCarouselList from "@/components/extensive/FundingsCarouselList/Fun
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import PageSection from "@/components/extensive/PageElements/Section/PageSection";
 import ApplicationsTable from "@/components/extensive/Tables/ApplicationsTable";
@@ -146,7 +147,11 @@ const OpportunitiesPage = () => {
             </PageSection>
           </Else>
         </If>
+        <br />
+        <br />
       </PageBody>
+
+      <PageFooter />
     </>
   );
 };
diff --git a/src/pages/organization/[id]/components/BuildStrongerProfile.tsx b/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
index e1562824c..77d0f37a7 100644
--- a/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
+++ b/src/pages/organization/[id]/components/BuildStrongerProfile.tsx
@@ -21,7 +21,7 @@ const BuildStrongerProfile = ({ subtitle, steps, onEdit }: BuildStrongerProfileP
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <div className="flex flex-col gap-4">
         <div className="flex items-center justify-between">
           <Text variant="text-heading-2000">{t("Build a Stronger Profile")}</Text>
diff --git a/src/pages/organization/[id]/components/Files.tsx b/src/pages/organization/[id]/components/Files.tsx
index a8ad7883f..6eb518265 100644
--- a/src/pages/organization/[id]/components/Files.tsx
+++ b/src/pages/organization/[id]/components/Files.tsx
@@ -14,7 +14,7 @@ type FilesProps = {
 
 const Files = ({ files, title }: FilesProps) => {
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <When condition={!!title}>
         <Text variant="text-heading-300" className="mb-10">
           {title}
diff --git a/src/pages/organization/[id]/components/OrganizationHeader.tsx b/src/pages/organization/[id]/components/OrganizationHeader.tsx
index 9d38e1a36..e465f8e28 100644
--- a/src/pages/organization/[id]/components/OrganizationHeader.tsx
+++ b/src/pages/organization/[id]/components/OrganizationHeader.tsx
@@ -49,33 +49,35 @@ const OrganizationHeader = ({ organization }: OrganizationHeaderProps) => {
             }}
           />
           {/* Content Container */}
-          <div className="tranform translate-y-[-70px]">
-            <Text variant="text-heading-2000" className="mb-3">
-              {organization?.name}
-            </Text>
-            <div className="flex flex-col gap-3">
-              <div className="flex items-start gap-1">
-                <Icon name={IconNames.MAP_PIN} width={13} className="mt-[2px]" />
-                <Text variant="text-body-900">
-                  {formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
-                </Text>
-              </div>
+        </section>
+        <div className="mt-8">
+          <Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
+        </div>
+      </Container>
+      <Container className="mb-6">
+        <div className="tranform translate-y-[-70px]">
+          <Text variant="text-heading-2000" className="mb-3">
+            {organization?.name}
+          </Text>
+          <div className="flex flex-col gap-3">
+            <div className="flex items-center gap-1">
+              <Icon name={IconNames.MAP_PIN} width={13} height={18} />
               <Text variant="text-body-900">
-                {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
+                {formatOptionsList(getCountriesOptions(t), organization?.hq_country ?? [])}
               </Text>
-              <Text variant="text-body-900">{organization?.description}</Text>
             </div>
+            <Text variant="text-body-900">
+              {formatOptionsList(getOrganisationTypeOptions(t), organization?.type!) || ""}
+            </Text>
+            <Text variant="text-body-400">{organization?.description}</Text>
           </div>
-          <div className="flex translate-y-[-30px] transform gap-6">
-            <IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
-            <IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
-            <IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
-            <IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
-            <IconSocial name={IconNames.EARTH} url={organization?.web_url} />
-          </div>
-        </section>
-        <div className="mt-8">
-          <Button onClick={showEditOrgModal}>{t("Edit Profile")}</Button>
+        </div>
+        <div className="flex translate-y-[-30px] transform gap-6">
+          <IconSocial name={IconNames.SOCIAL_FACEBOOK} url={organization?.facebook_url} />
+          <IconSocial name={IconNames.SOCIAL_INSTAGRAM} url={organization?.instagram_url} />
+          <IconSocial name={IconNames.SOCIAL_LINKEDIN} url={organization?.linkedin_url} />
+          <IconSocial name={IconNames.SOCIAL_TWITTER} url={organization?.twitter_url} />
+          <IconSocial name={IconNames.EARTH} url={organization?.web_url} />
         </div>
       </Container>
     </div>
diff --git a/src/pages/organization/[id]/components/financial/FinancialInformation.tsx b/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
index 57dda62e9..e08d43313 100644
--- a/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
+++ b/src/pages/organization/[id]/components/financial/FinancialInformation.tsx
@@ -22,7 +22,7 @@ const FinancialInformation = ({ organization }: FinancialInformationProps) => {
   ];
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <List
         className="flex flex-col gap-3"
         items={budgetRows}
diff --git a/src/pages/organization/[id]/components/overview/About.tsx b/src/pages/organization/[id]/components/overview/About.tsx
index f5b6cce55..89678f4ff 100644
--- a/src/pages/organization/[id]/components/overview/About.tsx
+++ b/src/pages/organization/[id]/components/overview/About.tsx
@@ -12,12 +12,12 @@ const About = ({ organization }: AboutProps) => {
   const t = useT();
 
   return (
-    <section className="my-15 bg-neutral-150 p-8">
+    <section className="my-15 rounded-lg bg-neutral-150 p-8">
       <div className="flex flex-col gap-4">
         <Text variant="text-heading-300">{t("About")}</Text>
         <Text variant="text-body-800">{organization?.description}</Text>
       </div>
-      <div className="mt-10 flex flex-col gap-3">
+      <div className="mt-10 flex flex-col gap-4">
         <TextRow name={t("Website:")} value={organization?.web_url} nameClassName="w-1/3" />
         <TextRow
           name={t("Headquarters:")}
diff --git a/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx b/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
index c76fdf6ba..5f72301c8 100644
--- a/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
+++ b/src/pages/organization/[id]/components/overview/PastCommunityExperience.tsx
@@ -18,9 +18,9 @@ const PastCommunityExperience = ({ organization }: PastCommunityExperienceProps)
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <Text variant="text-heading-300">{t("Social Impact")}</Text>
-      <div className="mt-10 flex flex-col gap-3">
+      <div className="mt-10 flex flex-col gap-4">
         <TextRow
           name={t("Engagement: Farmers")}
           value={formatOptionsList(getFarmersEngagementStrategyOptions(t), organization?.engagement_farmers)}
diff --git a/src/pages/organization/[id]/components/overview/TeamAndResources.tsx b/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
index 89a4a91e3..37d93a191 100644
--- a/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
+++ b/src/pages/organization/[id]/components/overview/TeamAndResources.tsx
@@ -3,6 +3,7 @@ import React from "react";
 import { When } from "react-if";
 
 import Table from "@/components/elements/Table/Table";
+import { VARIANT_TABLE_BORDER_ALL } from "@/components/elements/Table/TableVariants";
 import Text from "@/components/elements/Text/Text";
 import { V2OrganisationRead } from "@/generated/apiSchemas";
 
@@ -14,7 +15,7 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
   const t = useT();
 
   return (
-    <section className="my-10 bg-neutral-150 p-8">
+    <section className="my-10 rounded-lg bg-neutral-150 p-8">
       <Text variant="text-heading-300">{t("Team and Resources")}</Text>
       <div className="mt-10 flex flex-col gap-12">
         <When condition={organization?.leadership_team && organization?.leadership_team.length > 0}>
@@ -57,9 +58,11 @@ const TeamAndResources = ({ organization }: TeamAndResourcesProps) => {
               role: member.position,
               gender: member.gender
             }))}
+            variant={VARIANT_TABLE_BORDER_ALL}
           />
         </When>
         <Table
+          variant={VARIANT_TABLE_BORDER_ALL}
           columns={[
             {
               accessorKey: "label",
diff --git a/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx b/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
index 417d7c2f8..05152dedd 100644
--- a/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
+++ b/src/pages/organization/[id]/components/projects/ProjectsTabContent.tsx
@@ -6,6 +6,7 @@ import Button from "@/components/elements/Button/Button";
 import EmptyState from "@/components/elements/EmptyState/EmptyState";
 import StatusPill from "@/components/elements/StatusPill/StatusPill";
 import Table from "@/components/elements/Table/Table";
+import { VARIANT_TABLE_BORDER_ALL } from "@/components/elements/Table/TableVariants";
 import Text from "@/components/elements/Text/Text";
 import { getActionCardStatusMapper } from "@/components/extensive/ActionTracker/ActionTrackerCard";
 import { IconNames } from "@/components/extensive/Icon/Icon";
@@ -20,7 +21,7 @@ const ProjectsTabContent = () => {
   const { data: projectsData } = useGetV2MyProjects<{ data: GetV2MyProjectsResponse }>({});
 
   return (
-    <Container className="py-15 px-8">
+    <Container className="px-8 py-15">
       <If condition={(projectsData?.data?.length ?? 0) > 0}>
         <Then>
           <div className="mb-8 flex">
@@ -33,6 +34,7 @@ const ProjectsTabContent = () => {
           </div>
           <div className="rounded-xl p-8 shadow">
             <Table<GetV2MyProjectsResponse[0]>
+              variant={VARIANT_TABLE_BORDER_ALL}
               columns={[
                 { header: t("Title"), accessorKey: "name" },
                 {
diff --git a/src/pages/organization/[id]/components/team/TeamTabContent.tsx b/src/pages/organization/[id]/components/team/TeamTabContent.tsx
index 1039942cc..67acc352e 100644
--- a/src/pages/organization/[id]/components/team/TeamTabContent.tsx
+++ b/src/pages/organization/[id]/components/team/TeamTabContent.tsx
@@ -104,7 +104,7 @@ const TeamTabContent = () => {
         <Text variant="text-heading-2000">{t("Meet the Team")}</Text>
 
         <When condition={!!approvedUsers?.data.length}>
-          <div className="mt-12 bg-neutral-150 py-8 px-14">
+          <div className="mt-12 rounded-lg bg-neutral-150 py-8 px-14">
             <Text variant="text-heading-200">
               {t("Your Organizations' TerraMatch Users ({n})", { n: approvedUsers?.data.length })}
             </Text>
@@ -116,7 +116,7 @@ const TeamTabContent = () => {
           </div>
         </When>
         <When condition={!!pendingUsers?.data.length}>
-          <div className="mt-12 bg-neutral-150 py-8 px-14">
+          <div className="mt-12 rounded-lg bg-neutral-150 py-8 px-14">
             <Text variant="text-heading-200">
               {t("Requests to Join Organization ({n})", { n: pendingUsers?.data.length })}
             </Text>
diff --git a/src/pages/organization/[id]/index.page.tsx b/src/pages/organization/[id]/index.page.tsx
index a186183d0..ceebfbc15 100644
--- a/src/pages/organization/[id]/index.page.tsx
+++ b/src/pages/organization/[id]/index.page.tsx
@@ -3,6 +3,7 @@ import { useRouter } from "next/router";
 
 import SecondaryTabs from "@/components/elements/Tabs/Secondary/SecondaryTabs";
 import HeroBanner from "@/components/extensive/Banner/Hero/HeroBanner";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useGetV2OrganisationsUUID } from "@/generated/apiComponents";
 import { V2OrganisationRead } from "@/generated/apiSchemas";
@@ -35,7 +36,7 @@ const OrganizationPage = () => {
       />
       <OrganizationHeader organization={organizationData?.data} />
       <SecondaryTabs
-        containerClassName="max-w-4xl"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
         tabItems={[
           {
             key: "overview",
@@ -75,6 +76,7 @@ const OrganizationPage = () => {
           }
         ]}
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/project/[uuid]/index.page.tsx b/src/pages/project/[uuid]/index.page.tsx
index 8036db1b8..6018fbda3 100644
--- a/src/pages/project/[uuid]/index.page.tsx
+++ b/src/pages/project/[uuid]/index.page.tsx
@@ -9,6 +9,7 @@ import SecondaryTabs from "@/components/elements/Tabs/Secondary/SecondaryTabs";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import Modal from "@/components/extensive/Modal/Modal";
 import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useModalContext } from "@/context/modal.provider";
@@ -176,8 +177,9 @@ const ProjectDetailPage = () => {
             )
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/Details.tsx b/src/pages/project/[uuid]/tabs/Details.tsx
index 2f089e57d..1f0521a5d 100644
--- a/src/pages/project/[uuid]/tabs/Details.tsx
+++ b/src/pages/project/[uuid]/tabs/Details.tsx
@@ -211,6 +211,8 @@ const ProjectDetailTab = ({ project }: ProjectDetailsTabProps) => {
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/Gallery.tsx b/src/pages/project/[uuid]/tabs/Gallery.tsx
index bc059a9a5..a7862eef2 100644
--- a/src/pages/project/[uuid]/tabs/Gallery.tsx
+++ b/src/pages/project/[uuid]/tabs/Gallery.tsx
@@ -35,6 +35,8 @@ const GalleryTab = (props: EntityMapAndGalleryCardProps & { sharedDriveLink?: st
           </When>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
index 493871d5f..c17b61aa0 100644
--- a/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
+++ b/src/pages/project/[uuid]/tabs/GoalsAndProgress.tsx
@@ -4,6 +4,7 @@ import { Else, If, Then, When } from "react-if";
 import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
 import GenericField from "@/components/elements/Field/GenericField";
 import TextField from "@/components/elements/Field/TextField";
+import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
@@ -21,28 +22,23 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
   const { isPPC } = useFramework(project);
 
   return (
-    <PageBody>
+    <PageBody className="text-darkCustom">
       <PageRow>
         <PageCard title={t("Progress & Goals")}>
-          <div className="flex w-full flex-wrap gap-6">
+          <div className="flex w-full flex-wrap items-start gap-8">
             <If condition={isPPC}>
               <Then>
-                <GoalProgressCard label={t("Workday (PPC)")} value={project.workday_count} className="w-[170px]" />
+                <GoalProgressCard label={t("Workday (PPC)")} value={project.workday_count} />
               </Then>
               <Else>
                 <GoalProgressCard
                   label={t("Jobs Created")}
                   value={project.total_jobs_created}
                   limit={project.jobs_created_goal}
-                  className="w-[170px]"
                 />
               </Else>
             </If>
-            <GoalProgressCard
-              label={t("Hectares Restored Goal")}
-              value={project.total_hectares_restored_goal}
-              className="w-[170px]"
-            />
+            <GoalProgressCard label={t("Hectares Restored Goal")} value={project.total_hectares_restored_goal} />
             <GoalProgressCard
               label={t("Trees restored")}
               value={project.trees_restored_count}
@@ -56,7 +52,7 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
                   value: project.regenerated_trees_count
                 }
               ]}
-              className="flex-1"
+              className="flex-1 !items-start"
             />
           </div>
         </PageCard>
@@ -85,12 +81,15 @@ const GoalsAndProgressTab = ({ project }: GoalsAndProgressProps) => {
               <TextField label={t("Year 5 Grown Cover Goal (PPC)")} value={project.year_five_crown_cover} />
             </When>
             <TextField label={t("Survival Rate (Goal)")} value={project.survival_rate} />
+            <br />
             <GenericField label={t("Tree Species")}>
-              <TreeSpeciesTable modelName="project" modelUUID={project.uuid} />
+              <TreeSpeciesTable modelName="project" modelUUID={project.uuid} variantTable={VARIANT_TABLE_BORDER} />
             </GenericField>
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/ProjectSites.tsx b/src/pages/project/[uuid]/tabs/ProjectSites.tsx
index 3ed6a7e67..17f34b003 100644
--- a/src/pages/project/[uuid]/tabs/ProjectSites.tsx
+++ b/src/pages/project/[uuid]/tabs/ProjectSites.tsx
@@ -54,12 +54,7 @@ const ProjectSitesTab = ({ project }: ProjectNurseriesTabProps) => {
                 />
               </Then>
               <Else>
-                <PageCard
-                  title={t("Project Sites")}
-                  subtitle={t(
-                    "This table displays all the sites associated with this project. You can use it to keep track of your site approvals."
-                  )}
-                >
+                <PageCard title={t("Project Sites")}>
                   <SitesTable project={project} />
                 </PageCard>
               </Else>
@@ -67,6 +62,8 @@ const ProjectSitesTab = ({ project }: ProjectNurseriesTabProps) => {
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/project/[uuid]/tabs/ReportingTasks.tsx b/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
index f2f56c293..0e2175f88 100644
--- a/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
+++ b/src/pages/project/[uuid]/tabs/ReportingTasks.tsx
@@ -54,6 +54,8 @@ const ReportingTasksTab = (props: ReportingTasksProps) => {
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/index.page.tsx b/src/pages/site/[uuid]/index.page.tsx
index 6debfea7c..262073894 100644
--- a/src/pages/site/[uuid]/index.page.tsx
+++ b/src/pages/site/[uuid]/index.page.tsx
@@ -10,6 +10,7 @@ import { getActionCardStatusMapper } from "@/components/extensive/ActionTracker/
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import Modal from "@/components/extensive/Modal/Modal";
 import PageBreadcrumbs from "@/components/extensive/PageElements/Breadcrumbs/PageBreadcrumbs";
+import PageFooter from "@/components/extensive/PageElements/Footer/PageFooter";
 import PageHeader from "@/components/extensive/PageElements/Header/PageHeader";
 import LoadingContainer from "@/components/generic/Loading/LoadingContainer";
 import { useModalContext } from "@/context/modal.provider";
@@ -148,8 +149,9 @@ const SiteDetailPage = () => {
             body: <SiteCompletedReportsTab siteUUID={site.uuid} />
           }
         ]}
-        containerClassName="max-w-7xl px-10 xl:px-0 w-full overflow-auto"
+        containerClassName="max-w-[82vw] px-10 xl:px-0 w-full"
       />
+      <PageFooter />
     </LoadingContainer>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/CompletedReports.tsx b/src/pages/site/[uuid]/tabs/CompletedReports.tsx
index 02f1011b8..13a0a792e 100644
--- a/src/pages/site/[uuid]/tabs/CompletedReports.tsx
+++ b/src/pages/site/[uuid]/tabs/CompletedReports.tsx
@@ -55,6 +55,8 @@ const SiteCompletedReportsTab = ({ siteUUID }: SiteCompletedReportsTabProps) =>
           </LoadingContainer>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/Details.tsx b/src/pages/site/[uuid]/tabs/Details.tsx
index bec51d96f..538dad327 100644
--- a/src/pages/site/[uuid]/tabs/Details.tsx
+++ b/src/pages/site/[uuid]/tabs/Details.tsx
@@ -91,6 +91,8 @@ const SiteDetailTab = ({ site }: SiteDetailsTabProps) => {
           </When>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };
diff --git a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
index 19eefcf58..ce590c7d3 100644
--- a/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
+++ b/src/pages/site/[uuid]/tabs/GoalsAndProgress.tsx
@@ -4,6 +4,7 @@ import { When } from "react-if";
 import GoalProgressCard from "@/components/elements/Cards/GoalProgressCard/GoalProgressCard";
 import GenericField from "@/components/elements/Field/GenericField";
 import TextField from "@/components/elements/Field/TextField";
+import { VARIANT_TABLE_BORDER } from "@/components/elements/Table/TableVariants";
 import { IconNames } from "@/components/extensive/Icon/Icon";
 import PageBody from "@/components/extensive/PageElements/Body/PageBody";
 import PageCard from "@/components/extensive/PageElements/Card/PageCard";
@@ -24,12 +25,16 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => {
     <PageBody>
       <PageRow>
         <PageCard title={t("Progress & Goals")}>
-          <div className="flex w-full flex-wrap gap-6">
+          <div className="flex w-full flex-wrap items-start gap-8">
             <When condition={isPPC}>
               <GoalProgressCard label={t("Workday Count (PPC)")} value={site.workday_count} className="w-[170px]" />
             </When>
+            <GoalProgressCard label={t("Hectares Restored Goal")} value={site.total_hectares_restored_goal} />
+
             <GoalProgressCard
               label={t("Trees restored")}
+              value={site.trees_restored_count}
+              limit={site.trees_grown_goal}
               hasProgress={false}
               items={[
                 { iconName: IconNames.TREE_CIRCLE, label: t("Trees Planted"), value: site.trees_planted_count },
@@ -77,11 +82,13 @@ const GoalsAndProgressTab = ({ site }: GoalsAndProgressTabProps) => {
               <TextField label={t("Year 5 Grown Cover Goal (PPC)")} value={site.aim_year_five_crown_cover} />
             </When>
             <GenericField label={t("Tree Species")}>
-              <TreeSpeciesTable modelName="site" modelUUID={site.uuid} />
+              <TreeSpeciesTable modelName="site" modelUUID={site.uuid} variantTable={VARIANT_TABLE_BORDER} />
             </GenericField>
           </PageCard>
         </PageColumn>
       </PageRow>
+      <br />
+      <br />
     </PageBody>
   );
 };

From 17b2a60b4a8d4d8b29c6b52a567f596929a500d2 Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Fri, 7 Jun 2024 13:26:57 -0400
Subject: [PATCH 2/2] fix comment PR

---
 src/pages/auth/signup/components/usePasswordStrength.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/auth/signup/components/usePasswordStrength.tsx b/src/pages/auth/signup/components/usePasswordStrength.tsx
index 76628d154..e3f59b0dd 100644
--- a/src/pages/auth/signup/components/usePasswordStrength.tsx
+++ b/src/pages/auth/signup/components/usePasswordStrength.tsx
@@ -35,9 +35,9 @@ const usePasswordStrength = (props: UsePasswordStrengthProps): UsePasswordStreng
 
   useEffect(() => {
     const hasCorrectLength = password.length >= 8;
-    const hasUppercase = (password.match(/[A-Z]/g) || []).length > 0;
-    const hasLowercase = (password.match(/[a-z]/g) || []).length > 0;
-    const hasNumber = (password.match(/[0-9]/g) || []).length > 0;
+    const hasUppercase = (password.match(/[A-Z]/g) ?? []).length > 0;
+    const hasLowercase = (password.match(/[a-z]/g) ?? []).length > 0;
+    const hasNumber = (password.match(/[0-9]/g) ?? []).length > 0;
 
     const _validation = [hasUppercase, hasLowercase, hasNumber, hasCorrectLength];