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`}
+