From b3921c6bd8191859546dcc6fd5849a78d013723c Mon Sep 17 00:00:00 2001 From: NatSquared Date: Thu, 9 May 2024 16:46:02 -0700 Subject: [PATCH 1/8] Initial commit - Add tenant listing page --- CHANGELOG.MD | 13 +- met-api/src/met_api/resources/tenant.py | 22 +++- .../src/met_api/services/tenant_service.py | 5 + met-web/src/App.tsx | 7 +- met-web/src/apiManager/endpoints/index.ts | 1 + .../MetDesignSystem/Input/Button.tsx | 89 ++++++++++++++ .../MetDesignSystem/Input/index.tsx | 1 + .../MetDesignSystem/Layout/Table.tsx | 53 ++++++++ .../MetDesignSystem/Layout/index.tsx | 23 ++++ .../MetDesignSystem/Navigation/Breadcrumb.tsx | 29 +++++ .../MetDesignSystem/Navigation/index.tsx | 1 + .../MetDesignSystem/Typography/Body.tsx | 31 +++++ .../MetDesignSystem/Typography/Headers.tsx | 37 ++++++ .../MetDesignSystem/Typography/index.tsx | 2 + .../src/components/MetDesignSystem/index.tsx | 105 ++++++++++++++++ .../components/tenantManagement/Listing.tsx | 114 ++++++++++++++++++ .../tenantManagement/listing/index.tsx | 13 -- met-web/src/routes/AuthenticatedRoutes.tsx | 12 +- met-web/src/services/tenantService/index.tsx | 8 ++ 19 files changed, 541 insertions(+), 25 deletions(-) create mode 100644 met-web/src/components/MetDesignSystem/Input/Button.tsx create mode 100644 met-web/src/components/MetDesignSystem/Input/index.tsx create mode 100644 met-web/src/components/MetDesignSystem/Layout/Table.tsx create mode 100644 met-web/src/components/MetDesignSystem/Layout/index.tsx create mode 100644 met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx create mode 100644 met-web/src/components/MetDesignSystem/Navigation/index.tsx create mode 100644 met-web/src/components/MetDesignSystem/Typography/Body.tsx create mode 100644 met-web/src/components/MetDesignSystem/Typography/Headers.tsx create mode 100644 met-web/src/components/MetDesignSystem/Typography/index.tsx create mode 100644 met-web/src/components/MetDesignSystem/index.tsx create mode 100644 met-web/src/components/tenantManagement/Listing.tsx delete mode 100644 met-web/src/components/tenantManagement/listing/index.tsx diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 425b95b03..9ec1d01c7 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,3 +1,10 @@ +## May 9, 2024 + +- **Feature** Added the initial version of the tenant listing page + - The page lists all tenants in the system + - Functionality to view or create individual tenants is still under construction + - Began work on adding new components from the MET component library, with high reusability in mind + ## May 8, 2024 - **Feature** Add font awesome to MET web [🎟️ DESENG-543](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-543) @@ -10,12 +17,12 @@ - **Feature** Ensure users can belong to more than one tenant [🎟️ DESENG-478](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-478) - Tested users can belong to more than one tenant. - Overide the default tenant filter for staff_user table to check with user_group_membership table. - + ## May 6, 2024 - **Feature** Auto-populate question descriptions [🎟️ DESENG-596](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-596) - - Upgrading the version of met-formio to version 1.0.15-rc1. This version has the changes to have a default - description for the form components. The changes were pushed to met-formio by the PR: https://github.com/bcgov/met-formio/pull/25. + - Upgrading the version of met-formio to version 1.0.15-rc1. This version has the changes to have a default + description for the form components. The changes were pushed to met-formio by the PR: https://github.com/bcgov/met-formio/pull/25. ## May 2, 2024 diff --git a/met-api/src/met_api/resources/tenant.py b/met-api/src/met_api/resources/tenant.py index 3e3fff5a5..1289408e8 100644 --- a/met-api/src/met_api/resources/tenant.py +++ b/met-api/src/met_api/resources/tenant.py @@ -11,7 +11,7 @@ # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. # See the License for the specific language governing permissions and # limitations under the License. -"""API endpoints for managing an tenant resource.""" +"""API endpoints for managing tenant resources.""" from http import HTTPStatus @@ -20,6 +20,8 @@ from met_api.auth import auth from met_api.services.tenant_service import TenantService +from met_api.utils.roles import Role +from met_api.utils.tenant_validator import require_role from met_api.utils.util import allowedorigins, cors_preflight @@ -27,11 +29,27 @@ """Custom exception messages """ +@cors_preflight('GET OPTIONS') +@API.route('/') +class Tenants(Resource): + """Resource for managing tenants.""" + + @staticmethod + @cross_origin(origins=allowedorigins()) + @require_role(Role.SUPER_ADMIN.value) + def get(): + """Fetch all tenants.""" + try: + tenants = TenantService().get_all() + + return tenants, HTTPStatus.OK + except ValueError as err: + return str(err), HTTPStatus.INTERNAL_SERVER_ERROR @cors_preflight('GET OPTIONS') @API.route('/') class Feedback(Resource): - """Resource for managing feedbacks.""" + """Resource for managing a single tenant.""" @staticmethod @cross_origin(origins=allowedorigins()) diff --git a/met-api/src/met_api/services/tenant_service.py b/met-api/src/met_api/services/tenant_service.py index 0797bee97..dc7c0be42 100644 --- a/met-api/src/met_api/services/tenant_service.py +++ b/met-api/src/met_api/services/tenant_service.py @@ -29,3 +29,8 @@ def get(cls, tenant_id): if not tenant: raise ValueError('Tenant not found.', cls, tenant_id) return TenantSchema().dump(tenant) + + def get_all(self): + """Get all tenants.""" + tenants = TenantModel.query.all() + return TenantSchema().dump(tenants, many=True) \ No newline at end of file diff --git a/met-web/src/App.tsx b/met-web/src/App.tsx index 1916f94b1..fe0b61c04 100644 --- a/met-web/src/App.tsx +++ b/met-web/src/App.tsx @@ -4,7 +4,7 @@ import './App.scss'; import { Route, BrowserRouter as Router, Routes } from 'react-router-dom'; import { useAppSelector, useAppDispatch } from './hooks'; import { MidScreenLoader, MobileToolbar } from './components/common'; -import { Box, Container, useMediaQuery, Theme, Toolbar } from '@mui/material'; +import { Box, Container, useMediaQuery, Theme } from '@mui/material'; import InternalHeader from './components/layout/Header/InternalHeader'; import PublicHeader from './components/layout/Header/PublicHeader'; import UnauthenticatedRoutes from './routes/UnauthenticatedRoutes'; @@ -225,7 +225,7 @@ const App = () => { - + @@ -242,8 +242,7 @@ const App = () => { - - + diff --git a/met-web/src/apiManager/endpoints/index.ts b/met-web/src/apiManager/endpoints/index.ts index af86b27cc..4dc598d12 100644 --- a/met-web/src/apiManager/endpoints/index.ts +++ b/met-web/src/apiManager/endpoints/index.ts @@ -171,6 +171,7 @@ const Endpoints = { }, Tenants: { GET: `${AppConfig.apiUrl}/tenants/tenant_id`, + GET_LIST: `${AppConfig.apiUrl}/tenants/`, }, AnalyticsUserResponseDetail: { GET_COUNT_BY_MONTH: `${AppConfig.analyticsApiUrl}/responses/month/engagement_id`, diff --git a/met-web/src/components/MetDesignSystem/Input/Button.tsx b/met-web/src/components/MetDesignSystem/Input/Button.tsx new file mode 100644 index 000000000..8ef83125b --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Input/Button.tsx @@ -0,0 +1,89 @@ +import React from 'react'; +import { Button as MuiButton, ButtonProps as MuiButtonProps } from '@mui/material'; +import { globalFocusShadow, colors, elevations } from '..'; + +type ButtonProps = { + children: React.ReactNode; + onClick?: () => void; + variant: 'primary' | 'secondary' | 'tertiary'; + size?: 'small' | 'medium' | 'large'; + icon?: React.ReactNode; + iconPosition?: 'left' | 'right'; + disabled?: boolean; +} & Omit; // Exclude conflicting props + +const sizeMap = { + small: '40px', + medium: '48px', + large: '56px', +}; + +export const Button: React.FC = ({ + children, + onClick, + variant = 'secondary', + size = 'medium', + icon, + iconPosition = 'left', + disabled, + ...buttonProps +}) => { + const colorMap = colors.button[variant]; + const height: string = sizeMap[size]; + const typeColors = variant == 'primary' ? colors.type.inverted : colors.type.regular; + // Don't display elevation changes for tertiary buttons + const elevation = + variant == 'tertiary' ? { z1: elevations.none, z4: elevations.none, z9: elevations.none } : elevations; + + return ( + + {children} + + ); +}; diff --git a/met-web/src/components/MetDesignSystem/Input/index.tsx b/met-web/src/components/MetDesignSystem/Input/index.tsx new file mode 100644 index 000000000..fe9c53c51 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Input/index.tsx @@ -0,0 +1 @@ +export { Button } from './Button'; diff --git a/met-web/src/components/MetDesignSystem/Layout/Table.tsx b/met-web/src/components/MetDesignSystem/Layout/Table.tsx new file mode 100644 index 000000000..d077281f6 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Layout/Table.tsx @@ -0,0 +1,53 @@ +import { + styled, + Table as MuiTable, + TableBody as MuiTableBody, + TableCell as MuiTableCell, + TableContainer as MuiTableContainer, + TableHead as MuiTableHead, + TableRow as MuiTableRow, +} from '@mui/material'; +import { globalFocusVisible, colors } from '..'; + +export const Table = styled(MuiTable)({ + borderCollapse: 'collapse', + width: '100%', +}); + +export const TableHead = styled(MuiTableHead)({}); + +export const TableHeadRow = styled(MuiTableRow)({ + backgroundColor: colors.surface.gray[10], +}); + +export const TableHeadCell = styled(MuiTableCell)({ + padding: '1rem 1rem 0.5rem 1rem', + fontWeight: 700, + fontSize: '0.875rem', + color: colors.surface.gray[80], + borderBottom: `1px solid ${colors.surface.gray[60]}`, + maxWidth: '700px', +}); + +export const TableBody = styled(MuiTableBody)({}); + +export const TableRow = styled(MuiTableRow)(({ onClick }) => ({ + '&:hover': { + backgroundColor: colors.surface.blue[10], + }, + '&:active': { + backgroundColor: colors.surface.blue[20], + }, + cursor: onClick ? 'pointer' : 'default', + + ...globalFocusVisible, +})); +export const TableCell = styled(MuiTableCell)({ + padding: '1em', + borderBottom: `1px solid ${colors.surface.gray[30]}`, + textAlign: 'left', + verticalAlign: 'top', + maxWidth: '700px', +}); + +export const TableContainer = styled(MuiTableContainer)({}); diff --git a/met-web/src/components/MetDesignSystem/Layout/index.tsx b/met-web/src/components/MetDesignSystem/Layout/index.tsx new file mode 100644 index 000000000..985e99829 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Layout/index.tsx @@ -0,0 +1,23 @@ +import { styled, Box as MuiBox, Theme, useMediaQuery } from '@mui/material'; + +const desktopOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('md')); +const tabletOrLarger = (theme: Theme) => useMediaQuery(theme.breakpoints.up('sm')); + +// A container that decreases its padding on smaller screens +export const ResponsiveContainer = styled(MuiBox)(({ theme }) => { + if (desktopOrLarger(theme)) { + return { + padding: '1.5em 4.0em', + }; + } + if (tabletOrLarger(theme)) { + return { + padding: '1.5em 2.0em', + }; + } + return { + padding: '1.5em 1.0em', + }; +}); + +export { Table, TableHead, TableHeadRow, TableHeadCell, TableBody, TableRow, TableCell, TableContainer } from './Table'; diff --git a/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx b/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx new file mode 100644 index 000000000..91d474ca6 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx @@ -0,0 +1,29 @@ +import { Breadcrumbs } from '@mui/material'; +import React from 'react'; +import { BodyText, Link } from '../Typography'; + +type BreadcrumbProps = { + name: string; + link?: string; +}; + +export const BreadcrumbTrail: React.FC<{ crumbs: BreadcrumbProps[]; smallScreenOnly?: boolean }> = ({ + crumbs, + smallScreenOnly, +}) => { + return ( + + {crumbs.map((crumb, index) => + crumb.link ? ( + + {crumb.name} + + ) : ( + + {crumb.name} + + ), + )} + + ); +}; diff --git a/met-web/src/components/MetDesignSystem/Navigation/index.tsx b/met-web/src/components/MetDesignSystem/Navigation/index.tsx new file mode 100644 index 000000000..2d48187e2 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Navigation/index.tsx @@ -0,0 +1 @@ +export { BreadcrumbTrail } from './Breadcrumb'; diff --git a/met-web/src/components/MetDesignSystem/Typography/Body.tsx b/met-web/src/components/MetDesignSystem/Typography/Body.tsx new file mode 100644 index 000000000..3c85f8fce --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Typography/Body.tsx @@ -0,0 +1,31 @@ +import { styled } from '@mui/material'; +import { globalFocusVisible, colors } from '..'; +import { Link as RouterLink } from 'react-router-dom'; + +export const BodyText = styled('p')<{ bold?: boolean; small?: boolean }>(({ bold, small }) => ({ + margin: 0, + lineHeight: small ? '1.375' : '1.5', + fontSize: small ? '0.875rem' : '1rem', + color: '#292929', + fontWeight: bold ? 700 : 400, +})); + +export const Link = styled(RouterLink)<{ bold?: boolean; small?: boolean }>(({ bold, small }) => ({ + textDecoration: 'none', + lineHeight: small ? '1.375' : '1.5', + fontSize: small ? '0.875rem' : '1rem', + fontWeight: bold ? 700 : 400, + color: colors.type.regular.link, + '&:hover': { + textDecoration: 'underline', + }, + '&:focus': { + ...globalFocusVisible, + }, +})); + +const Body = { + BodyText, +}; + +export default Body; diff --git a/met-web/src/components/MetDesignSystem/Typography/Headers.tsx b/met-web/src/components/MetDesignSystem/Typography/Headers.tsx new file mode 100644 index 000000000..3fc9ec901 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Typography/Headers.tsx @@ -0,0 +1,37 @@ +import { styled } from '@mui/material'; + +export const Header1 = styled('h1')({ + lineHeight: '1.5', + fontSize: '2rem', + marginBottom: '2rem', + marginTop: '1.5rem', + fontWeight: 700, + color: '#292929', +}); + +export const Header2 = styled('h2')<{ decorated?: boolean }>((props) => ({ + lineHeight: '1.3', + fontSize: '1.5rem', + marginBottom: '1.5rem', + marginTop: '0.5rem', + fontWeight: 600, + color: '#292929', + '&::before': props.decorated + ? { + backgroundColor: '#FCBA19', + content: '""', + display: 'block', + width: '40px', + height: '4px', + position: 'relative', + bottom: '4px', + } + : {}, +})); + +const Headers = { + Header1, + Header2, +}; + +export default Headers; diff --git a/met-web/src/components/MetDesignSystem/Typography/index.tsx b/met-web/src/components/MetDesignSystem/Typography/index.tsx new file mode 100644 index 000000000..f8dbf56e4 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/Typography/index.tsx @@ -0,0 +1,2 @@ +export { Header1, Header2 } from './Headers'; +export { BodyText, Link } from './Body'; diff --git a/met-web/src/components/MetDesignSystem/index.tsx b/met-web/src/components/MetDesignSystem/index.tsx new file mode 100644 index 000000000..80bfb1ed7 --- /dev/null +++ b/met-web/src/components/MetDesignSystem/index.tsx @@ -0,0 +1,105 @@ +export const colors = { + type: { + regular: { + primary: '#292929', + secondary: '#464341', + link: '#1A5A96', + disabled: '#A19F9D', + }, + inverted: { + primary: '#FFFFFF', + secondary: '#EDEBE9', + link: '#D8EBFF', + disabled: '#A19F9D', + }, + }, + button: { + primary: { + enabled: '#053662', + hover: '#1E5189', + focused: '#053662', + pressed: '#032543', + disabled: '#EDEBE9', + }, + secondary: { + enabled: '#FFFFFF', + hover: '#EDEBE9', + focused: '#FFFFFF', + pressed: '#E0DEDC', + disabled: '#EDEBE9', + stroke: '#201F1E', + }, + tertiary: { + enabled: '#FFFFFF', + hover: '#F1F8FF', + focused: '#FFFFFF', + pressed: '#F1F8FF', + disabled: '#FFFFFF', + }, + }, + focus: { + regular: { + outer: '#2E5DD7', + inner: '#FFFFFF', + }, + }, + surface: { + gray: { + 10: '#FAF9F8', + 20: '#F3F2F1', + 30: '#EDEBE9', + 40: '#E1DFDD', + 50: '#D2D0CE', + 60: '#C8C6C4', + 70: '#A19F9D', + 80: '#7A7876', + 90: '#3B3A39', + 100: '#323130', + 110: '#201F1E', + }, + blue: { + 10: '#F1F8FF', + 20: '#D8EBFF', + 30: '#C0DFFF', + 40: '#A7D2FF', + 50: '#8EC6FF', + 60: '#76BAFF', + 70: '#4E97E0', + 80: '#2B71B8', + 90: '#12508F', + 100: '#053662', + bc: '#053662', + }, + gold: { + 10: '#FFF8E8', + 20: '#FFECBE', + 30: '#FFE095', + 40: '#FFD46C', + 50: '#FFC843', + 60: '#FCBA19', + bc: '#FCBA19', + 70: '#D39706', + 80: '#AA7900', + 90: '#825C00', + 100: '#593F00', + }, + }, +}; + +export const elevations = { + // For use with CSS box-shadow property + // Not complete in Figma yet\ + none: '0px 0px transparent', + z1: '0px 2px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 6px 0px rgba(0, 0, 0, 0.60) inset', + z4: '0px 2px 3px 0px rgba(0, 0, 0, 0.10), 0px 6px 6px 0px rgba(0, 0, 0, 0.09), 0px 14px 9px 0px rgba(0, 0, 0, 0.05)', + z9: '0px 5px 6px 0px rgba(0, 0, 0, 0.20), 0px 9px 12px 0px rgba(0, 0, 0, 0.14), 0px 3px 16px 0px rgba(0, 0, 0, 0.12)', +}; + +export const globalFocusShadow = `inset 0px 0px 0px 2px ${colors.focus.regular.inner}`; + +export const globalFocusVisible = { + '&:focus-visible': { + outline: `2px solid ${colors.focus.regular.outer}`, + boxShadow: globalFocusShadow, + }, +}; diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx new file mode 100644 index 000000000..abc75a211 --- /dev/null +++ b/met-web/src/components/tenantManagement/Listing.tsx @@ -0,0 +1,114 @@ +import { AddCircleOutline } from '@mui/icons-material'; +import { Box, Grid, Skeleton } from '@mui/material'; +import { Button } from 'components/MetDesignSystem/Input/Button'; +import { Header1, Header2, BodyText } from 'components/MetDesignSystem/Typography/'; +import { ResponsiveContainer } from 'components/MetDesignSystem/Layout'; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeadCell, + TableHeadRow, + TableRow, +} from 'components/MetDesignSystem/Layout/Table'; +import { getAllTenants } from 'services/tenantService'; + +import React, { useEffect } from 'react'; +import { Tenant } from 'models/tenant'; +import { Else, If, Then } from 'react-if'; +import { BreadcrumbTrail } from 'components/MetDesignSystem/Navigation/Breadcrumb'; + +const TenantListing = () => { + const [tenants, setTenants] = React.useState([]); + const [loading, setLoading] = React.useState(true); + + useEffect(() => { + const fetchTenants = async () => { + const tenants = await getAllTenants(); + setTenants(tenants); + setLoading(false); + }; + fetchTenants(); + }, []); + + return ( + + + + Tenant Admin + + + + Tenant Instances {!loading && `(${tenants.length})`} + + + + {/* TODO: redirect to "Create Tenant Instance" page */} + + + + + + + + Name + Description + + + + + + {[...Array(5)].map((_, index) => ( + + + + + + + + + + ))} + + + {tenants.map((tenant) => ( + console.log(tenant.name)} key={tenant.name} tabIndex={0}> + + + {tenant.name} + + {/* TODO: Replace when primary contact info is added to tenants */} + <Primary Contact> + + + {tenant.description} + + + ))} + + + +
+ + + ); +}; + +export default TenantListing; diff --git a/met-web/src/components/tenantManagement/listing/index.tsx b/met-web/src/components/tenantManagement/listing/index.tsx deleted file mode 100644 index 018234264..000000000 --- a/met-web/src/components/tenantManagement/listing/index.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Box, Typography } from '@mui/material'; -import React from 'react'; - -const TenantManagement = () => { - return ( - - This is the tenant management page! - {/* todo: the rest of the page */} - - ); -}; - -export default TenantManagement; diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx index 480459d64..a447d37b4 100644 --- a/met-web/src/routes/AuthenticatedRoutes.tsx +++ b/met-web/src/routes/AuthenticatedRoutes.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Route, Routes } from 'react-router-dom'; +import { Link, Route, Routes } from 'react-router-dom'; import NotFound from './NotFound'; import EngagementForm from '../components/engagement/form'; import EngagementListing from '../components/engagement/listing'; @@ -25,7 +25,7 @@ import UserProfile from 'components/userManagement/userDetails'; import ScrollToTop from 'components/scrollToTop'; import ReportSettings from 'components/survey/report'; import FormioListener from 'components/FormioListener'; -import TenantManagement from 'components/tenantManagement/listing'; +import TenantListing from 'components/tenantManagement/Listing'; const AuthenticatedRoutes = () => { return ( @@ -63,7 +63,13 @@ const AuthenticatedRoutes = () => { } /> } /> }> - } /> + } + handle={{ + crumb: () => Tenant Management, + }} + /> }> } /> diff --git a/met-web/src/services/tenantService/index.tsx b/met-web/src/services/tenantService/index.tsx index 342db677b..19cab9c16 100644 --- a/met-web/src/services/tenantService/index.tsx +++ b/met-web/src/services/tenantService/index.tsx @@ -11,3 +11,11 @@ export const getTenant = async (id: string): Promise => { } return Promise.reject('Failed to fetch tenant info'); }; + +export const getAllTenants = async (): Promise => { + const response = await http.GetRequest(Endpoints.Tenants.GET_LIST); + if (response.data) { + return response.data; + } + return Promise.reject('Failed to fetch tenants'); +}; From fc97bcb2481bdf39b9b795172d2254efb8b74303 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Thu, 9 May 2024 16:55:17 -0700 Subject: [PATCH 2/8] Update changelog --- CHANGELOG.MD | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.MD b/CHANGELOG.MD index 9ec1d01c7..433ee36ec 100644 --- a/CHANGELOG.MD +++ b/CHANGELOG.MD @@ -1,6 +1,6 @@ ## May 9, 2024 -- **Feature** Added the initial version of the tenant listing page +- **Feature** Added the initial version of the tenant listing page [🎟️ DESENG-592](https://apps.itsm.gov.bc.ca/jira/browse/DESENG-592) - The page lists all tenants in the system - Functionality to view or create individual tenants is still under construction - Began work on adding new components from the MET component library, with high reusability in mind From 016d728aea9818bcab90a9c13c637d5207d82036 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Mon, 13 May 2024 11:08:47 -0700 Subject: [PATCH 3/8] Address linter errors & code review comments --- met-api/src/met_api/resources/tenant.py | 4 +++- .../src/met_api/services/tenant_service.py | 2 +- met-web/.npmrc | 1 + .../components/tenantManagement/Listing.tsx | 20 +++++++++++++------ 4 files changed, 19 insertions(+), 8 deletions(-) diff --git a/met-api/src/met_api/resources/tenant.py b/met-api/src/met_api/resources/tenant.py index 1289408e8..be3386b0f 100644 --- a/met-api/src/met_api/resources/tenant.py +++ b/met-api/src/met_api/resources/tenant.py @@ -29,6 +29,7 @@ """Custom exception messages """ + @cors_preflight('GET OPTIONS') @API.route('/') class Tenants(Resource): @@ -46,9 +47,10 @@ def get(): except ValueError as err: return str(err), HTTPStatus.INTERNAL_SERVER_ERROR + @cors_preflight('GET OPTIONS') @API.route('/') -class Feedback(Resource): +class Tenant(Resource): """Resource for managing a single tenant.""" @staticmethod diff --git a/met-api/src/met_api/services/tenant_service.py b/met-api/src/met_api/services/tenant_service.py index dc7c0be42..8a0fd7b3a 100644 --- a/met-api/src/met_api/services/tenant_service.py +++ b/met-api/src/met_api/services/tenant_service.py @@ -33,4 +33,4 @@ def get(cls, tenant_id): def get_all(self): """Get all tenants.""" tenants = TenantModel.query.all() - return TenantSchema().dump(tenants, many=True) \ No newline at end of file + return TenantSchema().dump(tenants, many=True) diff --git a/met-web/.npmrc b/met-web/.npmrc index 2ac215890..a70f22bef 100644 --- a/met-web/.npmrc +++ b/met-web/.npmrc @@ -1 +1,2 @@ @fortawesome:registry=https://npm.fontawesome.com/ +//npm.fontawesome.com/:_authToken=${FONTAWESOME_PACKAGE_TOKEN} \ No newline at end of file diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx index abc75a211..f1b13064c 100644 --- a/met-web/src/components/tenantManagement/Listing.tsx +++ b/met-web/src/components/tenantManagement/Listing.tsx @@ -18,16 +18,24 @@ import React, { useEffect } from 'react'; import { Tenant } from 'models/tenant'; import { Else, If, Then } from 'react-if'; import { BreadcrumbTrail } from 'components/MetDesignSystem/Navigation/Breadcrumb'; +import { useAppDispatch } from 'hooks'; +import { openNotification } from 'services/notificationService/notificationSlice'; const TenantListing = () => { const [tenants, setTenants] = React.useState([]); const [loading, setLoading] = React.useState(true); - + const dispatch = useAppDispatch(); useEffect(() => { - const fetchTenants = async () => { - const tenants = await getAllTenants(); - setTenants(tenants); - setLoading(false); + const fetchTenants = () => { + getAllTenants() + .then((returnedTenants) => { + setTenants(returnedTenants); + setLoading(false); + }) + .catch((error) => { + dispatch(openNotification({ text: error, severity: 'error' })); + setLoading(false); + }); }; fetchTenants(); }, []); @@ -89,7 +97,7 @@ const TenantListing = () => { {tenants.map((tenant) => ( - console.log(tenant.name)} key={tenant.name} tabIndex={0}> + {}} key={tenant.name} tabIndex={0}> {tenant.name} From 3f15c24799dc740312b55e83a09638523c5233b4 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Mon, 13 May 2024 11:32:21 -0700 Subject: [PATCH 4/8] Use font awesome icons instead of MUI --- .../src/components/tenantManagement/Listing.tsx | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx index f1b13064c..1413c3ebb 100644 --- a/met-web/src/components/tenantManagement/Listing.tsx +++ b/met-web/src/components/tenantManagement/Listing.tsx @@ -1,4 +1,5 @@ -import { AddCircleOutline } from '@mui/icons-material'; +import { faCirclePlus } from '@fortawesome/pro-regular-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { Box, Grid, Skeleton } from '@mui/material'; import { Button } from 'components/MetDesignSystem/Input/Button'; import { Header1, Header2, BodyText } from 'components/MetDesignSystem/Typography/'; @@ -25,6 +26,7 @@ const TenantListing = () => { const [tenants, setTenants] = React.useState([]); const [loading, setLoading] = React.useState(true); const dispatch = useAppDispatch(); + const circlePlusIcon = ; useEffect(() => { const fetchTenants = () => { getAllTenants() @@ -56,7 +58,7 @@ const TenantListing = () => { {/* TODO: redirect to "Create Tenant Instance" page */} - @@ -97,7 +99,13 @@ const TenantListing = () => { {tenants.map((tenant) => ( - {}} key={tenant.name} tabIndex={0}> + { + return; + }} + key={tenant.name} + tabIndex={0} + > {tenant.name} From 35c212d8c48b27b8af090627cbba4f059ca0f109 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Mon, 13 May 2024 12:44:29 -0700 Subject: [PATCH 5/8] Styling touch-ups --- met-web/src/components/MetDesignSystem/Input/Button.tsx | 1 + .../src/components/MetDesignSystem/Typography/Headers.tsx | 2 +- met-web/src/components/tenantManagement/Listing.tsx | 6 ++---- 3 files changed, 4 insertions(+), 5 deletions(-) diff --git a/met-web/src/components/MetDesignSystem/Input/Button.tsx b/met-web/src/components/MetDesignSystem/Input/Button.tsx index 8ef83125b..9674dc7fb 100644 --- a/met-web/src/components/MetDesignSystem/Input/Button.tsx +++ b/met-web/src/components/MetDesignSystem/Input/Button.tsx @@ -46,6 +46,7 @@ export const Button: React.FC = ({ // If the colormap has the "stroke" property, use it as the border border: 'stroke' in colorMap && colorMap.stroke ? `1px solid ${colorMap.stroke}` : 'none', padding: '0 1.5rem', + marginBottom: '1.5rem', fontWeight: 500, fontSize: '16px', height: height, diff --git a/met-web/src/components/MetDesignSystem/Typography/Headers.tsx b/met-web/src/components/MetDesignSystem/Typography/Headers.tsx index 3fc9ec901..f4eb19d1a 100644 --- a/met-web/src/components/MetDesignSystem/Typography/Headers.tsx +++ b/met-web/src/components/MetDesignSystem/Typography/Headers.tsx @@ -10,7 +10,7 @@ export const Header1 = styled('h1')({ }); export const Header2 = styled('h2')<{ decorated?: boolean }>((props) => ({ - lineHeight: '1.3', + lineHeight: '1.5', fontSize: '1.5rem', marginBottom: '1.5rem', marginTop: '0.5rem', diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx index 1413c3ebb..9d79e85d3 100644 --- a/met-web/src/components/tenantManagement/Listing.tsx +++ b/met-web/src/components/tenantManagement/Listing.tsx @@ -50,11 +50,9 @@ const TenantListing = () => { /> Tenant Admin - + - - Tenant Instances {!loading && `(${tenants.length})`} - + Tenant Instances {!loading && `(${tenants.length})`} {/* TODO: redirect to "Create Tenant Instance" page */} From 861ac0082a7f0a1dd38def00e45684aadb86e9e9 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Mon, 13 May 2024 12:45:14 -0700 Subject: [PATCH 6/8] Address sonarcloud issues --- .../MetDesignSystem/Navigation/Breadcrumb.tsx | 4 ++-- met-web/src/components/tenantManagement/Listing.tsx | 2 +- met-web/src/routes/AuthenticatedRoutes.tsx | 10 ++-------- met-web/src/services/tenantService/index.tsx | 4 ++-- 4 files changed, 7 insertions(+), 13 deletions(-) diff --git a/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx b/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx index 91d474ca6..4c94ed09e 100644 --- a/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx +++ b/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx @@ -15,11 +15,11 @@ export const BreadcrumbTrail: React.FC<{ crumbs: BreadcrumbProps[]; smallScreenO {crumbs.map((crumb, index) => crumb.link ? ( - + {crumb.name} ) : ( - + {crumb.name} ), diff --git a/met-web/src/components/tenantManagement/Listing.tsx b/met-web/src/components/tenantManagement/Listing.tsx index 9d79e85d3..a3168f7ea 100644 --- a/met-web/src/components/tenantManagement/Listing.tsx +++ b/met-web/src/components/tenantManagement/Listing.tsx @@ -35,7 +35,7 @@ const TenantListing = () => { setLoading(false); }) .catch((error) => { - dispatch(openNotification({ text: error, severity: 'error' })); + dispatch(openNotification({ text: error.message, severity: 'error' })); setLoading(false); }); }; diff --git a/met-web/src/routes/AuthenticatedRoutes.tsx b/met-web/src/routes/AuthenticatedRoutes.tsx index a447d37b4..619b5b202 100644 --- a/met-web/src/routes/AuthenticatedRoutes.tsx +++ b/met-web/src/routes/AuthenticatedRoutes.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, Route, Routes } from 'react-router-dom'; +import { Route, Routes } from 'react-router-dom'; import NotFound from './NotFound'; import EngagementForm from '../components/engagement/form'; import EngagementListing from '../components/engagement/listing'; @@ -63,13 +63,7 @@ const AuthenticatedRoutes = () => { } /> } /> }> - } - handle={{ - crumb: () => Tenant Management, - }} - /> + } /> }> } /> diff --git a/met-web/src/services/tenantService/index.tsx b/met-web/src/services/tenantService/index.tsx index 19cab9c16..451b26bdf 100644 --- a/met-web/src/services/tenantService/index.tsx +++ b/met-web/src/services/tenantService/index.tsx @@ -9,7 +9,7 @@ export const getTenant = async (id: string): Promise => { if (response.data) { return response.data; } - return Promise.reject('Failed to fetch tenant info'); + return Promise.reject(Error('Failed to fetch tenant info')); }; export const getAllTenants = async (): Promise => { @@ -17,5 +17,5 @@ export const getAllTenants = async (): Promise => { if (response.data) { return response.data; } - return Promise.reject('Failed to fetch tenants'); + return Promise.reject(Error('Failed to fetch tenants')); }; From 83a7901f04f04359e363a9d1c7bebf70479e8e17 Mon Sep 17 00:00:00 2001 From: NatSquared Date: Wed, 15 May 2024 10:18:39 -0700 Subject: [PATCH 7/8] Merge into common components and deprecate components with replacements --- met-web/src/components/FormCAC/FirstTab.tsx | 12 +- met-web/src/components/FormCAC/Form.tsx | 6 +- met-web/src/components/FormCAC/SecondTab.tsx | 6 +- met-web/src/components/Login/index.tsx | 10 +- .../src/components/MetDesignSystem/index.tsx | 105 ------------ .../comments/admin/review/CommentReview.tsx | 76 +++++---- .../review/emailPreview/EmailPreview.tsx | 18 +- .../review/emailPreview/EmailPreviewModal.tsx | 4 +- .../review/emailPreview/EmailTemplates.tsx | 16 +- .../admin/reviewListing/AdvancedSearch.tsx | 10 +- .../admin/reviewListing/Submissions.tsx | 18 +- .../comments/admin/textListing/index.tsx | 32 ++-- .../Input/Button.tsx | 2 +- .../Input/index.tsx | 0 .../Layout/Table.tsx | 0 .../Layout/index.tsx | 0 .../components/common/Modals/ConfirmModal.tsx | 26 +-- .../components/common/Modals/EmailModal.tsx | 23 ++- .../components/common/Modals/UpdateModal.tsx | 14 +- .../Navigation/Breadcrumb.tsx | 0 .../Navigation/index.tsx | 0 .../Typography/Body.tsx | 2 +- .../Typography/Headers.tsx | 0 .../Typography/index.tsx | 0 met-web/src/components/common/index.tsx | 157 ++++++++++++++++-- .../components/dashboard/EngagementList.tsx | 4 +- .../dashboard/EngagementsAccordion.tsx | 6 +- .../dashboard/comment/CommentTable.tsx | 6 +- .../dashboard/comment/CommentsBlock.tsx | 6 +- .../form/DayCalculator/dayZeroRules.tsx | 26 +-- .../engagement/form/DayCalculator/index.tsx | 32 ++-- .../AdditionalTabContent.tsx | 14 +- .../EngagementContent/ContentTabModal.tsx | 10 +- .../EngagementFormTabs/EngagementForm.tsx | 18 +- .../Results/EngagementResults.tsx | 14 +- .../Settings/EngagementSettingsForm.tsx | 14 +- .../Settings/PublicUrls.tsx | 12 +- .../EngagementFormTabs/SurveyBlock/index.tsx | 6 +- .../UserManagement/AddTeamMemberModal.tsx | 19 ++- .../EngagementUserManagement.tsx | 22 +-- .../Documents/AddFileDrawer.tsx | 8 +- .../Documents/CreateFolderForm.tsx | 10 +- .../Documents/DocumentForm.tsx | 4 +- .../Documents/StyledTreeItem.tsx | 4 +- .../Documents/UploadFileDrawer.tsx | 23 ++- .../Events/EventInfoPaper.tsx | 32 ++-- .../form/EngagementWidgets/Events/Form.tsx | 6 +- .../Events/InPersonEventFormDrawer.tsx | 11 +- .../Events/VirtualEventInfoPaper.tsx | 26 +-- .../Events/VirtualSessionFormDrawer.tsx | 11 +- .../form/EngagementWidgets/Map/Form.tsx | 17 +- .../EngagementWidgets/Phases/PhasesForm.tsx | 8 +- .../form/EngagementWidgets/Poll/Form.tsx | 8 +- .../EngagementWidgets/Poll/PollAnswerForm.tsx | 4 +- .../Poll/PolllAnswerItemForm.tsx | 4 +- .../Subscribe/EmailListFormDrawer.tsx | 9 +- .../Subscribe/FormSignUpDrawer.tsx | 8 +- .../Subscribe/SubscribeForm.tsx | 14 +- .../Subscribe/SubscribeInfoPaper.tsx | 10 +- .../form/EngagementWidgets/Timeline/Form.tsx | 16 +- .../form/EngagementWidgets/Video/Form.tsx | 10 +- .../WhoIsListening/AddContactDrawer.tsx | 8 +- .../WhoIsListening/ContactInfoPaper.tsx | 28 ++-- .../WhoIsListening/WhoIsListeningForm.tsx | 16 +- .../form/EngagementWidgets/WidgetTitle.tsx | 6 +- .../form/EngagementWidgets/WidgetsBlock.tsx | 8 +- .../AdvancedSearch/SearchComponent.tsx | 41 +++-- .../components/engagement/listing/index.tsx | 18 +- .../components/engagement/view/EmailPanel.tsx | 32 ++-- .../engagement/view/EngagementInfoSection.tsx | 4 +- .../engagement/view/FailurePanel.tsx | 20 +-- .../engagement/view/PreviewBanner.tsx | 36 ++-- .../engagement/view/ScheduleModal/index.tsx | 29 ++-- .../engagement/view/SuccessPanel.tsx | 30 ++-- .../engagement/view/SurveyBlock.tsx | 10 +- .../engagement/view/ThankYouPanel.tsx | 16 +- .../engagement/view/UnpublishModal/index.tsx | 28 ++-- .../view/widgets/DocumentWidget.tsx | 4 +- .../view/widgets/Events/EventsWidget.tsx | 8 +- .../view/widgets/Events/InPersonEvent.tsx | 22 +-- .../view/widgets/Events/VirtualSession.tsx | 14 +- .../view/widgets/Map/ExpandModal.tsx | 6 +- .../engagement/view/widgets/Map/MapWidget.tsx | 8 +- .../widgets/PhasesWidget/EngagementPhase.tsx | 4 +- .../view/widgets/PhasesWidget/InfoArrow.tsx | 6 +- .../view/widgets/PhasesWidget/PhaseBox.tsx | 4 +- .../EngagementPhaseMobile.tsx | 4 +- .../PhasesWidgetMobile/PhasesWidgetMobile.tsx | 6 +- .../view/widgets/PhasesWidget/index.tsx | 6 +- .../view/widgets/Poll/PollWidgetView.tsx | 10 +- .../widgets/Subscribe/EmailListSection.tsx | 6 +- .../widgets/Subscribe/FormSignUpSection.tsx | 6 +- .../ManageSubscription/Subscription.tsx | 6 +- .../widgets/Subscribe/SubscribeWidget.tsx | 4 +- .../widgets/Timeline/TimelineWidgetView.tsx | 14 +- .../view/widgets/Video/VideoWidgetView.tsx | 10 +- .../view/widgets/WhoIsListeningWidget.tsx | 22 +-- .../feedback/FeedbackModal/index.tsx | 20 +-- met-web/src/components/feedback/listing.tsx | 6 +- met-web/src/components/homePage/homePage.tsx | 4 +- .../src/components/imageUpload/Uploader.tsx | 10 +- .../src/components/imageUpload/cropModal.tsx | 6 +- .../src/components/landing/EngagementTile.tsx | 27 +-- .../components/landing/LandingComponent.tsx | 6 +- .../src/components/layout/Footer/index.tsx | 8 +- .../layout/Header/InternalHeader.tsx | 10 +- .../components/layout/Header/PublicHeader.tsx | 6 +- met-web/src/components/map/index.tsx | 6 +- .../components/publicDashboard/Dashboard.tsx | 20 +-- .../components/publicDashboard/ErrorBox.tsx | 4 +- .../src/components/publicDashboard/NoData.tsx | 4 +- .../SubmissionTrend/SubmissionTrend.tsx | 6 +- .../SurveyBar/QuestionBlock.tsx | 10 +- .../publicDashboard/SurveyBar/index.tsx | 19 ++- .../SurveyBarPrintable/index.tsx | 4 +- .../src/components/survey/building/index.tsx | 8 +- .../components/survey/create/CloneOptions.tsx | 8 +- .../survey/create/CreateOptions.tsx | 8 +- .../components/survey/create/LinkOptions.tsx | 8 +- .../components/survey/create/OptionsForm.tsx | 6 +- .../src/components/survey/edit/EditForm.tsx | 10 +- .../survey/edit/InvalidTokenModal.tsx | 16 +- .../survey/listing/AdvancedSearch.tsx | 10 +- .../src/components/survey/listing/Surveys.tsx | 14 +- .../components/survey/report/SearchBar.tsx | 6 +- .../components/survey/report/SettingsForm.tsx | 16 +- .../survey/submit/InvalidTokenModal.tsx | 16 +- .../survey/submit/PreviewBanner.tsx | 8 +- .../components/survey/submit/SurveyForm.tsx | 10 +- .../components/tenantManagement/Listing.tsx | 10 +- .../userManagement/listing/AddUserModal.tsx | 19 ++- .../listing/AssignRoleModal.tsx | 19 ++- .../listing/ReassignRoleModal.tsx | 8 +- .../listing/UserManagementListing.tsx | 6 +- .../userDetails/AddToEngagement.tsx | 19 ++- .../userDetails/UserDetails.tsx | 21 ++- .../userDetails/UserStatusButton.tsx | 10 +- met-web/src/models/engagementPhases.tsx | 46 ++--- met-web/src/routes/NoAccess.tsx | 6 +- met-web/src/routes/NoResults.tsx | 28 ++-- met-web/src/routes/NotAvailable.tsx | 6 +- met-web/src/routes/NotFound.tsx | 6 +- met-web/src/routes/Unauthorized.tsx | 10 +- .../components/engagement-banner-wc.tsx | 8 +- met-web/tests/unit/components/test.test.tsx | 6 +- 145 files changed, 1093 insertions(+), 944 deletions(-) rename met-web/src/components/{MetDesignSystem => common}/Input/Button.tsx (97%) rename met-web/src/components/{MetDesignSystem => common}/Input/index.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Layout/Table.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Layout/index.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Navigation/Breadcrumb.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Navigation/index.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Typography/Body.tsx (93%) rename met-web/src/components/{MetDesignSystem => common}/Typography/Headers.tsx (100%) rename met-web/src/components/{MetDesignSystem => common}/Typography/index.tsx (100%) diff --git a/met-web/src/components/FormCAC/FirstTab.tsx b/met-web/src/components/FormCAC/FirstTab.tsx index 1b6f6f7b9..97d1b8687 100644 --- a/met-web/src/components/FormCAC/FirstTab.tsx +++ b/met-web/src/components/FormCAC/FirstTab.tsx @@ -3,7 +3,7 @@ import { useForm, Controller } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; import { Checkbox, FormControlLabel, FormGroup, FormHelperText, Grid, Link } from '@mui/material'; -import { MetLabel, MetParagraph, PrimaryButton } from 'components/common'; +import { MetLabel, MetParagraphOld, PrimaryButtonOld } from 'components/common'; import { FormContext } from './FormContext'; import { TAB_TWO } from './constants'; import { When } from 'react-if'; @@ -52,15 +52,15 @@ export const FirstTab: React.FC = () => { {translate('formCAC.tab1.labels.0')} - {translate('formCAC.tab1.paragraph.0')} + {translate('formCAC.tab1.paragraph.0')} - {translate('formCAC.tab1.paragraph.1')} + {translate('formCAC.tab1.paragraph.1')} {translate('formCAC.tab1.labels.1')} - {translate('formCAC.tab1.paragraph.2')} + {translate('formCAC.tab1.paragraph.2')} @@ -125,9 +125,9 @@ export const FirstTab: React.FC = () => { - + {translate('formCAC.tab1.button.next')} - + ); diff --git a/met-web/src/components/FormCAC/Form.tsx b/met-web/src/components/FormCAC/Form.tsx index 4601928a2..41b3be8a5 100644 --- a/met-web/src/components/FormCAC/Form.tsx +++ b/met-web/src/components/FormCAC/Form.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MetHeader1, MetPaper, MetParagraph } from 'components/common'; +import { MetHeader1Old, MetPaper, MetParagraphOld } from 'components/common'; import { Grid } from '@mui/material'; import { Banner } from 'components/banner/Banner'; import LandingPageBanner from 'assets/images/LandingPageBanner.png'; @@ -43,10 +43,10 @@ export const Form = () => { rowSpacing={2} > - {translate('formCAC.form.header')} + {translate('formCAC.form.header')} - {translate('formCAC.form.paragraph')} + {translate('formCAC.form.paragraph')} diff --git a/met-web/src/components/FormCAC/SecondTab.tsx b/met-web/src/components/FormCAC/SecondTab.tsx index 2e36bbef5..be8082b00 100644 --- a/met-web/src/components/FormCAC/SecondTab.tsx +++ b/met-web/src/components/FormCAC/SecondTab.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState } from 'react'; import { Grid } from '@mui/material'; -import { MetDescription, MetLabel, PrimaryButton } from 'components/common'; +import { MetDescription, MetLabel, PrimaryButtonOld } from 'components/common'; import { FormContext } from './FormContext'; import * as yup from 'yup'; import ControlledTextField from 'components/common/ControlledInputComponents/ControlledTextField'; @@ -122,9 +122,9 @@ export const SecondTab = () => { - + {translate('formCAC.tab2.button.submit')} - + ); diff --git a/met-web/src/components/Login/index.tsx b/met-web/src/components/Login/index.tsx index 05072afb9..776e257c9 100644 --- a/met-web/src/components/Login/index.tsx +++ b/met-web/src/components/Login/index.tsx @@ -2,20 +2,20 @@ import React from 'react'; import UserService from 'services/userService'; import { Grid } from '@mui/material'; import { useAppSelector } from 'hooks'; -import { PrimaryButton } from 'components/common'; +import { PrimaryButtonOld } from 'components/common'; const Login = () => { const isLoggedIn = useAppSelector((state) => state.user.authentication.authenticated); return ( {isLoggedIn ? ( - UserService.doLogout()}> + UserService.doLogout()}> Logout - + ) : ( - UserService.doLogin()}> + UserService.doLogin()}> Login - + )} ); diff --git a/met-web/src/components/MetDesignSystem/index.tsx b/met-web/src/components/MetDesignSystem/index.tsx index 80bfb1ed7..e69de29bb 100644 --- a/met-web/src/components/MetDesignSystem/index.tsx +++ b/met-web/src/components/MetDesignSystem/index.tsx @@ -1,105 +0,0 @@ -export const colors = { - type: { - regular: { - primary: '#292929', - secondary: '#464341', - link: '#1A5A96', - disabled: '#A19F9D', - }, - inverted: { - primary: '#FFFFFF', - secondary: '#EDEBE9', - link: '#D8EBFF', - disabled: '#A19F9D', - }, - }, - button: { - primary: { - enabled: '#053662', - hover: '#1E5189', - focused: '#053662', - pressed: '#032543', - disabled: '#EDEBE9', - }, - secondary: { - enabled: '#FFFFFF', - hover: '#EDEBE9', - focused: '#FFFFFF', - pressed: '#E0DEDC', - disabled: '#EDEBE9', - stroke: '#201F1E', - }, - tertiary: { - enabled: '#FFFFFF', - hover: '#F1F8FF', - focused: '#FFFFFF', - pressed: '#F1F8FF', - disabled: '#FFFFFF', - }, - }, - focus: { - regular: { - outer: '#2E5DD7', - inner: '#FFFFFF', - }, - }, - surface: { - gray: { - 10: '#FAF9F8', - 20: '#F3F2F1', - 30: '#EDEBE9', - 40: '#E1DFDD', - 50: '#D2D0CE', - 60: '#C8C6C4', - 70: '#A19F9D', - 80: '#7A7876', - 90: '#3B3A39', - 100: '#323130', - 110: '#201F1E', - }, - blue: { - 10: '#F1F8FF', - 20: '#D8EBFF', - 30: '#C0DFFF', - 40: '#A7D2FF', - 50: '#8EC6FF', - 60: '#76BAFF', - 70: '#4E97E0', - 80: '#2B71B8', - 90: '#12508F', - 100: '#053662', - bc: '#053662', - }, - gold: { - 10: '#FFF8E8', - 20: '#FFECBE', - 30: '#FFE095', - 40: '#FFD46C', - 50: '#FFC843', - 60: '#FCBA19', - bc: '#FCBA19', - 70: '#D39706', - 80: '#AA7900', - 90: '#825C00', - 100: '#593F00', - }, - }, -}; - -export const elevations = { - // For use with CSS box-shadow property - // Not complete in Figma yet\ - none: '0px 0px transparent', - z1: '0px 2px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 6px 0px rgba(0, 0, 0, 0.60) inset', - z4: '0px 2px 3px 0px rgba(0, 0, 0, 0.10), 0px 6px 6px 0px rgba(0, 0, 0, 0.09), 0px 14px 9px 0px rgba(0, 0, 0, 0.05)', - z9: '0px 5px 6px 0px rgba(0, 0, 0, 0.20), 0px 9px 12px 0px rgba(0, 0, 0, 0.14), 0px 3px 16px 0px rgba(0, 0, 0, 0.12)', -}; - -export const globalFocusShadow = `inset 0px 0px 0px 2px ${colors.focus.regular.inner}`; - -export const globalFocusVisible = { - '&:focus-visible': { - outline: `2px solid ${colors.focus.regular.outer}`, - boxShadow: globalFocusShadow, - }, -}; diff --git a/met-web/src/components/comments/admin/review/CommentReview.tsx b/met-web/src/components/comments/admin/review/CommentReview.tsx index 86d1e9080..6ed069c67 100644 --- a/met-web/src/components/comments/admin/review/CommentReview.tsx +++ b/met-web/src/components/comments/admin/review/CommentReview.tsx @@ -19,13 +19,13 @@ import { useParams, useNavigate } from 'react-router-dom'; import { openNotification } from 'services/notificationService/notificationSlice'; import { MetLabel, - MetParagraph, + MetParagraphOld, MetPageGridContainer, - PrimaryButton, - SecondaryButton, + PrimaryButtonOld, + SecondaryButtonOld, MetHeader3, MetHeader4, - MetSmallText, + MetSmallTextOld, MetTooltip, } from 'components/common'; import { CommentStatus } from 'constants/commentStatus'; @@ -223,7 +223,7 @@ const CommentReview = () => { Comment ID: - {id} + {id} @@ -232,7 +232,7 @@ const CommentReview = () => { Status: - {CommentStatus[comment_status_id]} + {CommentStatus[comment_status_id]} @@ -241,7 +241,7 @@ const CommentReview = () => { Comment Date: - {formatDate(created_date)} + {formatDate(created_date)} @@ -250,7 +250,7 @@ const CommentReview = () => { Reviewed by: - {reviewed_by} + {reviewed_by} @@ -259,7 +259,7 @@ const CommentReview = () => { Date Reviewed: - {formatDate(review_date)} + {formatDate(review_date)} @@ -311,7 +311,7 @@ const CommentReview = () => { {comment.label ?? 'Label not available.'} - {comment.text} + {comment.text} @@ -343,17 +343,17 @@ const CommentReview = () => { } - label={Approve} + label={Approve} /> } - label={Reject} + label={Reject} /> } - label={Needs further review} + label={Needs further review} /> @@ -365,7 +365,7 @@ const CommentReview = () => { Reason for Rejection Contains personal information} + label={Contains personal information} control={ { /> Contains profanity or inappropriate language + + Contains profanity or inappropriate language + } control={ { } /> Contains threat/menace} + label={Contains threat/menace} control={ { /> } /> - + {translate('comment.admin.review.threatTextOne')}{' '} {translate('comment.admin.review.threatContact')}{' '} {translate('comment.admin.review.threatTextTwo')}{' '} {threatEmailContact} - + Other} + label={Other} control={ { /> } /> - + This will be inserted in the email sent to the respondent: - + We have reviewed your feedback and can't accept it for the following reason(s): - Your feedback contains "other" - - + + { multiline />
- + Review Notes - - + + This note will be inserted in the email sent to the respondent to help them understand what needs to be edited for their comment(s) to be approved. - + {reviewNotes.map((staffNote) => { return ( { alignItems="flex-end" justifyContent="flex-end" > - {'Preview Email'} + + {'Preview Email'} +
@@ -491,18 +497,18 @@ const CommentReview = () => { ); })}
- + Clicking the "Save" button will trigger an automatic email to be sent to the person who made this comment. They will have the option to edit and re-submit their comment. The edited comment will have to be approved before it is published. - +
+ Don't send this email to the person who commented. - + } control={ { - + {'Save & Continue'} - + - navigate(-1)}>Cancel + navigate(-1)}>Cancel diff --git a/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx b/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx index 383100986..e8bc729c4 100644 --- a/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx +++ b/met-web/src/components/comments/admin/review/emailPreview/EmailPreview.tsx @@ -1,6 +1,6 @@ import { Box, Grid, Stack, Link } from '@mui/material'; import * as React from 'react'; -import { MetBody } from 'components/common'; +import { MetBodyOld } from 'components/common'; import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDark.svg'; import { Survey } from 'models/survey'; import { formatDate } from 'components/common/dateHelper'; @@ -36,13 +36,13 @@ export default function EmailPreview({ /> - + Thank you for taking the time to provide your feedback on {engagementName}. - + {children} - + {!isClosed ? ( <> You can edit and re-submit your feedback. The comment period is open until {''} @@ -54,11 +54,11 @@ export default function EmailPreview({ your feedback cannot be edited. )} - + {!isClosed ? ( - Edit your feedback - + ) : null} - Thank you, + Thank you, - The {tenant.name} Team + The {tenant.name} Team diff --git a/met-web/src/components/comments/admin/review/emailPreview/EmailPreviewModal.tsx b/met-web/src/components/comments/admin/review/emailPreview/EmailPreviewModal.tsx index dd02f731d..790d6d1d0 100644 --- a/met-web/src/components/comments/admin/review/emailPreview/EmailPreviewModal.tsx +++ b/met-web/src/components/comments/admin/review/emailPreview/EmailPreviewModal.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Grid, Modal } from '@mui/material'; -import { PrimaryButton, modalStyle } from 'components/common'; +import { PrimaryButtonOld, modalStyle } from 'components/common'; type EmailModal = { open: boolean; @@ -26,7 +26,7 @@ const EmailPreviewModal = ({ open, header, renderEmail, handleClose }: EmailModa {renderEmail} - handleClose()}>Close Preview + handleClose()}>Close Preview diff --git a/met-web/src/components/comments/admin/review/emailPreview/EmailTemplates.tsx b/met-web/src/components/comments/admin/review/emailPreview/EmailTemplates.tsx index ef442ae08..7c6374099 100644 --- a/met-web/src/components/comments/admin/review/emailPreview/EmailTemplates.tsx +++ b/met-web/src/components/comments/admin/review/emailPreview/EmailTemplates.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MetBody } from 'components/common'; +import { MetBodyOld } from 'components/common'; import { Grid } from '@mui/material'; import { When } from 'react-if'; import { StaffNote } from 'models/staffNote'; @@ -20,29 +20,31 @@ export const RejectEmailTemplate = ({ }: RejectionEmailProps) => ( <> - + We have reviewed your feedback and can’t accept it for the following reason(s): - +
  • - Your feedback contains personal information + Your feedback contains personal information
  • - Your feedback contains profanity or inappropriate language + + Your feedback contains profanity or inappropriate language +
  • - {` Your feedback contains ${otherReason}.`} + {` Your feedback contains ${otherReason}.`}
    • @@ -50,7 +52,7 @@ export const RejectEmailTemplate = ({ - {reviewNotes ? reviewNotes[0]?.note : ''} + {reviewNotes ? reviewNotes[0]?.note : ''} diff --git a/met-web/src/components/comments/admin/reviewListing/AdvancedSearch.tsx b/met-web/src/components/comments/admin/reviewListing/AdvancedSearch.tsx index 4659b3419..1a66e1de4 100644 --- a/met-web/src/components/comments/admin/reviewListing/AdvancedSearch.tsx +++ b/met-web/src/components/comments/admin/reviewListing/AdvancedSearch.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Grid, MenuItem, Stack, TextField } from '@mui/material'; -import { MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { COMMENTS_STATUS, CommentStatus } from 'constants/commentStatus'; import { AdvancedSearchFilters, CommentListingContext, initialSearchFilters } from './CommentListingContext'; @@ -159,22 +159,22 @@ export const AdvancedSearch = () => { width="100%" justifyContent="flex-end" > - { setAdvancedSearchFilters(initialSearchFilters); setSearchFilters(initialSearchFilters); }} > Reset All Filters - - + { setAdvancedSearchFilters(searchFilters); }} > Search - + diff --git a/met-web/src/components/comments/admin/reviewListing/Submissions.tsx b/met-web/src/components/comments/admin/reviewListing/Submissions.tsx index 913a19b4c..6f2af88a1 100644 --- a/met-web/src/components/comments/admin/reviewListing/Submissions.tsx +++ b/met-web/src/components/comments/admin/reviewListing/Submissions.tsx @@ -2,7 +2,7 @@ import React, { useState, useContext } from 'react'; import MetTable from 'components/common/Table'; import Grid from '@mui/material/Grid'; import { Link, useLocation } from 'react-router-dom'; -import { MetPageGridContainer, PrimaryButton, MetHeader1, SecondaryButton } from 'components/common'; +import { MetPageGridContainer, PrimaryButtonOld, MetHeader1Old, SecondaryButtonOld } from 'components/common'; import { HeadCell, PaginationOptions } from 'components/common/Table/types'; import { formatDate } from 'components/common/dateHelper'; import { Collapse, Link as MuiLink } from '@mui/material'; @@ -118,13 +118,13 @@ const Submissions = () => { onChange={(e) => setSearchText(e.target.value)} size="small" /> - handleSearchBarClick(searchText)} > - - + setIsAdvancedSearchOpen(!isAdvancedSearchOpen)} startIcon={ @@ -140,12 +140,12 @@ const Submissions = () => { } > Advanced Search - + - + Read All Comments - + @@ -157,9 +157,9 @@ const Submissions = () => { - + {`${survey.name} Comments`} - + { {comment.label ?? 'Label not available.'} - {' ' + comment.text} + {' ' + comment.text} @@ -284,14 +284,14 @@ const CommentTextListing = () => { justifyContent: 'flex-start', }} > - Comment Date: - - {formatDate(row.created_date)} + + {formatDate(row.created_date)} @@ -309,14 +309,14 @@ const CommentTextListing = () => { justifyContent: 'flex-start', }} > - Reviewed By: - - {row.reviewed_by} + + {row.reviewed_by} @@ -347,25 +347,25 @@ const CommentTextListing = () => { onChange={(e) => setSearchText(e.target.value)} size="small" /> - handleSearchBarClick(searchText)} > - + - + Return to Comments List - + - { } > Export to CSV - + - + {header} - + {subText.map((subtext, index) => ( - + {subtext.text} - + ))} {isSmallScreen ? ( <> - + {confirmButtonText ? confirmButtonText : 'Confirm'} - - + + {cancelButtonText ? cancelButtonText : 'Cancel'} - + ) : ( <> - + {cancelButtonText ? cancelButtonText : 'Cancel'} - - + + {confirmButtonText ? confirmButtonText : 'Confirm'} - + )} diff --git a/met-web/src/components/common/Modals/EmailModal.tsx b/met-web/src/components/common/Modals/EmailModal.tsx index 63f24697b..538a3362c 100644 --- a/met-web/src/components/common/Modals/EmailModal.tsx +++ b/met-web/src/components/common/Modals/EmailModal.tsx @@ -10,7 +10,14 @@ import { useMediaQuery, Theme, } from '@mui/material'; -import { MetLabel, modalStyle, PrimaryButton, SecondaryButton, MetHeader1, MetBody } from 'components/common'; +import { + MetLabel, + modalStyle, + PrimaryButtonOld, + SecondaryButtonOld, + MetHeader1Old, + MetBodyOld, +} from 'components/common'; import Modal from '@mui/material/Modal'; import { ModalProps } from './types'; @@ -64,14 +71,14 @@ const EmailModal = ({ rowSpacing={2} > - + {header} - + {subText.map((subtext) => ( - {subtext.text} + {subtext.text} ))} @@ -142,12 +149,12 @@ const EmailModal = ({ width="100%" justifyContent="flex-end" > - updateModal(false)}> + updateModal(false)}> Cancel - - + + Submit - + diff --git a/met-web/src/components/common/Modals/UpdateModal.tsx b/met-web/src/components/common/Modals/UpdateModal.tsx index d8932135f..8207e6021 100644 --- a/met-web/src/components/common/Modals/UpdateModal.tsx +++ b/met-web/src/components/common/Modals/UpdateModal.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Grid } from '@mui/material'; -import { modalStyle, PrimaryButton, MetHeader1, MetBody } from 'components/common'; +import { modalStyle, PrimaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common'; import { NotificationModalProps } from './types'; const UpdateModal = ({ header, subText, handleClose }: NotificationModalProps) => { @@ -15,17 +15,17 @@ const UpdateModal = ({ header, subText, handleClose }: NotificationModalProps) = > - + {header} - + {subText.map((subtext) => ( - + {subtext.text} - + ))} - + Close - + diff --git a/met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx b/met-web/src/components/common/Navigation/Breadcrumb.tsx similarity index 100% rename from met-web/src/components/MetDesignSystem/Navigation/Breadcrumb.tsx rename to met-web/src/components/common/Navigation/Breadcrumb.tsx diff --git a/met-web/src/components/MetDesignSystem/Navigation/index.tsx b/met-web/src/components/common/Navigation/index.tsx similarity index 100% rename from met-web/src/components/MetDesignSystem/Navigation/index.tsx rename to met-web/src/components/common/Navigation/index.tsx diff --git a/met-web/src/components/MetDesignSystem/Typography/Body.tsx b/met-web/src/components/common/Typography/Body.tsx similarity index 93% rename from met-web/src/components/MetDesignSystem/Typography/Body.tsx rename to met-web/src/components/common/Typography/Body.tsx index 3c85f8fce..55c1e100e 100644 --- a/met-web/src/components/MetDesignSystem/Typography/Body.tsx +++ b/met-web/src/components/common/Typography/Body.tsx @@ -1,5 +1,5 @@ import { styled } from '@mui/material'; -import { globalFocusVisible, colors } from '..'; +import { globalFocusVisible, colors } from '../../common'; import { Link as RouterLink } from 'react-router-dom'; export const BodyText = styled('p')<{ bold?: boolean; small?: boolean }>(({ bold, small }) => ({ diff --git a/met-web/src/components/MetDesignSystem/Typography/Headers.tsx b/met-web/src/components/common/Typography/Headers.tsx similarity index 100% rename from met-web/src/components/MetDesignSystem/Typography/Headers.tsx rename to met-web/src/components/common/Typography/Headers.tsx diff --git a/met-web/src/components/MetDesignSystem/Typography/index.tsx b/met-web/src/components/common/Typography/index.tsx similarity index 100% rename from met-web/src/components/MetDesignSystem/Typography/index.tsx rename to met-web/src/components/common/Typography/index.tsx diff --git a/met-web/src/components/common/index.tsx b/met-web/src/components/common/index.tsx index c4e47c99a..1a343a780 100644 --- a/met-web/src/components/common/index.tsx +++ b/met-web/src/components/common/index.tsx @@ -22,6 +22,112 @@ import { MET_Header_Font_Family, MET_Font_Weight, MET_Header_Font_Weight } from import { When } from 'react-if'; import ReactPlayer from 'react-player'; +export const colors = { + type: { + regular: { + primary: '#292929', + secondary: '#464341', + link: '#1A5A96', + disabled: '#A19F9D', + }, + inverted: { + primary: '#FFFFFF', + secondary: '#EDEBE9', + link: '#D8EBFF', + disabled: '#A19F9D', + }, + }, + button: { + primary: { + enabled: '#053662', + hover: '#1E5189', + focused: '#053662', + pressed: '#032543', + disabled: '#EDEBE9', + }, + secondary: { + enabled: '#FFFFFF', + hover: '#EDEBE9', + focused: '#FFFFFF', + pressed: '#E0DEDC', + disabled: '#EDEBE9', + stroke: '#201F1E', + }, + tertiary: { + enabled: '#FFFFFF', + hover: '#F1F8FF', + focused: '#FFFFFF', + pressed: '#F1F8FF', + disabled: '#FFFFFF', + }, + }, + focus: { + regular: { + outer: '#2E5DD7', + inner: '#FFFFFF', + }, + }, + surface: { + gray: { + 10: '#FAF9F8', + 20: '#F3F2F1', + 30: '#EDEBE9', + 40: '#E1DFDD', + 50: '#D2D0CE', + 60: '#C8C6C4', + 70: '#A19F9D', + 80: '#7A7876', + 90: '#3B3A39', + 100: '#323130', + 110: '#201F1E', + }, + blue: { + 10: '#F1F8FF', + 20: '#D8EBFF', + 30: '#C0DFFF', + 40: '#A7D2FF', + 50: '#8EC6FF', + 60: '#76BAFF', + 70: '#4E97E0', + 80: '#2B71B8', + 90: '#12508F', + 100: '#053662', + bc: '#053662', + }, + gold: { + 10: '#FFF8E8', + 20: '#FFECBE', + 30: '#FFE095', + 40: '#FFD46C', + 50: '#FFC843', + 60: '#FCBA19', + bc: '#FCBA19', + 70: '#D39706', + 80: '#AA7900', + 90: '#825C00', + 100: '#593F00', + }, + }, +}; + +export const elevations = { + // For use with CSS box-shadow property + // Not complete in Figma yet + none: '0px 0px transparent', + z1: '0px 2px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 6px 0px rgba(0, 0, 0, 0.60) inset', + z4: '0px 2px 3px 0px rgba(0, 0, 0, 0.10), 0px 6px 6px 0px rgba(0, 0, 0, 0.09), 0px 14px 9px 0px rgba(0, 0, 0, 0.05)', + z9: '0px 5px 6px 0px rgba(0, 0, 0, 0.20), 0px 9px 12px 0px rgba(0, 0, 0, 0.14), 0px 3px 16px 0px rgba(0, 0, 0, 0.12)', +}; + +export const globalFocusShadow = `inset 0px 0px 0px 2px ${colors.focus.regular.inner}`; + +export const globalFocusVisible = { + '&:focus-visible': { + outline: `2px solid ${colors.focus.regular.outer}`, + boxShadow: globalFocusShadow, + }, +}; + export const MetTooltip = styled(({ className, ...props }: TooltipProps) => ( ))(({ theme }) => ({ @@ -117,8 +223,10 @@ export const WidgetButton = ({ children, ...rest }: { children: React.ReactNode; {children} ); - -export const SecondaryButton = ({ +/** + * @deprecated Use ‹SecondaryButton› from common/Input instead + */ +export const SecondaryButtonOld = ({ children, disabled = false, ...rest @@ -128,9 +236,9 @@ export const SecondaryButton = ({ }) => { if (disabled) { return ( - + {children} - + ); } return ( @@ -144,7 +252,10 @@ export const SecondaryButton = ({ ); }; -export const PrimaryButton = ({ children, ...rest }: { children: React.ReactNode; [prop: string]: unknown }) => ( +/** + * @deprecated Use ‹PrimaryButton› from common/Input instead + */ +export const PrimaryButtonOld = ({ children, ...rest }: { children: React.ReactNode; [prop: string]: unknown }) => ( ({ fontFamily: MET_Header_Font_Family, })); -export const MetParagraph = styled(Typography)(() => ({ +/** + * @deprecated Use ‹MetBody› from common/Typography instead + */ +export const MetParagraphOld = styled(Typography)(() => ({ fontSize: '16px', fontFamily: MET_Header_Font_Family, })); @@ -271,13 +385,19 @@ export const MetDescription = styled(Typography)(() => ({ color: '#707070', })); -export const HeaderTitle = styled(Typography)(() => ({ +/** + * @deprecated Use ‹Header1› from common/Typography instead + */ +export const HeaderTitleOld = styled(Typography)(() => ({ fontSize: '32px', fontWeight: 'bold', fontFamily: MET_Header_Font_Family, })); -export const SubHeader = styled(Typography)(() => ({ +/** + * @deprecated Use ‹Header2› from common/Typography instead + */ +export const SubHeaderOld = styled(Typography)(() => ({ fontSize: '28px', fontFamily: MET_Header_Font_Family, })); @@ -288,7 +408,10 @@ export const ListItem = styled(Typography)(() => ({ marginBottom: 1, })); -export const MetSmallText = ({ bold, children, sx, ...rest }: HeaderProps) => { +/** + * @deprecated Use ‹BodyText small› from common/Typography instead + */ +export const MetSmallTextOld = ({ bold, children, sx, ...rest }: HeaderProps) => { return ( { +/** + * @deprecated Use ‹Header1› from common/Typography instead + */ +export const MetHeader1Old = ({ bold, children, sx, ...rest }: HeaderProps) => { return ( { ); }; -export const MetHeader2 = ({ bold, children, sx, ...rest }: HeaderProps) => { + +/** + * @deprecated Use ‹Header2› from common/Typography instead + */ +export const MetHeader2Old = ({ bold, children, sx, ...rest }: HeaderProps) => { return ( { +/** + * @deprecated Use ‹BodyText› from common/Typography instead + */ +export const MetBodyOld = ({ bold, children, sx, ...rest }: HeaderProps) => { return ( { rowSpacing={3} > - Engagements Dashboard + Engagements Dashboard diff --git a/met-web/src/components/dashboard/EngagementsAccordion.tsx b/met-web/src/components/dashboard/EngagementsAccordion.tsx index ad416616f..4914a26ba 100644 --- a/met-web/src/components/dashboard/EngagementsAccordion.tsx +++ b/met-web/src/components/dashboard/EngagementsAccordion.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import Grid from '@mui/material/Grid'; -import { MetBody, MetLabel } from 'components/common'; +import { MetBodyOld, MetLabel } from 'components/common'; import { Accordion, AccordionDetails, AccordionSummary, useMediaQuery, Theme } from '@mui/material'; import { Engagement } from 'models/engagement'; import { When } from 'react-if'; @@ -81,11 +81,11 @@ const EngagementsAccordion = ({ {engagement.name} - + {engagement.start_date} {' - '} {engagement.end_date} - + diff --git a/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx b/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx index c3a3d43b8..ee2da1373 100644 --- a/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx +++ b/met-web/src/components/engagement/dashboard/comment/CommentTable.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import MetTable from 'components/common/Table'; import { HeadCell } from 'components/common/Table/types'; -import { MetLabel, MetParagraph } from 'components/common'; +import { MetLabel, MetParagraphOld } from 'components/common'; import { Skeleton } from '@mui/material'; import { CommentViewContext, TransformedComment } from './CommentViewContext'; import { useAppTranslation } from 'hooks'; @@ -52,7 +52,7 @@ const CommentTable = () => {
    {comment.label}
    - {comment.text} + {comment.text}
    ))} @@ -67,7 +67,7 @@ const CommentTable = () => { allowSort: false, customStyle: { width: '20%' }, align: 'right', - renderCell: (row: TransformedComment) => {row.submission_date}, + renderCell: (row: TransformedComment) => {row.submission_date}, }, ]; diff --git a/met-web/src/components/engagement/dashboard/comment/CommentsBlock.tsx b/met-web/src/components/engagement/dashboard/comment/CommentsBlock.tsx index 33d50942e..f2c14c9be 100644 --- a/met-web/src/components/engagement/dashboard/comment/CommentsBlock.tsx +++ b/met-web/src/components/engagement/dashboard/comment/CommentsBlock.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { Grid, Skeleton } from '@mui/material'; import { Link, useNavigate, useParams } from 'react-router-dom'; import { CommentViewContext } from './CommentViewContext'; -import { PrimaryButton, MetPaper, MetHeader4 } from 'components/common'; +import { PrimaryButtonOld, MetPaper, MetHeader4 } from 'components/common'; import CommentTable from './CommentTable'; import { useAppSelector, useAppDispatch } from 'hooks'; import { SubmissionStatus } from 'constants/engagementStatus'; @@ -87,12 +87,12 @@ export const CommentsBlock: React.FC = ({ dashboardType }) = direction={{ xs: 'column', sm: 'row' }} justifyContent="flex-end" > - {translate('commentDashboard.block.buttonText')} - + diff --git a/met-web/src/components/engagement/form/DayCalculator/dayZeroRules.tsx b/met-web/src/components/engagement/form/DayCalculator/dayZeroRules.tsx index 0ba38fe7b..11bca447f 100644 --- a/met-web/src/components/engagement/form/DayCalculator/dayZeroRules.tsx +++ b/met-web/src/components/engagement/form/DayCalculator/dayZeroRules.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { MetHeader4, MetBody } from 'components/common'; +import { MetHeader4, MetBodyOld } from 'components/common'; const DayZeroRules = () => (
    @@ -8,11 +8,11 @@ const DayZeroRules = () => (
    • - + If a deadline falls on a holiday the deadline is extended to the next day that is not a holiday. For example, if the deadline for a comment period is December 26, boxing day, the deadline is extended to December 27. - +
    @@ -20,11 +20,11 @@ const DayZeroRules = () => (
    • - + If a deadline falls on a day when the office is not open (Saturday, Sunday) the deadline is extended to the next day that the office is open. For example, if the deadline for a comment period falls on a Saturday then the deadline is extended to Monday. - +
    @@ -32,17 +32,17 @@ const DayZeroRules = () => (
    • - + When calculating periods (for example 30 day comment period) the first day must be excluded and the last day included. For example, a 30 day comment period starts March 1, 2017, the comment period does not end until March 31, 2017. - +
    • - + Legislated time periods must be calculated with day -0- eg, Evaluation 30 days, Application Review 180 days, Ministers Decision 45 days, and Public Comment Periods. - +
    @@ -50,7 +50,7 @@ const DayZeroRules = () => (
    • - + There is no specific mention of time of day in the Interpretation Act so the day would end at midnight. If a comment is received before midnight on the last day of the comment period it would be included in the comment period. If an email was received at 11:59PM it would be @@ -58,7 +58,7 @@ const DayZeroRules = () => ( midnight then the comment would also be included in the comment period. Comments sent by mail or courier must be post marked by the last day of the comment period in order to be included in the comment period. - +
    @@ -66,12 +66,12 @@ const DayZeroRules = () => (
    • - + Suspending a project during the Application Review period, when the suspension resumes it starts back on the day it was suspended on. If a project is suspended on day 50 of the 180, in accordance with the spirit of the Act, day 49 was the last full day of the Application Review Period, when the project resumes, it would resume on day 50 to allow 180 full days of review. - +
    diff --git a/met-web/src/components/engagement/form/DayCalculator/index.tsx b/met-web/src/components/engagement/form/DayCalculator/index.tsx index f0768e941..3c85cdb42 100644 --- a/met-web/src/components/engagement/form/DayCalculator/index.tsx +++ b/met-web/src/components/engagement/form/DayCalculator/index.tsx @@ -2,12 +2,12 @@ import React, { useState } from 'react'; import { Modal, Grid, Stack, useMediaQuery, TextField, Autocomplete, Link as MuiLink, Typography } from '@mui/material'; import { modalStyle, - MetHeader1, + MetHeader1Old, MetHeader4, - PrimaryButton, - SecondaryButton, + PrimaryButtonOld, + SecondaryButtonOld, MetLabel, - MetBody, + MetBodyOld, } from 'components/common'; import { When } from 'react-if'; import dayjs from 'dayjs'; @@ -179,9 +179,9 @@ const DayCalculatorModal = ({ open, updateModal }: DayCalcModalProps) => { - + Day Calculator - + @@ -625,9 +625,9 @@ const DayCalculatorModal = ({ open, updateModal }: DayCalcModalProps) => { width="100%" justifyContent="flex-end" > - resetToDefault()}> + resetToDefault()}> Reset All - + @@ -640,20 +640,20 @@ const DayCalculatorModal = ({ open, updateModal }: DayCalcModalProps) => { { - + {options[0].description} setShowHideStatus(!showHideStatus)}>{`${ showHideStatus ? 'Hide' : 'Show' }`}{' '} Day Zero rules. - + } - {{options[1].description}} + {{options[1].description}} - {{options[2].description}} + {{options[2].description}} @@ -678,12 +678,12 @@ const DayCalculatorModal = ({ open, updateModal }: DayCalcModalProps) => { width="100%" justifyContent="flex-end" > - updateModal(false)}> + updateModal(false)}> Close - - calculator()}> + + calculator()}> Calculate - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx index 61f89cdaf..477c31349 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/AdditionalDetails/AdditionalTabContent.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Divider, Grid, Box } from '@mui/material'; -import { MetPaper, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetPaper, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import ConsentMessage from './ConsentMessage'; import EngagementMetadata from './Metadata/EngagementMetadata'; import { EngagementTabsContext } from '../EngagementTabsContext'; @@ -44,29 +44,29 @@ const AdditionalTabContent = () => { sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > - handleSaveAndContinueEngagement()} loading={isSaving} > Save and Continue - - + handleSaveAndExitEngagement()} loading={isSaving} > Save and Exit - - + handlePreviewEngagement()} disabled={isSaving} > {'Preview'} - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/ContentTabModal.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/ContentTabModal.tsx index 8ca010ad6..f26a78ea2 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/ContentTabModal.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/EngagementContent/ContentTabModal.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; import { MenuItem, Modal, Grid, Stack, TextField, Select } from '@mui/material'; -import { modalStyle, MetHeader1, MetLabel, PrimaryButton } from 'components/common'; +import { modalStyle, MetHeader1Old, MetLabel, PrimaryButtonOld } from 'components/common'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; import { ActionContext } from '../../ActionContext'; @@ -98,9 +98,9 @@ const ContentTabModal = ({ open, updateModal, tabs, setTabs, selectedTabType, ta > - + {isEditMode ? 'Edit the engagement content tab' : 'Add a new engagement content tab'} - + @@ -171,13 +171,13 @@ const ContentTabModal = ({ open, updateModal, tabs, setTabs, selectedTabType, ta alignItems="center" sx={{ mt: '1em' }} > - {isEditMode ? 'Update Tab' : 'Add Tab'} - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx index 63077a121..e79496dbf 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/EngagementForm.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; import { Typography, Grid, TextField, Stack, Box } from '@mui/material'; -import { MetPaper, MetLabel, PrimaryButton, SecondaryButton, MetDescription } from '../../../common'; +import { MetPaper, MetLabel, PrimaryButtonOld, SecondaryButtonOld, MetDescription } from '../../../common'; import { ActionContext } from '../ActionContext'; import ImageUpload from 'components/imageUpload'; import { EngagementTabsContext } from './EngagementTabsContext'; @@ -178,9 +178,9 @@ const EngagementForm = () => { - setIsOpen(true)}> + setIsOpen(true)}> Day Calculator - + @@ -230,29 +230,29 @@ const EngagementForm = () => { sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > - handleSaveAndContinueEngagement()} loading={isSaving} > Save and Continue - - + handleSaveAndExitEngagement()} loading={isSaving} > Save and Exit - - + handlePreviewEngagement()} disabled={isSaving} > {'Preview'} - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx index e7399b815..284a4f366 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/Results/EngagementResults.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Box } from '@mui/material'; -import { MetPaper, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetPaper, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { EngagementTabsContext } from '../EngagementTabsContext'; import { ActionContext } from '../../ActionContext'; import PollResultsView from './PollResults/PollResultsView'; @@ -36,29 +36,29 @@ const EngagementResults = () => { sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > - handleSaveAndContinueEngagement()} loading={isSaving} > Save and Continue - - + handleSaveAndExitEngagement()} loading={isSaving} > Save and Exit - - + handlePreviewEngagement()} disabled={isSaving} > {'Preview'} - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx index 4d941de30..055aa29e4 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/EngagementSettingsForm.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Divider, Grid, Box } from '@mui/material'; -import { MetPaper, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetPaper, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import InternalEngagement from './InternalEngagement'; import SendReport from './SendReport'; import { PublicUrls } from './PublicUrls'; @@ -50,29 +50,29 @@ const EngagementSettingsForm = () => { sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > - handleSaveAndContinueEngagement()} loading={isSaving} > Save and Continue - - + handleSaveAndExitEngagement()} loading={isSaving} > Save and Exit - - + handlePreviewEngagement()} disabled={isSaving} > {'Preview'} - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx index ccbd5e14a..60cb9d2f4 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/Settings/PublicUrls.tsx @@ -1,6 +1,6 @@ import React, { useState, useContext, useEffect } from 'react'; import { InputAdornment, TextField, Tooltip, Grid, useTheme } from '@mui/material'; -import { SecondaryButton, MetDescription, MetHeader4, MetSmallText, MetLabel } from 'components/common'; +import { SecondaryButtonOld, MetDescription, MetHeader4, MetSmallTextOld, MetLabel } from 'components/common'; import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import ClickAwayListener from '@mui/material/ClickAwayListener'; import { ActionContext } from 'components/engagement/form/ActionContext'; @@ -126,7 +126,7 @@ export const PublicUrls = () => { ), endAdornment: ( - { @@ -135,7 +135,7 @@ export const PublicUrls = () => { }} > - + ), }} @@ -150,7 +150,7 @@ export const PublicUrls = () => { - {backendError} + {backendError} @@ -197,7 +197,7 @@ export const PublicUrls = () => { InputProps={{ endAdornment: ( - { @@ -206,7 +206,7 @@ export const PublicUrls = () => { }} > - + ), }} diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/SurveyBlock/index.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/SurveyBlock/index.tsx index 6a144f353..c24bb3a13 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/SurveyBlock/index.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/SurveyBlock/index.tsx @@ -1,7 +1,7 @@ import React, { useContext, useState } from 'react'; import { ActionContext } from '../../ActionContext'; import { Grid } from '@mui/material'; -import { MetHeader4, MetPaper, MetSurvey, MetTooltip, SecondaryButton } from 'components/common'; +import { MetHeader4, MetPaper, MetSurvey, MetTooltip, SecondaryButtonOld } from 'components/common'; import { useNavigate } from 'react-router-dom'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; @@ -102,12 +102,12 @@ export const SurveyBlock = () => { title={!savedEngagement.id ? 'Please save the engagement before adding a survey.' : ''} > - 0} > Add Survey - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/AddTeamMemberModal.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/AddTeamMemberModal.tsx index 45d37f40a..33bf99313 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/AddTeamMemberModal.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/AddTeamMemberModal.tsx @@ -1,7 +1,14 @@ import React, { useContext, useState, useMemo, useRef } from 'react'; import Modal from '@mui/material/Modal'; import { Autocomplete, CircularProgress, Grid, Paper, Stack, TextField, useTheme } from '@mui/material'; -import { MetHeader3, MetLabel, MetSmallText, modalStyle, PrimaryButton, SecondaryButton } from 'components/common'; +import { + MetHeader3, + MetLabel, + MetSmallTextOld, + modalStyle, + PrimaryButtonOld, + SecondaryButtonOld, +} from 'components/common'; import { User } from 'models/user'; import { useForm, FormProvider, SubmitHandler, Controller } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; @@ -188,7 +195,9 @@ export const AddTeamMemberModal = () => { - {backendError} + + {backendError} + @@ -207,10 +216,10 @@ export const AddTeamMemberModal = () => { width="100%" justifyContent="flex-end" > - Cancel - + Cancel + Submit - + diff --git a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx index 1bc6b6ffe..caa0364cb 100644 --- a/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx +++ b/met-web/src/components/engagement/form/EngagementFormTabs/UserManagement/EngagementUserManagement.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Box } from '@mui/material'; -import { MetLabel, MetPaper, PrimaryButton, SecondaryButton, MetParagraph } from 'components/common'; +import { MetLabel, MetPaper, PrimaryButtonOld, SecondaryButtonOld, MetParagraphOld } from 'components/common'; import { ActionContext } from '../../ActionContext'; import { EngagementTabsContext } from '../EngagementTabsContext'; import { formatDate } from 'components/common/dateHelper'; @@ -31,7 +31,7 @@ const EngagementUserManagement = () => { Engagement Created by: - {savedEngagement.user_id} + {savedEngagement.user_id} @@ -40,12 +40,14 @@ const EngagementUserManagement = () => { Date Created: - {formatDate(savedEngagement.created_date)} + {formatDate(savedEngagement.created_date)} - setAddTeamMemberOpen(true)}>+ Add Team Member + setAddTeamMemberOpen(true)}> + + Add Team Member + @@ -63,29 +65,29 @@ const EngagementUserManagement = () => { sx={{ backgroundColor: 'var(--bcds-surface-background-white)' }} > - handleSaveAndContinueEngagement()} loading={isSaving} > Save and Continue - - + handleSaveAndExitEngagement()} loading={isSaving} > Save and Exit - - + handlePreviewEngagement()} disabled={isSaving} > {'Preview'} - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/AddFileDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/AddFileDrawer.tsx index dee7bdfb8..4e1a17659 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Documents/AddFileDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Documents/AddFileDrawer.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid, MenuItem } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -228,12 +228,12 @@ const AddFileDrawer = () => { marginTop="8em" > - + {`Save & Close`} - + - handleClose()}>{`Cancel`} + handleClose()}>{`Cancel`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/CreateFolderForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/CreateFolderForm.tsx index 8e5aeb0fe..c5b8fcf7f 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Documents/CreateFolderForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Documents/CreateFolderForm.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState } from 'react'; import { Grid, TextField, Stack } from '@mui/material'; -import { MetLabel, PrimaryButton, SecondaryButton, WidgetButton } from 'components/common'; +import { MetLabel, PrimaryButtonOld, SecondaryButtonOld, WidgetButton } from 'components/common'; import { When } from 'react-if'; import { DocumentsContext } from './DocumentsContext'; import { useAppDispatch } from 'hooks'; @@ -110,17 +110,17 @@ const CreateFolderForm = () => { width="100%" justifyContent="flex-start" > - Save - - setCreateFolderMode(false)}> + + setCreateFolderMode(false)}> Cancel - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentForm.tsx index 62cc7bc41..7602b18ff 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Documents/DocumentForm.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Divider, Grid } from '@mui/material'; -import { PrimaryButton } from 'components/common'; +import { PrimaryButtonOld } from 'components/common'; import { WidgetDrawerContext } from '../WidgetDrawerContext'; import CreateFolderForm from './CreateFolderForm'; import DocumentsBlock from './DocumentsBlock'; @@ -32,7 +32,7 @@ const DocumentForm = () => { - handleWidgetDrawerOpen(false)}>{`Close`} + handleWidgetDrawerOpen(false)}>{`Close`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx index 5a3f9ff65..576113fd8 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Documents/StyledTreeItem.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import TreeItem, { treeItemClasses, TreeItemProps } from '@mui/lab/TreeItem'; -import { MetBody } from 'components/common'; +import { MetBodyOld } from 'components/common'; import { If, Then, Else } from 'react-if'; import { Link, Box } from '@mui/material'; import OpenInNew from '@mui/icons-material/OpenInNew'; @@ -99,7 +99,7 @@ export function StyledTreeItem(props: StyledTreeItemProps & DocumentTreeItemProp - {labelText} + {labelText} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Documents/UploadFileDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Documents/UploadFileDrawer.tsx index 70bcec3fb..7ef37620c 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Documents/UploadFileDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Documents/UploadFileDrawer.tsx @@ -3,7 +3,14 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid, MenuItem } from '@mui/material'; -import { MetHeader3, MetLabel, MetParagraph, MetWidgetPaper, PrimaryButton, SecondaryButton } from 'components/common'; +import { + MetHeader3, + MetLabel, + MetParagraphOld, + MetWidgetPaper, + PrimaryButtonOld, + SecondaryButtonOld, +} from 'components/common'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -174,13 +181,13 @@ const UploadFileDrawer = () => { {fileToUpload?.name} - {fileToUpload?.type} + {fileToUpload?.type} {fileToUpload && ( - + {`${fileToUpload.size / OneMegaByte} MB`} - + )} @@ -264,15 +271,15 @@ const UploadFileDrawer = () => { marginTop="8em" > - + {`Save & Close`} - + - handleClose()} - >{`Cancel`} + >{`Cancel`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Events/EventInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Events/EventInfoPaper.tsx index 0d6894f3e..37dad275b 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Events/EventInfoPaper.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Events/EventInfoPaper.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { MetParagraph, MetWidgetPaper } from 'components/common'; +import { MetParagraphOld, MetWidgetPaper } from 'components/common'; import { Grid, IconButton } from '@mui/material'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import HighlightOffIcon from '@mui/icons-material/HighlightOff'; @@ -38,52 +38,52 @@ const EventInfoPaper = ({ event, removeEvent, ...rest }: EventInfoPaperProps) => > - Description: + Description: - + {eventItem.description} - + - Location: + Location: - + {eventItem.location_name} - + - Address: + Address: - + {eventItem.location_address} - + - Date: + Date: - + {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} - + - Time: + Time: - + {`${formatDate(eventItem.start_date, 'h:mm a')} to ${formatDate( eventItem.end_date, 'h:mm a', )} PT`} - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Events/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Events/Form.tsx index 5cb74eaa9..278644fbd 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Events/Form.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Events/Form.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Divider } from '@mui/material'; -import { PrimaryButton, WidgetButton } from 'components/common'; +import { PrimaryButtonOld, WidgetButton } from 'components/common'; import { WidgetDrawerContext } from '../WidgetDrawerContext'; import { EventsContext } from './EventsContext'; import EventsInfoBlock from './EventsInfoBlock'; @@ -45,13 +45,13 @@ const Form = () => { - { handleWidgetDrawerOpen(false); }} > Close - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Events/InPersonEventFormDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Events/InPersonEventFormDrawer.tsx index 19440dee7..9cace4de2 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Events/InPersonEventFormDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Events/InPersonEventFormDrawer.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -260,12 +260,15 @@ const InPersonEventFormDrawer = () => { marginTop="2em" > - {`Save & Close`} + {`Save & Close`} - handleEventDrawerOpen(EVENT_TYPE.MEETUP, false)}> + handleEventDrawerOpen(EVENT_TYPE.MEETUP, false)}> Cancel - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualEventInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualEventInfoPaper.tsx index 3ad10bef8..537307450 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualEventInfoPaper.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualEventInfoPaper.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { MetParagraph, MetWidgetPaper } from 'components/common'; +import { MetParagraphOld, MetWidgetPaper } from 'components/common'; import { Grid, IconButton } from '@mui/material'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import HighlightOffIcon from '@mui/icons-material/HighlightOff'; @@ -33,42 +33,42 @@ const VirtualEventInfoPaper = ({ event, removeEvent, ...rest }: EventInfoPaperPr > - Description: + Description: - + {eventItem.description} - + - Date: + Date: - + {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} - + - Time: + Time: - + {`${formatDate(eventItem.start_date, 'h:mm a')} to ${formatDate( eventItem.end_date, 'h:mm a', )} PT`} - + - Link: + Link: - + {eventItem.url} - {eventItem.url_label} - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualSessionFormDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualSessionFormDrawer.tsx index 64c749ebd..4fb2ea086 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualSessionFormDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Events/VirtualSessionFormDrawer.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -256,16 +256,19 @@ const VirtualSessionFormDrawer = () => { marginTop="2em" > - {`Save & Close`} + {`Save & Close`} - { handleEventDrawerOpen(EVENT_TYPE.VIRTUAL, false); }} > Cancel - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx index 8e3907411..17d6ee913 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Map/Form.tsx @@ -3,8 +3,8 @@ import Divider from '@mui/material/Divider'; import { Grid, Typography, Stack, IconButton } from '@mui/material'; import { MetLabel, - PrimaryButton, - SecondaryButton, + PrimaryButtonOld, + SecondaryButtonOld, MidScreenLoader, MetWidgetPaper, MetDescription, @@ -267,9 +267,9 @@ const Form = () => { - + Preview Map - + { marginTop="2em" > - {`Save & Close`} + {`Save & Close`} - handleWidgetDrawerOpen(false)}> + handleWidgetDrawerOpen(false)}> Cancel - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Phases/PhasesForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Phases/PhasesForm.tsx index ba8488b3f..ab87ea8a9 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Phases/PhasesForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Phases/PhasesForm.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState } from 'react'; import { Autocomplete, Checkbox, Divider, FormControl, FormControlLabel, Grid, TextField } from '@mui/material'; -import { MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { EngagementPhases } from 'models/engagementPhases'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; @@ -133,15 +133,15 @@ const PhasesForm = () => { - saveWidgetItem()} - >{`Save & Close`} + >{`Save & Close`} - handleWidgetDrawerOpen(false)}>{`Cancel`} + handleWidgetDrawerOpen(false)}>{`Cancel`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx index dfacc7099..b9d32d116 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Poll/Form.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import Divider from '@mui/material/Divider'; import { Grid, MenuItem, TextField, Select, SelectChangeEvent } from '@mui/material'; -import { MetDescription, MetLabel, MidScreenLoader, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetDescription, MetLabel, MidScreenLoader, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { SubmitHandler } from 'react-hook-form'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; @@ -256,12 +256,12 @@ const Form = () => { mt={'1em'} > - + Save & Close - + - handleWidgetDrawerOpen(false)}>Cancel + handleWidgetDrawerOpen(false)}>Cancel ); diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PollAnswerForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Poll/PollAnswerForm.tsx index 52f9b7931..8f96f6f94 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PollAnswerForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Poll/PollAnswerForm.tsx @@ -1,7 +1,7 @@ // PollAnswerForm.tsx import React, { useState, useEffect } from 'react'; import { Grid } from '@mui/material'; -import { PrimaryButton } from 'components/common'; +import { PrimaryButtonOld } from 'components/common'; import { PollAnswer } from 'models/pollWidget'; import Typography from '@mui/material/Typography'; import PollAnswerItemForm from './PolllAnswerItemForm'; @@ -56,7 +56,7 @@ const PollAnswerForm: React.FC = ({ initialPollAnswers, onP /> ))} - handleAddAnswer()}>Add Answer + handleAddAnswer()}>Add Answer ); diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx index 6d330de77..a5ccaa4d0 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Poll/PolllAnswerItemForm.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Grid, TextField, Divider } from '@mui/material'; -import { SecondaryButton, MetLabel } from 'components/common'; +import { SecondaryButtonOld, MetLabel } from 'components/common'; import { PollAnswer } from 'models/pollWidget'; interface PollAnswerItemProps { @@ -29,7 +29,7 @@ const PollAnswerItemForm: React.FC = React.memo( {canRemove && ( - onRemove(index)}>Remove Answer + onRemove(index)}>Remove Answer )} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx index 1801c8600..10333fe74 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/EmailListFormDrawer.tsx @@ -4,7 +4,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid, FormControlLabel, Radio, FormControl, FormLabel, FormHelperText } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler, Controller } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -245,10 +245,13 @@ const EmailListDrawer = () => { marginTop="2em" > - {`Save & Close`} + {`Save & Close`} - Cancel + Cancel diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/FormSignUpDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/FormSignUpDrawer.tsx index c7e334461..c2838d1d4 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/FormSignUpDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/FormSignUpDrawer.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid, FormControlLabel, Radio, FormLabel, FormControl, FormHelperText } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler, Controller } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -242,13 +242,13 @@ const FormSignUpDrawer = () => { marginTop="2em" > - {`Save & Close`} + >{`Save & Close`} - Cancel + Cancel diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeForm.tsx index f4228b9bf..64a9bc6d3 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeForm.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Divider } from '@mui/material'; -import { PrimaryButton, WidgetButton, MetParagraph } from 'components/common'; +import { PrimaryButtonOld, WidgetButton, MetParagraphOld } from 'components/common'; import { WidgetDrawerContext } from '../WidgetDrawerContext'; import { SubscribeContext } from './SubscribeContext'; import { SUBSCRIBE_TYPE } from 'models/subscription'; @@ -32,16 +32,16 @@ const Form = () => { - + The email list will collect email addresses for a mailing list. A "double-opt-in" email will be sent to confirm the subscription. Only the email addresses that have been double-opted-in will be on the list. - + - + The form sign-up will open the pre-defined form. The text and CTA for both are customizable. - + @@ -74,13 +74,13 @@ const Form = () => { - { handleWidgetDrawerOpen(false); }} > Close - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx index b1a2a99aa..f7004cc00 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Subscribe/SubscribeInfoPaper.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { MetLabel, MetParagraph, MetWidgetPaper } from 'components/common'; +import { MetLabel, MetParagraphOld, MetWidgetPaper } from 'components/common'; import { Grid, IconButton, useMediaQuery } from '@mui/material'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; import HighlightOffIcon from '@mui/icons-material/HighlightOff'; @@ -52,7 +52,7 @@ const SubscribeInfoPaper = ({ subscribeForm, removeSubscribeForm, ...rest }: Sub - Description: + Description: - {capitalizeFirstLetter(subscribeItem.call_to_action_type)}: + {capitalizeFirstLetter(subscribeItem.call_to_action_type)}: - + {subscribeItem.call_to_action_text} - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Timeline/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Timeline/Form.tsx index fdbf8016d..fd098fca0 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Timeline/Form.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Timeline/Form.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect } from 'react'; import Divider from '@mui/material/Divider'; import { Grid, MenuItem, TextField, Select, SelectChangeEvent } from '@mui/material'; -import { MetDescription, MetLabel, MidScreenLoader, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetDescription, MetLabel, MidScreenLoader, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { SubmitHandler } from 'react-hook-form'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; @@ -331,14 +331,14 @@ const Form = () => { {1 < timelineEvents.length && ( - ) => { handleRemoveEvent(event); }} > Remove Event - + )} @@ -348,7 +348,7 @@ const Form = () => { ))} - handleAddEvent()}>Add Event + handleAddEvent()}>Add Event @@ -363,12 +363,14 @@ const Form = () => { mt={'3em'} > - + Save & Close - + - handleWidgetDrawerOpen(false)}>Cancel + handleWidgetDrawerOpen(false)}> + Cancel + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx b/met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx index 624f08cbd..e3df41268 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/Video/Form.tsx @@ -1,7 +1,7 @@ import React, { useContext, useEffect } from 'react'; import Divider from '@mui/material/Divider'; import { Grid } from '@mui/material'; -import { MetDescription, MetLabel, MidScreenLoader, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetDescription, MetLabel, MidScreenLoader, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; import * as yup from 'yup'; @@ -180,14 +180,14 @@ const Form = () => { mt={'3em'} > - + Save & Close - + - handleWidgetDrawerOpen(false)}> + handleWidgetDrawerOpen(false)}> Cancel - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx index beff82930..6b6e1dbb6 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/AddContactDrawer.tsx @@ -3,7 +3,7 @@ import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import Divider from '@mui/material/Divider'; import { Grid } from '@mui/material'; -import { MetHeader3, MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetHeader3, MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import ImageUpload from 'components/imageUpload'; import { useForm, FormProvider, SubmitHandler } from 'react-hook-form'; import { yupResolver } from '@hookform/resolvers/yup'; @@ -270,12 +270,12 @@ const AddContactDrawer = () => { marginTop="8em" > - + {`Save & Close`} - + - {`Cancel`} + {`Cancel`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx index 366720b88..fc066156b 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/ContactInfoPaper.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { MetLabel, MetParagraph, MetWidgetPaper } from 'components/common'; +import { MetLabel, MetParagraphOld, MetWidgetPaper } from 'components/common'; import { Grid, IconButton } from '@mui/material'; import { Contact } from 'models/contact'; import DragIndicatorIcon from '@mui/icons-material/DragIndicator'; @@ -30,9 +30,9 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP - + {contact.title} - + @@ -47,49 +47,49 @@ const ContactInfoPaper = ({ contact, removeContact, ...rest }: ContactInfoPaperP > - Phone: + Phone: - + {contact.phone_number} - + - Email: + Email: - {contact.email} + {contact.email} - Address: + Address: - {contact.address} - + - Bio: + Bio: - {contact.bio} - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx index a0cfaf9d2..47f0269d3 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/WhoIsListening/WhoIsListeningForm.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState, useEffect } from 'react'; import { Autocomplete, Grid, TextField, Divider } from '@mui/material'; -import { MetLabel, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetLabel, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { Contact } from 'models/contact'; import { useAppDispatch } from 'hooks'; import { openNotification } from 'services/notificationService/notificationSlice'; @@ -114,14 +114,14 @@ const WhoIsListeningForm = () => { /> - addContact()} fullWidth> + addContact()} fullWidth> Add This Contact - + - handleAddContactDrawerOpen(true)}> + handleAddContactDrawerOpen(true)}> Create New Contact - + @@ -129,14 +129,14 @@ const WhoIsListeningForm = () => { - saveWidgetItems()} - >{`Save & Close`} + >{`Save & Close`} - handleWidgetDrawerOpen(false)}>{`Cancel`} + handleWidgetDrawerOpen(false)}>{`Cancel`} diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WidgetTitle.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WidgetTitle.tsx index d3e58f01c..32629ba4c 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/WidgetTitle.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/WidgetTitle.tsx @@ -1,5 +1,5 @@ import React, { useContext } from 'react'; -import { MetHeader3, PrimaryButton } from 'components/common'; +import { MetHeader3, PrimaryButtonOld } from 'components/common'; import { Widget } from 'models/widget'; import { CircularProgress, IconButton, Stack, TextField } from '@mui/material'; import EditIcon from '@mui/icons-material/Edit'; @@ -73,13 +73,13 @@ export const WidgetTitle = ({ widget }: { widget: Widget }) => { - { saveTitle(); }} > Save - + diff --git a/met-web/src/components/engagement/form/EngagementWidgets/WidgetsBlock.tsx b/met-web/src/components/engagement/form/EngagementWidgets/WidgetsBlock.tsx index 173576f5a..53cac22df 100644 --- a/met-web/src/components/engagement/form/EngagementWidgets/WidgetsBlock.tsx +++ b/met-web/src/components/engagement/form/EngagementWidgets/WidgetsBlock.tsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect, useState, useRef } from 'react'; import { Divider, Grid, Skeleton } from '@mui/material'; -import { MetHeader2, MetPaper, MetTooltip, SecondaryButton } from 'components/common'; +import { MetHeader2Old, MetPaper, MetTooltip, SecondaryButtonOld } from 'components/common'; import { WidgetCardSwitch } from './WidgetCardSwitch'; import { If, Then, Else, When } from 'react-if'; import { WidgetDrawerContext } from './WidgetDrawerContext'; @@ -76,7 +76,7 @@ const WidgetsBlock = () => { return ( - Widgets + Widgets @@ -92,9 +92,9 @@ const WidgetsBlock = () => { title={!savedEngagement.id ? 'Please save the engagement before adding a widget.' : ''} > - + Add Widget - + diff --git a/met-web/src/components/engagement/listing/AdvancedSearch/SearchComponent.tsx b/met-web/src/components/engagement/listing/AdvancedSearch/SearchComponent.tsx index 411751811..8c19911d1 100644 --- a/met-web/src/components/engagement/listing/AdvancedSearch/SearchComponent.tsx +++ b/met-web/src/components/engagement/listing/AdvancedSearch/SearchComponent.tsx @@ -10,9 +10,9 @@ import { useMediaQuery, Theme, } from '@mui/material'; -import { MetParagraph, MetLabel } from 'components/common'; +import { MetParagraphOld, MetLabel } from 'components/common'; import { EngagementDisplayStatus } from 'constants/engagementStatus'; -import { PrimaryButton, SecondaryButton } from '../../../common'; +import { PrimaryButtonOld, SecondaryButtonOld } from '../../../common'; import dayjs from 'dayjs'; import { formatToUTC } from 'components/common/dateHelper'; import { SearchOptions } from './SearchTypes'; @@ -131,7 +131,9 @@ const AdvancedSearch: React.FC = ({ setFilterParams }) => { /> } label={ - {EngagementDisplayStatus[EngagementDisplayStatus.Draft]} + + {EngagementDisplayStatus[EngagementDisplayStatus.Draft]} + } /> = ({ setFilterParams }) => { /> } label={ - + {EngagementDisplayStatus[EngagementDisplayStatus.Scheduled]} - + } /> = ({ setFilterParams }) => { /> } label={ - {EngagementDisplayStatus[EngagementDisplayStatus.Upcoming]} + + {EngagementDisplayStatus[EngagementDisplayStatus.Upcoming]} + } /> = ({ setFilterParams }) => { }} /> } - label={{EngagementDisplayStatus[EngagementDisplayStatus.Open]}} + label={ + + {EngagementDisplayStatus[EngagementDisplayStatus.Open]} + + } /> = ({ setFilterParams }) => { /> } label={ - {EngagementDisplayStatus[EngagementDisplayStatus.Closed]} + + {EngagementDisplayStatus[EngagementDisplayStatus.Closed]} + } /> = ({ setFilterParams }) => { /> } label={ - + {EngagementDisplayStatus[EngagementDisplayStatus.Unpublished]} - + } /> @@ -320,16 +330,19 @@ const AdvancedSearch: React.FC = ({ setFilterParams }) => { width="100%" justifyContent="flex-end" > - handleResetSearchFilters()}> + handleResetSearchFilters()} + > Reset All Filters - - + handleSearch()} > Search - + diff --git a/met-web/src/components/engagement/listing/index.tsx b/met-web/src/components/engagement/listing/index.tsx index e60e9cf55..c4e0eabd4 100644 --- a/met-web/src/components/engagement/listing/index.tsx +++ b/met-web/src/components/engagement/listing/index.tsx @@ -5,7 +5,7 @@ import Grid from '@mui/material/Grid'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Collapse from '@mui/material/Collapse'; import { Link, useNavigate, useLocation } from 'react-router-dom'; -import { MetPageGridContainer, MetTooltip, PrimaryButton, SecondaryButton } from 'components/common'; +import { MetPageGridContainer, MetTooltip, PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { Engagement } from 'models/engagement'; import { useAppDispatch, useAppSelector } from 'hooks'; import { createDefaultPageInfo, HeadCell, PageInfo, PaginationOptions } from 'components/common/Table/types'; @@ -404,14 +404,14 @@ const EngagementListing = () => { onChange={(e) => setSearchText(e.target.value)} size="small" /> - handleSearchBarClick(searchText)} > - + - setAdvancedSearchOpen(!advancedSearchOpen)} @@ -428,11 +428,11 @@ const EngagementListing = () => { } > Advanced Search - + - setAdvancedSearchOpen(!advancedSearchOpen)} @@ -454,16 +454,16 @@ const EngagementListing = () => { /> } Advanced Search - + - + Create Engagement - + diff --git a/met-web/src/components/engagement/view/EmailPanel.tsx b/met-web/src/components/engagement/view/EmailPanel.tsx index 54f62a936..22c7c6cd4 100644 --- a/met-web/src/components/engagement/view/EmailPanel.tsx +++ b/met-web/src/components/engagement/view/EmailPanel.tsx @@ -5,10 +5,10 @@ import { EmailPanelProps } from './types'; import { MetLabel, modalStyle, - PrimaryButton, - SecondaryButton, - MetHeader1, - MetBody, + PrimaryButtonOld, + SecondaryButtonOld, + MetHeader1Old, + MetBodyOld, MetDescription, MetDisclaimer, } from 'components/common'; @@ -59,30 +59,30 @@ const EmailPanel = ({ email, checkEmail, handleClose, updateEmail, isSaving, isI rowSpacing={2} > - + Verify your email address - + - + To provide you with the best experience possible, we require you to validate your email address. - + - + You will receive a link to provide your feedback at the email address you provide. - + - + Why are we collecting your email? Email verification helps us to know you are not a robot, and ensures we have your consent to collect your feedback. Your email address will remain confidential and will only be used to authenticate your participation in this public comment period. - + @@ -154,12 +154,12 @@ const EmailPanel = ({ email, checkEmail, handleClose, updateEmail, isSaving, isI width="100%" justifyContent="flex-end" > - + Cancel - - + + Submit - + diff --git a/met-web/src/components/engagement/view/EngagementInfoSection.tsx b/met-web/src/components/engagement/view/EngagementInfoSection.tsx index 46bae0fc8..bc09a6f8f 100644 --- a/met-web/src/components/engagement/view/EngagementInfoSection.tsx +++ b/met-web/src/components/engagement/view/EngagementInfoSection.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Stack } from '@mui/material'; -import { MetHeader1, MetLabel } from 'components/common'; +import { MetHeader1Old, MetLabel } from 'components/common'; import { EngagementStatusChip } from '../status'; import { Editor } from 'react-draft-wysiwyg'; import dayjs from 'dayjs'; @@ -60,7 +60,7 @@ const EngagementInfoSection = ({ savedEngagement, children }: EngagementInfoSect spacing={1} > - {name} + {name} diff --git a/met-web/src/components/engagement/view/FailurePanel.tsx b/met-web/src/components/engagement/view/FailurePanel.tsx index e9930ce93..01391f4c7 100644 --- a/met-web/src/components/engagement/view/FailurePanel.tsx +++ b/met-web/src/components/engagement/view/FailurePanel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Grid, Stack } from '@mui/material'; import { FailurePanelProps } from './types'; -import { modalStyle, PrimaryButton, SecondaryButton, MetHeader1, MetBody } from 'components/common'; +import { modalStyle, PrimaryButtonOld, SecondaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common'; import { When } from 'react-if'; const FailurePanel = ({ email, handleClose, tryAgain, isInternal }: FailurePanelProps) => { @@ -15,32 +15,32 @@ const FailurePanel = ({ email, handleClose, tryAgain, isInternal }: FailurePanel spacing={2} > - We are sorry + We are sorry - There was a problem with the email address you provided: + There was a problem with the email address you provided: - {email} + {email} - + This is an internal engagement. Make sure you are using a government email. - + - Please verify your email and try again. + Please verify your email and try again. - If this problem persists, contact sample@gmail.com + If this problem persists, contact sample@gmail.com - Go back to Engagement - Try Again + Go back to Engagement + Try Again diff --git a/met-web/src/components/engagement/view/PreviewBanner.tsx b/met-web/src/components/engagement/view/PreviewBanner.tsx index 7785c31ae..3041f4798 100644 --- a/met-web/src/components/engagement/view/PreviewBanner.tsx +++ b/met-web/src/components/engagement/view/PreviewBanner.tsx @@ -4,7 +4,7 @@ import { Box, Typography, Grid, Skeleton, Stack, useMediaQuery, Theme, Link } fr import { useNavigate } from 'react-router-dom'; import { EngagementStatusChip } from '../status'; import { EngagementStatus, SubmissionStatus } from 'constants/engagementStatus'; -import { MetHeader1, PrimaryButton, SecondaryButton, MetBody, MetPaper } from 'components/common'; +import { MetHeader1Old, PrimaryButtonOld, SecondaryButtonOld, MetBodyOld, MetPaper } from 'components/common'; import { useAppSelector } from 'hooks'; import ImageIcon from '@mui/icons-material/Image'; import UnpublishedIcon from '@mui/icons-material/Unpublished'; @@ -58,15 +58,15 @@ export const PreviewBanner = () => { > - {engagementBannerText} + {engagementBannerText} - + This engagement is scheduled to go live on {' ' + scheduledDate + ' at ' + scheduledTime + ' PT'}.{' '} setIsScheduleModalOpen(true)}>Click here to edit the date this Engagement page will go live. - + @@ -84,7 +84,7 @@ export const PreviewBanner = () => { - This engagement is missing a header image. + This engagement is missing a header image. @@ -101,7 +101,7 @@ export const PreviewBanner = () => { - This engagement is missing a survey. + This engagement is missing a survey. @@ -118,7 +118,7 @@ export const PreviewBanner = () => { - This engagement is missing a description. + This engagement is missing a description. @@ -135,7 +135,7 @@ export const PreviewBanner = () => { - This engagement is missing content. + This engagement is missing content. @@ -150,7 +150,9 @@ export const PreviewBanner = () => { - An Administrator can schedule the engagement when ready. + + An Administrator can schedule the engagement when ready. + @@ -194,7 +196,7 @@ export const PreviewBanner = () => { justifyContent="flex-start" > - { onClick={() => navigate(`/engagements/${engagementId}/form`)} > Edit Engagement - + @@ -210,12 +212,12 @@ export const PreviewBanner = () => { scopes={[USER_ROLES.UNPUBLISH_ENGAGEMENT]} errorProps={{ disabled: true }} > - setIsUnpublishModalOpen(true)} > Unpublish Engagement - + @@ -224,12 +226,12 @@ export const PreviewBanner = () => { scopes={[USER_ROLES.PUBLISH_ENGAGEMENT]} errorProps={{ disabled: true }} > - setIsScheduleModalOpen(true)} > Schedule Engagement - + @@ -237,12 +239,12 @@ export const PreviewBanner = () => { scopes={[USER_ROLES.PUBLISH_ENGAGEMENT]} errorProps={{ disabled: true }} > - setIsScheduleModalOpen(true)} > Reschedule Engagement - + diff --git a/met-web/src/components/engagement/view/ScheduleModal/index.tsx b/met-web/src/components/engagement/view/ScheduleModal/index.tsx index 17b896e63..57431fe2c 100644 --- a/met-web/src/components/engagement/view/ScheduleModal/index.tsx +++ b/met-web/src/components/engagement/view/ScheduleModal/index.tsx @@ -1,6 +1,13 @@ import React, { useContext, useState } from 'react'; import { Grid, Stack, TextField, Modal } from '@mui/material'; -import { modalStyle, PrimaryButton, SecondaryButton, MetHeader1, MetBody, MetLabel } from 'components/common'; +import { + modalStyle, + PrimaryButtonOld, + SecondaryButtonOld, + MetHeader1Old, + MetBodyOld, + MetLabel, +} from 'components/common'; import dayjs, { Dayjs } from 'dayjs'; import { useAppDispatch } from 'hooks'; import { EngagementStatus } from 'constants/engagementStatus'; @@ -111,22 +118,22 @@ const ScheduleModal = ({ reschedule, open, updateModal }: ScheduleModalProps) => > - + {reschedule ? 'Reschedule Engagement' : 'Schedule Engagement'} - + - + The Engagement page will be visible on the date selected below but the public won’t be able to provide feedback until the public comment period opens. - + - + Enter the date & time you want the Engagement page to go live. - + width="100%" justifyContent="flex-end" > - updateModal(false)}> + updateModal(false)}> Cancel - - + Submit - + diff --git a/met-web/src/components/engagement/view/SuccessPanel.tsx b/met-web/src/components/engagement/view/SuccessPanel.tsx index b809123ba..058405bb1 100644 --- a/met-web/src/components/engagement/view/SuccessPanel.tsx +++ b/met-web/src/components/engagement/view/SuccessPanel.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Grid } from '@mui/material'; import { SuccessPanelProps } from './types'; -import { modalStyle, PrimaryButton, MetHeader1, MetBody } from 'components/common'; +import { modalStyle, PrimaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common'; const SuccessPanel = ({ email, handleClose }: SuccessPanelProps) => { return ( @@ -15,37 +15,37 @@ const SuccessPanel = ({ email, handleClose }: SuccessPanelProps) => { > - + Thank you - + - + We sent a link to provide your feedback at the following email address: - - {email} + + {email} - + If you don't see the email in your inbox within a few minutes, please check your junk/spam folder, or your promotion folder (Gmail). - + - + Please click the link provided to provide your feedback. - + - The link will be valid for 24 hours. + The link will be valid for 24 hours. - + If you are not able to provide feedback within 24 hours, you may request a new link. Refer to the verification email for more information. - + { spacing={1} sx={{ mt: '1em' }} > - + Close - + diff --git a/met-web/src/components/engagement/view/SurveyBlock.tsx b/met-web/src/components/engagement/view/SurveyBlock.tsx index 21a6f187f..4f0fd38a7 100644 --- a/met-web/src/components/engagement/view/SurveyBlock.tsx +++ b/met-web/src/components/engagement/view/SurveyBlock.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Skeleton } from '@mui/material'; -import { MetPaper, PrimaryButton } from '../../common'; +import { MetPaper, PrimaryButtonOld } from '../../common'; import { ActionContext } from './ActionContext'; import { SubmissionStatus } from 'constants/engagementStatus'; import { SurveyBlockProps } from './types'; @@ -46,18 +46,18 @@ const SurveyBlock = ({ startSurvey }: SurveyBlockProps) => { - {translate('buttonText.shareYourThoughts')} - + - { @@ -69,7 +69,7 @@ const SurveyBlock = ({ startSurvey }: SurveyBlockProps) => { }} > {translate('buttonText.viewFeedback')} - + diff --git a/met-web/src/components/engagement/view/ThankYouPanel.tsx b/met-web/src/components/engagement/view/ThankYouPanel.tsx index 0737f1ed7..8fae25920 100644 --- a/met-web/src/components/engagement/view/ThankYouPanel.tsx +++ b/met-web/src/components/engagement/view/ThankYouPanel.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Typography } from '@mui/material'; -import { modalStyle, PrimaryButton, MetHeader1, MetBody } from 'components/common'; +import { modalStyle, PrimaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common'; import { ThankYouPanelProps } from './types'; import { ActionContext } from './ActionContext'; @@ -17,9 +17,9 @@ const ThankYouPanel = ({ handleClose }: ThankYouPanelProps) => { > - + Thank you - + @@ -27,14 +27,14 @@ const ThankYouPanel = ({ handleClose }: ThankYouPanelProps) => { - Your submission was successful. + Your submission was successful. - + We appreciate you take the time to voice your opinion about {savedEngagement.name}. When the engagement period is over ({savedEngagement.end_date}), you will receive a link to access the full survey report and view all the comments we received. - + { spacing={1} sx={{ mt: '1em' }} > - + Close - + diff --git a/met-web/src/components/engagement/view/UnpublishModal/index.tsx b/met-web/src/components/engagement/view/UnpublishModal/index.tsx index a1f8bd15f..ea17a267c 100644 --- a/met-web/src/components/engagement/view/UnpublishModal/index.tsx +++ b/met-web/src/components/engagement/view/UnpublishModal/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState } from 'react'; import { Grid, Stack, Modal } from '@mui/material'; -import { modalStyle, PrimaryButton, SecondaryButton, MetHeader1, MetBody } from 'components/common'; +import { modalStyle, PrimaryButtonOld, SecondaryButtonOld, MetHeader1Old, MetBodyOld } from 'components/common'; import { EngagementStatus } from 'constants/engagementStatus'; import { ActionContext } from 'components/engagement/view/ActionContext'; @@ -38,36 +38,36 @@ const UnpublishModal = ({ open, setModalOpen }: UnpublishModalProps) => { > - + Unpublish Engagement - + - This Engagement will be unpublished: + This Engagement will be unpublished:
    • - The engagement card will be removed from the home page. + The engagement card will be removed from the home page.
    • - + The engagement page and the survey won't be visible to the public anymore. - +
    • - + If the engagement was open, the survey won't be accessible to the public anymore. - +
    • - + The report and approved comments will be accessible internally only. You will have two weeks to review new comments. All comments not reviewed, rejected, or labelled as "needs further review" will be deleted on "two weeks from today date". - +
    @@ -87,15 +87,15 @@ const UnpublishModal = ({ open, setModalOpen }: UnpublishModalProps) => { width="100%" justifyContent="flex-end" > - setModalOpen(false)}>Cancel - setModalOpen(false)}>Cancel + Submit - +     diff --git a/met-web/src/components/engagement/view/widgets/DocumentWidget.tsx b/met-web/src/components/engagement/view/widgets/DocumentWidget.tsx index d23cdbf2c..c24974015 100644 --- a/met-web/src/components/engagement/view/widgets/DocumentWidget.tsx +++ b/met-web/src/components/engagement/view/widgets/DocumentWidget.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { MetPaper, MetHeader2 } from 'components/common'; +import { MetPaper, MetHeader2Old } from 'components/common'; import { Grid, Skeleton, Divider } from '@mui/material'; import { Widget } from 'models/widget'; import { DocumentItem } from 'models/document'; @@ -50,7 +50,7 @@ const DocumentWidget = ({ widget }: DocumentWidgetProps) => { <> - {widget.title} + {widget.title} {documents.map((document: DocumentItem) => { diff --git a/met-web/src/components/engagement/view/widgets/Events/EventsWidget.tsx b/met-web/src/components/engagement/view/widgets/Events/EventsWidget.tsx index f126705f2..2699fd9ca 100644 --- a/met-web/src/components/engagement/view/widgets/Events/EventsWidget.tsx +++ b/met-web/src/components/engagement/view/widgets/Events/EventsWidget.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { MetPaper, MetHeader2 } from 'components/common'; +import { MetPaper, MetHeader2Old } from 'components/common'; import { Grid, Skeleton, Divider } from '@mui/material'; import { Widget } from 'models/widget'; import { Event, EVENT_TYPE } from 'models/event'; @@ -44,9 +44,9 @@ const EventsWidget = ({ widget }: EventsWidgetProps) => { - + - + @@ -73,7 +73,7 @@ const EventsWidget = ({ widget }: EventsWidgetProps) => { xs={12} paddingBottom={0} > - {widget.title} + {widget.title} {events.map((event: Event) => { diff --git a/met-web/src/components/engagement/view/widgets/Events/InPersonEvent.tsx b/met-web/src/components/engagement/view/widgets/Events/InPersonEvent.tsx index c71c27d4c..1145a7c70 100644 --- a/met-web/src/components/engagement/view/widgets/Events/InPersonEvent.tsx +++ b/met-web/src/components/engagement/view/widgets/Events/InPersonEvent.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { EventItem } from 'models/event'; import { Grid } from '@mui/material'; -import { MetBody } from 'components/common'; +import { MetBodyOld } from 'components/common'; import { formatDate } from 'components/common/dateHelper'; export interface EventProps { @@ -14,43 +14,43 @@ const InPersonEvent = ({ eventItem }: EventProps) => { return ( <> - {eventItem.description} + {eventItem.description} - Location:  + Location:  - {eventItem.location_name} + {eventItem.location_name} - Address:  + Address:  - {eventItem.location_address} + {eventItem.location_address} - Date:  + Date:  - {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} + {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} - Time:  + Time:  - + {`${formatDate(eventItem.start_date, 'h:mm a')} to ${formatDate( eventItem.end_date, 'h:mm a', )} PT`} - + diff --git a/met-web/src/components/engagement/view/widgets/Events/VirtualSession.tsx b/met-web/src/components/engagement/view/widgets/Events/VirtualSession.tsx index 92b4e4965..49d398778 100644 --- a/met-web/src/components/engagement/view/widgets/Events/VirtualSession.tsx +++ b/met-web/src/components/engagement/view/widgets/Events/VirtualSession.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { Grid, Link } from '@mui/material'; -import { MetBody } from 'components/common'; +import { MetBodyOld } from 'components/common'; import { formatDate } from 'components/common/dateHelper'; import { EventProps } from './InPersonEvent'; @@ -9,27 +9,27 @@ const VirtualSession = ({ eventItem }: EventProps) => { return ( <> - {eventItem.description} + {eventItem.description} - Date:  + Date:  - {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} + {formatDate(eventItem.start_date, 'MMMM DD, YYYY')} - Time:  + Time:  - + {`${formatDate(eventItem.start_date, 'h:mm a')} to ${formatDate( eventItem.end_date, 'h:mm a', )} PT`} - + diff --git a/met-web/src/components/engagement/view/widgets/Map/ExpandModal.tsx b/met-web/src/components/engagement/view/widgets/Map/ExpandModal.tsx index bba8ab881..17ff1df8b 100644 --- a/met-web/src/components/engagement/view/widgets/Map/ExpandModal.tsx +++ b/met-web/src/components/engagement/view/widgets/Map/ExpandModal.tsx @@ -3,7 +3,7 @@ import Modal from '@mui/material/Modal'; import { Box, Paper, Grid } from '@mui/material'; import MetMap from 'components/map'; import { WidgetMap } from 'models/widgetMap'; -import { PrimaryButton } from 'components/common'; +import { PrimaryButtonOld } from 'components/common'; import { geoJSONDecode, calculateZoomLevel } from 'components/engagement/form/EngagementWidgets/Map/utils'; interface ExpandModalProps { @@ -71,13 +71,13 @@ export const ExpandModal = ({ open, setOpen, map }: ExpandModalProps) => { - { setOpen(false); }} > Close - + diff --git a/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx b/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx index 66ce61643..d3da63f77 100644 --- a/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx +++ b/met-web/src/components/engagement/view/widgets/Map/MapWidget.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useRef } from 'react'; -import { MetPaper, MetHeader2, MetLabel } from 'components/common'; +import { MetPaper, MetHeader2Old, MetLabel } from 'components/common'; import { Grid, Skeleton, Divider, Box, IconButton, Link, useMediaQuery, Theme } from '@mui/material'; import { Widget } from 'models/widget'; import { useAppDispatch } from 'hooks'; @@ -56,9 +56,9 @@ const MapWidget = ({ widget }: MapWidgetProps) => { - + - + @@ -87,7 +87,7 @@ const MapWidget = ({ widget }: MapWidgetProps) => { xs={12} paddingBottom={0} > - {widget.title} + {widget.title} diff --git a/met-web/src/components/engagement/view/widgets/PhasesWidget/EngagementPhase.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/EngagementPhase.tsx index d20b4094e..f028bf233 100644 --- a/met-web/src/components/engagement/view/widgets/PhasesWidget/EngagementPhase.tsx +++ b/met-web/src/components/engagement/view/widgets/PhasesWidget/EngagementPhase.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid } from '@mui/material'; -import { MetHeader4, MetParagraph } from 'components/common'; +import { MetHeader4, MetParagraphOld } from 'components/common'; import { LearnMoreBox } from './LearnMoreBox'; import { EngagementPhases, PAST_PHASE, ProcessStageProps } from 'models/engagementPhases'; import { PhaseBox } from './PhaseBox'; @@ -44,7 +44,7 @@ export const EngagementPhase = ({ } - iconBox={popOverText ? {popOverText} : false} + iconBox={popOverText ? {popOverText} : false} isCurrentPhase={phaseId === currentPhase} currentPhase={currentPhase} /> diff --git a/met-web/src/components/engagement/view/widgets/PhasesWidget/InfoArrow.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/InfoArrow.tsx index 6459e1d5f..e5abd7f68 100644 --- a/met-web/src/components/engagement/view/widgets/PhasesWidget/InfoArrow.tsx +++ b/met-web/src/components/engagement/view/widgets/PhasesWidget/InfoArrow.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { MetSmallText } from 'components/common'; +import { MetSmallTextOld } from 'components/common'; import { Stack, Box } from '@mui/material'; import { INFO_ARROW } from 'models/engagementPhases'; @@ -12,10 +12,10 @@ export const InfoArrow = () => { padding: '0.25em 1em', }} > - + Engagement and consensus-seeking with participating First Nations occur at each stage of the process, supported by dispute resolution at certain stages if required. - + } accordionBackground={isCurrent ? accordionBackground : PAST_PHASE.learnMoreBackgroundColor} - iconBox={popOverText ? {popOverText} : false} + iconBox={popOverText ? {popOverText} : false} isCurrentPhase={phaseId === currentPhase} currentPhase={currentPhase} /> diff --git a/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhasesWidgetMobile.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhasesWidgetMobile.tsx index 8217f4613..cbb3098b6 100644 --- a/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhasesWidgetMobile.tsx +++ b/met-web/src/components/engagement/view/widgets/PhasesWidget/PhasesWidgetMobile/PhasesWidgetMobile.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; import { Grid, Skeleton, Typography } from '@mui/material'; -import { MetBody, MetHeader3, MetPaper } from 'components/common'; +import { MetBodyOld, MetHeader3, MetPaper } from 'components/common'; import { WidgetType } from 'models/widget'; import { styled } from '@mui/material/styles'; import { ActionContext } from '../../../ActionContext'; @@ -68,10 +68,10 @@ export const PhasesWidgetMobile = () => { {phasesWidget.title} - + Click on the sections below to expand them and learn more about each EA process phase. You can also learn more about each engagement period by clicking the engagement icon. - + diff --git a/met-web/src/components/engagement/view/widgets/PhasesWidget/index.tsx b/met-web/src/components/engagement/view/widgets/PhasesWidget/index.tsx index 4d7c69d1e..cef3d6763 100644 --- a/met-web/src/components/engagement/view/widgets/PhasesWidget/index.tsx +++ b/met-web/src/components/engagement/view/widgets/PhasesWidget/index.tsx @@ -1,6 +1,6 @@ import React, { useContext, useState } from 'react'; import { Grid, Skeleton, Stack } from '@mui/material'; -import { MetBody, MetHeader3, MetLabel, MetPaper } from 'components/common'; +import { MetBodyOld, MetHeader3, MetLabel, MetPaper } from 'components/common'; import { WidgetType } from 'models/widget'; import { ActionContext } from '../../ActionContext'; import { EngagementPhase } from './EngagementPhase'; @@ -56,12 +56,12 @@ export const PhasesWidget = () => { - + Click ‘learn more’ on the sections below for more details about each phase in the Environmental Assessment process. Click the speech bubble icon {} to learn more about each unique public commenting period. - + diff --git a/met-web/src/components/engagement/view/widgets/Poll/PollWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Poll/PollWidgetView.tsx index e28f9a2a5..8be09d280 100644 --- a/met-web/src/components/engagement/view/widgets/Poll/PollWidgetView.tsx +++ b/met-web/src/components/engagement/view/widgets/Poll/PollWidgetView.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { MetPaper, MetHeader2, PrimaryButton } from 'components/common'; +import { MetPaper, MetHeader2Old, PrimaryButtonOld } from 'components/common'; import { Grid, Skeleton, Divider } from '@mui/material'; import PollDisplay from '../../../form/EngagementWidgets/Poll/PollDisplay'; import { Widget } from 'models/widget'; @@ -138,9 +138,9 @@ const PollWidgetView = ({ widget }: PollWidgetViewProps) => { - + - + @@ -161,7 +161,7 @@ const PollWidgetView = ({ widget }: PollWidgetViewProps) => { xs={12} paddingBottom={0} > - {widget.title} + {widget.title} @@ -174,7 +174,7 @@ const PollWidgetView = ({ widget }: PollWidgetViewProps) => { <> {!isSubmitted && ( - handleSubmit()}>Submit + handleSubmit()}>Submit )} {responseMessage?.message && ( diff --git a/met-web/src/components/engagement/view/widgets/Subscribe/EmailListSection.tsx b/met-web/src/components/engagement/view/widgets/Subscribe/EmailListSection.tsx index 4cd210861..62b1ab635 100644 --- a/met-web/src/components/engagement/view/widgets/Subscribe/EmailListSection.tsx +++ b/met-web/src/components/engagement/view/widgets/Subscribe/EmailListSection.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SecondaryButton } from 'components/common'; +import { SecondaryButtonOld } from 'components/common'; import { Grid, Link } from '@mui/material'; import { SubscribeForm, CallToActionType } from 'models/subscription'; import { When } from 'react-if'; @@ -34,9 +34,9 @@ const EmailListSection = ({ - setOpen(true)}> + setOpen(true)}> {subscribeOption.subscribe_items[0].call_to_action_text} - + diff --git a/met-web/src/components/engagement/view/widgets/Subscribe/FormSignUpSection.tsx b/met-web/src/components/engagement/view/widgets/Subscribe/FormSignUpSection.tsx index 7fc3948de..fd83cd966 100644 --- a/met-web/src/components/engagement/view/widgets/Subscribe/FormSignUpSection.tsx +++ b/met-web/src/components/engagement/view/widgets/Subscribe/FormSignUpSection.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { SecondaryButton } from 'components/common'; +import { SecondaryButtonOld } from 'components/common'; import { Grid, Link } from '@mui/material'; import { SubscribeForm, CallToActionType } from 'models/subscription'; import { When } from 'react-if'; @@ -35,9 +35,9 @@ const FormSignUpSection = ({ subscribeOption, widget }: { subscribeOption: Subsc - + {subscribeOption.subscribe_items[0].call_to_action_text} - + diff --git a/met-web/src/components/engagement/view/widgets/Subscribe/ManageSubscription/Subscription.tsx b/met-web/src/components/engagement/view/widgets/Subscribe/ManageSubscription/Subscription.tsx index 966e12189..a21d121e3 100644 --- a/met-web/src/components/engagement/view/widgets/Subscribe/ManageSubscription/Subscription.tsx +++ b/met-web/src/components/engagement/view/widgets/Subscribe/ManageSubscription/Subscription.tsx @@ -1,7 +1,7 @@ import React, { useState, useEffect } from 'react'; import { useParams } from 'react-router-dom'; import { Grid } from '@mui/material'; -import { MetHeader1, MetParagraph, MetLabel } from 'components/common'; +import { MetHeader1Old, MetParagraphOld, MetLabel } from 'components/common'; import { Banner } from 'components/banner/Banner'; import LandingPageBanner from 'assets/images/LandingPageBanner.png'; import { useAppDispatch, useAppSelector } from 'hooks'; @@ -102,10 +102,10 @@ export const Subscription = () => { rowSpacing={2} > - {tenant?.name} + {tenant?.name} - {translate('subscription.paragraph')} + {translate('subscription.paragraph')} diff --git a/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx b/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx index b6811e1b5..580699553 100644 --- a/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx +++ b/met-web/src/components/engagement/view/widgets/Subscribe/SubscribeWidget.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState, useContext } from 'react'; -import { MetHeader2, MetPaper } from 'components/common'; +import { MetHeader2Old, MetPaper } from 'components/common'; import { ActionContext } from '../../ActionContext'; import { Divider, Grid, Skeleton } from '@mui/material'; import { useAppDispatch } from 'hooks'; @@ -52,7 +52,7 @@ const SubscribeWidget = ({ widget }: { widget: Widget }) => { - {widget.title} + {widget.title} {subscribeItems?.map((item, index) => { diff --git a/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx index b0b87fa5f..25e09a670 100644 --- a/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx +++ b/met-web/src/components/engagement/view/widgets/Timeline/TimelineWidgetView.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { MetPaper, MetHeader2, MetParagraph, MetHeader4 } from 'components/common'; +import { MetPaper, MetHeader2Old, MetParagraphOld, MetHeader4 } from 'components/common'; import { Avatar, Grid, Skeleton, Divider } from '@mui/material'; import { Widget } from 'models/widget'; import { useAppDispatch } from 'hooks'; @@ -113,13 +113,13 @@ const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => { {tEvent.description} - {tEvent.time} - + ); @@ -130,9 +130,9 @@ const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => { - + - + @@ -157,11 +157,11 @@ const TimelineWidgetView = ({ widget }: TimelineWidgetProps) => { xs={12} paddingBottom={0} > - {timelineWidget.title} + {timelineWidget.title} - {timelineWidget.description} + {timelineWidget.description} {timelineWidget && diff --git a/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx b/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx index be4b87d5a..79a085f10 100644 --- a/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx +++ b/met-web/src/components/engagement/view/widgets/Video/VideoWidgetView.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { MetPaper, MetHeader2, MetParagraph, AspectRatioContainer, ReactPlayerWrapper } from 'components/common'; +import { MetPaper, MetHeader2Old, MetParagraphOld, AspectRatioContainer, ReactPlayerWrapper } from 'components/common'; import { Grid, Skeleton, Divider } from '@mui/material'; import { Widget } from 'models/widget'; import { useAppDispatch } from 'hooks'; @@ -51,9 +51,9 @@ const VideoWidgetView = ({ widget }: VideoWidgetProps) => { - + - + @@ -78,11 +78,11 @@ const VideoWidgetView = ({ widget }: VideoWidgetProps) => { xs={12} paddingBottom={0} > - {widget.title} + {widget.title} - {videoWidget.description} + {videoWidget.description} diff --git a/met-web/src/components/engagement/view/widgets/WhoIsListeningWidget.tsx b/met-web/src/components/engagement/view/widgets/WhoIsListeningWidget.tsx index fc543c33a..f4c6011d0 100644 --- a/met-web/src/components/engagement/view/widgets/WhoIsListeningWidget.tsx +++ b/met-web/src/components/engagement/view/widgets/WhoIsListeningWidget.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { MetPaper, MetHeader2, MetHeader3, MetBody, MetSmallText } from 'components/common'; +import { MetPaper, MetHeader2Old, MetHeader3, MetBodyOld, MetSmallTextOld } from 'components/common'; import { Grid, Avatar, Link, Skeleton, useTheme, Divider } from '@mui/material'; import { Widget } from 'models/widget'; import { Contact } from 'models/contact'; @@ -51,9 +51,9 @@ const WhoIsListeningWidget = ({ widget }: WhoIsListeningWidgetProps) => { - + - + @@ -73,7 +73,7 @@ const WhoIsListeningWidget = ({ widget }: WhoIsListeningWidgetProps) => { return ( - {widget.title} + {widget.title} {contacts.map((contact) => { @@ -105,7 +105,7 @@ const WhoIsListeningWidget = ({ widget }: WhoIsListeningWidgetProps) => { - {contact.title} + {contact.title} @@ -116,7 +116,7 @@ const WhoIsListeningWidget = ({ widget }: WhoIsListeningWidgetProps) => { xs={12} sx={{ whiteSpace: 'pre-line' }} > - { }} > {contact.bio} - + - + Email:{' '} - + {' ' + contact.email} - + Phone:{' '} - + {' ' + contact.phone_number} diff --git a/met-web/src/components/feedback/FeedbackModal/index.tsx b/met-web/src/components/feedback/FeedbackModal/index.tsx index ac9a22a2e..d37cf21f3 100644 --- a/met-web/src/components/feedback/FeedbackModal/index.tsx +++ b/met-web/src/components/feedback/FeedbackModal/index.tsx @@ -14,7 +14,7 @@ import * as React from 'react'; import CloseIcon from '@mui/icons-material/Close'; import { ReactComponent as CheckIcon } from 'assets/images/check.svg'; import { useState } from 'react'; -import { MetBody, MetHeader3, MetLabel, modalStyle, PrimaryButton, MetDisclaimer } from '../../common'; +import { MetBodyOld, MetHeader3, MetLabel, modalStyle, PrimaryButtonOld, MetDisclaimer } from '../../common'; import { CommentTypeEnum, createDefaultFeedback, setFeedbackPath, RatingTypeEnum } from 'models/feedback'; import { Else, If, Then, When } from 'react-if'; import { CommentTypeButton, StyledRating } from './styledComponents'; @@ -88,7 +88,7 @@ export const FeedbackModal = () => { return ( <> - setIsOpen(true)} sx={{ @@ -105,7 +105,7 @@ export const FeedbackModal = () => { {translate('feedback.websiteFeedback')} - + handleClose()}> { - + {translate('feedback.submitModal.button')} - + @@ -184,7 +184,7 @@ export const FeedbackModal = () => { sx={{ border: comment_type == CommentTypeEnum.Issue ? '2px solid black' : '' }} > - {commentTypes[CommentTypeEnum.Issue].label} + {commentTypes[CommentTypeEnum.Issue].label} {commentTypes[CommentTypeEnum.Issue].icon} @@ -195,7 +195,7 @@ export const FeedbackModal = () => { sx={{ border: comment_type == CommentTypeEnum.Idea ? '2px solid black' : '' }} > - {commentTypes[CommentTypeEnum.Idea].label} + {commentTypes[CommentTypeEnum.Idea].label} {commentTypes[CommentTypeEnum.Idea].icon} @@ -218,7 +218,7 @@ export const FeedbackModal = () => { justifyContent="space-around" alignItems="center" > - {commentTypes[comment_type].label} + {commentTypes[comment_type].label} {commentTypes[comment_type].icon} @@ -245,14 +245,14 @@ export const FeedbackModal = () => { - {translate('feedback.feedbackModal.button')} - + diff --git a/met-web/src/components/feedback/listing.tsx b/met-web/src/components/feedback/listing.tsx index 51ad3c9df..5994057db 100644 --- a/met-web/src/components/feedback/listing.tsx +++ b/met-web/src/components/feedback/listing.tsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from 'react'; import Grid from '@mui/material/Grid'; -import { MetPageGridContainer, PrimaryButton } from 'components/common'; +import { MetPageGridContainer, PrimaryButtonOld } from 'components/common'; import { CommentTypeEnum, Feedback, FeedbackStatusEnum, SourceTypeEnum } from 'models/feedback'; import { useAppDispatch, useAppSelector } from 'hooks'; import { createDefaultPageInfo, HeadCell, PageInfo, PaginationOptions } from 'components/common/Table/types'; @@ -155,7 +155,7 @@ const FeedbackListing = () => { sx={{ p: 2 }} > - { setPaginationOptions({ page: 1, @@ -172,7 +172,7 @@ const FeedbackListing = () => { }} > {statusFilter == FeedbackStatusEnum.NotReviewed ? 'View Archive' : 'View Feedback'} - + diff --git a/met-web/src/components/homePage/homePage.tsx b/met-web/src/components/homePage/homePage.tsx index 787a0844d..dc6d99d27 100644 --- a/met-web/src/components/homePage/homePage.tsx +++ b/met-web/src/components/homePage/homePage.tsx @@ -1,6 +1,6 @@ import React from 'react'; import Grid from '@mui/material/Grid'; -import { MetHeader1 } from 'components/common'; +import { MetHeader1Old } from 'components/common'; const HomePage = () => { return ( { textAlign="center" style={{ minHeight: '100vh' }} > - Welcome to MET + Welcome to MET ); }; diff --git a/met-web/src/components/imageUpload/Uploader.tsx b/met-web/src/components/imageUpload/Uploader.tsx index ea7534f56..6ec193d1b 100644 --- a/met-web/src/components/imageUpload/Uploader.tsx +++ b/met-web/src/components/imageUpload/Uploader.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useContext } from 'react'; import { Grid, Stack, Typography } from '@mui/material'; import Dropzone, { Accept } from 'react-dropzone'; -import { PrimaryButton, SecondaryButton } from 'components/common'; +import { PrimaryButtonOld, SecondaryButtonOld } from 'components/common'; import { ImageUploadContext } from './imageUploadContext'; interface UploaderProps { @@ -73,7 +73,7 @@ const Uploader = ({ width="100%" justifyContent="flex-end" > - { setAddedImageFileUrl(''); setAddedImageFileName(''); @@ -85,15 +85,15 @@ const Uploader = ({ size="small" > Remove - - + { setCropModalOpen(true); }} size="small" > Crop - + diff --git a/met-web/src/components/imageUpload/cropModal.tsx b/met-web/src/components/imageUpload/cropModal.tsx index af102fa46..cbd95a1bd 100644 --- a/met-web/src/components/imageUpload/cropModal.tsx +++ b/met-web/src/components/imageUpload/cropModal.tsx @@ -1,7 +1,7 @@ import React, { useContext, useState } from 'react'; import Modal from '@mui/material/Modal'; import { Container, Grid, Paper } from '@mui/material'; -import { MetDescription, modalStyle, PrimaryButton } from 'components/common'; +import { MetDescription, modalStyle, PrimaryButtonOld } from 'components/common'; import Cropper, { Area } from 'react-easy-crop'; import { ImageUploadContext } from './imageUploadContext'; import { Box } from '@mui/system'; @@ -99,13 +99,13 @@ export const CropModal = () => { - { handleCropDone(croppedArea); }} > Save - + diff --git a/met-web/src/components/landing/EngagementTile.tsx b/met-web/src/components/landing/EngagementTile.tsx index a5f21927e..d8844d6d8 100644 --- a/met-web/src/components/landing/EngagementTile.tsx +++ b/met-web/src/components/landing/EngagementTile.tsx @@ -5,7 +5,14 @@ import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import { Engagement } from 'models/engagement'; import { Box, Stack } from '@mui/material'; -import { MetBody, MetHeader4, MetLabel, MetParagraph, PrimaryButton, SecondaryButton } from 'components/common'; +import { + MetBodyOld, + MetHeader4, + MetLabel, + MetParagraphOld, + PrimaryButtonOld, + SecondaryButtonOld, +} from 'components/common'; import { getEngagement } from 'services/engagementService'; import { If, Then, When } from 'react-if'; import dayjs from 'dayjs'; @@ -99,7 +106,7 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps) {name} - {description} - + - + {EngagementDate} - + - {translate('landingPage.tile.status')} + {translate('landingPage.tile.status')} - { event.stopPropagation(); @@ -131,7 +138,7 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps) }} > {translate('buttonText.shareYourThoughts')} - + - { event.stopPropagation(); @@ -148,7 +155,7 @@ const EngagementTile = ({ passedEngagement, engagementId }: EngagementTileProps) }} > {translate('buttonText.viewEngagement')} - + diff --git a/met-web/src/components/landing/LandingComponent.tsx b/met-web/src/components/landing/LandingComponent.tsx index 042e0d0ab..0a0618c5d 100644 --- a/met-web/src/components/landing/LandingComponent.tsx +++ b/met-web/src/components/landing/LandingComponent.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Grid } from '@mui/material'; import { Banner } from 'components/banner/Banner'; -import { MetHeader1, MetParagraph } from 'components/common'; +import { MetHeader1Old, MetParagraphOld } from 'components/common'; import TileBlock from './TileBlock'; import { Container } from '@mui/system'; import LandingPageBanner from 'assets/images/LandingPageBanner.png'; @@ -47,10 +47,10 @@ const LandingComponent = () => { rowSpacing={2} > - {translate('landing.banner.header')} + {translate('landing.banner.header')} - {translate('landing.banner.description')} + {translate('landing.banner.description')} diff --git a/met-web/src/components/layout/Footer/index.tsx b/met-web/src/components/layout/Footer/index.tsx index eaaddcec5..3bda9c332 100644 --- a/met-web/src/components/layout/Footer/index.tsx +++ b/met-web/src/components/layout/Footer/index.tsx @@ -1,5 +1,5 @@ import { Box, Divider, Grid, Link, Stack } from '@mui/material'; -import { MetBody, MetLabel, SocialIconButton } from 'components/common'; +import { MetBodyOld, MetLabel, SocialIconButton } from 'components/common'; import React from 'react'; import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDark.svg'; import { Palette } from 'styles/Theme'; @@ -32,7 +32,7 @@ const Footer = () => { }} padding={{ xs: '2em 1em', md: '2em 6em' }} > - {translate('footer.body')} + {translate('footer.body')} { /> - {translate('footer.connectWithUs')} + {translate('footer.connectWithUs')} { - {translate('footer.copyrightNotice')} + {translate('footer.copyrightNotice')} diff --git a/met-web/src/components/layout/Header/InternalHeader.tsx b/met-web/src/components/layout/Header/InternalHeader.tsx index e321388da..376546aae 100644 --- a/met-web/src/components/layout/Header/InternalHeader.tsx +++ b/met-web/src/components/layout/Header/InternalHeader.tsx @@ -9,7 +9,7 @@ import SideNav from '../SideNav/SideNav'; import CssBaseline from '@mui/material/CssBaseline'; import { Palette } from 'styles/Theme'; import EnvironmentBanner from './EnvironmentBanner'; -import { HeaderTitle } from 'components/common'; +import { HeaderTitleOld } from 'components/common'; import { ReactComponent as BCLogo } from 'assets/images/BritishColumbiaLogoDark.svg'; import { When } from 'react-if'; import MenuIcon from '@mui/icons-material/Menu'; @@ -93,23 +93,23 @@ const InternalHeader = ({ drawerWidth = 280 }: HeaderProps) => { /> {isMediumScreen ? ( - { navigate('/home'); }} sx={{ flexGrow: 1, cursor: 'pointer' }} > {translate('header.title')} - + ) : ( - { navigate('/home'); }} sx={{ flexGrow: 1, cursor: 'pointer' }} > {translate('header.smallTitle')} - + )} ; }, - SecondaryButton: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { + SecondaryButtonOld: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { return ; }, })); diff --git a/met-web/tests/unit/components/dashboard/dashboard.test.tsx b/met-web/tests/unit/components/dashboard/dashboard.test.tsx index 6a13db0f9..1f206a2f3 100644 --- a/met-web/tests/unit/components/dashboard/dashboard.test.tsx +++ b/met-web/tests/unit/components/dashboard/dashboard.test.tsx @@ -18,11 +18,11 @@ jest.mock('@mui/material', () => ({ }, })); -jest.mock('axios') +jest.mock('axios'); jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: ReactNode;[prop: string]: unknown }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { return ; }, })); @@ -39,7 +39,9 @@ jest.mock('@mui/material', () => ({ describe('Dashboard page tests', () => { jest.spyOn(reactRedux, 'useDispatch').mockImplementation(() => jest.fn()); jest.spyOn(notificationSlice, 'openNotification').mockImplementation(jest.fn()); - const getEngagementMock = jest.spyOn(engagementService, 'getEngagements').mockReturnValue(Promise.resolve({ items: [], total: 0 })); + const getEngagementMock = jest + .spyOn(engagementService, 'getEngagements') + .mockReturnValue(Promise.resolve({ items: [], total: 0 })); const getAggregatorMock = jest.spyOn(aggregatorService, 'getAggregatorData'); const getUserResponseDetailByMonthMock = jest.spyOn(userResponseDetailService, 'getUserResponseDetailByMonth'); const getSurveyResultDataMock = jest.spyOn(surveyResultService, 'getSurveyResultData'); diff --git a/met-web/tests/unit/components/engagement/EngagementListing.test.tsx b/met-web/tests/unit/components/engagement/EngagementListing.test.tsx index 7f64a4418..b9d632aa2 100644 --- a/met-web/tests/unit/components/engagement/EngagementListing.test.tsx +++ b/met-web/tests/unit/components/engagement/EngagementListing.test.tsx @@ -81,7 +81,7 @@ jest.mock('@mui/material', () => ({ jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { return ; }, })); diff --git a/met-web/tests/unit/components/feedback/feedbackListing.test.tsx b/met-web/tests/unit/components/feedback/feedbackListing.test.tsx index 1df91fcbf..260fcc20d 100644 --- a/met-web/tests/unit/components/feedback/feedbackListing.test.tsx +++ b/met-web/tests/unit/components/feedback/feedbackListing.test.tsx @@ -40,7 +40,7 @@ jest.mock('@mui/material', () => ({ jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { return ; }, })); diff --git a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx index 1564e215c..108009e18 100644 --- a/met-web/tests/unit/components/landingPage/LandingPage.test.tsx +++ b/met-web/tests/unit/components/landingPage/LandingPage.test.tsx @@ -11,7 +11,7 @@ jest.mock('axios'); jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: React.ReactNode }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: React.ReactNode }) => { return ; }, })); diff --git a/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx b/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx index 96ef86696..38cad8f60 100644 --- a/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx +++ b/met-web/tests/unit/components/publicDashboard/PublicDashboard.test.tsx @@ -12,7 +12,7 @@ import { BrowserRouter } from 'react-router-dom'; jest.mock('axios'); jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: React.ReactNode }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: React.ReactNode }) => { return ; }, })); @@ -33,7 +33,7 @@ jest.mock('hooks', () => { 'dashboard.projectLocation': 'Project Location', 'dashboard.submissionTrend.label': 'Live Activity - Engagement', 'dashboard.link.0': '< ({ ...jest.requireActual('@mui/material'), @@ -86,7 +86,7 @@ jest.mock('@mui/material', () => ({ jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { + PrimaryButtonOld: ({ children, ...rest }: { children: ReactNode; [prop: string]: unknown }) => { return ; }, })); diff --git a/met-web/tests/unit/components/user/UserDetails.test.tsx b/met-web/tests/unit/components/user/UserDetails.test.tsx index f182dfa31..c9ca845ac 100644 --- a/met-web/tests/unit/components/user/UserDetails.test.tsx +++ b/met-web/tests/unit/components/user/UserDetails.test.tsx @@ -49,7 +49,7 @@ jest.mock('@mui/material', () => ({ jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { + PrimaryButtonOld: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { return ; }, })); diff --git a/met-web/tests/unit/components/user/UserListing.test.tsx b/met-web/tests/unit/components/user/UserListing.test.tsx index 8d0219d9e..dd54667e1 100644 --- a/met-web/tests/unit/components/user/UserListing.test.tsx +++ b/met-web/tests/unit/components/user/UserListing.test.tsx @@ -24,7 +24,7 @@ const mockUser1: User = { roles: [], }; -jest.mock('axios') +jest.mock('axios'); jest.mock('@mui/material', () => ({ ...jest.requireActual('@mui/material'), @@ -35,7 +35,7 @@ jest.mock('@mui/material', () => ({ jest.mock('components/common', () => ({ ...jest.requireActual('components/common'), - PrimaryButton: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { + PrimaryButtonOld: ({ children, onClick }: { children: ReactNode; onClick: () => void }) => { return ; }, }));