Pairing UI refinements

Psiphon-Inc · Dec 13, 2024 · e79ce6d · e79ce6d
1 parent 23d8187
commit e79ce6d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 15 deletions.
diff --git a/src/components/ConduitOrbToggle.tsx b/src/components/ConduitOrbToggle.tsx
@@ -558,7 +558,7 @@ export function ConduitOrbToggle({
             >
                 {t("UPGRADE_REQUIRED_I18N.string")}
             </Animated.Text>
-            <ConduitShareAction height={height / 4} />
+            <ConduitShareAction height={height / 8} />
         </View>
     );
 }
diff --git a/src/components/ConduitSettings.tsx b/src/components/ConduitSettings.tsx
@@ -352,6 +352,14 @@ export function ConduitSettings({ iconSize }: { iconSize: number }) {
                                     <Text style={[ss.whiteText, ss.bodyFont]}>
                                         {t("PERSONAL_PAIRING_I18N.string")}
                                     </Text>
+                                    <Text style={[ss.greyText, ss.bodyFont]}>
+                                        (
+                                        {inproxyParameters.compartmentId.slice(
+                                            0,
+                                            5,
+                                        )}
+                                        ...)
+                                    </Text>
                                     <AnimatedText
                                         text={personalPairingStatus}
                                         color={palette.white}

diff --git a/src/components/SharePairingLink.tsx b/src/components/SharePairingLink.tsx
@@ -19,8 +19,13 @@
 
 import { base64url } from "@scure/base";
 import { useTranslation } from "react-i18next";
-import { ActivityIndicator, Platform, Share } from "react-native";
-import Animated from "react-native-reanimated";
+import {
+    ActivityIndicator,
+    Platform,
+    Pressable,
+    Share,
+    Text,
+} from "react-native";
 
 import { useInproxyCompartmentId } from "@/src/auth/hooks";
 import { wrapError } from "@/src/common/errors";
@@ -116,20 +121,13 @@ export function SharePairingLink() {
     }
 
     return (
-        <Animated.View
-            style={[
-                ss.rounded10,
-                ss.padded,
-                ss.whiteBorder,
-                {
-                    backgroundColor: palette.blue,
-                },
-            ]}
+        <Pressable
+            style={[ss.rounded10, ss.padded, ss.whiteBg]}
             onTouchStart={onShare}
         >
-            <Animated.Text style={[ss.boldFont, ss.centeredText, ss.whiteText]}>
+            <Text style={[ss.boldFont, ss.centeredText, ss.blackText]}>
                 {t("SHARE_PAIRING_LINK_I18N.string")}
-            </Animated.Text>
-        </Animated.View>
+            </Text>
+        </Pressable>
     );
 }