change hosting provider and forgot pw touchables to button

2 files changed, 43 insertions, 23 deletions

diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 80660b580..1653b0da4 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
-import {TouchableOpacity, View} from 'react-native'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {isAndroid} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
@@ -9,6 +11,7 @@ import {useDialogControl} from '../Dialog'
 import {Text} from '../Typography'
 import {ServerInputDialog} from '#/view/com/auth/server-input'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
+import {Button} from '../Button'
 
 export function HostingProvider({
   serviceUrl,
@@ -21,6 +24,7 @@ export function HostingProvider({
 }) {
   const serverInputControl = useDialogControl()
   const t = useTheme()
+  const {_} = useLingui()
 
   const onPressSelectService = React.useCallback(() => {
     serverInputControl.open()
@@ -35,8 +39,11 @@ export function HostingProvider({
         control={serverInputControl}
         onSelect={onSelectServiceUrl}
       />
-      <TouchableOpacity
-        accessibilityRole="button"
+      <Button
+        label={toNiceDomain(serviceUrl)}
+        accessibilityHint={_(msg`Press to change hosting provider`)}
+        variant="solid"
+        color="secondary"
         style={[
           a.w_full,
           a.flex_row,
@@ -45,22 +52,35 @@ export function HostingProvider({
           a.px_md,
           a.gap_xs,
           {paddingVertical: isAndroid ? 14 : 9},
-          t.atoms.bg_contrast_25,
         ]}
         onPress={onPressSelectService}>
-        <View style={a.pr_xs}>
-          <Globe size="md" fill={t.palette.contrast_500} />
-        </View>
-        <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
-        <View
-          style={[
-            a.rounded_sm,
-            t.atoms.bg_contrast_100,
-            {marginLeft: 'auto', left: 6, padding: 6},
-          ]}>
-          <Pencil size="sm" style={{color: t.palette.contrast_500}} />
-        </View>
-      </TouchableOpacity>
+        {({hovered}) => (
+          <>
+            <View style={a.pr_xs}>
+              <Globe
+                size="md"
+                fill={hovered ? t.palette.contrast_800 : t.palette.contrast_500}
+              />
+            </View>
+            <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
+            <View
+              style={[
+                a.rounded_sm,
+                hovered ? t.atoms.bg_contrast_300 : t.atoms.bg_contrast_100,
+                {marginLeft: 'auto', left: 6, padding: 6},
+              ]}>
+              <Pencil
+                size="sm"
+                style={{
+                  color: hovered
+                    ? t.palette.contrast_800
+                    : t.palette.contrast_500,
+                }}
+              />
+            </View>
+          </>
+        )}
+      </Button>
     </>
   )
 }
diff --git a/src/screens/Login/LoginForm.tsx b/src/screens/Login/LoginForm.tsx
index e9620db5c..8c9ef3e27 100644
--- a/src/screens/Login/LoginForm.tsx
+++ b/src/screens/Login/LoginForm.tsx
@@ -4,7 +4,6 @@ import {
   Keyboard,
   LayoutAnimation,
   TextInput,
-  TouchableOpacity,
   View,
 } from 'react-native'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
@@ -193,22 +192,23 @@ export const LoginForm = ({
                 : _(msg`Input the password tied to ${identifier}`)
             }
           />
-          <TouchableOpacity
+          <Button
             testID="forgotPasswordButton"
             onPress={onPressForgotPassword}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Forgot password`)}
+            label={_(msg`Forgot password?`)}
             accessibilityHint={_(msg`Opens password reset form`)}
+            variant="solid"
+            color="secondary"
             style={[
               a.rounded_sm,
               t.atoms.bg_contrast_100,
               {marginLeft: 'auto', left: 6, padding: 6},
               a.z_10,
             ]}>
-            <ButtonText style={t.atoms.text_contrast_medium}>
+            <ButtonText>
               <Trans>Forgot?</Trans>
             </ButtonText>
-          </TouchableOpacity>
+          </Button>
         </TextField.Root>
       </View>
       <FormError error={error} />