verify screen - done

src/screens/AuthScreen/VerifyOTP/style.js

@@ -5,7 +5,6 @@ import { GlobalTheme, Screen } from '../../../theme';
 export const styles = StyleSheet.create({
     container: {
         flex: 1,
-        paddingHorizontal: 10,
     },
     logoContainer: {
         alignItems: 'center',
@@ -45,21 +44,42 @@ export const styles = StyleSheet.create({
         fontSize: 25,
 
     },
-    verify_otp_inputStyle: {
-        textAlign: 'center',
-        backgroundColor: 'red',
-        width: 100,
-        borderRadius: 4,
-        paddingVertical: 10,
-        paddingHorizontal: 15,
-        height: 48,
-        color: 'red',
-        marginBottom: 10,
-        marginRight: 8,
-        fontSize: 22,
+    // OTP 
+    pinCodeContainer: {
+        width: 45,
+        height: 55,
+        borderWidth: 1,
+        borderColor: '#D8E3F1',
+        borderRadius: 8,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#fff',
     },
-    otp_field: {
-        flexDirection: 'row',
+    activePinCodeContainer: {
+        borderColor: GlobalTheme.colors.primary,
+        borderWidth: 2,
+    },
+    filledPinCodeContainer: {
+        backgroundColor: '#D8E3F1',
+    },
+    disabledPinCodeContainer: {
+        backgroundColor: '#f0f0f0',
+        borderColor: '#ddd',
+    },
+    pinCodeText: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        color: '#333',
+    },
+    focusStick: {
+        height: 2,
+        width: 20,
+        backgroundColor: GlobalTheme.colors.primary,
+        marginTop: 4,
+    },
+    placeholderText: {
+        color: '#aaa',
+        fontSize: 18,
     },
 
 });