Refactor: Styling same as web platform

UNICEFECAR · Oct 17, 2023 · 289eb35 · 289eb35
1 parent 4cfb772
commit 289eb35
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 36 deletions.
diff --git a/src/components/inputs/Input/Input.jsx b/src/components/inputs/Input/Input.jsx
@@ -28,6 +28,7 @@ export const Input = ({
   autoCapitalize = "sentences",
   inputStyles,
   reference,
+  wrapperStyles,
   ...props
 }) => {
   const [isFocused, setIsFocused] = useState(false);
@@ -46,6 +47,7 @@ export const Input = ({
           errorMessage && styles.inputError,
           isTextarea && styles.textarea,
           isFocused && !errorMessage && styles.inputFocused,
+          wrapperStyles,
         ]}
       >
         {preInput && preInput}
@@ -85,59 +87,59 @@ export const Input = ({
 };
 
 const styles = StyleSheet.create({
-  inputWrapper: {
-    width: "96%",
-    maxWidth: 420,
-    display: "flex",
-    textAlign: "left",
-  },
-
-  inputWrapperDisabled: {
-    opacity: 0.4,
-  },
-
   input: {
-    paddingHorizontal: 24,
-    paddingVertical: 12,
+    alignItems: "center",
+    alignSelf: "center",
     backgroundColor: appStyles.colorWhite_ff,
-    borderWidth: 1,
     borderColor: "transparent",
     borderRadius: 53,
-    width: "97%",
-    marginTop: 4,
+    borderWidth: 1,
     display: "flex",
     flexDirection: "row",
-    alignItems: "center",
-    alignSelf: "center",
+    marginTop: 4,
+    paddingHorizontal: 24,
+    paddingVertical: 12,
+    width: "97%",
   },
 
-  textarea: {
-    borderRadius: 32,
+  inputError: {
+    borderColor: appStyles.colorRed_eb5757,
   },
 
   inputFocused: {
     borderColor: appStyles.colorSecondary_9749fa,
   },
 
-  inputError: {
-    borderColor: appStyles.colorRed_eb5757,
+  inputTextarea: {
+    height: 120,
   },
 
-  textInput: {
-    width: "95%",
-    height: 24,
-    color: appStyles.colorBlack_37,
-    textAlignVertical: "top",
+  inputWrapper: {
+    display: "flex",
+    maxWidth: 420,
+    textAlign: "left",
+    width: "96%",
   },
 
-  inputTextarea: {
-    height: 120,
+  inputWrapperDisabled: {
+    opacity: 0.4,
   },
 
   label: {
     color: appStyles.colorBlue_3d527b,
     fontFamily: appStyles.fontSemiBold,
   },
+
+  textInput: {
+    color: appStyles.colorBlack_37,
+    height: 24,
+    textAlignVertical: "top",
+    width: "95%",
+  },
+
+  textarea: {
+    borderRadius: 32,
+  },
 });
 
 Input.propTypes = {

diff --git a/src/components/inputs/SendMessage/SendMessage.jsx b/src/components/inputs/SendMessage/SendMessage.jsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import { StyleSheet, View } from "react-native";
 import { Input } from "../Input";
 import { ButtonWithIcon } from "../../buttons";
+import appStyles from "../../../styles/appStyles";
 
 export const SendMessage = ({
   handleSubmit,
@@ -52,6 +53,7 @@ export const SendMessage = ({
         value={message}
         onChangeText={handleTyping}
         onFocus={hideOptions}
+        wrapperStyles={styles.inputWrapper}
       />
       <ButtonWithIcon
         iconName="comment"
@@ -67,20 +69,23 @@ export const SendMessage = ({
 };
 
 const styles = StyleSheet.create({
+  button: {
+    borderRadius: 24,
+    height: 48,
+    minWidth: 48,
+    paddingLeft: 18,
+    width: 48,
+  },
   container: {
-    flexDirection: "row",
     alignItems: "center",
+    flexDirection: "row",
     justifyContent: "center",
     width: "100%",
   },
   input: {
     width: "85%",
   },
-  button: {
-    borderRadius: 24,
-    width: 48,
-    height: 48,
-    minWidth: 48,
-    paddingLeft: 18,
+  inputWrapper: {
+    borderColor: appStyles.colorSecondary_9749fa,
   },
 });