From 1b8d1f04687f7bb8f37daee16075dcda24627fde Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Wed, 29 May 2024 11:05:36 -0400
Subject: [PATCH 1/2] update style

---
 src/admin/components/Actions/ListActions.tsx  |  4 +-
 .../components/Actions/ListActionsCreate.tsx  | 18 ++++++
 src/admin/components/Actions/ShowActions.tsx  | 14 ++++-
 src/admin/components/App.tsx                  | 35 +++++------
 src/admin/components/AppLayout.tsx            |  4 +-
 src/admin/components/AppMenu.tsx              | 63 +++++++++++++++++++
 .../ChangeRequestsTab/useFormChanges.ts       |  3 +-
 .../components/InformationTabRow.tsx          | 24 +++----
 .../SiteInformationAside/HighLevelMetrics.tsx | 20 +++---
 .../SiteInformationAside/QuickActions.tsx     | 36 ++++++-----
 .../SiteInformationAside/SiteOverview.tsx     | 50 ++++++---------
 .../components/SiteInformationAside/index.tsx |  2 +-
 src/admin/components/ShowTitle/index.tsx      | 22 ++++++-
 .../components/Tables/TreeSpeciesTable.tsx    |  7 ++-
 .../elements/CommentaryBox/CommentaryBox.tsx  |  4 ++
 15 files changed, 204 insertions(+), 102 deletions(-)
 create mode 100644 src/admin/components/Actions/ListActionsCreate.tsx
 create mode 100644 src/admin/components/AppMenu.tsx

