From e79ce6dadf8675d8617699c72622235e9bdea2fd Mon Sep 17 00:00:00 2001
From: tmgrask <t.mackersy@psiphon.ca>
Date: Fri, 13 Dec 2024 13:34:17 -0500
Subject: [PATCH] Pairing UI refinements

---
 src/components/ConduitOrbToggle.tsx |  2 +-
 src/components/ConduitSettings.tsx  |  8 ++++++++
 src/components/SharePairingLink.tsx | 26 ++++++++++++--------------
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/components/ConduitOrbToggle.tsx b/src/components/ConduitOrbToggle.tsx
index 18f39ed..ed02770 100644
--- 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
index 5e8aca8..6b95e1f 100644
--- 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
index 3d051f1..3cd559d 100644
--- 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>
     );
 }