From f1fad95214291848e31c3ac9beead24c46f01871 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 13 Sep 2024 16:09:23 -0400
Subject: [PATCH 1/4] Update styles on Fix Email Addresses.

---
 .../FixEmailAddresses/EmailValidationForm.tsx | 111 +++--
 .../FixEmailAddressPerson.test.tsx            |   1 +
 .../FixEmailAddressPerson.tsx                 | 421 ++++++++++--------
 .../FixEmailAddresses.graphql                 |   1 +
 .../FixEmailAddresses/FixEmailAddresses.tsx   |  37 +-
 .../FixEmailAddressesMocks.ts                 |   2 +
 6 files changed, 350 insertions(+), 223 deletions(-)

diff --git a/src/components/Tool/FixEmailAddresses/EmailValidationForm.tsx b/src/components/Tool/FixEmailAddresses/EmailValidationForm.tsx
index 14753e151..50c50579a 100644
--- a/src/components/Tool/FixEmailAddresses/EmailValidationForm.tsx
+++ b/src/components/Tool/FixEmailAddresses/EmailValidationForm.tsx
@@ -1,18 +1,50 @@
-import { Grid, IconButton, TextField } from '@mui/material';
+import {
+  Box,
+  FormControl,
+  FormHelperText,
+  Grid,
+  IconButton,
+  TextField,
+  Theme,
+  Tooltip,
+} from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { Form, Formik } from 'formik';
+import clsx from 'clsx';
+import { Formik } from 'formik';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
+import { makeStyles } from 'tss-react/mui';
 import * as yup from 'yup';
 import { AddIcon } from 'src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents';
 import i18n from 'src/lib/i18n';
 import { useEmailAddressesMutation } from './AddEmailAddress.generated';
-import { RowWrapper } from './FixEmailAddressPerson/FixEmailAddressPerson';
 import {
   GetInvalidEmailAddressesDocument,
   GetInvalidEmailAddressesQuery,
 } from './FixEmailAddresses.generated';
 