diff --git a/src/admin/components/Actions/ListActions.tsx b/src/admin/components/Actions/ListActions.tsx
index c9d865da6..db6430112 100644
--- a/src/admin/components/Actions/ListActions.tsx
+++ b/src/admin/components/Actions/ListActions.tsx
@@ -8,9 +8,9 @@ interface ListActionsProps {
 
 const ListActions = (props: ListActionsProps) => (
   <TopToolbar>
-    <FilterButton />
+    <FilterButton className="filter-button-page-admin" />
     <When condition={!!props.onExport}>
-      <Button label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
     </When>
   </TopToolbar>
 );
diff --git a/src/admin/components/Actions/ListActionsCreate.tsx b/src/admin/components/Actions/ListActionsCreate.tsx
new file mode 100644
index 000000000..1b7763c24
--- /dev/null
+++ b/src/admin/components/Actions/ListActionsCreate.tsx
@@ -0,0 +1,18 @@
+import DownloadIcon from "@mui/icons-material/GetApp";
+import { Button, CreateButton, TopToolbar } from "react-admin";
+import { When } from "react-if";
+
+interface ListActionsCreateProps {
+  onExport?: () => void;
+}
+
+const ListActionsCreate = (props: ListActionsCreateProps) => (
+  <TopToolbar>
+    <CreateButton className="filter-button-page-admin" />
+    <When condition={!!props.onExport}>
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={props.onExport} />
+    </When>
+  </TopToolbar>
+);
+
+export default ListActionsCreate;
diff --git a/src/admin/components/Actions/ShowActions.tsx b/src/admin/components/Actions/ShowActions.tsx
index c624e41e9..2d5b123b0 100644
--- a/src/admin/components/Actions/ShowActions.tsx
+++ b/src/admin/components/Actions/ShowActions.tsx
@@ -10,6 +10,8 @@ import {
 } from "react-admin";
 import { When } from "react-if";
 
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
+
 import ShowTitle from "../ShowTitle";
 
 interface IProps {
@@ -49,10 +51,18 @@ const ShowActions = ({
       </When>
       <TopToolbar sx={{ marginBottom: 2, marginLeft: "auto" }}>
         <When condition={record && hasDelete}>
-          <DeleteWithConfirmButton {...deleteProps} mutationMode="undoable" />
+          <DeleteWithConfirmButton
+            {...deleteProps}
+            mutationMode="undoable"
+            className="!text-sm !font-semibold !capitalize  lg:!text-base wide:!text-md"
+            icon={<Icon className="h-6 w-6" name={IconNames.TRASH_PA} />}
+          />
         </When>
         <When condition={record && hasEdit}>
-          <EditButton />
+          <EditButton
+            className="!text-sm !font-semibold !capitalize !text-blueCustom-900 lg:!text-base wide:!text-md"
+            icon={<Icon className="h-6 w-6" name={IconNames.EDIT} />}
+          />
         </When>
       </TopToolbar>
     </Box>
diff --git a/src/admin/components/App.tsx b/src/admin/components/App.tsx
index b311bc516..0351d2de8 100644
--- a/src/admin/components/App.tsx
+++ b/src/admin/components/App.tsx
@@ -1,12 +1,3 @@
-import { WatchLater } from "@mui/icons-material";
-import ArticleIcon from "@mui/icons-material/Article";
-import AttachMoneyIcon from "@mui/icons-material/AttachMoney";
-import BusinessIcon from "@mui/icons-material/Business";
-import ForestIcon from "@mui/icons-material/Forest";
-import FullscreenIcon from "@mui/icons-material/Fullscreen";
-import UserIcon from "@mui/icons-material/Group";
-import LanguageIcon from "@mui/icons-material/Language";
-import LibraryBooksIcon from "@mui/icons-material/LibraryBooks";
 import SummarizeIcon from "@mui/icons-material/Summarize";
 import { useEffect, useState } from "react";
 import { Admin, Resource } from "react-admin";
@@ -15,6 +6,7 @@ import { authProvider } from "@/admin/apiProvider/authProvider";
 import { dataProvider } from "@/admin/apiProvider/dataProviders";
 import { AppLayout } from "@/admin/components/AppLayout";
 import { theme } from "@/admin/components/theme";
+import Icon, { IconNames } from "@/components/extensive/Icon/Icon";
 
 import modules from "../modules";
 import AdminLoginPage from "../pages/AdminLoginPage";
@@ -50,21 +42,21 @@ const App = () => {
         list={modules.user.List}
         show={modules.user.Show}
         edit={modules.user.Edit}
-        icon={UserIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.USERS} />}
       />
       <Resource
         name={modules.organisation.ResourceName}
         list={modules.organisation.List}
         show={modules.organisation.Show}
         edit={modules.organisation.Edit}
-        icon={BusinessIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.ORGANISATIONS} />}
       />
       <Resource
         name={modules.pitch.ResourceName}
         list={modules.pitch.List}
         show={modules.pitch.Show}
         edit={modules.pitch.Edit}
-        icon={ForestIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.PITCHES} />}
       />
       <Resource
         name={modules.fundingProgramme.ResourceName}
@@ -72,7 +64,7 @@ const App = () => {
         edit={modules.fundingProgramme.Edit}
         show={modules.fundingProgramme.Show}
         create={modules.fundingProgramme.Create}
-        icon={AttachMoneyIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.FUJDING_PROGRAMMES} />}
         options={{ label: "Funding Programmes" }}
       />
       <Resource
@@ -81,14 +73,14 @@ const App = () => {
         show={modules.reportingFramework.Show}
         edit={modules.reportingFramework.Edit}
         {...(canCreate ? { create: modules.reportingFramework.Create } : null)}
-        icon={WatchLater}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTING_FRAMEWORKS} />}
         options={{ label: "Reporting Frameworks" }}
       />
       <Resource
         name={modules.application.ResourceName}
         list={modules.application.List}
         show={modules.application.Show}
-        icon={LibraryBooksIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.APPLICATIONS} />}
       />
       <Resource
         name={modules.stage.ResourceName}
@@ -100,6 +92,7 @@ const App = () => {
         name={modules.form.ResourceName}
         list={modules.form.List}
         edit={modules.form.Edit}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.FORMS} />}
         create={modules.form.Create}
       />
       <Resource
@@ -107,21 +100,21 @@ const App = () => {
         list={modules.project.List}
         show={modules.project.Show}
         edit={modules.project.Edit}
-        icon={ArticleIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.PROJECTS} />}
       />
       <Resource
         name={modules.site.ResourceName}
         list={modules.site.List}
         show={modules.site.Show}
         edit={modules.site.Edit}
-        icon={LanguageIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.SITES} />}
       />
       <Resource
         name={modules.nursery.ResourceName}
         list={modules.nursery.List}
         show={modules.nursery.Show}
         edit={modules.nursery.Edit}
-        icon={FullscreenIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.NURSERIES} />}
       />
       <Resource
         name={modules.task.ResourceName}
