Merge pull request #164 from wri/epic/new_design

Epic/New Style Add Config Talwind, add icons, add fonts and edit/add style componentes
wri · Jun 5, 2024 · 83d15e3 · 83d15e3
2 parents f3ba18b + c8551d1
commit 83d15e3
Show file tree

Hide file tree

Showing 359 changed files with 18,885 additions and 3,753 deletions.
diff --git 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
@@ -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 = ({ onExport }: ListActionsCreateProps) => (
+  <TopToolbar>
+    <CreateButton className="filter-button-page-admin" />
+    <When condition={!!onExport}>
+      <Button className="button-page-admin" label="Export" startIcon={<DownloadIcon />} onClick={onExport} />
+    </When>
+  </TopToolbar>
+);
+
+export default ListActionsCreate;
diff --git 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
@@ -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,29 +42,29 @@ 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}
         list={modules.fundingProgramme.List}
         edit={modules.fundingProgramme.Edit}
         show={modules.fundingProgramme.Show}
         create={modules.fundingProgramme.Create}
-        icon={AttachMoneyIcon}
+        icon={() => <Icon className="h-8 w-8" name={IconNames.FUNDING_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,28 +92,29 @@ 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
         name={modules.project.ResourceName}
         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,23 +128,23 @@ 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
         name={modules.siteReport.ResourceName}
         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
         name={modules.nurseryReport.ResourceName}
         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
@@ -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
@@ -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/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/...mponents/ResourceTabs/InformationTab/components/SiteInformationAside/HighLevelMetrics.tsx b/...mponents/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,15 +15,12 @@ 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="Workdays Created (Old Calculation)" sx={inlineLabelSx}>
               <NumberField source="self_reported_workday_count" emptyText="0" />
@@ -31,10 +29,10 @@ const HighLevelMetics: FC = () => {
               <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>