From 43028b316138dbd1d90cb94fb3eb4c28aeef27c9 Mon Sep 17 00:00:00 2001
From: Eric Bailey <git@esb.lol>
Date: Thu, 22 Aug 2024 16:42:15 -0700
Subject: [PATCH] Replace card row and add interaction state

---
 src/view/com/util/AccountDropdownBtn.tsx |  2 +-
 src/view/screens/Settings/index.tsx      | 70 ++++++++++++++----------
 2 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/src/view/com/util/AccountDropdownBtn.tsx b/src/view/com/util/AccountDropdownBtn.tsx
index be9f7c9f07..48313d5457 100644
--- a/src/view/com/util/AccountDropdownBtn.tsx
+++ b/src/view/com/util/AccountDropdownBtn.tsx
@@ -31,7 +31,7 @@ export function AccountDropdownBtn({account}: {account: SessionAccount}) {
                 size="xsmall"
                 shape="round"
                 color="secondary"
-                variant="solid">
+                variant="ghost">
                 <ButtonIcon icon={Ellipsis} size="sm" />
               </Button>
             )
diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx
index fe449fcdbc..bb4a16a278 100644
--- a/src/view/screens/Settings/index.tsx
+++ b/src/view/screens/Settings/index.tsx
@@ -55,8 +55,11 @@ import {UserAvatar} from 'view/com/util/UserAvatar'
 import {ScrollView} from 'view/com/util/Views'
 import {DeactivateAccountDialog} from '#/screens/Settings/components/DeactivateAccountDialog'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonContext} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings'
+import {Link as NewLink} from '#/components/Link'
+import {Text as NewText} from '#/components/Typography'
 import {Email2FAToggle} from './Email2FAToggle'
 import {ExportCarDialog} from './ExportCarDialog'
 
@@ -72,62 +75,69 @@ function SettingsAccountCard({
     logContext: 'Settings',
   ) => void
 }) {
-  const pal = usePalette('default')
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
   const {data: profile} = useProfileQuery({did: account.did})
   const isCurrentAccount = account.did === currentAccount?.did
 
-  const contents = (
+  const contents = (ctx: ButtonContext) => (
     <View
       style={[
-        pal.view,
-        styles.linkCard,
-        account.did === pendingDid && t.atoms.bg_contrast_25,
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.gap_md,
+        a.py_md,
+        t.atoms.bg,
+        {
+          paddingHorizontal: 18,
+          marginBottom: 1,
+        },
+        account.did === pendingDid && [t.atoms.bg_contrast_25],
+        (ctx.hovered || ctx.pressed) && [t.atoms.bg_contrast_25],
       ]}>
-      <View style={styles.avi}>
-        <UserAvatar
-          size={40}
-          avatar={profile?.avatar}
-          type={profile?.associated?.labeler ? 'labeler' : 'user'}
-        />
-      </View>
-      <View style={[s.flex1]}>
-        <Text type="md-bold" style={[pal.text, a.self_start]} numberOfLines={1}>
+      <UserAvatar
+        size={40}
+        avatar={profile?.avatar}
+        type={profile?.associated?.labeler ? 'labeler' : 'user'}
+      />
+      <View style={[a.flex_1]}>
+        <NewText
+          style={[a.text_md, a.font_bold, a.leading_tight]}
+          numberOfLines={1}>
           {profile?.displayName || account.handle}
-        </Text>
-        <Text type="sm" style={pal.textLight} numberOfLines={1}>
-          {account.handle}
-        </Text>
+        </NewText>
+        <NewText
+          style={[t.atoms.text_contrast_medium, a.leading_tight]}
+          numberOfLines={1}>
+          @{account.handle}
+        </NewText>
       </View>
       <AccountDropdownBtn account={account} />
     </View>
   )
 
   return isCurrentAccount ? (
-    <Link
-      href={makeProfileLink({
+    <NewLink
+      to={makeProfileLink({
         did: currentAccount?.did,
         handle: currentAccount?.handle,
       })}
-      title={_(msg`Your profile`)}
-      noFeedback>
+      label={_(msg`Your profile`)}
+      style={[a.w_full]}>
       {contents}
-    </Link>
+    </NewLink>
   ) : (
-    <TouchableOpacity
+    <Button
       testID={`switchToAccountBtn-${account.handle}`}
-      key={account.did}
       onPress={
         pendingDid ? undefined : () => onPressSwitchAccount(account, 'Settings')
       }
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Switch to ${account.handle}`)}
-      accessibilityHint={_(msg`Switches the account you are logged in to`)}
-      activeOpacity={0.8}>
+      label={_(msg`Switch to ${account.handle}`)}
+      style={[a.w_full]}>
       {contents}
-    </TouchableOpacity>
+    </Button>
   )
 }