+const useStyles = makeStyles()((theme: Theme) => ({
+  responsiveBorder: {
+    [theme.breakpoints.down('xs')]: {
+      paddingBottom: theme.spacing(2),
+      borderBottom: `1px solid ${theme.palette.cruGrayMedium.main}`,
+    },
+  },
+  paddingX: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+  paddingB2: {
+    paddingBottom: theme.spacing(1),
+  },
+  iconButton: {
+    display: 'flex',
+    alignItems: 'center',
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+  },
+}));
+
 const ContactInputField = styled(TextField, {
   shouldForwardProp: (prop) => prop !== 'destroyed',
 })(({ destroyed }: { destroyed: boolean }) => ({
@@ -52,6 +84,7 @@ const EmailValidationForm = ({
   const { t } = useTranslation();
   const [emailAddressesMutation] = useEmailAddressesMutation();
   const { enqueueSnackbar } = useSnackbar();
+  const { classes } = useStyles();
 
   const initialEmail = {
     email: '',
@@ -134,34 +167,60 @@ const EmailValidationForm = ({
       validationSchema={validationSchema}
       onSubmit={onSubmit}
     >
-      {({ values, handleChange, handleBlur, isValid, touched, errors }) => (
-        <Form>
-          <RowWrapper>
-            <Grid container>
-              <ContactInputField
-                destroyed={false}
-                label={t('New Email Address')}
-                type="email"
-                name="email"
-                value={values.email}
-                onChange={handleChange}
-                onBlur={handleBlur}
-                error={touched.email && Boolean(errors.email)}
-                helperText={
-                  touched.email && Boolean(errors.email) ? errors.email : ''
-                }
-              />
+      {({
+        values,
+        handleChange,
+        handleBlur,
+        touched,
+        errors,
+        handleSubmit,
+        isValid,
+      }) => (
+        <>
+          <Grid item xs={12} sm={6} className={classes.paddingB2}>
+            <Box
+              display="flex"
+              justifyContent="flex-start"
+              className={clsx(classes.responsiveBorder, classes.paddingX)}
+            >
+              <FormControl fullWidth>
+                <ContactInputField
+                  destroyed={false}
+                  label={t('New Email Address')}
+                  type="email"
+                  name="email"
+                  value={values.email}
+                  style={{ width: '100%' }}
+                  size="small"
+                  onChange={handleChange}
+                  onBlur={handleBlur}
+                />
+              </FormControl>
+
               <IconButton
-                type="submit"
-                color="primary"
+                onClick={() => handleSubmit()}
+                className={classes.iconButton}
                 disabled={!isValid || values.email === ''}
                 data-testid={`addButton-${initialEmail.personId}`}
               >
-                <AddIcon fontSize="large" />
+                <Tooltip title="Add Address">
+                  <AddIcon fontSize="small" />
+                </Tooltip>
               </IconButton>
-            </Grid>
-          </RowWrapper>
-        </Form>
+            </Box>
+          </Grid>
+
+          {touched.email && Boolean(errors.email) && (
+            <>
+              <Grid item xs={12} sm={6}></Grid>
+              <Grid item xs={12} sm={6}>
+                <FormHelperText error={true} className={classes.paddingX}>
+                  {errors.email}
+                </FormHelperText>
+              </Grid>
+            </>
+          )}
+        </>
       )}
     </Formik>
   );
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx
index d7b4a9963..a5f4e6e5b 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.test.tsx
@@ -24,6 +24,7 @@ const person: PersonInvalidEmailFragment = {
   firstName: 'Test',
   lastName: 'Contact',
   contactId: 'contactTestId',
+  avatar: '',
   emailAddresses: {
     nodes: [
       {
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
index 2d02bb4a5..5eaf93504 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
@@ -1,18 +1,25 @@
 import React, { Fragment, useMemo } from 'react';
-import { mdiDelete, mdiLock, mdiStar, mdiStarOutline } from '@mdi/js';
+import { mdiCheckboxMarkedCircle, mdiDelete, mdiLock } from '@mdi/js';
 import { Icon } from '@mdi/react';
+import StarIcon from '@mui/icons-material/Star';
+import StarOutlineIcon from '@mui/icons-material/StarOutline';
 import {
   Avatar,
   Box,
   Button,
+  Card,
+  CardContent,
+  CardHeader,
+  FormControl,
   Grid,
   Hidden,
   Link,
   TextField,
   Theme,
+  Tooltip,
   Typography,
 } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
 import { DateTime } from 'luxon';
 import { useSnackbar } from 'notistack';
 import { useTranslation } from 'react-i18next';
@@ -24,75 +31,62 @@ import useGetAppSettings from 'src/hooks/useGetAppSettings';
 import { useLocale } from 'src/hooks/useLocale';
 import { dateFormatShort } from 'src/lib/intlFormat';
 import theme from 'src/theme';
-import { ConfirmButtonIcon } from '../../ConfirmButtonIcon';
 import EmailValidationForm from '../EmailValidationForm';
 import { EmailAddressData, PersonEmailAddresses } from '../FixEmailAddresses';
 import { PersonInvalidEmailFragment } from '../FixEmailAddresses.generated';
 
-const PersonCard = styled(Box)(({ theme }) => ({
-  [theme.breakpoints.up('md')]: {
-    border: `1px solid ${theme.palette.cruGrayMedium.main}`,
+const useStyles = makeStyles()((theme: Theme) => ({
+  responsiveBorder: {
+    [theme.breakpoints.down('xs')]: {
+      paddingBottom: theme.spacing(2),
+      borderBottom: `1px solid ${theme.palette.cruGrayMedium.main}`,
+    },
   },
-}));
-
-const Container = styled(Grid)(({ theme }) => ({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'flex-end',
-  [theme.breakpoints.down('sm')]: {
-    border: `1px solid ${theme.palette.cruGrayMedium.main}`,
+  paddingX: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
   },
-}));
-
-const EmailAddressListWrapper = styled(Grid)(({ theme }) => ({
-  backgroundColor: theme.palette.cruGrayLight.main,
-  width: '100%',
-  [theme.breakpoints.down('xs')]: {
-    paddingTop: theme.spacing(2),
+  paddingY: {
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
   },
-}));
-
-const ConfirmButtonWrapper = styled(Box)(({ theme }) => ({
-  marginLeft: theme.spacing(2),
-  [theme.breakpoints.down('sm')]: {
-    marginLeft: theme.spacing(1),
-    marginRight: theme.spacing(2),
-    marginTop: theme.spacing(2),
-    marginBottom: theme.spacing(2),
+  paddingB2: {
+    paddingBottom: theme.spacing(1),
   },
-  '& .MuiButton-root': {
-    backgroundColor: theme.palette.mpdxBlue.main,
-    color: 'white',
+  hoverHighlight: {
+    '&:hover': {
+      color: theme.palette.mpdxBlue.main,
+      cursor: 'pointer',
+    },
   },
-}));
-
-const BoxWithResponsiveBorder = styled(Box)(({ theme }) => ({
-  [theme.breakpoints.down('xs')]: {
+  contactAvatar: {
+    width: theme.spacing(4),
+    height: theme.spacing(4),
+  },
+  contactCardContent: {
+    paddingLeft: theme.spacing(2),
+    paddingRight: theme.spacing(2),
+    paddingTop: theme.spacing(2),
     paddingBottom: theme.spacing(2),
-    borderBottom: `1px solid ${theme.palette.cruGrayMedium.main}`,
   },
-}));
-
-const ColumnHeaderWrapper = styled(Grid)(({ theme }) => ({
-  paddingTop: theme.spacing(2),
-  paddingBottom: theme.spacing(2),
-}));
-
-export const RowWrapper = styled(Grid)(({ theme }) => ({
-  paddingBottom: theme.spacing(2),
-}));
-
-const HoverableIcon = styled(Icon)(({ theme }) => ({
-  '&:hover': {
-    color: theme.palette.mpdxBlue.main,
-    cursor: 'pointer',
+  confirmButon: {
+    marginRight: theme.spacing(1),
   },
-}));
-
-const useStyles = makeStyles()((theme: Theme) => ({
-  avatar: {
-    width: theme.spacing(7),
-    height: theme.spacing(7),
+  contactCard: {
+    marginBottom: theme.spacing(2),
+  },
+  contactContainer: {
+    display: 'block',
+    alignItems: 'center',
+    width: '99%',
+    margin: 'auto',
+    height: '100%',
+    marginBottom: theme.spacing(3),
+  },
+  contactHeader: {
+    '.MuiCardHeader-action': {
+      alignSelf: 'center',
+    },
   },
 }));
 
@@ -227,186 +221,261 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
 
   return (
     <>
-      <Container container>
+      <Grid container className={classes.contactContainer}>
         <Grid container>
-          <Grid item md={10} xs={12}>
-            <PersonCard display="flex" alignItems="center">
+          <Card className={classes.contactCard}>
+            <Box display="flex" alignItems="center">
               <Grid container>
                 <Grid item xs={12}>
-                  <Box
-                    display="flex"
-                    alignItems="center"
-                    style={{ height: '100%' }}
-                    p={2}
-                  >
-                    <Avatar src="" className={classes.avatar} />
-                    <Box display="flex" flexDirection="column" ml={2}>
+                  <CardHeader
+                    className={classes.contactHeader}
+                    avatar={
+                      <Avatar
+                        className={classes.contactAvatar}
+                        src={person?.avatar || ''}
+                        aria-label="Contact Avatar"
+                        onClick={handleContactNameClick}
+                      />
+                    }
+                    action={
+                      <Button
+                        className={classes.confirmButon}
+                        variant="contained"
+                        onClick={() =>
+                          handleSingleConfirm(
+                            person,
+                            emails as EmailAddressData[],
+                          )
+                        }
+                        disabled={!hasOnePrimaryEmail()}
+                      >
+                        <Icon path={mdiCheckboxMarkedCircle} size={0.8} />
+                        {t('Confirm')}
+                      </Button>
+                    }
+                    title={
                       <Link underline="hover" onClick={handleContactNameClick}>
-                        <Typography variant="h6">{name}</Typography>
+                        <Typography variant="subtitle1">{name}</Typography>
                       </Link>
-                    </Box>
-                  </Box>
+                    }
+                  />
                 </Grid>
-                <EmailAddressListWrapper item xs={12}>
-                  <Grid container>
-                    <Hidden xsDown>
-                      <ColumnHeaderWrapper item xs={12} sm={6}>
+
+                <CardContent className={classes.contactCardContent}>
+                  <Grid container display="flex" alignItems="center">
+                    <Hidden smDown>
+                      <Grid item xs={6} sm={4} className={classes.paddingY}>
                         <Box
                           display="flex"
                           justifyContent="space-between"
-                          px={2}
+                          className={classes.paddingX}
                         >
-                          <Typography>
-                            <strong>{t('Source')}</strong>
+                          <Typography variant="body2" fontWeight="bold">
+                            {t('Source')}
                           </Typography>
-                          <Typography>
-                            <strong>{t('Primary')}</strong>
+                        </Box>
+                      </Grid>
+                      <Grid item xs={6} sm={2} className={classes.paddingY}>
+                        <Box
+                          display="flex"
+                          justifyContent="center"
+                          className={classes.paddingX}
+                        >
+                          <Typography variant="body2" fontWeight="bold">
+                            {t('Primary')}
                           </Typography>
                         </Box>
-                      </ColumnHeaderWrapper>
-                      <ColumnHeaderWrapper item xs={12} sm={6}>
+                      </Grid>
+                      <Grid item xs={12} sm={6} className={classes.paddingY}>
                         <Box
                           display="flex"
                           justifyContent="flex-start"
-                          px={3.25}
+                          className={classes.paddingX}
                         >
-                          <Typography>
-                            <strong>{t('Address')}</strong>
+                          <Typography variant="body2" fontWeight="bold">
+                            {t('Email Address')}
                           </Typography>
                         </Box>
-                      </ColumnHeaderWrapper>
+                      </Grid>
                     </Hidden>
                     {emails.map((email, index) => (
                       <Fragment key={email.id}>
-                        <RowWrapper item xs={12} sm={6}>
+                        <Grid item xs={6} sm={4} className={classes.paddingB2}>
                           <Box
                             display="flex"
                             justifyContent="space-between"
-                            px={2}
+                            className={classes.paddingX}
                           >
                             <Box>
                               <Hidden smUp>
-                                <Typography display="inline">
-                                  <strong>{t('Source')}: </strong>
+                                <Typography
+                                  display="inline"
+                                  variant="body2"
+                                  fontWeight="bold"
+                                >
+                                  {t('Source')}:
                                 </Typography>
                               </Hidden>
-                              <Typography display="inline">
+                              <Typography display="inline" variant="body2">
                                 {`${email.source} (${dateFormatShort(
                                   DateTime.fromISO(email.updatedAt),
                                   locale,
                                 )})`}
                               </Typography>
                             </Box>
-                            {email.isPrimary ? (
-                              <Box
-                                data-testid={`starIcon-${id}-${index}`}
-                                onClick={() => handleChangePrimary(id, index)}
-                              >
-                                <HoverableIcon path={mdiStar} size={1} />
-                              </Box>
-                            ) : (
-                              <Box
-                                data-testid={`starOutlineIcon-${id}-${index}`}
-                                onClick={() => handleChangePrimary(id, index)}
-                              >
-                                <HoverableIcon path={mdiStarOutline} size={1} />
-                              </Box>
-                            )}
                           </Box>
-                        </RowWrapper>
-                        <RowWrapper item xs={12} sm={6}>
-                          <BoxWithResponsiveBorder
+                        </Grid>
+
+                        <Grid item xs={6} sm={2} className={classes.paddingB2}>
+                          <Box
+                            display="flex"
+                            justifyContent="center"
+                            className={classes.paddingX}
+                          >
+                            <Typography display="flex" alignItems="center">
+                              {email.isPrimary ? (
+                                <>
+                                  <Hidden smUp>
+                                    <Typography
+                                      display="inline"
+                                      variant="body2"
+                                      fontWeight="bold"
+                                    >
+                                      {t('Source')}:
+                                    </Typography>
+                                  </Hidden>
+                                  <StarIcon
+                                    data-testid={`starIcon-${id}-${index}`}
+                                    className={classes.hoverHighlight}
+                                  />
+                                </>
+                              ) : (
+                                <>
+                                  <Hidden smUp>
+                                    <Typography
+                                      display="inline"
+                                      variant="body2"
+                                      fontWeight="bold"
+                                    >
+                                      {t('Source')}:
+                                    </Typography>
+                                  </Hidden>
+                                  <Tooltip
+                                    title={t('Set as Primary')}
+                                    placement="left"
+                                  >
+                                    <StarOutlineIcon
+                                      data-testid={`starOutlineIcon-${person.id}-${index}`}
+                                      className={classes.hoverHighlight}
+                                      onClick={() =>
+                                        handleChangePrimary(id, index)
+                                      }
+                                    />
+                                  </Tooltip>
+                                </>
+                              )}
+                            </Typography>
+                          </Box>
+                        </Grid>
+                        <Grid item xs={12} sm={6} className={classes.paddingB2}>
+                          <Box
                             display="flex"
-                            px={2}
                             justifyContent="flex-start"
+                            className={clsx(
+                              classes.responsiveBorder,
+                              classes.paddingX,
+                            )}
                           >
-                            <TextField
-                              style={{ width: '100%' }}
-                              inputProps={{
-                                'data-testid': `textfield-${id}-${index}`,
-                              }}
-                              onChange={(
-                                event: React.ChangeEvent<HTMLInputElement>,
-                              ) => handleChange(id, index, event)}
-                              value={email.email}
-                              disabled={email.source !== appName}
-                            />
+                            <FormControl fullWidth>
+                              <TextField
+                                style={{ width: '100%' }}
+                                size="small"
+                                inputProps={{
+                                  'data-testid': `textfield-${id}-${index}`,
+                                }}
+                                onChange={(
+                                  event: React.ChangeEvent<HTMLInputElement>,
+                                ) => handleChange(id, index, event)}
+                                value={email.email}
+                                disabled={email.source !== appName}
+                              />
+                            </FormControl>
 
                             {email.source === appName ? (
                               <Box
+                                display="flex"
+                                alignItems="center"
                                 data-testid={`delete-${id}-${index}`}
                                 onClick={() =>
                                   handleDeleteEmailOpen({ id, email })
                                 }
+                                className={classes.paddingX}
                               >
-                                <HoverableIcon path={mdiDelete} size={1} />
+                                <Tooltip
+                                  title={t('Delete Address')}
+                                  placement="left"
+                                >
+                                  <Icon
+                                    path={mdiDelete}
+                                    size={1}
+                                    className={classes.hoverHighlight}
+                                  />
+                                </Tooltip>
                               </Box>
                             ) : (
-                              <Icon
-                                path={mdiLock}
-                                size={1}
-                                style={{
-                                  color: theme.palette.cruGrayMedium.main,
-                                }}
-                              />
+                              <Box
+                                display="flex"
+                                alignItems="center"
+                                className={classes.paddingX}
+                              >
+                                <Icon
+                                  path={mdiLock}
+                                  size={1}
+                                  style={{
+                                    color: theme.palette.cruGrayMedium.main,
+                                  }}
+                                />
+                              </Box>
                             )}
-                          </BoxWithResponsiveBorder>
-                        </RowWrapper>
+                          </Box>
+                        </Grid>
                       </Fragment>
                     ))}
-                    <RowWrapper item xs={12} sm={6}>
-                      <Box display="flex" justifyContent="space-between" px={2}>
+
+                    <Grid item xs={12} sm={6} className={classes.paddingB2}>
+                      <Box
+                        display="flex"
+                        justifyContent="space-between"
+                        className={classes.paddingX}
+                      >
                         <Box>
                           <Hidden smUp>
-                            <Typography display="inline">
-                              <strong>{t('Source')}: </strong>
+                            <Typography
+                              display="inline"
+                              variant="body2"
+                              fontWeight="bold"
+                            >
+                              {t('Source')}:
                             </Typography>
                           </Hidden>
-                          <Typography display="inline">{appName}</Typography>
+                          <Typography display="inline" variant="body2">
+                            {appName}
+                          </Typography>
                         </Box>
                       </Box>
-                    </RowWrapper>
-                    <RowWrapper item xs={12} sm={6}>
-                      <BoxWithResponsiveBorder
-                        display="flex"
-                        justifyContent="flex-start"
-                        px={2}
-                      >
-                        <EmailValidationForm
-                          personId={id}
-                          accountListId={accountListId}
-                        />
-                      </BoxWithResponsiveBorder>
-                    </RowWrapper>
+                    </Grid>
+
+                    <EmailValidationForm
+                      personId={id}
+                      accountListId={accountListId}
+                    />
                   </Grid>
-                </EmailAddressListWrapper>
+                </CardContent>
               </Grid>
-            </PersonCard>
-          </Grid>
-          <Grid item xs={12} md={2}>
-            <Box
-              display="flex"
-              flexDirection="column"
-              style={{ paddingLeft: theme.spacing(1) }}
-            >
-              <ConfirmButtonWrapper>
-                <Button
-                  variant="contained"
-                  style={{ width: '100%' }}
-                  onClick={() =>
-                    handleSingleConfirm(person, emails as EmailAddressData[])
-                  }
-                  disabled={!hasOnePrimaryEmail()}
-                >
-                  <ConfirmButtonIcon />
-                  {t('Confirm')}
-                </Button>
-              </ConfirmButtonWrapper>
             </Box>
-          </Grid>
+          </Card>
         </Grid>
-      </Container>
-
+      </Grid>
       {deleteModalOpen && emailToDelete && (
         <Confirmation
           title={t('Confirm')}
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.graphql b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.graphql
index 398e5007e..478764b39 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.graphql
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.graphql
@@ -19,6 +19,7 @@ fragment PersonInvalidEmail on Person {
   id
   firstName
   lastName
+  avatar
   contactId
   emailAddresses(first: 25) {
     nodes {
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
index 0531a4484..8ffb4e377 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
@@ -59,7 +59,6 @@ const SourceSelect = styled(Select)(() => ({
 
 const ConfirmButton = styled(Button)(({ theme }) => ({
   backgroundColor: theme.palette.mpdxBlue.main,
-  paddingRight: theme.spacing(1.5),
   color: 'white',
   [theme.breakpoints.down('xs')]: {
     marginTop: theme.spacing(1),
@@ -338,6 +337,7 @@ export const FixEmailAddresses: React.FC<FixEmailAddressesProps> = ({
                       ))}
                     </SourceSelect>
                     <ConfirmButton
+                      variant="contained"
                       onClick={() => setShowBulkConfirmModal(true)}
                     >
                       <ConfirmButtonIcon />
@@ -352,29 +352,24 @@ export const FixEmailAddresses: React.FC<FixEmailAddressesProps> = ({
             </Box>
           </Grid>
           {!!data.people.nodes.length ? (
-            <>
+            <Grid item xs={12}>
               <InfiniteList
                 loading={loading}
                 data={data.people.nodes}
                 itemContent={(index, person) => (
-                  <Grid
-                    key={index}
-                    item
-                    xs={12}
-                    sx={{
-                      marginBottom: `${theme.spacing(2)}`,
-                    }}
-                  >
-                    <FixEmailAddressPerson
-                      person={person}
-                      key={person.id}
-                      dataState={dataState}
-                      accountListId={accountListId}
-                      handleChange={handleChange}
-                      handleChangePrimary={handleChangePrimary}
-                      handleSingleConfirm={handleSingleConfirm}
-                      setContactFocus={setContactFocus}
-                    />
+                  <Grid item xs={12}>
+                    <Box>
+                      <FixEmailAddressPerson
+                        person={person}
+                        key={person.id}
+                        dataState={dataState}
+                        accountListId={accountListId}
+                        handleChange={handleChange}
+                        handleChangePrimary={handleChangePrimary}
+                        handleSingleConfirm={handleSingleConfirm}
+                        setContactFocus={setContactFocus}
+                      />
+                    </Box>
                   </Grid>
                 )}
                 endReached={() =>
@@ -409,7 +404,7 @@ export const FixEmailAddresses: React.FC<FixEmailAddressesProps> = ({
                   </Typography>
                 </Box>
               </Grid>
-            </>
+            </Grid>
           ) : (
             <NoData tool="fixEmailAddresses" />
           )}
diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts b/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts
index 5cca43e5b..232252842 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressesMocks.ts
@@ -63,6 +63,7 @@ export const mockInvalidEmailAddressesResponse: ErgonoMockShape[] = [
     firstName: 'Test',
     lastName: 'Contact',
     contactId,
+    avatar: '',
     emailAddresses: {
       nodes: contactOneEmailAddressNodes,
     },
@@ -72,6 +73,7 @@ export const mockInvalidEmailAddressesResponse: ErgonoMockShape[] = [
     firstName: 'Simba',
     lastName: 'Lion',
     contactId: 'contactId2',
+    avatar: '',
     emailAddresses: {
       nodes: contactTwoEmailAddressNodes,
     },

From 21c34f8ee4f9082ebbd3d632df122c506a98eb76 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Fri, 13 Sep 2024 16:26:24 -0400
Subject: [PATCH 2/4] Fixes tests.

---
 .../FixEmailAddressPerson.tsx                      | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
index 5eaf93504..847d990c7 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
@@ -88,6 +88,9 @@ const useStyles = makeStyles()((theme: Theme) => ({
       alignSelf: 'center',
     },
   },
+  buttonIcon: {
+    marginRight: theme.spacing(1),
+  },
 }));
 
 export interface FixEmailAddressPersonProps {
@@ -249,7 +252,11 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                         }
                         disabled={!hasOnePrimaryEmail()}
                       >
-                        <Icon path={mdiCheckboxMarkedCircle} size={0.8} />
+                        <Icon
+                          path={mdiCheckboxMarkedCircle}
+                          size={0.8}
+                          className={classes.buttonIcon}
+                        />
                         {t('Confirm')}
                       </Button>
                     }
@@ -347,6 +354,9 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                                   <StarIcon
                                     data-testid={`starIcon-${id}-${index}`}
                                     className={classes.hoverHighlight}
+                                    onClick={() =>
+                                      handleChangePrimary(id, index)
+                                    }
                                   />
                                 </>
                               ) : (
@@ -365,7 +375,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                                     placement="left"
                                   >
                                     <StarOutlineIcon
-                                      data-testid={`starOutlineIcon-${person.id}-${index}`}
+                                      data-testid={`starOutlineIcon-${id}-${index}`}
                                       className={classes.hoverHighlight}
                                       onClick={() =>
                                         handleChangePrimary(id, index)

From 00b2d8ef8c309f0b296e7fdf2a3bbefe4f73fe4d Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Mon, 16 Sep 2024 10:58:49 -0400
Subject: [PATCH 3/4] PR review edits.

---
 .../FixEmailAddressPerson/FixEmailAddressPerson.tsx         | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
index 847d990c7..bc9b3382e 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddressPerson/FixEmailAddressPerson.tsx
@@ -262,7 +262,9 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                     }
                     title={
                       <Link underline="hover" onClick={handleContactNameClick}>
-                        <Typography variant="subtitle1">{name}</Typography>
+                        <Typography variant="subtitle1" display="inline">
+                          {name}
+                        </Typography>
                       </Link>
                     }
                   />
@@ -422,7 +424,7 @@ export const FixEmailAddressPerson: React.FC<FixEmailAddressPersonProps> = ({
                                 className={classes.paddingX}
                               >
                                 <Tooltip
-                                  title={t('Delete Address')}
+                                  title={t('Delete Email')}
                                   placement="left"
                                 >
                                   <Icon

From d561599d202a7731368af2f961e461a60f7e3989 Mon Sep 17 00:00:00 2001
From: wjames111 <william.james@cru.org>
Date: Mon, 16 Sep 2024 11:02:06 -0400
Subject: [PATCH 4/4] Remove unneaded background color and hover.

---
 src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
index 8ffb4e377..2c2668225 100644
--- a/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
+++ b/src/components/Tool/FixEmailAddresses/FixEmailAddresses.tsx
@@ -58,15 +58,11 @@ const SourceSelect = styled(Select)(() => ({
 }));
 
 const ConfirmButton = styled(Button)(({ theme }) => ({
-  backgroundColor: theme.palette.mpdxBlue.main,
   color: 'white',
   [theme.breakpoints.down('xs')]: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(2),
   },
-  '&:hover': {
-    backgroundColor: theme.palette.mpdxBlue.main,
-  },
 }));
 
 const DefaultSourceWrapper = styled(Box)(({ theme }) => ({