link up verify email dialog (#6042)

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) {
         <SettingsList.Container>
           <SettingsList.Item>
             <SettingsList.ItemIcon icon={EnvelopeIcon} />
-            <SettingsList.ItemText>
+            {/* 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 */}
+            <SettingsList.ItemText style={[a.flex_0]}>
               <Trans>Email</Trans>
             </SettingsList.ItemText>
             {currentAccount && (
               <>
-                <SettingsList.BadgeText>
+                <SettingsList.BadgeText style={[a.flex_1]}>
                   {currentAccount.email || <Trans>(no email)</Trans>}
                 </SettingsList.BadgeText>
-                {currentAccount.emailConfirmed ? (
+                {currentAccount.emailConfirmed && (
-                  <CheckIcon color={t.palette.positive_500} size="sm" />
+                  <VerifiedIcon fill={t.palette.primary_500} size="md" />
-                ) : (
-                  <SettingsList.BadgeButton
-                    label={_(msg`Verify`)}
-                    onPress={() => {}}
-                  />
                 )}
               </>
             )}
           </SettingsList.Item>
+          {currentAccount && !currentAccount.emailConfirmed && (
+            <SettingsList.PressableItem
+              label={_(msg`Verify your email`)}
+              onPress={() => 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]}>
+              <SettingsList.ItemIcon
+                icon={VerifiedIcon}
+                color={t.palette.primary_500}
+              />
+              <SettingsList.ItemText
+                style={[{color: t.palette.primary_500}, a.font_bold]}>
+                <Trans>Verify your email</Trans>
+              </SettingsList.ItemText>
+              <SettingsList.Chevron color={t.palette.primary_500} />
+            </SettingsList.PressableItem>
+          )}
           <SettingsList.PressableItem
             label={_(msg`Change email`)}
             onPress={() => openModal({name: 'change-email'})}>
@@ -71,27 +95,6 @@ export function AccountSettingsScreen({}: Props) {
             </SettingsList.ItemText>
             <SettingsList.Chevron />
           </SettingsList.PressableItem>
-          <SettingsList.LinkItem
-            to="/settings/privacy-and-security"
-            label={_(msg`Protect your account`)}
-            style={[
-              a.my_xs,
-              a.mx_lg,
-              a.rounded_md,
-              {backgroundColor: t.palette.primary_50},
-            ]}
-            chevronColor={t.palette.primary_500}
-            hoverStyle={[{backgroundColor: t.palette.primary_100}]}
-            contentContainerStyle={[a.rounded_md, a.px_lg]}>
-            <SettingsList.ItemIcon
-              icon={VerifiedIcon}
-              color={t.palette.primary_500}
-            />
-            <SettingsList.ItemText
-              style={[{color: t.palette.primary_500}, a.font_bold]}>
-              <Trans>Protect your account</Trans>
-            </SettingsList.ItemText>
-          </SettingsList.LinkItem>
           <SettingsList.Divider />
           <SettingsList.Item>
             <SettingsList.ItemIcon icon={BirthdayCakeIcon} />
@@ -155,6 +158,7 @@ export function AccountSettingsScreen({}: Props) {
         </SettingsList.Container>
       </Layout.Content>
 
+      <VerifyEmailDialog control={verifyEmailControl} />
       <BirthDateSettingsDialog control={birthdayControl} />
       <ChangeHandleDialog control={changeHandleControl} />
       <ExportCarDialog control={exportCarControl} />

src/screens/Settings/components/SettingsList.tsx

@@ -264,7 +264,13 @@ export function Chevron({color: colorProp}: {color?: string}) {
   return <ItemIcon icon={ChevronRightIcon} size="md" color={color} />
 }
 
-export function BadgeText({children}: {children: React.ReactNode}) {
+export function BadgeText({
+  children,
+  style,
+}: {
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+}) {
   const t = useTheme()
   return (
     <Text
@@ -273,6 +279,7 @@ export function BadgeText({children}: {children: React.ReactNode}) {
         a.text_md,
         a.text_right,
         a.leading_snug,
+        style,
       ]}
       numberOfLines={1}>
       {children}