[FIX] Apply thicker border width and remove fixed height on TextInput (#4503)

* [FIX] Apply thicker border width and remove fixed height on TextInput

* changed the last input border from hairline to 2

* update formtextinput storyshot test

__tests__/containers/SearchBox/__snapshots__/SearchBox.stories.storyshot

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"height\\":48,\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":0.5,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\",\\"top\\":14},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;
+exports[`Storyshots SearchBox Basic 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"testID\\":\\"searchbox\\"},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":[{\\"marginBottom\\":10},{\\"margin\\":16,\\"marginBottom\\":16}]},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"position\\":\\"relative\\",\\"justifyContent\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"TextInput\\",\\"props\\":{\\"style\\":[{\\"color\\":\\"#0d0e12\\"},[{\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"Inter\\",\\"fontWeight\\":\\"400\\",\\"fontSize\\":16,\\"padding\\":14,\\"borderWidth\\":2,\\"borderRadius\\":2},null,{\\"paddingRight\\":45},{\\"backgroundColor\\":\\"#ffffff\\",\\"borderColor\\":\\"#cbcbcc\\",\\"color\\":\\"#0d0e12\\"},null,null],{\\"textAlign\\":\\"auto\\"}],\\"placeholderTextColor\\":\\"#9ca2a8\\",\\"keyboardAppearance\\":\\"light\\",\\"autoCorrect\\":false,\\"autoCapitalize\\":\\"none\\",\\"underlineColorAndroid\\":\\"transparent\\",\\"accessibilityLabel\\":\\"Search\\",\\"placeholder\\":\\"Search\\",\\"value\\":\\"\\",\\"blurOnSubmit\\":true,\\"returnKeyType\\":\\"search\\"},\\"children\\":null},{\\"type\\":\\"Text\\",\\"props\\":{\\"selectable\\":false,\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":20,\\"color\\":\\"#2f343d\\"},[{\\"position\\":\\"absolute\\"},{\\"right\\":15}],{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}"`;

app/containers/TextInput/FormTextInput.tsx

@@ -24,10 +24,9 @@ const styles = StyleSheet.create({
 	},
 	input: {
 		...sharedStyles.textRegular,
-		height: 48,
 		fontSize: 16,
 		padding: 14,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2
 	},
 	inputIconLeft: {
@@ -37,11 +36,11 @@ const styles = StyleSheet.create({
 		paddingRight: 45
 	},
 	wrap: {
-		position: 'relative'
+		position: 'relative',
+		justifyContent: 'center'
 	},
 	iconContainer: {
-		position: 'absolute',
+		position: 'absolute'
-		top: 14
 	},
 	iconLeft: {
 		left: 15
@@ -98,7 +97,7 @@ export const FormTextInput = ({
 					style={[
 						styles.input,
 						iconLeft && styles.inputIconLeft,
-						(secureTextEntry || iconRight) && styles.inputIconRight,
+						(secureTextEntry || iconRight || showClearInput) && styles.inputIconRight,
 						{
 							backgroundColor: colors.backgroundColor,
 							borderColor: colors.separatorColor,

app/containers/TextInput/TextInput.stories.tsx

@@ -27,3 +27,44 @@ export const ShortAndLong = () => (
 		</View>
 	</>
 );
+export const Icons = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Right icon' placeholder='placeholder' value={item.name} iconRight={'close'} />
+			<FormTextInput label='Left icon' placeholder='placeholder' value={item.longText} iconLeft={'mail'} />
+			<FormTextInput label='Both icons' placeholder='placeholder' value={item.longText} iconLeft={'mail'} iconRight={'add'} />
+			<FormTextInput
+				label='Icon and touchable clear input'
+				placeholder='placeholder'
+				value={item.longText}
+				onClearInput={() => {}}
+			/>
+		</View>
+	</>
+);
+
+export const Multiline = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Multiline text' placeholder='placeholder' multiline value={`${item.name}\n\n${item.longText}\n`} />
+		</View>
+	</>
+);
+
+export const SecureTextEntry = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Secure text disabled' placeholder='placeholder' value={item.name} />
+			<FormTextInput label='Secure text enabled' placeholder='placeholder' value={item.name} secureTextEntry />
+		</View>
+	</>
+);
+
+export const Loading = () => (
+	<>
+		<View style={styles.paddingHorizontal}>
+			<FormTextInput label='Loading false' placeholder='placeholder' value={item.name} loading={false} />
+			<FormTextInput label='Loading true' placeholder='placeholder' value={item.name} loading />
+		</View>
+	</>
+);

app/containers/UIKit/DatePicker.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 	input: {
 		height: 48,
 		paddingLeft: 16,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		alignItems: 'center',
 		flexDirection: 'row'

app/containers/UIKit/MultiSelect/styles.ts

@@ -35,7 +35,7 @@ export default StyleSheet.create({
 		minHeight: 48,
 		paddingHorizontal: 8,
 		paddingBottom: 0,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		alignItems: 'center',
 		flexDirection: 'row'

app/containers/UIKit/Select.tsx

@@ -19,7 +19,7 @@ const styles = StyleSheet.create({
 	viewContainer: {
 		marginBottom: 16,
 		paddingHorizontal: 16,
-		borderWidth: StyleSheet.hairlineWidth,
+		borderWidth: 2,
 		borderRadius: 2,
 		justifyContent: 'center'
 	},

app/views/StatusView/index.tsx

@@ -49,7 +49,6 @@ const styles = StyleSheet.create({
 	},
 	inputLeft: {
 		position: 'absolute',
-		top: 12,
 		left: 12
 	},
 	inputStyle: {