diff --git a/packages/web/lib/dateFormatting.ts b/packages/web/lib/dateFormatting.ts index 3326a26e8..a987c7543 100644 --- a/packages/web/lib/dateFormatting.ts +++ b/packages/web/lib/dateFormatting.ts @@ -8,6 +8,12 @@ export function formattedLongDate(rawDate: string): string { }).format(new Date(rawDate)) } +export function formattedShortDate(rawDate: string): string { + return new Intl.DateTimeFormat(locale, { + dateStyle: 'short', + }).format(new Date(rawDate)) +} + export function readableUpdatedAtMessage( rawDate: string, customPrefix?: string diff --git a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx index 92228a004..2020c21ab 100644 --- a/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx +++ b/packages/web/lib/networking/queries/useGetNewsletterEmailsQuery.tsx @@ -19,7 +19,7 @@ type NewsletterEmailsData = { export type NewsletterEmail = { id: string address: string - createdAt: Date + createdAt: string subscriptionCount: number confirmationCode?: string } diff --git a/packages/web/pages/settings/emails.tsx b/packages/web/pages/settings/emails.tsx index d4e0aad1b..ad4e40f1a 100644 --- a/packages/web/pages/settings/emails.tsx +++ b/packages/web/pages/settings/emails.tsx @@ -23,6 +23,7 @@ import { StyledText } from '../../components/elements/StyledText' import { applyStoredTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' import { InfoLink } from '../../components/elements/InfoLink' +import { formattedShortDate } from '../../lib/dateFormatting' enum TextType { EmailAddress, @@ -62,7 +63,7 @@ const TableHeading = styled(Box, { border: '1px solid rgba(0, 0, 0, 0.06)', display: 'none', alignItems: 'center', - padding: '14px 0 14px 40px', + padding: '10px 0 10px 20px', borderRadius: '5px 5px 0px 0px', width: '100%', '@md': { @@ -93,6 +94,7 @@ const CopyTextBtnWrapper = styled(Box, { alignItems: 'center', justifyContent: 'center', + marginLeft: '10px', }) const MoreOptions = ({ onDelete }: { onDelete: () => void }) => ( @@ -260,30 +262,14 @@ export default function EmailsPage(): JSX.Element { - - - Address - - - - - Created At - - + Address + {emailAddresses && @@ -310,6 +296,7 @@ export default function EmailsPage(): JSX.Element { display: 'flex', width: '100%', flexDirection: 'column', + paddingLeft: '20px', '@md': { flexDirection: 'row', }, @@ -322,23 +309,29 @@ export default function EmailsPage(): JSX.Element { padding: '4px 4px 4px 0px', }} > - - + - {email.createdAt} - count: {email.subscriptionCount} + > + {email.address} + + + {`created ${formattedShortDate(email.createdAt)}, ${ + email.subscriptionCount + } subscriptions`} +