change choose account form to use Button + add hover styles

src/screens/Login/ChooseAccountForm.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {TouchableOpacity, View} from 'react-native'
+import {View} from 'react-native'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
@@ -67,15 +67,25 @@ function AccountItem({
   }, [account, onSelect])
 
   return (
-    <TouchableOpacity
+    <Button
       testID={`chooseAccountBtn-${account.handle}`}
       key={account.did}
       style={[a.flex_1]}
       onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Sign in as ${account.handle}`)}
-      accessibilityHint={_(msg`Double tap to sign in`)}>
-      <View style={[a.flex_1, a.flex_row, a.align_center, {height: 48}]}>
+      label={
+        isCurrentAccount
+          ? _(msg`Continue as ${account.handle} (currently signed in)`)
+          : _(msg`Sign in as ${account.handle}`)
+      }>
+      {({hovered}) => (
+        <View
+          style={[
+            a.flex_1,
+            a.flex_row,
+            a.align_center,
+            {height: 48},
+            hovered && t.atoms.bg_contrast_25,
+          ]}>
           <View style={a.p_md}>
             <UserAvatar avatar={profile?.avatar} size={24} />
           </View>
@@ -91,7 +101,8 @@ function AccountItem({
             <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
           )}
         </View>
-    </TouchableOpacity>
+      )}
+    </Button>
   )
 }
 export const ChooseAccountForm = ({
@@ -149,15 +160,21 @@ export const ChooseAccountForm = ({
               isCurrentAccount={account.did === currentAccount?.did}
             />
           ))}
-          <TouchableOpacity
+          <Button
             testID="chooseNewAccountBtn"
             style={[a.flex_1]}
             onPress={() => onSelectAccount(undefined)}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Login to account that is not listed`)}
-            accessibilityHint="">
+            label={_(msg`Login to account that is not listed`)}>
+            {({hovered}) => (
               <View
-              style={[a.flex_row, a.flex_row, a.align_center, {height: 48}]}>
+                style={[
+                  a.flex_1,
+                  a.flex_row,
+                  a.flex_row,
+                  a.align_center,
+                  {height: 48},
+                  hovered && t.atoms.bg_contrast_25,
+                ]}>
                 <Text
                   style={[
                     a.align_baseline,
@@ -170,7 +187,8 @@ export const ChooseAccountForm = ({
                 </Text>
                 <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
               </View>
-          </TouchableOpacity>
+            )}
+          </Button>
         </Group>
       </View>
       <View style={[a.flex_row]}>