@@ -135,7 +128,7 @@ const App = () => {
         list={modules.projectReport.List}
         show={modules.projectReport.Show}
         edit={modules.projectReport.Edit}
-        icon={SummarizeIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
         options={{ label: "Project Reports" }}
       />
       <Resource
@@ -143,7 +136,7 @@ const App = () => {
         list={modules.siteReport.List}
         show={modules.siteReport.Show}
         edit={modules.siteReport.Edit}
-        icon={SummarizeIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
         options={{ label: "Site Reports" }}
       />
       <Resource
@@ -151,7 +144,7 @@ const App = () => {
         list={modules.nurseryReport.List}
         show={modules.nurseryReport.Show}
         edit={modules.nurseryReport.Edit}
-        icon={SummarizeIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.REPORTS} />}
         options={{ label: "Nursery Reports" }}
       />
       <Resource name={modules.audit.ResourceName} />
diff --git a/src/admin/components/AppLayout.tsx b/src/admin/components/AppLayout.tsx
index 840df50e8..d61651c83 100644
--- a/src/admin/components/AppLayout.tsx
+++ b/src/admin/components/AppLayout.tsx
@@ -6,15 +6,15 @@ import { BackButton } from "@/admin/components/BackButton";
 import ExportProvider from "@/admin/modules/application/context/export.provider";
 
 import { AppBar } from "./AppBar";
+import AppMenu from "./AppMenu";
 
 export const AppLayout = (props: LayoutProps) => {
   const regex = new RegExp("[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}", "gi");
 
   const isDetailPage = regex.test(window.location.hash);
-
   return (
     <ExportProvider>
-      <Layout {...props} appBar={AppBar}>
+      <Layout {...props} appBar={AppBar} menu={AppMenu}>
         <When condition={isDetailPage}>
           <Box marginTop={2}>
             <BackButton />
diff --git a/src/admin/components/AppMenu.tsx b/src/admin/components/AppMenu.tsx
new file mode 100644
index 000000000..e8c68e331
--- /dev/null
+++ b/src/admin/components/AppMenu.tsx
@@ -0,0 +1,63 @@
+import classNames from "classnames";
+import { Menu } from "react-admin";
+import { useLocation } from "react-router-dom";
+
+import modules from "../modules";
+
+const AppMenu = () => {
+  const location = useLocation();
+  const hash = location.pathname.split("/")[1];
+  return (
+    <Menu className="!w-full">
+      <div className={classNames({ "Sidebar-active": hash === "user" })}>
+        <Menu.ResourceItem name={modules.user.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "organisation" })}>
+        <Menu.ResourceItem name={modules.organisation.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "pitch" })}>
+        <Menu.ResourceItem name={modules.pitch.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "fundingProgramme" })}>
+        <Menu.ResourceItem name={modules.fundingProgramme.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "reportingFramework" })}>
+        <Menu.ResourceItem name={modules.reportingFramework.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "application" })}>
+        <Menu.ResourceItem name={modules.application.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "stage" })}>
+        <Menu.ResourceItem name={modules.stage.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "form" })}>
+        <Menu.ResourceItem name={modules.form.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "project" })}>
+        <Menu.ResourceItem name={modules.project.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "site" })}>
+        <Menu.ResourceItem name={modules.site.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "nursery" })}>
+        <Menu.ResourceItem name={modules.nursery.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "task" })}>
+        <Menu.ResourceItem name={modules.task.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "projectReport" })}>
+        <Menu.ResourceItem name={modules.projectReport.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "siteReport" })}>
+        <Menu.ResourceItem name={modules.siteReport.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "nurseryReport" })}>
+        <Menu.ResourceItem name={modules.nurseryReport.ResourceName} />
+      </div>
+      <div className={classNames({ "Sidebar-active": hash === "audit" })}>
+        <Menu.ResourceItem name={modules.audit.ResourceName} />
+      </div>
+    </Menu>
+  );
+};
+export default AppMenu;
diff --git a/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts b/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
index ef0735475..6ab923f5f 100644
--- a/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
+++ b/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
@@ -1,5 +1,4 @@
 import { useT } from "@transifex/react";
-import { isEqual } from "lodash";
 import { useMemo } from "react";
 
 import { getFormEntries } from "@/components/extensive/WizardForm/FormSummaryRow";
@@ -51,7 +50,7 @@ export default function useFormChanges(current: any, changed: any, steps: FormSt
               title: entry.title,
               type: entry.type,
               currentValue,
-              newValue: isEqual(currentValue, newValue) ? undefined : newValue
+              newValue: currentValue === newValue ? undefined : newValue
             };
           })
         };
