Refactor: Replace Typography with BCTypography for Design Consistency - #1341

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 (
     <FormControl size={'small'} variant={'outlined'}>
       <FormLabel component="legend">
-        <Typography variant="label" component="span">
+        <BCTypography variant="label" component="span">
           {label}
-        </Typography>
+        </BCTypography>
       </FormLabel>
 
       <div>

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 (
     <FormControl component="fieldset">
       <FormLabel component="legend" sx={{ marginBottom: 1 }}>
-        <Typography variant="label" component="span">
+        <BCTypography variant="label" component="span">
           {label}
-        </Typography>
+        </BCTypography>
       </FormLabel>
       <Controller
         name={name}

frontend/src/components/BCForm/BCFormText.jsx

@@ -1,5 +1,6 @@
 import { Controller } from 'react-hook-form'
-import { TextField, InputLabel, Typography } from '@mui/material'
+import { TextField, InputLabel } from '@mui/material'
+import BCTypography from '@/components/BCTypography'
 import PropTypes from 'prop-types'
 
 export const BCFormText = ({ name, control, label, optional }) => {
@@ -14,14 +15,14 @@ export const BCFormText = ({ name, control, label, optional }) => {
       }) => (
         <>
           <InputLabel htmlFor={name} component="label" className="form-label">
-            <Typography variant="label" component="span">
+            <BCTypography variant="label" component="span">
               {label}&nbsp;
               {optional && (
                 <span className="optional" style={{ fontWeight: 'normal' }}>
                   (optional)
                 </span>
               )}
-            </Typography>
+            </BCTypography>
           </InputLabel>
           <TextField
             id={name}

frontend/src/components/BCForm/CustomLabel.jsx

@@ -1,10 +1,10 @@
-import { Typography } from '@mui/material'
+import BCTypography from '@/components/BCTypography'
 import PropType from 'prop-types'
 
 export const CustomLabel = ({ header, text }) => (
-  <Typography variant="body4" component="span">
+  <BCTypography variant="body4" component="span">
     <strong>{header}</strong> —&nbsp;{text}
-  </Typography>
+  </BCTypography>
 )
 
 CustomLabel.propTypes = {

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,

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) => (
-        <Typography key={index} variant="body2" sx={{ fontSize: '14px' }}>
+        <BCTypography key={index} sx={{ fontSize: '14px' }}>
           {message}
-        </Typography>
+        </BCTypography>
       ))}
     </Box>
   )

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 }) => {
         }}
       >
         <CircularProgress aria-labelledby="loading" />
-        <Typography variant="subtitle1" sx={{ mt: 2 }} data-test="message">
+        <BCTypography variant="subtitle1" sx={{ mt: 2 }} data-test="message">
           {message}
-        </Typography>
+        </BCTypography>
       </Box>
     </Box>
   )

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
           }}
         >
-          <Typography
+          <BCTypography
             variant="caption"
             color={isCurrent || isPast ? 'primary.contrastText' : 'inherit'}
           >
             {index + 1}
-          </Typography>
+          </BCTypography>
         </Box>
-        <Typography
+        <BCTypography
           color={isCurrent || isPast ? 'primary.main' : 'inherit'}
           variant="body3"
         >
           {step}
