From ddac198ea782dbf61edeec95b1ea6b78ec46e604 Mon Sep 17 00:00:00 2001
From: Abin Toppo <abintoppo96@gmail.com>
Date: Fri, 25 Sep 2026 16:02:02 +0530
Subject: [PATCH] Show a SIM icon beside the mobile number on the login screen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/modules/auth/components/SimIcon.tsx  | 28 ++++++++++++++++++++++++
 src/modules/auth/screens/LoginScreen.tsx | 28 +++++++++++++++---------
 2 files changed, 46 insertions(+), 10 deletions(-)
 create mode 100644 src/modules/auth/components/SimIcon.tsx

diff --git a/src/modules/auth/components/SimIcon.tsx b/src/modules/auth/components/SimIcon.tsx
new file mode 100644
index 0000000..c93ee42
--- /dev/null
+++ b/src/modules/auth/components/SimIcon.tsx
@@ -0,0 +1,28 @@
+import React, { memo } from 'react';
+import Svg, { Path, Rect } from 'react-native-svg';
+
+/**
+ * A SIM card glyph, drawn in the same language as SimChooser's cards: the
+ * chamfered top-right corner and the contact chip. Ionicons has no SIM icon,
+ * and a phone or signal glyph says "device" rather than "the line your bank
+ * knows you by".
+ */
+type Props = {
+  size?: number;
+  color: string;
+};
+
+const SimIconComponent = ({ size = 16, color }: Props) => (
+  <Svg width={size} height={size} viewBox="0 0 24 24" fill="none">
+    <Path
+      d="M7 2.75 H14.5 L19.25 7.5 V19.25 A2 2 0 0 1 17.25 21.25 H6.75 A2 2 0 0 1 4.75 19.25 V4.75 A2 2 0 0 1 6.75 2.75 Z"
+      stroke={color}
+      strokeWidth={1.6}
+      strokeLinejoin="round"
+    />
+    <Rect x={8} y={10.5} width={8} height={7} rx={1.2} stroke={color} strokeWidth={1.4} />
+    <Path d="M8 14 H16 M12 10.5 V17.5" stroke={color} strokeWidth={1} />
+  </Svg>
+);
+
+export const SimIcon = memo(SimIconComponent);
diff --git a/src/modules/auth/screens/LoginScreen.tsx b/src/modules/auth/screens/LoginScreen.tsx
index 8252eae..8f4d76e 100644
--- a/src/modules/auth/screens/LoginScreen.tsx
+++ b/src/modules/auth/screens/LoginScreen.tsx
@@ -44,6 +44,7 @@ import { BiometricNode } from '../components/BiometricNode';
 import { CodeInput } from '../components/CodeInput';
 import { PreLoginActions } from '../components/PreLoginActions';
 import { LoginFooter } from '../components/LoginFooter';
+import { SimIcon } from '../components/SimIcon';
 import { useBiometricPrompt } from '../hooks/useBiometricPrompt';
 import type { AuthStackParamList } from '../../../navigation/types';
 import type { LoginRole } from '../../../types/app';
@@ -301,6 +302,15 @@ export default function LoginScreen({ navigation }: Props) {
     ? `+91 ••••• •${lastProfile.mobileNumber.slice(-4)}`
     : undefined;
 
+  const maskedMobileRow = maskedMobile ? (
+    <View style={styles.mobileRow}>
+      <SimIcon size={14} color={theme.colors.onBrandMuted} />
+      <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
+        {maskedMobile}
+      </Text>
+    </View>
+  ) : null;
+
   const gradient = (
     <>
       <LinearGradient
@@ -368,11 +378,7 @@ export default function LoginScreen({ navigation }: Props) {
                   >
                     {lastProfile.fullName}
                   </Text>
-                  {maskedMobile ? (
-                    <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
-                      {maskedMobile}
-                    </Text>
-                  ) : null}
+                  {maskedMobileRow}
                 </>
               ) : (
                 <>
@@ -392,11 +398,7 @@ export default function LoginScreen({ navigation }: Props) {
                     no name, because it does not return one — so without this
                     the screen asks for an MPIN and names nothing at all.
                   */}
-                  {maskedMobile ? (
-                    <Text style={[theme.text.code, { color: theme.colors.onBrandMuted }]}>
-                      {maskedMobile}
-                    </Text>
-                  ) : null}
+                  {maskedMobileRow}
                 </>
               )}
             </View>
@@ -418,6 +420,7 @@ export default function LoginScreen({ navigation }: Props) {
                 {!isReturningCustomer ? (
                   <Input
                     label="Registered mobile number"
+                    leftAccessory={<SimIcon size={18} color={theme.colors.textSecondary} />}
                     prefix="+91"
                     keyboardType="number-pad"
                     maxLength={10}
@@ -588,6 +591,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 4,
   },
+  mobileRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
   heroBlock: {
     alignItems: 'center',
     paddingVertical: 4,