about summary refs log tree commit diff
diff options
context:
space:
mode:
authorEric Bailey <git@esb.lol>2024-03-20 16:15:41 -0500
committerEric Bailey <git@esb.lol>2024-03-20 16:15:41 -0500
commit6e1541f2030897c8e32090dee3904fc65284ee8c (patch)
tree5b55fafedce1dc8c66311a3e52d483106f001c20
parent94cc08929f05b4909d3367b51790ceab4b5017ec (diff)
downloadvoidsky-6e1541f2030897c8e32090dee3904fc65284ee8c.tar.zst
HostingProvider tweaks
-rw-r--r--src/components/forms/HostingProvider.tsx60
1 files changed, 34 insertions, 26 deletions
diff --git a/src/components/forms/HostingProvider.tsx b/src/components/forms/HostingProvider.tsx
index 34db9442d..f2d11062a 100644
--- a/src/components/forms/HostingProvider.tsx
+++ b/src/components/forms/HostingProvider.tsx
@@ -51,36 +51,44 @@ export function HostingProvider({
           a.align_center,
           a.rounded_sm,
           a.px_md,
+          a.pr_sm,
           a.gap_xs,
           {paddingVertical: isAndroid ? 14 : 9},
         ]}
         onPress={onPressSelectService}>
-        {({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>
-          </>
-        )}
+        {({hovered, pressed}) => {
+          const interacted = hovered || pressed
+          return (
+            <>
+              <View style={a.pr_xs}>
+                <Globe
+                  size="md"
+                  fill={
+                    interacted ? t.palette.contrast_800 : t.palette.contrast_500
+                  }
+                />
+              </View>
+              <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
+              <View
+                style={[
+                  a.rounded_sm,
+                  interacted
+                    ? t.atoms.bg_contrast_300
+                    : t.atoms.bg_contrast_100,
+                  {marginLeft: 'auto', padding: 6},
+                ]}>
+                <Pencil
+                  size="sm"
+                  style={{
+                    color: interacted
+                      ? t.palette.contrast_800
+                      : t.palette.contrast_500,
+                  }}
+                />
+              </View>
+            </>
+          )
+        }}
       </Button>
     </>
   )