diff --git a/src/admin/components/ResourceTabs/InformationTab/components/InformationTabRow.tsx b/src/admin/components/ResourceTabs/InformationTab/components/InformationTabRow.tsx
index 47fdd4e6f..7fee6e5d7 100644
--- a/src/admin/components/ResourceTabs/InformationTab/components/InformationTabRow.tsx
+++ b/src/admin/components/ResourceTabs/InformationTab/components/InformationTabRow.tsx
@@ -1,33 +1,35 @@
-import { Divider, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { LabeledClasses } from "react-admin";
-import { Else, If, Then, When } from "react-if";
+import { Else, If, Then } from "react-if";
 
 import { formatEntryValue } from "@/admin/apiProvider/utils/entryFormat";
+import Text from "@/components/elements/Text/Text";
 import List from "@/components/extensive/List/List";
 import { FormSummaryRowProps, useGetFormEntries } from "@/components/extensive/WizardForm/FormSummaryRow";
 
 const InformationTabRow = ({ index, ...props }: FormSummaryRowProps) => {
   const entries = useGetFormEntries(props);
-
   return (
     <>
-      <When condition={index}>
-        <Divider sx={{ marginRight: -16, marginLeft: -16 }} />
-      </When>
-      <Typography variant="h6" component="h3" marginTop={index !== 0 ? 2 : 0} className="capitalize">
+      <Text variant="text-16-semibold" className="text-darkCustom">
         {props.step.title}
-      </Typography>
+      </Text>
       <List
-        className="mt-4 flex flex-col gap-4"
         items={entries}
         render={entry => (
           <div>
             <Typography className={LabeledClasses.label}>
-              <span className="capitalize">{entry.title}</span>
+              <Text variant="text-14-light" className="capitalize text-grey-700">
+                {entry.title}
+              </Text>
             </Typography>
             <If condition={typeof entry.value === "string" || typeof entry.value === "number"}>
               <Then>
-                <Typography variant="body2" dangerouslySetInnerHTML={{ __html: formatEntryValue(entry.value) }} />
+                <Text
+                  variant="text-14-semibold"
+                  className="text-darkCustom"
+                  dangerouslySetInnerHTML={{ __html: formatEntryValue(entry.value) }}
+                />
               </Then>
               <Else>{formatEntryValue(entry.value)}</Else>
             </If>
diff --git a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx
index 6311dbeb2..a3482f7b2 100644
--- a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx
+++ b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx
@@ -1,8 +1,9 @@
-import { Box, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Card, Stack, SxProps, Theme } from "@mui/material";
 import { FC } from "react";
 import { Labeled, NumberField, useShowContext } from "react-admin";
 import { When } from "react-if";
 
+import Text from "@/components/elements/Text/Text";
 const HighLevelMetics: FC = () => {
   const { record } = useShowContext();
 
@@ -14,24 +15,21 @@ const HighLevelMetics: FC = () => {
   const isPPC = record.framework_key === "ppc";
 
   return (
-    <Card>
-      <Box paddingX={3.75} paddingY={2}>
-        <Typography variant="h5">High Level Metrics</Typography>
-      </Box>
-
-      <Divider />
-
+    <Card className="!shadow-none">
       <Box paddingX={3.75} paddingY={2}>
         <Stack gap={3}>
+          <Text variant="text-16-semibold" className="text-darkCustom">
+            High Level Metrics
+          </Text>
           <When condition={isPPC}>
-            <Labeled label="Total Number Of Workdays Created" sx={inlineLabelSx}>
+            <Labeled label="Total Number Of Workdays Created" sx={inlineLabelSx} className="label-field-aside">
               <NumberField source="workday_count" emptyText="0" />
             </Labeled>
           </When>
-          <Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx}>
+          <Labeled label="Total Number Of Trees Planted" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="trees_planted_count" emptyText="0" />
           </Labeled>
-          <Labeled label="Hectares Under Restoration" sx={inlineLabelSx}>
+          <Labeled label="Hectares Under Restoration" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="hectares_to_restore_goal" emptyText="0" />
           </Labeled>
         </Stack>
diff --git a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/QuickActions.tsx b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/QuickActions.tsx
index 9f8810570..f8428e6dc 100644
--- a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/QuickActions.tsx
+++ b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/QuickActions.tsx
@@ -1,10 +1,10 @@
-import { Box, Card, Divider, Stack, SxProps, Theme, Typography } from "@mui/material";
+import { Box, Card, Stack, SxProps, Theme } from "@mui/material";
 import { FC } from "react";
 import { Button, Labeled, Link, NumberField, useCreatePath, useShowContext } from "react-admin";
 
 import modules from "@/admin/modules";
+import Text from "@/components/elements/Text/Text";
 import { downloadFileBlob } from "@/utils/network";
-
 const QuickActions: FC = () => {
   const { record } = useShowContext();
   const createPath = useCreatePath();
@@ -40,16 +40,16 @@ const QuickActions: FC = () => {
   };
 
   return (
-    <Card>
+    <Card className="!shadow-none">
       <Box paddingX={3.75} paddingY={2}>
-        <Typography variant="h5">Quick Actions</Typography>
+        <Text variant="text-16-semibold" className="text-darkCustom">
+          Quick Actions
+        </Text>
       </Box>
 
-      <Divider />
-
       <Box paddingX={3.75} paddingY={2}>
         <Button
-          variant="outlined"
+          className="button-aside-page-admin"
           component={Link}
           to={createPath({ resource: modules.project.ResourceName, type: "show", id: record.project.uuid })}
           fullWidth
@@ -57,19 +57,27 @@ const QuickActions: FC = () => {
         />
       </Box>
 
-      <Divider />
-
       <Box paddingX={3.75} paddingTop={2} paddingBottom={3}>
         <Stack gap={3}>
-          <Labeled label="Total Site Reports" sx={inlineLabelSx}>
+          <Labeled label="Total Site Reports" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="site_reports_total" />
           </Labeled>
-          <Labeled label="Total Overdue Site Reports" sx={inlineLabelSx}>
+          <Labeled label="Total Overdue Site Reports" sx={inlineLabelSx} className="label-field-aside">
             <NumberField source="overdue_site_reports_total" />
           </Labeled>
-          <Button variant="outlined" component={Link} to={getNavigationPath("siteReport")} label="View Site Reports" />
-          <Button variant="outlined" component={Link} to={getNavigationPath("./4")} label="Add Monitored Data" />
-          <Button variant="outlined" onClick={downloadShapefile} label="Download Shapefile" />
+          <Button
+            className="button-aside-page-admin"
+            component={Link}
+            to={getNavigationPath("siteReport")}
+            label="View Site Reports"
+          />
+          <Button
+            className="button-aside-page-admin"
+            component={Link}
+            to={getNavigationPath("./4")}
+            label="Add Monitored Data"
+          />
+          <Button className="button-aside-page-admin" onClick={downloadShapefile} label="Download Shapefile" />
         </Stack>
       </Box>
     </Card>
diff --git a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/SiteOverview.tsx b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/SiteOverview.tsx
index 0b8eb28f6..09edad2d6 100644
--- a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/SiteOverview.tsx
+++ b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/SiteOverview.tsx
@@ -1,11 +1,11 @@
 import { Check } from "@mui/icons-material";
-import { Button, Card, Grid, Stack, Typography } from "@mui/material";
+import { Button, Card, Grid, Stack } from "@mui/material";
 import { FC, useState } from "react";
 import { BooleanField, FunctionField, Labeled, TextField, useShowContext } from "react-admin";
-import { When } from "react-if";
 
 import StatusChangeModal from "@/admin/components/Dialogs/StatusChangeModal";
 import FrameworkField from "@/admin/components/Fields/FrameworkField";
+import Text from "@/components/elements/Text/Text";
 
 const SiteOverview: FC = () => {
   const [statusModal, setStatusModal] = useState<"approve" | "moreinfo" | undefined>();
@@ -14,37 +14,25 @@ const SiteOverview: FC = () => {
 
   return (
     <>
-      <Card sx={{ padding: 3.75 }}>
-        <Typography variant="h5" marginBottom={3.75}>
+      <Card sx={{ padding: 3.75 }} className="!shadow-none">
+        <Text variant="text-16-semibold" className="mb-6 text-darkCustom">
           Site Overview
-        </Typography>
+        </Text>
 
-        <Stack gap={1}>
-          <Grid spacing={2} marginBottom={2} container>
-            <Grid xs={8} item>
-              <Labeled label="Site">
-                <TextField source="name" />
-              </Labeled>
-            </Grid>
-
-            <When condition={record.ppc_external_id != null}>
-              <Grid xs={2} item>
-                <Labeled label="Site ID">
-                  <TextField source="ppc_external_id" />
-                </Labeled>
-              </Grid>
-            </When>
-          </Grid>
+        <Stack gap={3}>
+          <Labeled label="Site" className="label-field-aside">
+            <TextField source="name" />
+          </Labeled>
 
           <Grid spacing={2} marginBottom={2} container>
-            <Grid xs={4} item>
-              <Labeled label="Framework">
+            <Grid xs={6} item>
+              <Labeled label="Framework" className="label-field-aside">
                 <FrameworkField />
               </Labeled>
             </Grid>
 
-            <Grid xs={4} item>
-              <Labeled label="Site Type">
+            <Grid xs={6} item>
+              <Labeled label="Site Type" className="label-field-aside">
                 <FunctionField
                   source="control_site"
                   label="Site Type"
@@ -53,14 +41,14 @@ const SiteOverview: FC = () => {
               </Labeled>
             </Grid>
 
-            <Grid xs={4} item>
-              <Labeled label="Monitored Data">
+            <Grid xs={6} item>
+              <Labeled label="Monitored Data" className="label-field-aside">
                 <BooleanField source="has_monitoring_data" looseValue />
               </Labeled>
             </Grid>
 
-            <Grid xs={4} item>
-              <Labeled label="Status">
+            <Grid xs={6} item>
+              <Labeled label="Status" className="label-field-aside">
                 <TextField source="readable_status" />
               </Labeled>
             </Grid>
@@ -74,14 +62,14 @@ const SiteOverview: FC = () => {
 
           <Stack direction="row" alignItems="center" gap={2} flexWrap="wrap">
             <Button
-              variant="outlined"
+              className="button-aside-page-admin"
               disabled={record?.status === "needs-more-information"}
               onClick={() => setStatusModal("moreinfo")}
             >
               Request More Info
             </Button>
             <Button
-              variant="contained"
+              className="button-aside-page-admin"
               startIcon={<Check />}
               disabled={record?.status === "approved"}
               onClick={() => setStatusModal("approve")}
diff --git a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/index.tsx b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/index.tsx
index 41f79cb93..2be249816 100644
--- a/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/index.tsx
+++ b/src/admin/components/ResourceTabs/InformationTab/components/SiteInformationAside/index.tsx
@@ -6,7 +6,7 @@ import SiteOverview from "./SiteOverview";
 
 const SiteInformationAside = () => {
   return (
-    <Stack gap={2}>
+    <Stack gap={2} className="h-full border-l border-grey-740">
       <SiteOverview />
       <QuickActions />
       <HighLevelMetics />
diff --git a/src/admin/components/ShowTitle/index.tsx b/src/admin/components/ShowTitle/index.tsx
index 88593261c..ea9032b18 100644
--- a/src/admin/components/ShowTitle/index.tsx
+++ b/src/admin/components/ShowTitle/index.tsx
@@ -1,6 +1,9 @@
-import { RaRecord, useRecordContext, useShowContext } from "react-admin";
+import { Link, RaRecord, useRecordContext, useResourceContext, useShowContext } from "react-admin";
 import { Else, If, Then, When } from "react-if";
 
+import Text from "@/components/elements/Text/Text";
+import Icon from "@/components/extensive/Icon/Icon";
+import { IconNames } from "@/components/extensive/Icon/Icon";
 interface IProps {
   moduleName?: string;
   getTitle: (record: RaRecord) => string;
@@ -9,8 +12,8 @@ interface IProps {
 const ShowTitle = (props: IProps) => {
   const record = useRecordContext();
   const { isLoading } = useShowContext();
-
   const title = props.getTitle(record);
+  const resource = useResourceContext();
 
   return (
     <If condition={isLoading}>
@@ -20,7 +23,20 @@ const ShowTitle = (props: IProps) => {
           {props.moduleName}
           {title && ": "}
         </When>
-        <When condition={!!title}>{title}</When>
+        <When condition={!!title}>
+          <If condition={resource === "site"}>
+            <Then>
+              <Text variant="text-36-bold" className="flex items-center">
+                <Link to={"/site"}>
+                  <Icon name={IconNames.CHEVRON_LEFT_PA} className="mr-2 h-10 w-9" />
+                </Link>
+                {title}
+                {props.moduleName}
+              </Text>
+            </Then>
+            <Else>{title}</Else>
+          </If>
+        </When>
       </Else>
     </If>
   );
diff --git a/src/admin/components/Tables/TreeSpeciesTable.tsx b/src/admin/components/Tables/TreeSpeciesTable.tsx
index d2230673e..40b2885c9 100644
--- a/src/admin/components/Tables/TreeSpeciesTable.tsx
+++ b/src/admin/components/Tables/TreeSpeciesTable.tsx
@@ -5,6 +5,7 @@ import { FC } from "react";
 import { Else, If, Then } from "react-if";
 
 import modules from "@/admin/modules";
+import Text from "@/components/elements/Text/Text";
 import { useGetV2TreeSpeciesEntityUUID } from "@/generated/apiComponents";
 
 type TreeSpeciesTableProps = {
@@ -43,10 +44,12 @@ const TreeSpeciesTable: FC<TreeSpeciesTableProps> = ({ uuid, entity }) => {
   if (!rows || !rows.data) return null;
 
   return (
-    <Card>
+    <Card className="!shadow-none">
       <Stack>
         <Box paddingX={3} paddingY={2}>
-          <Typography variant="h5">Tree Species</Typography>
+          <Text variant="text-16-semibold" className="text-darkCustom">
+            Tree Species
+          </Text>
         </Box>
 
         <Divider />
diff --git a/src/components/elements/CommentaryBox/CommentaryBox.tsx b/src/components/elements/CommentaryBox/CommentaryBox.tsx
index f605f3420..ddcfd72b7 100644
--- a/src/components/elements/CommentaryBox/CommentaryBox.tsx
+++ b/src/components/elements/CommentaryBox/CommentaryBox.tsx
@@ -10,6 +10,10 @@ export interface ComentaryBoxProps {
   name: string;
   lastName: string;
   buttonSendOnBox?: boolean;
+  mutate?: any;
+  refresh?: any;
+  record?: any;
+  entity?: string;
 }
 
 const ComentaryBox = (props: ComentaryBoxProps) => {

From 0cc5ccd08c47a716ca279fd700e39a42131006dc Mon Sep 17 00:00:00 2001
From: Dotty <dottykurmi123@gmail.com>
Date: Thu, 30 May 2024 10:42:13 -0400
Subject: [PATCH 2/2] fixing PR comments

---
 src/admin/components/App.tsx                                   | 2 +-
 .../ResourceTabs/ChangeRequestsTab/useFormChanges.ts           | 3 ++-
 src/components/extensive/Icon/Icon.tsx                         | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/admin/components/App.tsx b/src/admin/components/App.tsx
index 0351d2de8..066035dba 100644
--- a/src/admin/components/App.tsx
+++ b/src/admin/components/App.tsx
@@ -64,7 +64,7 @@ const App = () => {
         edit={modules.fundingProgramme.Edit}
         show={modules.fundingProgramme.Show}
         create={modules.fundingProgramme.Create}
-        icon={() => <Icon className="h-8 w-8" name={IconNames.FUJDING_PROGRAMMES} />}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.FUNDING_PROGRAMMES} />}
         options={{ label: "Funding Programmes" }}
       />
       <Resource
diff --git a/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts b/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
index 6ab923f5f..ef0735475 100644
--- a/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
+++ b/src/admin/components/ResourceTabs/ChangeRequestsTab/useFormChanges.ts
@@ -1,4 +1,5 @@
 import { useT } from "@transifex/react";
+import { isEqual } from "lodash";
 import { useMemo } from "react";
 
 import { getFormEntries } from "@/components/extensive/WizardForm/FormSummaryRow";
@@ -50,7 +51,7 @@ export default function useFormChanges(current: any, changed: any, steps: FormSt
               title: entry.title,
               type: entry.type,
               currentValue,
-              newValue: currentValue === newValue ? undefined : newValue
+              newValue: isEqual(currentValue, newValue) ? undefined : newValue
             };
           })
         };
diff --git a/src/components/extensive/Icon/Icon.tsx b/src/components/extensive/Icon/Icon.tsx
index 33d94f0ed..2cfaa464e 100644
--- a/src/components/extensive/Icon/Icon.tsx
+++ b/src/components/extensive/Icon/Icon.tsx
@@ -107,7 +107,7 @@ export enum IconNames {
   FORMS = "forms",
   APPLICATIONS = "applications",
   REPORTING_FRAMEWORKS = "reporting-frameworks",
-  FUJDING_PROGRAMMES = "funding-programmes",
+  FUNDING_PROGRAMMES = "funding-programmes",
   PITCHES = "pitches",
   ORGANISATIONS = "organisations",
   USERS = "users",