TODO: Đã dựng xong giao diện soạn email

src/components/Chip/EmailChipInput.js

@@ -121,14 +121,13 @@ export const EmailChipInput = ({
           chipContainerStyle={chipContainerStyle}
           chipImage={chipImage}
           chipTextStyle={chipTextStyle}
-          marginHorizontal={5}
+          
         />
         <Text
           style={{
             fontSize: 12,
             color: R.colors.gray,
             fontFamily: R.fonts.fontMedium,
-            marginLeft: 5,
             alignSelf: 'center',
           }}>
          +{emails.length - 1}
@@ -205,7 +204,7 @@ export const EmailChipInput = ({
                   fontWeight: '600',
                   padding: 0,
                   height: 35,
-                  paddingHorizontal: 10,
+                  marginHorizontal:3,
                   textAlignVertical: 'center',
                 },
                 inputStyle,
@@ -217,7 +216,7 @@ export const EmailChipInput = ({
         </Wrapper>
 
         {emails.length > 1 && (
-          <View style={{position: 'absolute', right: -3, top: 0}}>
+          <View style={{position: 'absolute', right: -3, top: 5}}>
             <TouchableOpacity
               onPress={toggleExpanded}
               style={{
@@ -227,7 +226,7 @@ export const EmailChipInput = ({
               }}>
               <Image
                 source={isExpanded ? R.images.icBack2 : R.images.icDrop}
-                style={{width: 25, height: 25, tintColor: R.colors.black}}
+                style={{width: 20, height: 20, tintColor: R.colors.black}}
               />
             </TouchableOpacity>
           </View>

src/components/Chip/chip.js

@@ -19,8 +19,10 @@ const Chip = ({
     <View
       onPress={handlePress}
       style={[{
-        paddingHorizontal: 10,
+        width: 'auto',
+        paddingHorizontal: 5,
         paddingVertical: 5,
+        marginLeft:3,
         borderRadius: 15,
         marginHorizontal: marginHorizontal,
         marginVertical: marginVertical,

src/components/Input/TextMulti.js

@@ -26,6 +26,9 @@ const TextField = props => {
     height,
     color = R.colors.black,
     numberOfLines = 5,
+    borderBottomWidth,
+    paddingVertical =10,
+    paddingHorizontal = 10,
   } = props;
 
   return (
@@ -68,11 +71,12 @@ const TextField = props => {
           height: height,
           borderColor:R.colors.grayBorderInputTextHeader,
           borderWidth:1,
+          borderBottomWidth:borderBottomWidth,
           width: '100%',
           borderRadius: 7,
           fontSize: fontSizePlaceHolder,
-          paddingVertical: 10,
-          paddingHorizontal: 10,
+          paddingVertical: paddingVertical,
+          paddingHorizontal: paddingHorizontal,
             backgroundColor:  editable === false 
       ? (backgroundColor || R.colors.blue1) // khi disabled thì lấy màu xám
       : backgroundColor, // khi enable thì lấy màu bạn truyền,

src/screens/email/send/style.js

@@ -54,18 +54,20 @@ const styles = StyleSheet.create({
         height:15
     },
     inputContainer:{
-        height:35,
         flexDirection:'row',
-        alignItems:'center',
         borderBottomWidth:1,
-        borderColor:R.colors.blue4,
+        borderColor:R.colors.grayBorderInputTextHeader,
         borderRadius:5,
+        height:35,
+        alignItems:'center',
+        
        
     },
     input:{
+        flex:1,
         padding:0,
         paddingHorizontal:10,
-        paddingVertical:0
+        paddingVertical:0,
         
     }
 })

src/screens/email/send/view.js

@@ -5,6 +5,8 @@ import R from '../../../assets/R';
 import Button from '../../../components/Button';
 import { useNavigation } from '@react-navigation/native';
 import EmailChipInput from '../../../components/Chip/EmailChipInput';
+import TextMulti from '../../../components/Input/TextMulti';
+import TextField from '../../../components/Input/TextField';
 
 const SendEmailView = (props) => {
   const { handleChange, chip, dataList } = props;
@@ -100,26 +102,24 @@ const renderHeader = () => {
             }
           />
           <View style={styles.inputContainer}>
-            <Text>
+            <Text style={{fontSize:12, color:R.colors.black, fontFamily:R.fonts.fontMedium}}>
               Subject
             </Text>
             <TextInput
-              placeholder="Subject"
+             placeholderTextColor={R.colors.gray}
              style={styles.input}
             />
           </View>
-
-          <View style={styles.inputContainer}>
-            <Text>
-              Content
-            </Text>
+          <View style={[ {height:100}]}>
             <TextInput
-              placeholder="Content"
-              style={styles.input}
+             placeholderTextColor={R.colors.gray}
+             style={[styles.input , {paddingHorizontal:10}]}
+             multiline={true}
+             numberOfLines={5}
+             textAlignVertical='top'
             />
           </View>
 
-
         </View>
     </View>
   );