From ba4e5830a8e4e5197ee09e825b97ff084506b4f0 Mon Sep 17 00:00:00 2001 From: Hamed Valiollahi Bayeki Date: Wed, 11 Dec 2024 13:18:43 -0800 Subject: [PATCH 1/2] refactor: replace typography with bctypography across components for consistency --- .../src/components/BCForm/BCFormCheckbox.jsx | 8 +-- .../src/components/BCForm/BCFormRadio.jsx | 8 +-- frontend/src/components/BCForm/BCFormText.jsx | 7 +-- .../src/components/BCForm/CustomLabel.jsx | 6 +-- .../BCTypography/BCTypographyRoot.jsx | 2 +- frontend/src/components/DisclaimerBanner.jsx | 7 +-- frontend/src/components/Loading.jsx | 6 +-- .../src/components/ProgressBreadcrumb.jsx | 11 ++-- .../Admin/AdminMenu/components/AuditLog.jsx | 6 +-- .../AdminMenu/components/ViewAuditLog.jsx | 26 ++++----- .../AddAllocationAgreements.jsx | 10 ++-- .../views/AllocationAgreements/_schema.jsx | 10 ++-- .../ComplianceReports/ComplianceReports.jsx | 12 +++-- .../EditViewComplianceReport.jsx | 17 +++--- .../components/ActivityListCard.jsx | 11 ++-- .../components/AssessmentCard.jsx | 24 ++++----- .../components/ComplianceReportSummary.jsx | 7 ++- .../components/Introduction.jsx | 22 ++++---- .../components/OrgDetailsCard.jsx | 23 ++++---- .../components/ReportDetails.jsx | 14 ++--- .../AddEditFinalSupplyEquipments.jsx | 10 ++-- .../views/FinalSupplyEquipments/_schema.jsx | 16 +++--- .../FuelCodes/AddFuelCode/AddEditFuelCode.jsx | 10 ++-- .../views/FuelCodes/AddFuelCode/_schema.jsx | 24 ++++----- frontend/src/views/FuelCodes/FuelCodes.jsx | 11 ++-- frontend/src/views/FuelCodes/_schema.jsx | 6 +-- .../views/FuelExports/AddEditFuelExports.jsx | 10 ++-- frontend/src/views/FuelExports/_schema.jsx | 16 +++--- .../FuelSupplies/AddEditFuelSupplies.jsx | 10 ++-- frontend/src/views/FuelSupplies/_schema.jsx | 12 ++--- .../AddEditNotionalTransfers.jsx | 6 +-- .../src/views/NotionalTransfers/_schema.jsx | 8 +-- .../Organizations/AddEditOrg/AddEditOrg.jsx | 54 +++++++++---------- .../src/views/OtherUses/AddEditOtherUses.jsx | 7 +-- frontend/src/views/OtherUses/_schema.jsx | 14 ++--- .../Transactions/AddEditViewTransaction.jsx | 14 ++--- .../Transactions/components/Comments.jsx | 5 +- .../Transactions/components/LabelBox.jsx | 4 +- .../components/OrgTransactionDetails.jsx | 23 ++++---- .../components/OrganizationList.jsx | 11 ++-- .../components/TransactionHistory.jsx | 10 ++-- .../views/Transfers/AddEditViewTransfer.jsx | 18 +++---- .../Transfers/components/AgreementDate.jsx | 7 ++- .../Transfers/components/AttachmentList.jsx | 12 +++-- .../Transfers/components/CommentList.jsx | 14 ++--- .../views/Transfers/components/LabelBox.jsx | 4 +- .../components/OrganizationBadge.jsx | 13 ++--- .../Transfers/components/Recommendation.jsx | 11 ++-- .../Transfers/components/SigningAuthority.jsx | 10 ++-- .../components/TransferDetailsCard.jsx | 11 ++-- .../Transfers/components/TransferGraphic.jsx | 18 +++---- .../Transfers/components/TransferHistory.jsx | 14 ++--- .../views/Users/AddEditUser/AddEditUser.jsx | 13 ++--- .../components/BCeIDSpecificRoleFields.jsx | 7 +-- .../components/IDIRSpecificRoleFields.jsx | 7 +-- 55 files changed, 351 insertions(+), 326 deletions(-) diff --git a/frontend/src/components/BCForm/BCFormCheckbox.jsx b/frontend/src/components/BCForm/BCFormCheckbox.jsx index 13f28a215..811a49e5c 100644 --- a/frontend/src/components/BCForm/BCFormCheckbox.jsx +++ b/frontend/src/components/BCForm/BCFormCheckbox.jsx @@ -2,9 +2,9 @@ import { Checkbox, FormControl, FormControlLabel, - FormLabel, - Typography + FormLabel } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { Controller } from 'react-hook-form' import { CustomLabel } from './CustomLabel' import PropTypes from 'prop-types' @@ -22,9 +22,9 @@ export const BCFormCheckbox = ({ name, form, label, options, disabled }) => { return ( - + {label} - +
diff --git a/frontend/src/components/BCForm/BCFormRadio.jsx b/frontend/src/components/BCForm/BCFormRadio.jsx index 215840d61..1854ae761 100644 --- a/frontend/src/components/BCForm/BCFormRadio.jsx +++ b/frontend/src/components/BCForm/BCFormRadio.jsx @@ -3,9 +3,9 @@ import { FormControlLabel, FormLabel, Radio, - RadioGroup, - Typography + RadioGroup } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { Controller } from 'react-hook-form' import PropTypes from 'prop-types' import { CustomLabel } from './CustomLabel' @@ -34,9 +34,9 @@ export const BCFormRadio = ({ name, control, label, options, disabled }) => { return ( - + {label} - + { @@ -14,14 +15,14 @@ export const BCFormText = ({ name, control, label, optional }) => { }) => ( <> - + {label}  {optional && ( (optional) )} - + ( - + {header} — {text} - + ) CustomLabel.propTypes = { diff --git a/frontend/src/components/BCTypography/BCTypographyRoot.jsx b/frontend/src/components/BCTypography/BCTypographyRoot.jsx index 605bcc6e9..b08b8ef3e 100644 --- a/frontend/src/components/BCTypography/BCTypographyRoot.jsx +++ b/frontend/src/components/BCTypography/BCTypographyRoot.jsx @@ -3,7 +3,7 @@ import Typography from '@mui/material/Typography' import { styled } from '@mui/material/styles' const BCTypographyRoot = styled(Typography)(({ theme, ownerState }) => { - const { palette, typography, functions } = theme + const { palette, typography, functions = {} } = theme const { color, textTransform, diff --git a/frontend/src/components/DisclaimerBanner.jsx b/frontend/src/components/DisclaimerBanner.jsx index fb0b2b87a..ac4e7e507 100644 --- a/frontend/src/components/DisclaimerBanner.jsx +++ b/frontend/src/components/DisclaimerBanner.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' -import { Box, Typography } from '@mui/material' +import { Box } from '@mui/material' +import BCTypography from '@/components/BCTypography' import colors from '@/themes/base/colors' const DisclaimerBanner = ({ messages }) => { @@ -16,9 +17,9 @@ const DisclaimerBanner = ({ messages }) => { }} > {messages.map((message, index) => ( - + {message} - + ))} ) diff --git a/frontend/src/components/Loading.jsx b/frontend/src/components/Loading.jsx index 53575eac7..d1906365b 100644 --- a/frontend/src/components/Loading.jsx +++ b/frontend/src/components/Loading.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types' import CircularProgress from '@mui/material/CircularProgress' import Box from '@mui/material/Box' -import Typography from '@mui/material/Typography' +import BCTypography from '@/components/BCTypography' import colors from '@/themes/base/colors' import borders from '@/themes/base/borders' @@ -36,9 +36,9 @@ const Loading = ({ message = 'Loading...', fixed = false }) => { }} > - + {message} - + ) diff --git a/frontend/src/components/ProgressBreadcrumb.jsx b/frontend/src/components/ProgressBreadcrumb.jsx index 91743d589..c90d70988 100644 --- a/frontend/src/components/ProgressBreadcrumb.jsx +++ b/frontend/src/components/ProgressBreadcrumb.jsx @@ -1,6 +1,7 @@ import React from 'react' import PropTypes from 'prop-types' -import { Breadcrumbs, Typography, Box, useMediaQuery } from '@mui/material' +import { Breadcrumbs, Box, useMediaQuery } from '@mui/material' +import BCTypography from '@/components/BCTypography' /** * ProgressBreadcrumb Component @@ -62,19 +63,19 @@ const ProgressBreadcrumb = ({ steps, currentStep }) => { mb: 1 }} > - {index + 1} - + - {step} - + ) } diff --git a/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx b/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx index 91f7bba1a..a6f994c90 100644 --- a/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx +++ b/frontend/src/views/Admin/AdminMenu/components/AuditLog.jsx @@ -1,7 +1,7 @@ import { useRef, useCallback } from 'react' import BCBox from '@/components/BCBox' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { useTranslation } from 'react-i18next' import { auditLogColDefs, defaultAuditLogSortModel } from './_schema' import { apiRoutes, ROUTES } from '@/constants/routes' @@ -38,9 +38,9 @@ export const AuditLog = () => { return ( - + {t('admin:AuditLog')} - + { return ( - + {t('AuditLogDetails', { id })} - + {/* Display the additional information */} - + {t('auditLogColLabels.tableName')}: {tableName} - - + + {t('auditLogColLabels.operation')}: {operation} - - + + {t('auditLogColLabels.rowId')}: {rowId} - - + + {t('auditLogColLabels.createDate')}:{' '} {new Date(createDate).toLocaleString()} - - + + {t('auditLogColLabels.userId')}:{' '} {createUser || t('System')} - + diff --git a/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx b/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx index dd37955ad..7d3a50512 100644 --- a/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx +++ b/frontend/src/views/AllocationAgreements/AddAllocationAgreements.jsx @@ -1,5 +1,5 @@ import { useState, useEffect, useMemo, useRef, useCallback } from 'react' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useParams } from 'react-router-dom' @@ -239,17 +239,17 @@ export const AddEditAllocationAgreements = () => { !allocationAgreementsLoading && (
- + {t('allocationAgreement:addAllocationAgreementRowsTitle')} - - + {t('allocationAgreement:allocationAgreementSubtitle')} - +
[ }, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => StandardCellErrors(params, errors), suppressKeyboardEvent, minWidth: 120, @@ -95,7 +95,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [ cellRenderer: (params) => params.value || (!params.value && ( - Enter or search a name + Enter or search a name )), cellStyle: (params) => StandardCellErrors(params, errors), suppressKeyboardEvent, @@ -177,7 +177,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [ }, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => StandardCellErrors(params, errors), suppressKeyboardEvent, minWidth: 200, @@ -276,7 +276,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [ }, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => StandardCellErrors(params, errors), suppressKeyboardEvent, minWidth: 300, diff --git a/frontend/src/views/ComplianceReports/ComplianceReports.jsx b/frontend/src/views/ComplianceReports/ComplianceReports.jsx index 75476cd50..973b6f46b 100644 --- a/frontend/src/views/ComplianceReports/ComplianceReports.jsx +++ b/frontend/src/views/ComplianceReports/ComplianceReports.jsx @@ -1,5 +1,5 @@ // mui components -import { Typography, Stack } from '@mui/material' +import { Stack } from '@mui/material' import BCBox from '@/components/BCBox' import BCAlert from '@/components/BCAlert' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' @@ -19,6 +19,7 @@ import { useCreateComplianceReport } from '@/hooks/useComplianceReports' // internal components import { reportsColDefs, defaultSortModel } from './components/_schema' import { NewComplianceReportButton } from './components/NewComplianceReportButton' +import BCTypography from '@/components/BCTypography' export const ComplianceReports = () => { const { t } = useTranslation(['common', 'report']) @@ -39,7 +40,10 @@ export const ComplianceReports = () => { }), [t] ) - const getRowId = useCallback((params) => params.data.complianceReportId.toString(), []) + const getRowId = useCallback( + (params) => params.data.complianceReportId.toString(), + [] + ) // eslint-disable-next-line react-hooks/exhaustive-deps const handleRowClicked = useCallback( ({ data }) => { @@ -114,9 +118,9 @@ export const ComplianceReports = () => { )}
- + {t('report:title')} - + { return ( <> - {t('report:errorRetrieving')} + {t('report:errorRetrieving')} ) } @@ -180,22 +181,22 @@ export const EditViewComplianceReport = () => { data={modalData} /> - {compliancePeriod + ' ' + t('report:complianceReport')} -{' '} {reportData?.report.nickname} - - + Status: {currentStatus} - + @@ -242,9 +243,9 @@ export const EditViewComplianceReport = () => { {/* Internal Comments */} {isGovernmentUser && ( - + {t(`report:internalComments`)} - + { gap: 2 }} > - { }} /> - + {t('report:activityLinksList')}: - + - {t('report:uploadLabel')} - + - + {orgData?.name} - + @@ -190,7 +190,7 @@ export const AssessmentCard = ({ {!isGovernmentUser && ( - - {t('report:renewableFuelTarget')} - + @@ -223,13 +223,13 @@ export const AssessmentCard = ({ - {t('report:lowCarbonFuelTargetSummary')} - + @@ -248,14 +248,14 @@ export const AssessmentCard = ({ )} {!!chain.length && ( <> - {t('report:reportHistory')} - + {chain.map((report) => ( ))} @@ -266,13 +266,13 @@ export const AssessmentCard = ({ {isFeatureEnabled(FEATURE_FLAGS.SUPPLEMENTAL_REPORTING) && currentStatus === COMPLIANCE_REPORT_STATUSES.ASSESSED && ( <> - {t('report:supplementalWarning')} - + {t('report:errorRetrieving')} + return {t('report:errorRetrieving')} } return ( <> - + {t('report:summaryAndDeclaration')} - + } diff --git a/frontend/src/views/ComplianceReports/components/Introduction.jsx b/frontend/src/views/ComplianceReports/components/Introduction.jsx index 2a804dc96..ec3747941 100644 --- a/frontend/src/views/ComplianceReports/components/Introduction.jsx +++ b/frontend/src/views/ComplianceReports/components/Introduction.jsx @@ -3,22 +3,22 @@ import { Accordion, AccordionDetails, AccordionSummary, - Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { GlobalStyles } from '@mui/system' import { useTranslation } from 'react-i18next' // Reusable Section Component const Section = ({ header, content }) => ( <> - + > {content.map((paragraph, index) => ( - ( } }} dangerouslySetInnerHTML={{ __html: paragraph }} - > + > ))} ) @@ -58,9 +58,9 @@ export const Introduction = ({ expanded, compliancePeriod }) => { id="compliance-report-intro" data-test="compliance-report-intro" > - + {t('report:introduction')} - + {/* Render each section using map */} @@ -69,10 +69,10 @@ export const Introduction = ({ expanded, compliancePeriod }) => { ))} - + {t('report:questions')} - - + { } }} dangerouslySetInnerHTML={{ __html: t('report:contact') }} - > + > ) } diff --git a/frontend/src/views/ComplianceReports/components/OrgDetailsCard.jsx b/frontend/src/views/ComplianceReports/components/OrgDetailsCard.jsx index fde2af7a1..c2c990dd7 100644 --- a/frontend/src/views/ComplianceReports/components/OrgDetailsCard.jsx +++ b/frontend/src/views/ComplianceReports/components/OrgDetailsCard.jsx @@ -1,5 +1,6 @@ import { useTranslation } from 'react-i18next' -import { Stack, Typography } from '@mui/material' +import { Stack } from '@mui/material' +import BCTypography from '@/components/BCTypography' import BCWidgetCard from '@/components/BCWidgetCard/BCWidgetCard' import { constructAddress } from '@/utils/constructAddress' @@ -12,24 +13,24 @@ export const OrgDetailsCard = ({ orgName, orgAddress, orgAttorneyAddress, isGove title={t('report:orgDetails')} content={ - + {orgName} - +
- + {t('report:serviceAddrLabel')}: - {' '} - + {' '} + {orgAddress && constructAddress(orgAddress)} - +
- {t('report:bcAddrLabel')}:{' '} - + {t('report:bcAddrLabel')}:{' '} + {orgAttorneyAddress && constructAddress(orgAttorneyAddress)} - +
- {!isGovernmentUser && { return ( <> - + {t('report:reportDetails')} { > {t('report:collapseAll')} - + {activityList.map((activity, index) => { const { data, error, isLoading } = activity.useFetch(complianceReportId) return ( @@ -223,7 +223,7 @@ const ReportDetails = ({ currentStatus = 'Draft' }) => { id={`panel${index}-header`} data-test={`panel${index}-summary`} > - { )} - + {isLoading ? ( ) : error ? ( - Error loading data + Error loading data ) : activity.component ? ( activity.component(data) ) : ( - {JSON.stringify(data)} + {JSON.stringify(data)} )} diff --git a/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx b/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx index fbfa3ceb3..fb9fcafaa 100644 --- a/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx +++ b/frontend/src/views/FinalSupplyEquipments/AddEditFinalSupplyEquipments.jsx @@ -1,5 +1,5 @@ import { useState, useEffect, useMemo, useRef, useCallback } from 'react' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useParams } from 'react-router-dom' @@ -262,17 +262,17 @@ export const AddEditFinalSupplyEquipments = () => { !equipmentsLoading && (
- + {t('finalSupplyEquipment:addFSErowsTitle')} - - + {t('finalSupplyEquipment:fseSubtitle')} - +
( - + {params.value[0] ? `${params.value[0]} to ${params.value[1]}` : 'YYYY-MM-DD to YYYY-MM-DD'} - + ), suppressKeyboardEvent, cellStyle: (params) => StandardCellErrors(params, errors), @@ -162,7 +162,7 @@ export const finalSupplyEquipmentColDefs = ( cellStyle: (params) => StandardCellErrors(params, errors), cellRenderer: (params) => params.value || - (!params.value && Select) + (!params.value && Select) }, { field: 'ports', @@ -183,7 +183,7 @@ export const finalSupplyEquipmentColDefs = ( cellStyle: (params) => StandardCellErrors(params, errors), cellRenderer: (params) => params.value || - (!params.value && Select) + (!params.value && Select) }, { field: 'fuelMeasurementType', @@ -204,7 +204,7 @@ export const finalSupplyEquipmentColDefs = ( cellStyle: (params) => StandardCellErrors(params, errors), cellRenderer: (params) => params.value || - (!params.value && Select) + (!params.value && Select) }, { field: 'intendedUses', @@ -224,7 +224,7 @@ export const finalSupplyEquipmentColDefs = ( (params.value && params.value !== '' && ( )) || - (!params.value && Select), + (!params.value && Select), suppressKeyboardEvent, minWidth: 560 }, @@ -246,7 +246,7 @@ export const finalSupplyEquipmentColDefs = ( (params.value && params.value !== '' && ( )) || - (!params.value && Select), + (!params.value && Select), suppressKeyboardEvent, minWidth: 315 }, diff --git a/frontend/src/views/FuelCodes/AddFuelCode/AddEditFuelCode.jsx b/frontend/src/views/FuelCodes/AddFuelCode/AddEditFuelCode.jsx index 044c767a7..1b5d6448c 100644 --- a/frontend/src/views/FuelCodes/AddFuelCode/AddEditFuelCode.jsx +++ b/frontend/src/views/FuelCodes/AddFuelCode/AddEditFuelCode.jsx @@ -1,6 +1,6 @@ import { useCallback, useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' -import { Stack, Typography } from '@mui/material' +import { Stack } from '@mui/material' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { v4 as uuid } from 'uuid' import { BCGridEditor } from '@/components/BCDataGrid/BCGridEditor' @@ -307,13 +307,13 @@ const AddEditFuelCodeBase = () => { <>
- + {!existingFuelCode && t('fuelCode:newFuelCodeTitle')} {existingFuelCode?.fuelCodeStatus.status === FUEL_CODE_STATUSES.DRAFT && t('fuelCode:editFuelCodeTitle')} {existingFuelCode?.fuelCodeStatus.status === FUEL_CODE_STATUSES.APPROVED && t('fuelCode:viewFuelCodeTitle')} - +
{ } onClick={handleOpenApprovalModal} > - + {t('fuelCode:approveFuelCodeBtn')} - + )} diff --git a/frontend/src/views/FuelCodes/AddFuelCode/_schema.jsx b/frontend/src/views/FuelCodes/AddFuelCode/_schema.jsx index 3c39a6f4c..e42f2b8c7 100644 --- a/frontend/src/views/FuelCodes/AddFuelCode/_schema.jsx +++ b/frontend/src/views/FuelCodes/AddFuelCode/_schema.jsx @@ -9,7 +9,7 @@ import { import { apiRoutes } from '@/constants/routes' import i18n from '@/i18n' import { CommonArrayRenderer } from '@/utils/grid/cellRenderers' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { actions, validation } from '@/components/BCDataGrid/columns' import { numberFormatter } from '@/utils/formatters' @@ -30,7 +30,7 @@ const createCellRenderer = (field, customRenderer = null) => { const content = customRenderer ? customRenderer(params) : params.value || - (!params.value && Select) + (!params.value && Select) return
{content}
} @@ -257,9 +257,9 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ maxWidth: 220, minWidth: 200, cellRenderer: createCellRenderer('applicationDate', (params) => ( - + {params.value ? params.value : 'YYYY-MM-DD'} - + )), suppressKeyboardEvent, cellEditor: DateEditor @@ -272,9 +272,9 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ maxWidth: 220, minWidth: 220, cellRenderer: createCellRenderer('approvalDate', (params) => ( - + {params.value ? params.value : 'YYYY-MM-DD'} - + )), suppressKeyboardEvent, @@ -288,9 +288,9 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ maxWidth: 220, minWidth: 220, cellRenderer: createCellRenderer('effectiveDate', (params) => ( - + {params.value ? params.value : 'YYYY-MM-DD'} - + )), suppressKeyboardEvent, cellEditor: DateEditor @@ -303,9 +303,9 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ maxWidth: 220, minWidth: 220, cellRenderer: createCellRenderer('expirationDate', (params) => ( - + {params.value ? params.value : 'YYYY-MM-DD'} - + )), suppressKeyboardEvent, cellEditor: DateEditor @@ -561,7 +561,7 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ params.value && params.value.length > 0 ? ( ) : ( - Select + Select ) ), cellRendererParams: { @@ -586,7 +586,7 @@ export const fuelCodeColDefs = (optionsData, errors, isCreate, canEdit) => [ params.value && params.value.length > 0 ? ( ) : ( - Select + Select ) ), cellRendererParams: { diff --git a/frontend/src/views/FuelCodes/FuelCodes.jsx b/frontend/src/views/FuelCodes/FuelCodes.jsx index 094ee425d..fba322f9a 100644 --- a/frontend/src/views/FuelCodes/FuelCodes.jsx +++ b/frontend/src/views/FuelCodes/FuelCodes.jsx @@ -11,7 +11,8 @@ import { useApiService } from '@/services/useApiService' import withRole from '@/utils/withRole' import { faCirclePlus } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { Stack, Typography } from '@mui/material' +import { Stack } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useEffect, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -68,9 +69,9 @@ const FuelCodesBase = () => { )} - + {t('FuelCodes')} - + { data-test="new-fuel-code-btn" onClick={() => navigate(ROUTES.FUELCODES_ADD)} > - + {t('fuelCode:newFuelCodeBtn')} - + [ filter: false, headerName: t('fuelCode:fuelCodeColLabels.lastUpdated'), cellRenderer: (params) => ( - + {params.value ? timezoneFormatter({ value: params.value }) : 'YYYY-MM-DD'} - + ), minWidth: 300 }, diff --git a/frontend/src/views/FuelExports/AddEditFuelExports.jsx b/frontend/src/views/FuelExports/AddEditFuelExports.jsx index 5e6a3cf76..ebaa03498 100644 --- a/frontend/src/views/FuelExports/AddEditFuelExports.jsx +++ b/frontend/src/views/FuelExports/AddEditFuelExports.jsx @@ -7,7 +7,7 @@ import { useSaveFuelExport } from '@/hooks/useFuelExport' import { isArrayEmpty } from '@/utils/formatters' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -228,17 +228,17 @@ export const AddEditFuelExports = () => { !fuelExportsLoading && (
- + {t('fuelExport:addFuelExportRowsTitle')} - - + {t('fuelExport:fuelExportSubtitle')} - +
[ maxWidth: 220, minWidth: 200, cellRenderer: (params) => ( - + {params.value ? params.value : 'YYYY-MM-DD'} - + ), suppressKeyboardEvent, cellEditor: DateEditor, @@ -112,7 +112,7 @@ export const fuelExportColDefs = (optionsData, errors) => [ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: { options: optionsData?.fuelTypes?.map((obj) => obj.fuelType).sort(), multiple: false, @@ -181,7 +181,7 @@ export const fuelExportColDefs = (optionsData, errors) => [ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: (params) => ({ options: optionsData?.fuelTypes ?.find((obj) => params.data.fuelType === obj.fuelType) @@ -255,7 +255,7 @@ export const fuelExportColDefs = (optionsData, errors) => [ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => cellErrorStyle(params, errors), suppressKeyboardEvent, valueGetter: (params) => { @@ -288,7 +288,7 @@ export const fuelExportColDefs = (optionsData, errors) => [ cellEditor: 'agSelectCellEditor', cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: (params) => ({ values: optionsData?.fuelTypes ?.find((obj) => params.data.fuelType === obj.fuelType) @@ -370,7 +370,7 @@ export const fuelExportColDefs = (optionsData, errors) => [ }), cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), suppressKeyboardEvent, editable: (params) => isFuelTypeOther(params), cellStyle: (params) => { diff --git a/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx b/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx index f5e3b6506..a6289c0d7 100644 --- a/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx +++ b/frontend/src/views/FuelSupplies/AddEditFuelSupplies.jsx @@ -8,7 +8,7 @@ import { useSaveFuelSupply } from '@/hooks/useFuelSupply' import { isArrayEmpty } from '@/utils/formatters' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -267,17 +267,17 @@ export const AddEditFuelSupplies = () => { !fuelSuppliesLoading && (
- + {t('fuelSupply:addFuelSupplyRowsTitle')} - - + {t('fuelSupply:fuelSupplySubtitle')} - +
[ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: { options: optionsData?.fuelTypes?.map((obj) => obj.fuelType).sort(), multiple: false, @@ -150,7 +150,7 @@ export const fuelSupplyColDefs = (optionsData, errors, warnings) => [ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: (params) => ({ options: optionsData?.fuelTypes ?.find((obj) => params.data.fuelType === obj.fuelType) @@ -223,7 +223,7 @@ export const fuelSupplyColDefs = (optionsData, errors, warnings) => [ cellEditor: AutocompleteCellEditor, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => StandardCellWarningAndErrors(params, errors, warnings), suppressKeyboardEvent, @@ -260,7 +260,7 @@ export const fuelSupplyColDefs = (optionsData, errors, warnings) => [ cellEditor: 'agSelectCellEditor', cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellEditorParams: (params) => ({ values: optionsData?.fuelTypes ?.find((obj) => params.data.fuelType === obj.fuelType) @@ -369,7 +369,7 @@ export const fuelSupplyColDefs = (optionsData, errors, warnings) => [ }), cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), suppressKeyboardEvent, editable: (params) => isFuelTypeOther(params), cellStyle: (params) => diff --git a/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx b/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx index dae931de3..2360dfb19 100644 --- a/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx +++ b/frontend/src/views/NotionalTransfers/AddEditNotionalTransfers.jsx @@ -1,5 +1,5 @@ import { useState, useEffect, useMemo, useRef, useCallback } from 'react' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useTranslation } from 'react-i18next' import { useLocation, useNavigate, useParams } from 'react-router-dom' @@ -201,9 +201,9 @@ export const AddEditNotionalTransfers = () => { !transfersLoading && (
- + {t('notionalTransfer:newNotionalTransferTitle')} - +
[ cellRenderer: (params) => params.value || (!params.value && ( - Enter or search a name + Enter or search a name )), suppressKeyboardEvent, minWidth: 300, @@ -107,7 +107,7 @@ export const notionalTransferColDefs = (optionsData, errors) => [ cellStyle: (params) => StandardCellErrors(params, errors), cellRenderer: (params) => params.value || - (!params.value && Select) + (!params.value && Select) }, { field: 'receivedOrTransferred', @@ -128,7 +128,7 @@ export const notionalTransferColDefs = (optionsData, errors) => [ cellStyle: (params) => StandardCellErrors(params, errors), cellRenderer: (params) => params.value || - (!params.value && Select) + (!params.value && Select) }, { field: 'quantity', diff --git a/frontend/src/views/Organizations/AddEditOrg/AddEditOrg.jsx b/frontend/src/views/Organizations/AddEditOrg/AddEditOrg.jsx index db41edc62..829ce2114 100644 --- a/frontend/src/views/Organizations/AddEditOrg/AddEditOrg.jsx +++ b/frontend/src/views/Organizations/AddEditOrg/AddEditOrg.jsx @@ -13,9 +13,9 @@ import { Paper, Radio, RadioGroup, - TextField, - Typography + TextField } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { useMutation } from '@tanstack/react-query' import { useCallback, useEffect, useState } from 'react' import { useForm, Controller } from 'react-hook-form' @@ -136,9 +136,9 @@ export const AddEditOrg = () => { } return ( errors[fieldName] && ( - + {errors[fieldName].message} - + ) ) } @@ -301,9 +301,9 @@ export const AddEditOrg = () => { {t('common:submitError')} )} - + {orgID ? t('org:editOrgTitle') : t('org:addOrgTitle')} - + { /> } label={ - + {t('org:sameAsLegalNameLabel')} - + } /> @@ -413,9 +413,9 @@ export const AddEditOrg = () => { - + {t('org:supplierTypLabel')}: - + @@ -435,9 +435,9 @@ export const AddEditOrg = () => { /> } label={ - + {t('supplier')} - + } /> @@ -451,9 +451,9 @@ export const AddEditOrg = () => { - + {t('org:regTrnLabel')}: - + @@ -474,9 +474,9 @@ export const AddEditOrg = () => { } label={ - + {t('yes')} - + } /> { } label={ - + {t('no')} - + } /> @@ -522,9 +522,9 @@ export const AddEditOrg = () => { - + {t('org:serviceAddrLabel')} - + {t('org:streetAddrLabel')}: @@ -612,9 +612,9 @@ export const AddEditOrg = () => { - + {t('org:bcAddrLabel')} - + { /> } label={ - + {t('org:sameAddrLabel')} - + } /> @@ -762,9 +762,9 @@ export const AddEditOrg = () => { } onClick={() => navigate(ROUTES.ORGANIZATIONS)} > - + {t('backBtn')} - + { } > - {t('saveBtn')} + {t('saveBtn')} diff --git a/frontend/src/views/OtherUses/AddEditOtherUses.jsx b/frontend/src/views/OtherUses/AddEditOtherUses.jsx index 6de1e3a21..58586cb9e 100644 --- a/frontend/src/views/OtherUses/AddEditOtherUses.jsx +++ b/frontend/src/views/OtherUses/AddEditOtherUses.jsx @@ -10,7 +10,8 @@ import { import { cleanEmptyStringValues } from '@/utils/formatters' import { faFloppyDisk } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { Stack, Typography } from '@mui/material' +import { Stack } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2/Grid2' import { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' @@ -233,9 +234,9 @@ export const AddEditOtherUses = () => { isFetched && (
- + {t('otherUses:newOtherUsesTitle')} - +
[ }, suppressKeyboardEvent, cellRenderer: (params) => - params.value || Select, + params.value || Select, cellStyle: (params) => StandardCellErrors(params, errors) }, { @@ -58,7 +58,7 @@ export const otherUsesColDefs = (optionsData, errors) => [ }, suppressKeyboardEvent, cellRenderer: (params) => - params.value || Select, + params.value || Select, cellStyle: (params) => StandardCellErrors(params, errors), minWidth: 200 }, @@ -84,7 +84,7 @@ export const otherUsesColDefs = (optionsData, errors) => [ }, cellRenderer: (params) => params.value || - (!params.value && Select), + (!params.value && Select), cellStyle: (params) => StandardCellErrors(params, errors), suppressKeyboardEvent, valueSetter: (params) => { @@ -121,7 +121,7 @@ export const otherUsesColDefs = (optionsData, errors) => [ params.data.provisionOfTheAct === PROVISION_APPROVED_FUEL_CODE && fuelType?.fuelCodes?.length > 0 ) { - return params.value || Select; + return params.value || Select; } return null; }, @@ -193,7 +193,7 @@ export const otherUsesColDefs = (optionsData, errors) => [ }, suppressKeyboardEvent, cellRenderer: (params) => - params.value || Select, + params.value || Select, cellStyle: (params) => StandardCellErrors(params, errors) }, { @@ -246,7 +246,7 @@ export const otherUsesColDefs = (optionsData, errors) => [ }, suppressKeyboardEvent, cellRenderer: (params) => - params.value || Select, + params.value || Select, cellStyle: (params) => StandardCellErrors(params, errors), minWidth: 200 }, diff --git a/frontend/src/views/Transactions/AddEditViewTransaction.jsx b/frontend/src/views/Transactions/AddEditViewTransaction.jsx index 0470f3797..766559a92 100644 --- a/frontend/src/views/Transactions/AddEditViewTransaction.jsx +++ b/frontend/src/views/Transactions/AddEditViewTransaction.jsx @@ -23,12 +23,12 @@ import { import { useTheme, Stack, - Typography, useMediaQuery, Step, StepLabel, Stepper } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faArrowLeft } from '@fortawesome/free-solid-svg-icons' import BCBox from '@/components/BCBox' @@ -345,9 +345,9 @@ export const AddEditViewTransaction = () => { /> {/* Header section */} - + {title} - + {/* Progress bar */} { {/* Internal Comments */} - + {t(`txn:internalCommentsOptional`)} - + { onClick={() => navigate(ROUTES.TRANSACTIONS)} > - + {t('backBtn')} - + {buttonClusterConfig[ transactionId ? currentStatus : TRANSACTION_STATUSES.NEW diff --git a/frontend/src/views/Transactions/components/Comments.jsx b/frontend/src/views/Transactions/components/Comments.jsx index a630c7533..52de50b7e 100644 --- a/frontend/src/views/Transactions/components/Comments.jsx +++ b/frontend/src/views/Transactions/components/Comments.jsx @@ -1,5 +1,6 @@ import { useState, useEffect } from 'react' -import { Box, Typography, Collapse, IconButton, TextField } from '@mui/material' +import { Box, Collapse, IconButton, TextField } from '@mui/material' +import BCTypography from '@/components/BCTypography' import ExpandLessIcon from '@mui/icons-material/ExpandLess' import ExpandMoreIcon from '@mui/icons-material/ExpandMore' import { useFormContext } from 'react-hook-form' @@ -37,7 +38,7 @@ export const Comments = ({ commentField, isEditable }) => { onClick={handleToggle} sx={{ cursor: 'pointer' }} > - {t('txn:commentsDescText')} + {t('txn:commentsDescText')} {isExpanded ? : } diff --git a/frontend/src/views/Transactions/components/LabelBox.jsx b/frontend/src/views/Transactions/components/LabelBox.jsx index a5e837539..5fa29ae1d 100644 --- a/frontend/src/views/Transactions/components/LabelBox.jsx +++ b/frontend/src/views/Transactions/components/LabelBox.jsx @@ -28,9 +28,9 @@ export const LabelBox = ({ > {description && ( - + {description} - + )} {children} diff --git a/frontend/src/views/Transactions/components/OrgTransactionDetails.jsx b/frontend/src/views/Transactions/components/OrgTransactionDetails.jsx index b25fb2e1f..b48ea7897 100644 --- a/frontend/src/views/Transactions/components/OrgTransactionDetails.jsx +++ b/frontend/src/views/Transactions/components/OrgTransactionDetails.jsx @@ -1,5 +1,6 @@ import React from 'react' -import { Box, Grid, Typography } from '@mui/material' +import { Box, Grid } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { useTranslation } from 'react-i18next' import { dateFormatter, numberFormatter } from '@/utils/formatters' import BCWidgetCard from '@/components/BCWidgetCard/BCWidgetCard' @@ -33,32 +34,32 @@ export const OrgTransactionDetails = ({ transactionType, transactionData }) => { // Construct the content based on the transaction type const content = ( - + {transactionType === ADMIN_ADJUSTMENT ? t('txn:administrativeAdjustment') : t('txn:initiativeAgreement')}{' '} {t('txn:for')} {transactionData.toOrganization.name} - - + + {t('txn:complianceUnitsLabel')}{' '} {numberFormatter({ value: transactionData.complianceUnits })} - - + + {t('txn:effectiveDateLabel')}{' '} {dateFormatter({ value: effectiveDate })} - + {transactionData.govComment && ( - + {t('txn:commentsTextLabel')}{' '} {transactionData.govComment} - + )} - + {t('txn:approvedLabel')}{' '} {dateFormatter({ value: approvedDate })} {t('txn:approvedByDirector')} - + ) diff --git a/frontend/src/views/Transactions/components/OrganizationList.jsx b/frontend/src/views/Transactions/components/OrganizationList.jsx index e2f9719dd..1bc750edb 100644 --- a/frontend/src/views/Transactions/components/OrganizationList.jsx +++ b/frontend/src/views/Transactions/components/OrganizationList.jsx @@ -1,6 +1,7 @@ import { useEffect, useState } from 'react' import PropTypes from 'prop-types' -import { Box, Stack, Typography, Autocomplete, TextField } from '@mui/material' +import { Box, Stack, Autocomplete, TextField } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { useTranslation } from 'react-i18next' import { useOrganizationNames } from '@/hooks/useOrganizations' import { numberFormatter } from '@/utils/formatters' @@ -47,9 +48,9 @@ const OrganizationList = ({ onOrgChange }) => { return ( - + {org} - + { useFlexGap flexWrap="wrap" > - + {t('txn:showTransactionsInvolve')}:  - + { return ( - + {t('txn:txnHistoryLabel')} - +
    {transactionHistory?.map((item, index) => (
  • - + {getTransactionStatusLabel(getStatusObject(item))} @@ -50,7 +50,7 @@ export const TransactionHistory = ({ transactionHistory }) => { of {t('govOrg')} - +
    • ))}
diff --git a/frontend/src/views/Transfers/AddEditViewTransfer.jsx b/frontend/src/views/Transfers/AddEditViewTransfer.jsx index 6e15fd993..2968b16a8 100644 --- a/frontend/src/views/Transfers/AddEditViewTransfer.jsx +++ b/frontend/src/views/Transfers/AddEditViewTransfer.jsx @@ -23,10 +23,10 @@ import { Step, StepLabel, Stepper, - Typography, useMediaQuery, useTheme } from '@mui/material' +import BCTypography from '@/components/BCTypography' import BCAlert from '@/components/BCAlert' import BCBox from '@/components/BCBox' import BCButton from '@/components/BCButton' @@ -365,18 +365,18 @@ export const AddEditViewTransfer = () => { /> {/* Header section */} - + {title} - + {transferStatus !== TRANSFER_STATUSES.RECORDED && ( - + {t('transfer:effectiveText')} - +
- + {t('transfer:considerationText')} - + )} {/* Progress bar */} @@ -470,12 +470,12 @@ export const AddEditViewTransfer = () => { onClick={() => navigate(ROUTES.TRANSACTIONS)} > - {t('backBtn')} - + {buttonClusterConfig[transferId ? currentStatus : 'New']?.map( (config) => diff --git a/frontend/src/views/Transfers/components/AgreementDate.jsx b/frontend/src/views/Transfers/components/AgreementDate.jsx index c05887356..10effa986 100644 --- a/frontend/src/views/Transfers/components/AgreementDate.jsx +++ b/frontend/src/views/Transfers/components/AgreementDate.jsx @@ -1,4 +1,5 @@ -import { Box, TextField, Typography } from '@mui/material' +import { Box, TextField } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { useFormContext } from 'react-hook-form' import { LabelBox } from './LabelBox' import { useTranslation } from 'react-i18next' @@ -25,7 +26,9 @@ export const AgreementDate = () => { justifyContent="flex-start" gap="10px" > - {t('transfer:agrDateHeader')} + + {t('transfer:agrDateHeader')} + { return ( - + Attachments - + {attachments.map((attachment) => ( { key={attachment.attachmentID} alignItems="flex-start" > - + ({ diff --git a/frontend/src/views/Transfers/components/CommentList.jsx b/frontend/src/views/Transfers/components/CommentList.jsx index 8d7e135e3..33b88cf1a 100644 --- a/frontend/src/views/Transfers/components/CommentList.jsx +++ b/frontend/src/views/Transfers/components/CommentList.jsx @@ -1,7 +1,6 @@ import BCBox from '@/components/BCBox' import PropTypes from 'prop-types' import { - Typography, List, ListItem, ListItemAvatar, @@ -9,12 +8,13 @@ import { Avatar, Divider } from '@mui/material' +import BCTypography from '@/components/BCTypography' export const CommentList = ({ comments = [] }) => ( - + Comments - + ( - ( > {comment.name} {':'} - + } secondary={ <> - {comment.comment} - + } /> diff --git a/frontend/src/views/Transfers/components/LabelBox.jsx b/frontend/src/views/Transfers/components/LabelBox.jsx index a5e837539..5fa29ae1d 100644 --- a/frontend/src/views/Transfers/components/LabelBox.jsx +++ b/frontend/src/views/Transfers/components/LabelBox.jsx @@ -28,9 +28,9 @@ export const LabelBox = ({ > {description && ( - + {description} - + )} {children} diff --git a/frontend/src/views/Transfers/components/OrganizationBadge.jsx b/frontend/src/views/Transfers/components/OrganizationBadge.jsx index 132debc01..6ddeaee2a 100644 --- a/frontend/src/views/Transfers/components/OrganizationBadge.jsx +++ b/frontend/src/views/Transfers/components/OrganizationBadge.jsx @@ -1,6 +1,7 @@ import { PropTypes } from 'prop-types' import BCBadge from '@/components/BCBadge' -import { Stack, Typography } from '@mui/material' +import { Stack } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { Role } from '@/components/Role' import { roles } from '@/constants/roles' import { useOrganizationBalance } from '@/hooks/useOrganization' @@ -23,16 +24,16 @@ export const OrganizationBadge = ({ badgeContent={ <> - {organizationName} + {organizationName} {['Submitted', 'Recommended'].includes(transferStatus) && ( - + Balance: {orgInfo?.totalBalance.toLocaleString()} ( {Math.abs(orgInfo?.reservedBalance).toLocaleString()}) - - + + Registered: {orgInfo?.registered ? 'Yes' : 'No'} - + )} diff --git a/frontend/src/views/Transfers/components/Recommendation.jsx b/frontend/src/views/Transfers/components/Recommendation.jsx index 100568e89..aedaaf7da 100644 --- a/frontend/src/views/Transfers/components/Recommendation.jsx +++ b/frontend/src/views/Transfers/components/Recommendation.jsx @@ -1,7 +1,8 @@ import BCBox from '@/components/BCBox' import { TRANSFER_STATUSES } from '@/constants/statuses' import { useTransfer } from '@/hooks/useTransfer' -import { FormControlLabel, Radio, RadioGroup, Typography } from '@mui/material' +import { FormControlLabel, Radio, RadioGroup } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { Controller, useFormContext } from 'react-hook-form' import { useTranslation } from 'react-i18next' import { useParams } from 'react-router-dom' @@ -18,9 +19,9 @@ export const Recommendation = ({ currentStatus }) => { return ( - + {t('transfer:analystRecommend')} - + {transferData.currentStatus.status === TRANSFER_STATUSES.SUBMITTED ? ( { )} /> ) : ( - + The analyst has recommended that you to{' '} {transferData.recommendation} this transfer. - + )} ) diff --git a/frontend/src/views/Transfers/components/SigningAuthority.jsx b/frontend/src/views/Transfers/components/SigningAuthority.jsx index 910a6cdd0..2d734a2b5 100644 --- a/frontend/src/views/Transfers/components/SigningAuthority.jsx +++ b/frontend/src/views/Transfers/components/SigningAuthority.jsx @@ -1,4 +1,4 @@ -import { Box, FormControlLabel, Checkbox, Typography } from '@mui/material' +import { Box, FormControlLabel, Checkbox } from '@mui/material' import BCTypography from '@/components/BCTypography' import withRole from '@/utils/withRole' import { useFormContext } from 'react-hook-form' @@ -34,15 +34,15 @@ export const SigningAuthority = () => { /> } label={ - + {t('transfer:saConfirmation')} - + } /> {errors.signingAuthorityDeclaration && ( - + {errors.signingAuthorityDeclaration.message} - + )} diff --git a/frontend/src/views/Transfers/components/TransferDetailsCard.jsx b/frontend/src/views/Transfers/components/TransferDetailsCard.jsx index 4e45cfb45..b215cef39 100644 --- a/frontend/src/views/Transfers/components/TransferDetailsCard.jsx +++ b/frontend/src/views/Transfers/components/TransferDetailsCard.jsx @@ -1,7 +1,8 @@ import PropTypes from 'prop-types' import SyncAltIcon from '@mui/icons-material/SyncAlt' import SwapVertIcon from '@mui/icons-material/SwapVert' -import { Stack, Typography, useMediaQuery, useTheme } from '@mui/material' +import { Stack, useMediaQuery, useTheme } from '@mui/material' +import BCTypography from '@/components/BCTypography' import BCBox from '@/components/BCBox' import { OrganizationBadge } from '@/views/Transfers/components' import { useTranslation } from 'react-i18next' @@ -42,11 +43,11 @@ export const TransferDetailsCard = ({ transferStatus={transferStatus} /> - + {isMobileSize ? `$${decimalFormatter(totalValue)}` : `${quantity} ${t('transfer:complianceUnits')}`} - + )} - + {!isMobileSize ? `$${decimalFormatter(totalValue)}` : `${quantity} ${t('transfer:complianceUnits')}`} - + { )?.name || '' const pricePerUnit = parseFloat(watch('pricePerUnit')) - const totalValue = - quantity && pricePerUnit ? quantity * pricePerUnit : 0 + const totalValue = quantity && pricePerUnit ? quantity * pricePerUnit : 0 const isNumberOfCreditsValid = (number) => !isNaN(number) && number > 0 const isTotalValueValid = (value) => typeof value === 'number' && value > 0 @@ -99,7 +99,7 @@ export const TransferGraphic = () => { overflow: 'hidden' }} > - {creditsFrom} + {creditsFrom} { }} > {isNumberOfCreditsValid(quantity) && ( - + {`${formattedNumberOfCredits} compliance units`} - + )} {renderIcon()} {isTotalValueValid(totalValue) && ( - + {formatCurrency(totalValue)} - + )} @@ -145,7 +145,7 @@ export const TransferGraphic = () => { justifyContent: 'center' }} > - {creditsTo || ''} + {creditsTo || ''} ) diff --git a/frontend/src/views/Transfers/components/TransferHistory.jsx b/frontend/src/views/Transfers/components/TransferHistory.jsx index f6be941ef..b4f50bf17 100644 --- a/frontend/src/views/Transfers/components/TransferHistory.jsx +++ b/frontend/src/views/Transfers/components/TransferHistory.jsx @@ -4,7 +4,7 @@ import { TRANSFER_RECOMMENDATION } from '@/constants/statuses' import { useTransfer } from '@/hooks/useTransfer' -import { Typography } from '@mui/material' +import BCTypography from '@/components/BCTypography' import dayjs from 'dayjs' import localizedFormat from 'dayjs/plugin/localizedFormat' import duration from 'dayjs/plugin/duration' @@ -65,9 +65,9 @@ function TransferHistory({ transferHistory }) { return ( - + {t('transfer:txnHistory')} - +
    {[ @@ -78,7 +78,7 @@ function TransferHistory({ transferHistory }) { ].includes(currentStatus) && agreementDate && (
  • - + Date of written agreement reached between the two organizations: {agreementDate.format('LL')} (proposal falls @@ -101,12 +101,12 @@ function TransferHistory({ transferHistory }) { )} ) - +
    • )} {transferHistory?.map((item, index) => (
  • - + {getTransferStatusLabel(item.transferStatus?.status)}{' '} on {dayjs(item.createDate).format('LL')} @@ -122,7 +122,7 @@ function TransferHistory({ transferHistory }) { ? item.userProfile.organization.name : t('govOrg')}{' '} - +
    • ))}
diff --git a/frontend/src/views/Users/AddEditUser/AddEditUser.jsx b/frontend/src/views/Users/AddEditUser/AddEditUser.jsx index 18b129042..bcb3db66b 100644 --- a/frontend/src/views/Users/AddEditUser/AddEditUser.jsx +++ b/frontend/src/views/Users/AddEditUser/AddEditUser.jsx @@ -21,7 +21,8 @@ import colors from '@/themes/base/colors' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faFloppyDisk, faArrowLeft } from '@fortawesome/free-solid-svg-icons' import BCButton from '@/components/BCButton' -import { Box, Stack, Typography } from '@mui/material' +import { Box, Stack } from '@mui/material' +import BCTypography from '@/components/BCTypography' import Grid2 from '@mui/material/Unstable_Grid2' import BCAlert from '@/components/BCAlert' import Loading from '@/components/Loading' @@ -232,10 +233,10 @@ export const AddEditUser = ({ userType }) => { {t('common:submitError')} )} - + {userID ? 'Edit' : 'Add'} user  {userType === 'bceid' && `to ${orgName}`} - +
@@ -310,9 +311,9 @@ export const AddEditUser = ({ userType }) => { ) } > - + {t('backBtn')} - + { /> } > - {t('saveBtn')} + {t('saveBtn')} diff --git a/frontend/src/views/Users/AddEditUser/components/BCeIDSpecificRoleFields.jsx b/frontend/src/views/Users/AddEditUser/components/BCeIDSpecificRoleFields.jsx index d0a30b0ff..95bb47b3a 100644 --- a/frontend/src/views/Users/AddEditUser/components/BCeIDSpecificRoleFields.jsx +++ b/frontend/src/views/Users/AddEditUser/components/BCeIDSpecificRoleFields.jsx @@ -1,4 +1,5 @@ -import { Box, Typography } from '@mui/material' +import { Box } from '@mui/material' +import BCTypography from '@/components/BCTypography' import { BCFormCheckbox, BCFormRadio } from '@/components/BCForm' import { nonGovRoles } from '@/constants/roles' import { bceidRoleOptions } from '../_schema' @@ -7,9 +8,9 @@ export const BCeIDSpecificRoleFields = ({ form, disabled, t }) => { const { control } = form return ( - + {t('admin:Roles')} - + { const { control } = form return ( - + {t('admin:Roles')} - + Date: Wed, 11 Dec 2024 13:27:16 -0800 Subject: [PATCH 2/2] refactor: replace typography with bctypography across components for consistency --- .../Organizations/ViewOrganization/ViewOrganization.jsx | 6 +++--- frontend/src/views/Transfers/components/TransferView.jsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/views/Organizations/ViewOrganization/ViewOrganization.jsx b/frontend/src/views/Organizations/ViewOrganization/ViewOrganization.jsx index 2bf32af03..5fbac39bc 100644 --- a/frontend/src/views/Organizations/ViewOrganization/ViewOrganization.jsx +++ b/frontend/src/views/Organizations/ViewOrganization/ViewOrganization.jsx @@ -5,7 +5,7 @@ import BCTypography from '@/components/BCTypography' import BCAlert from '@/components/BCAlert' import BCDataGridServer from '@/components/BCDataGrid/BCDataGridServer' import Loading from '@/components/Loading' -import { IconButton, Typography } from '@mui/material' +import { IconButton } from '@mui/material' // icons import colors from '@/themes/base/colors.js' import { faCirclePlus } from '@fortawesome/free-solid-svg-icons' @@ -175,10 +175,10 @@ export const ViewOrganization = () => { {t('org:complianceUnitBalance')}: - + {orgBalaceInfo?.totalBalance.toLocaleString()} ( {Math.abs(orgBalaceInfo?.reservedBalance).toLocaleString()}) - + { backgroundColor: 'transparent.main' }} > - + {fromOrganization} {t('transfer:transfers')} {quantity} @@ -64,7 +64,7 @@ export const TransferView = ({ transferId, editorMode, transferData }) => { ${decimalFormatter({ value: pricePerUnit })} {t('transfer:complianceUnitsPerTvo')} ${decimalFormatter(totalValue)} CAD. - + {/* Comments */} {transferData?.comments.length > 0 && (