From 58c6a287dc194e244f9abef0f4f4eee76adbfe7e Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Jun 2024 11:48:14 -0400 Subject: [PATCH 1/6] Added LockIcon styled component --- .../ContactDetails/ContactDetailsTab/StyledComponents.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts b/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts index 1f1437701..f6ba84de5 100644 --- a/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts +++ b/src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents.ts @@ -1,5 +1,6 @@ import Add from '@mui/icons-material/Add'; import Create from '@mui/icons-material/Create'; +import Lock from '@mui/icons-material/Lock'; import { Button, Typography } from '@mui/material'; import { styled } from '@mui/material/styles'; @@ -23,3 +24,10 @@ export const AddText = styled(Typography)(({ theme }) => ({ textTransform: 'uppercase', fontWeight: 'bold', })); + +export const LockIcon = styled(Lock)(({ theme }) => ({ + width: '18px', + height: '18px', + margin: theme.spacing(0), + color: theme.palette.cruGrayMedium.main, +})); From 38933f20972adb0752812a66ee8b0e3ee9f1eb63 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Jun 2024 11:48:36 -0400 Subject: [PATCH 2/6] Fixed styles for the individual contact --- .../Tool/FixMailingAddresses/Contact.tsx | 384 ++++++++---------- 1 file changed, 169 insertions(+), 215 deletions(-) diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx index 9cff5d6a0..fcfe665b6 100644 --- a/src/components/Tool/FixMailingAddresses/Contact.tsx +++ b/src/components/Tool/FixMailingAddresses/Contact.tsx @@ -1,70 +1,59 @@ import React, { Fragment } from 'react'; -import { mdiCheckboxMarkedCircle, mdiLock, mdiPencil, mdiPlus } from '@mdi/js'; +import styled from '@emotion/styled'; +import { mdiCheckboxMarkedCircle, mdiPlus } 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, Grid, Hidden, Typography } from '@mui/material'; +import { + Avatar, + Box, + Button, + Card, + CardContent, + CardHeader, + Grid, + Hidden, + IconButton, + Typography, +} from '@mui/material'; import clsx from 'clsx'; import { DateTime } from 'luxon'; import { useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; +import { + EditIcon, + LockIcon, +} from 'src/components/Contacts/ContactDetails/ContactDetailsTab/StyledComponents'; import { useLocale } from 'src/hooks/useLocale'; import { dateFormatShort } from 'src/lib/intlFormat'; +import { contactPartnershipStatus } from 'src/utils/contacts/contactPartnershipStatus'; import theme from '../../../theme'; import { emptyAddress } from './FixMailingAddresses'; import { ContactAddressFragment } from './GetInvalidAddresses.generated'; -const useStyles = makeStyles()(() => ({ - left: { - [theme.breakpoints.up('lg')]: { - border: `1px solid ${theme.palette.cruGrayMedium.main}`, - }, - }, - container: { - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(2), - [theme.breakpoints.down('md')]: { - border: `1px solid ${theme.palette.cruGrayMedium.main}`, - }, - }, - boxBottom: { - backgroundColor: theme.palette.cruGrayLight.main, - width: '100%', - [theme.breakpoints.down('sm')]: { - paddingTop: theme.spacing(2), - }, - }, - buttonTop: { - padding: theme.spacing(1), - [theme.breakpoints.down('md')]: { - display: 'flex', - justifyContent: 'center', - padding: theme.spacing(2), - }, - '& .MuiButton-root': { - backgroundColor: theme.palette.mpdxBlue.main, - width: '100%', - color: 'white', - [theme.breakpoints.down('md')]: { - width: '50%', - }, - [theme.breakpoints.down('xs')]: { - width: '100%', - }, - }, +const ContactHeader = styled(CardHeader)(() => ({ + '.MuiCardHeader-action': { + alignSelf: 'center', }, - buttonIcon: { +})); + +const ContactEditIconContainer = styled(IconButton)(() => ({ + margin: theme.spacing(0, 1), + width: theme.spacing(4), + height: theme.spacing(4), +})); + +const ContactAvatar = styled(Avatar)(() => ({ + width: theme.spacing(4), + height: theme.spacing(4), +})); + +const useStyles = makeStyles()(() => ({ + confirmButon: { marginRight: theme.spacing(1), }, - rowChangeResponsive: { - flexDirection: 'column', - [theme.breakpoints.down('sm')]: { - marginTop: -20, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - }, + contactCard: { + marginBottom: theme.spacing(2), }, responsiveBorder: { [theme.breakpoints.down('sm')]: { @@ -80,23 +69,23 @@ const useStyles = makeStyles()(() => ({ paddingTop: theme.spacing(2), paddingBottom: theme.spacing(2), }, + paddingL2: { + paddingLeft: theme.spacing(2), + }, paddingB2: { paddingBottom: theme.spacing(2), }, address: { borderBottom: '1px solid gray', width: '100%', - cursor: 'text', + cursor: 'pointer', }, hoverHighlight: { + cursor: 'pointer', '&:hover': { color: theme.palette.mpdxBlue.main, }, }, - avatar: { - width: theme.spacing(7), - height: theme.spacing(7), - }, })); interface Props { @@ -121,179 +110,144 @@ const Contact: React.FC = ({ //TODO: Make contact name a link to contact page return ( - - - - - - + + } + action={ + + } + title={{name}} + subheader={{contactPartnershipStatus[status]}} + /> + + + + + - - - {name} - {status} - + + {t('Source')} + + + {t('Primary')} + - - - - - - - - {t('Source')} - - - {t('Primary')} - - - - - - - {t('Address')} + + + + {t('Address')} + + + + + {addresses.map((address) => ( + + + + + + + {t('Source')}: - - - - {addresses.map((address) => ( - - - - - - - {t('Source')}: - - - - {address.source}{' '} - - - {dateFormatShort( - DateTime.fromISO(address.createdAt), - locale, - )} - - - - {address.primaryMailingAddress ? ( - - ) : ( - - )} - - - - - - openFunction(address)} - className={classes.address} - > - - {`${address.street}, ${address.city} ${ - address.state ? address.state : '' - }. ${address.postalCode}`} - - - - - - - - ))} - - - - - - {t('Source')}: - - - MPDX - + + + {address.source}{' '} + + + {dateFormatShort( + DateTime.fromISO(address.createdAt), + locale, + )} + - - - + {address.primaryMailingAddress ? ( + + ) : ( + )} - > - openFunction(newAddress)} - className={classes.address} - /> - + + + + + openFunction(address)} + > + + + {`${address.street}, ${address.city} ${ + address.state ? address.state : '' + }. ${address.postalCode}`} + - + + + {address.source === 'MPDX' ? : } + + - + + ))} + + + + + + {t('Source')}: + + + MPDX + + - - - - - - - - + + + + - - + + ); }; From 89cce2d2a8f5bfa820f1ae84494330a7feb1ff62 Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Tue, 11 Jun 2024 11:48:49 -0400 Subject: [PATCH 3/6] Fixed the page's styling --- .../FixMailingAddresses.tsx | 213 ++++++++++-------- 1 file changed, 114 insertions(+), 99 deletions(-) diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx index 43102d14a..03eaf814d 100644 --- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx +++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx @@ -7,14 +7,15 @@ import { CircularProgress, Divider, Grid, - NativeSelect, + MenuItem, + Select, + SelectChangeEvent, Typography, } from '@mui/material'; import { Trans, useTranslation } from 'react-i18next'; import { makeStyles } from 'tss-react/mui'; import theme from '../../../theme'; import NoData from '../NoData'; -import { StyledInput } from '../StyledInput'; import AddressModal from './AddressModal'; import Contact from './Contact'; import { @@ -49,15 +50,15 @@ const useStyles = makeStyles()(() => ({ display: 'flex', justifyContent: 'center', }, - buttonBlue: { - backgroundColor: theme.palette.mpdxBlue.main, - paddingRight: theme.spacing(1.5), - color: 'white', - [theme.breakpoints.down('xs')]: { - marginTop: theme.spacing(1), - marginBottom: theme.spacing(2), + + confirmAllButton: { + [theme.breakpoints.down('md')]: { + width: '100%', + maxWidth: '200px', + margin: `${theme.spacing(1)} auto 0`, }, }, + buttonIcon: { marginRight: theme.spacing(1), }, @@ -67,21 +68,23 @@ const useStyles = makeStyles()(() => ({ alignItems: 'center', flexWrap: 'wrap', marginTop: theme.spacing(1), + [theme.breakpoints.down('sm')]: { + justifyContent: 'center', + }, [theme.breakpoints.down('xs')]: { flexDirection: 'column', alignItems: 'start', }, }, - nativeSelect: { + select: { minWidth: theme.spacing(20), - width: '10%', marginLeft: theme.spacing(2), marginRight: theme.spacing(2), - [theme.breakpoints.down('xs')]: { - marginLeft: theme.spacing(0), - marginRight: theme.spacing(0), - marginTop: theme.spacing(1), - marginBottom: theme.spacing(1), + + [theme.breakpoints.down('md')]: { + width: '100%', + maxWidth: '200px', + margin: `${theme.spacing(1)} auto 0`, }, }, })); @@ -104,6 +107,8 @@ interface Props { accountListId: string; } +const sourceOptions = ['MPDX', 'DataServer']; + const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { const { classes } = useStyles(); const [modalState, setModalState] = useState({ @@ -143,98 +148,108 @@ const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { })); }; - const handleSourceChange = ( - event: React.ChangeEvent, - ): void => { + const handleSourceChange = (event: SelectChangeEvent): void => { setDefaultSource(event.target.value); }; + const totalContacts = data?.contacts?.nodes?.length || 0; + //TODO: Make navbar selectId = "fixSendNewsletter" when other branch gets merged return ( - {!loading && data ? ( - - - {t('Fix Mailing Addresses')} - - - {data.contacts?.nodes.length > 0 ? ( - <> - - - - - {t('You have {{amount}} mailing addresses to confirm.', { - amount: data?.contacts.nodes.length, - })} - - - - {t( - 'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.', - )} - - - {t('Default Primary Source:')} - - } - className={classes.nativeSelect} - value={defaultSource} - onChange={(event: React.ChangeEvent) => - handleSourceChange(event) - } - > - - - - + + + {t('Fix Mailing Addresses')} + + + + {loading && !data && ( + + )} + + {!loading && data && ( + + {!totalContacts && } + {totalContacts && ( + <> + + + + + {t( + 'You have {{amount}} mailing addresses to confirm.', + { + amount: totalContacts, + }, + )} + + + + {t( + 'Choose below which mailing address will be set as primary. Primary mailing addresses will be used for Newsletter exports.', + )} + + + {t('Default Primary Source:')} + + + + - - - - {data.contacts.nodes.map((contact) => ( - - ))} - - - - - }} + + + {data.contacts.nodes.map((contact) => ( + - - - - - ) : ( - - )} - - ) : ( - - )} + ))} + + + + + }} + /> + + + + + )} + + )} + Date: Wed, 12 Jun 2024 11:55:05 -0400 Subject: [PATCH 4/6] Making select the same size as the button. --- src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx index 03eaf814d..b466681c4 100644 --- a/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx +++ b/src/components/Tool/FixMailingAddresses/FixMailingAddresses.tsx @@ -197,6 +197,7 @@ const FixSendNewsletter: React.FC = ({ accountListId }: Props) => { className={classes.select} value={defaultSource} onChange={handleSourceChange} + size="small" > {sourceOptions.map((source) => ( From 44bd542225c1727d5f2c3c49aa0d9c336e7d340d Mon Sep 17 00:00:00 2001 From: Daniel Bisgrove Date: Wed, 12 Jun 2024 13:29:08 -0400 Subject: [PATCH 5/6] Primary star is now center aligned. Source column is smaller and the Address column is larger --- .../Tool/FixMailingAddresses/Contact.tsx | 60 +++++++++---------- 1 file changed, 29 insertions(+), 31 deletions(-) diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx index fcfe665b6..e515c8b06 100644 --- a/src/components/Tool/FixMailingAddresses/Contact.tsx +++ b/src/components/Tool/FixMailingAddresses/Contact.tsx @@ -126,21 +126,21 @@ const Contact: React.FC = ({ - - - - {t('Source')} - - - {t('Primary')} - + + + + + {t('Source')} + + + + + {t('Primary')} + + - + = ({ {addresses.map((address) => ( - - - + + + {t('Source')}: @@ -175,17 +171,19 @@ const Contact: React.FC = ({ locale, )} - - - {address.primaryMailingAddress ? ( - - ) : ( - - )} - + + + + {address.primaryMailingAddress ? ( + + ) : ( + + )} + + - + = ({ ))} - + = ({ - + Date: Thu, 13 Jun 2024 14:36:22 -0400 Subject: [PATCH 6/6] Align icons and sources --- .../Tool/FixMailingAddresses/Contact.tsx | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/Tool/FixMailingAddresses/Contact.tsx b/src/components/Tool/FixMailingAddresses/Contact.tsx index e515c8b06..97d68fc70 100644 --- a/src/components/Tool/FixMailingAddresses/Contact.tsx +++ b/src/components/Tool/FixMailingAddresses/Contact.tsx @@ -37,7 +37,7 @@ const ContactHeader = styled(CardHeader)(() => ({ }, })); -const ContactEditIconContainer = styled(IconButton)(() => ({ +const ContactIconContainer = styled(IconButton)(() => ({ margin: theme.spacing(0, 1), width: theme.spacing(4), height: theme.spacing(4), @@ -71,6 +71,9 @@ const useStyles = makeStyles()(() => ({ }, paddingL2: { paddingLeft: theme.spacing(2), + '@media(max-width: 900px)': { + paddingLeft: 0, + }, }, paddingB2: { paddingBottom: theme.spacing(2), @@ -86,6 +89,9 @@ const useStyles = makeStyles()(() => ({ color: theme.palette.mpdxBlue.main, }, }, + alignCenter: { + textAlign: 'center', + }, })); interface Props { @@ -172,14 +178,14 @@ const Contact: React.FC = ({ )} - - + + {address.primaryMailingAddress ? ( ) : ( )} - + @@ -202,19 +208,15 @@ const Contact: React.FC = ({ - + {address.source === 'MPDX' ? : } - + ))} - +