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}