From e38a6b3ac29e0d8f84db157b7c05fca4d6764690 Mon Sep 17 00:00:00 2001
From: KshitizSareen <kshitizsareen709@gmail.com>
Date: Wed, 25 Jan 2023 01:51:06 -0800
Subject: [PATCH] fix: Overlap for long passwords with show/hide button and
 replaced show/hide button text with show/hide icon

---
 src/common/PasswordInput.js | 26 +++++++++++++++++---------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/common/PasswordInput.js b/src/common/PasswordInput.js
index 5c21ec21bb6..8d90e84b2ef 100644
--- a/src/common/PasswordInput.js
+++ b/src/common/PasswordInput.js
@@ -3,24 +3,26 @@ import React, { useState, useCallback } from 'react';
 import type { Node } from 'react';
 import { View } from 'react-native';
 
+import { Icon } from './Icons';
 import Input from './Input';
 import type { Props as InputProps } from './Input';
 import { BRAND_COLOR, createStyleSheet } from '../styles';
-import ZulipTextIntl from './ZulipTextIntl';
 import Touchable from './Touchable';
 
 const styles = createStyleSheet({
   showPasswordButton: {
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    bottom: 0,
     justifyContent: 'center',
   },
-  showPasswordButtonText: {
+  showPasswordButtonIcon: {
     margin: 8,
     color: BRAND_COLOR,
   },
+  passwordTextInput: {
+    flex: 1,
+  },
+  passwordInputView: {
+    flexDirection: 'row',
+  },
 });
 
 // Prettier wants a ", >" here, which is silly.
@@ -44,10 +46,16 @@ export default function PasswordInput(props: Props): Node {
   }, []);
 
   return (
-    <View>
-      <Input {...props} secureTextEntry={isHidden} autoCorrect={false} autoCapitalize="none" />
+    <View style={styles.passwordInputView}>
+      <Input
+        {...props}
+        secureTextEntry={isHidden}
+        autoCorrect={false}
+        autoCapitalize="none"
+        style={styles.passwordTextInput}
+      />
       <Touchable style={styles.showPasswordButton} onPress={handleShow}>
-        <ZulipTextIntl style={styles.showPasswordButtonText} text={isHidden ? 'show' : 'hide'} />
+        <Icon name={isHidden ? 'eye-off' : 'eye'} size={24} style={styles.showPasswordButtonIcon} />
       </Touchable>
     </View>
   );