-        </Typography>
+        </BCTypography>
       </Box>
     )
   }

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 (
     <BCBox>
-      <Typography variant="h5" color="primary" mb={2}>
+      <BCTypography variant="h5" color="primary" mb={2}>
         {t('admin:AuditLog')}
-      </Typography>
+      </BCTypography>
 
       <BCDataGridServer
         gridRef={gridRef}

frontend/src/views/Admin/AdminMenu/components/ViewAuditLog.jsx

@@ -10,8 +10,8 @@ import {
   TableRow,
   Paper,
   Box,
-  Typography
 } from '@mui/material'
+import BCTypography from '@/components/BCTypography'
 import { useTranslation } from 'react-i18next'
 import colors from '@/themes/base/colors'
 
@@ -59,29 +59,29 @@ export const ViewAuditLog = () => {
 
   return (
     <Box>
-      <Typography variant="h5" color="primary" mb={2}>
+      <BCTypography variant="h5" color="primary" mb={2}>
         {t('AuditLogDetails', { id })}
-      </Typography>
+      </BCTypography>
 
       {/* Display the additional information */}
       <Box mb={2}>
-        <Typography variant="body2">
+        <BCTypography variant="body2">
           <strong>{t('auditLogColLabels.tableName')}:</strong> {tableName}
-        </Typography>
-        <Typography variant="body2">
+        </BCTypography>
+        <BCTypography variant="body2">
           <strong>{t('auditLogColLabels.operation')}:</strong> {operation}
-        </Typography>
-        <Typography variant="body2">
+        </BCTypography>
+        <BCTypography variant="body2">
           <strong>{t('auditLogColLabels.rowId')}:</strong> {rowId}
-        </Typography>
-        <Typography variant="body2">
+        </BCTypography>
+        <BCTypography variant="body2">
           <strong>{t('auditLogColLabels.createDate')}:</strong>{' '}
           {new Date(createDate).toLocaleString()}
-        </Typography>
-        <Typography variant="body2">
+        </BCTypography>
+        <BCTypography variant="body2">
           <strong>{t('auditLogColLabels.userId')}:</strong>{' '}
           {createUser || t('System')}
-        </Typography>
+        </BCTypography>
       </Box>
 
       <TableContainer component={Paper}>

frontend/src/views/AllocationAgreements/AddEditAllocationAgreements.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'
@@ -253,17 +253,17 @@ export const AddEditAllocationAgreements = () => {
     !allocationAgreementsLoading && (
       <Grid2 className="add-edit-allocation-agreement-container" mx={-1}>
         <div className="header">
-          <Typography variant="h5" color="primary">
+          <BCTypography variant="h5" color="primary">
             {t('allocationAgreement:addAllocationAgreementRowsTitle')}
-          </Typography>
-          <Typography
+          </BCTypography>
+          <BCTypography
             variant="body4"
             color="primary"
             sx={{ marginY: '2rem' }}
             component="div"
           >
             {t('allocationAgreement:allocationAgreementSubtitle')}
-          </Typography>
+          </BCTypography>
         </div>
         <BCBox my={2} component="div" style={{ height: '100%', width: '100%' }}>
           <BCGridEditor

frontend/src/views/AllocationAgreements/_schema.jsx

@@ -1,5 +1,5 @@
 import { suppressKeyboardEvent } from '@/utils/grid/eventHandlers'
-import { Typography } from '@mui/material'
+import BCTypography from '@/components/BCTypography'
 import {
   AutocompleteCellEditor,
   RequiredHeader,
@@ -63,7 +63,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     },
     cellRenderer: (params) =>
       params.value ||
-      (!params.value && <Typography variant="body4">Select</Typography>),
+      (!params.value && <BCTypography variant="body4">Select</BCTypography>),
     cellStyle: (params) => StandardCellErrors(params, errors),
     suppressKeyboardEvent,
     minWidth: 120,
@@ -95,7 +95,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     cellRenderer: (params) =>
       params.value ||
       (!params.value && (
-        <Typography variant="body4">Enter or search a name</Typography>
+        <BCTypography variant="body4">Enter or search a name</BCTypography>
       )),
     cellStyle: (params) => StandardCellErrors(params, errors),
     suppressKeyboardEvent,
@@ -177,7 +177,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     },
     cellRenderer: (params) =>
       params.value ||
-      (!params.value && <Typography variant="body4">Select</Typography>),
+      (!params.value && <BCTypography variant="body4">Select</BCTypography>),
     cellStyle: (params) => StandardCellErrors(params, errors),
     suppressKeyboardEvent,
     minWidth: 200,
@@ -276,7 +276,7 @@ export const allocationAgreementColDefs = (optionsData, errors) => [
     },
     cellRenderer: (params) =>
       params.value ||
-      (!params.value && <Typography variant="body4">Select</Typography>),
+      (!params.value && <BCTypography variant="body4">Select</BCTypography>),
     cellStyle: (params) => StandardCellErrors(params, errors),
     suppressKeyboardEvent,
     minWidth: 300,

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 = () => {
           </BCAlert>
         )}
       </div>
-      <Typography variant="h5" color="primary">
+      <BCTypography variant="h5" color="primary">
         {t('report:title')}
-      </Typography>
+      </BCTypography>
       <Stack
         direction={{ md: 'coloumn', lg: 'row' }}
         spacing={{ xs: 2, sm: 2, md: 3 }}