diff --git a/src/screens/Settings/AccountSettings.tsx b/src/screens/Settings/AccountSettings.tsx
index 6a72cdcc38..f34810a68c 100644
--- a/src/screens/Settings/AccountSettings.tsx
+++ b/src/screens/Settings/AccountSettings.tsx
@@ -11,10 +11,10 @@ import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a, useTheme} from '#/alf'
import {useDialogControl} from '#/components/Dialog'
import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
import {At_Stroke2_Corner2_Rounded as AtIcon} from '#/components/icons/At'
import {BirthdayCake_Stroke2_Corner2_Rounded as BirthdayCakeIcon} from '#/components/icons/BirthdayCake'
import {Car_Stroke2_Corner2_Rounded as CarIcon} from '#/components/icons/Car'
-import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
import {Envelope_Stroke2_Corner2_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
import {Freeze_Stroke2_Corner2_Rounded as FreezeIcon} from '#/components/icons/Freeze'
import {Lock_Stroke2_Corner2_Rounded as LockIcon} from '#/components/icons/Lock'
@@ -31,6 +31,7 @@ export function AccountSettingsScreen({}: Props) {
const {_} = useLingui()
const {currentAccount} = useSession()
const {openModal} = useModalControls()
+ const verifyEmailControl = useDialogControl()
const birthdayControl = useDialogControl()
const changeHandleControl = useDialogControl()
const exportCarControl = useDialogControl()
@@ -43,25 +44,48 @@ export function AccountSettingsScreen({}: Props) {
-
+ {/* Tricky flexbox situation here: we want the email to truncate, but by default it will make the "Email" text wrap instead.
+ For numberOfLines to work, we need flex: 1 on the BadgeText, but that means it goes to width: 50% because the
+ ItemText is also flex: 1. So we need to set flex: 0 on the ItemText to prevent it from growing, but if we did that everywhere
+ it wouldn't push the BadgeText/Chevron/whatever to the right.
+ TODO: find a general solution for this. workaround in this case is to set the ItemText to flex: 1 and BadgeText to flex: 0 -sfn */}
+
Email
{currentAccount && (
<>
-
+
{currentAccount.email || (no email)}
- {currentAccount.emailConfirmed ? (
-
- ) : (
- {}}
- />
+ {currentAccount.emailConfirmed && (
+
)}
>
)}
+ {currentAccount && !currentAccount.emailConfirmed && (
+ verifyEmailControl.open()}
+ style={[
+ a.my_xs,
+ a.mx_lg,
+ a.rounded_md,
+ {backgroundColor: t.palette.primary_50},
+ ]}
+ hoverStyle={[{backgroundColor: t.palette.primary_100}]}
+ contentContainerStyle={[a.rounded_md, a.px_lg]}>
+
+
+ Verify your email
+
+
+
+ )}
openModal({name: 'change-email'})}>
@@ -71,27 +95,6 @@ export function AccountSettingsScreen({}: Props) {
-
-
-
- Protect your account
-
-
@@ -155,6 +158,7 @@ export function AccountSettingsScreen({}: Props) {
+
diff --git a/src/screens/Settings/components/SettingsList.tsx b/src/screens/Settings/components/SettingsList.tsx
index 29ae9be6d9..07117aef39 100644
--- a/src/screens/Settings/components/SettingsList.tsx
+++ b/src/screens/Settings/components/SettingsList.tsx
@@ -264,7 +264,13 @@ export function Chevron({color: colorProp}: {color?: string}) {
return
}
-export function BadgeText({children}: {children: React.ReactNode}) {
+export function BadgeText({
+ children,
+ style,
+}: {
+ children: React.ReactNode
+ style?: StyleProp
+}) {
const t = useTheme()
return (
{children}