TODO: Đã dựng xong giao diện list danh sách điểm danh của lớp học

src/screens/roll_call/style.js

@@ -10,7 +10,6 @@ const styles = StyleSheet.create({
     body: {
         flex: 1,
         backgroundColor: R.colors.white,
-        paddingHorizontal:15
     },
     card: {
         borderWidth: 1,
@@ -27,6 +26,7 @@ const styles = StyleSheet.create({
         shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
         shadowRadius: 5,
         elevation: Platform.OS === 'ios' ? 1 : 2,
+        marginHorizontal:15
       },
       btnCard: {
         borderRadius: 10,
@@ -44,7 +44,6 @@ const styles = StyleSheet.create({
         fontWeight: '400',
       },
       searchContainer:{
-        width:'100%',
         flexDirection:'row',
         alignItems:'center',
         borderColor:R.colors.grayBorderInputTextHeader,
@@ -52,6 +51,7 @@ const styles = StyleSheet.create({
         borderRadius:100,
         paddingHorizontal:10,
         paddingVertical:5,
+        marginHorizontal:15
       },
       textInput:{
         fontSize: R.sizes.sm,
@@ -67,16 +67,20 @@ const styles = StyleSheet.create({
         width:24,
         height:24,
       },
-      list:{
-        marginVertical:10
-      },
+
       item:{
         paddingVertical:10,
         paddingHorizontal:15,
-        borderRadius:10,
-        borderWidth:1,
-        borderColor:R.colors.grayBorderInputTextHeader,
-        marginVertical:5,
+        marginHorizontal:15,
+        marginTop:10,
+        marginBottom:15,
+        backgroundColor:R.colors.white,
+        borderRadius:15,
+        shadowColor: R.colors.black,
+        shadowOffset: {width: 0.5, height: 2},
+        shadowOpacity: Platform.OS === 'ios' ? 0.25 : 1,
+        shadowRadius: 5,
+        elevation: Platform.OS === 'ios' ? 1 : 2,
       },
       row:{
         flexDirection:'row',
@@ -85,12 +89,13 @@ const styles = StyleSheet.create({
       textTitle:{
         fontSize: R.sizes.sm,
         color: R.colors.black,
-        fontFamily: R.fonts.fontRegular,
-        fontWeight: '400',
+        fontFamily: R.fonts.fontMedium,
+        fontWeight: '600',
       },
       btnContainer:{
         flexDirection:'row',
         justifyContent:'space-between',
+        marginVertical:5
       },
       iconQR:{
         width:24,

src/screens/roll_call/view.js

@@ -25,32 +25,32 @@ const ListRollCallView = props => {
         <View style={styles.row}>
           <Text style={styles.textTitle}>
             Mã lớp:
-            <Text style={styles.text}>{item.classCode}</Text>
+            <Text style={[styles.text ,{color:R.colors.blue , fontWeight:'600', fontFamily:R.fonts.fontMedium}]}>{item.classCode}</Text>
           </Text>
           <Text style={styles.textTitle}>
             Đã học / Tổng tiết:
-            <Text style={styles.text}>
+            <Text style={[styles.text ,{color:R.colors.blue }]}>
               {item.lessonLearned}/{item.generalDetails}
             </Text>
           </Text>
         </View>
         <View style={styles.row}>
           <Text style={styles.textTitle}>
-            Sĩ số:
-            <Text style={styles.text}>{item.numberOfStudent}</Text>
+            Sĩ số:{' '}
+            <Text style={[styles.text ,{color:R.colors.blue }]}>{item.numberOfStudent}</Text>
           </Text>
           <Text style={styles.textTitle}>
-            Tổng số sinh viên trượt điểm danh:
-            <Text style={styles.text}>{item.totalStudentFailedRollCall}</Text>
+            Tổng số sv trượt điểm danh:{' '}
+            <Text style={[styles.text, {color:R.colors.red }]}>{item.totalStudentFailedRollCall}</Text>
           </Text>
         </View>
         <Text style={styles.textTitle}>
-          Ngày bắt đầu:
-          <Text style={styles.text}>{item.dateStart}</Text>
+          Ngày bắt đầu:{' '}
+          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateStart}</Text>
         </Text>
         <Text style={styles.textTitle}>
-          Ngày kết thúc:
-          <Text style={styles.text}>{item.dateEnd}</Text>
+          Ngày kết thúc:{' '}
+          <Text style={[styles.text ,{color:R.colors.blue }]}>{item.dateEnd}</Text>
         </Text>
         <View style={styles.btnContainer}>
             <Button
@@ -58,7 +58,8 @@ const ListRollCallView = props => {
                 onPress={()=>{}}
                 backgroundColor={R.colors.brown}
                 textColor={R.colors.white}
-                containerStyle={{paddingHorizontal:5, borderRadius:20}}
+                fontSize={12}
+                containerStyle={{paddingHorizontal:5,paddingVertical:5, borderRadius:20}}
             />
             <Button
                 title="Điểm danh"
@@ -66,6 +67,8 @@ const ListRollCallView = props => {
                 containerStyle={{paddingHorizontal:5, borderRadius:20}}
                 backgroundColor={R.colors.brown}
                 textColor={R.colors.white}
+                fontSize={12}
+                width={85}
             />
             <Button
                 title="Chi tiết"
@@ -73,6 +76,8 @@ const ListRollCallView = props => {
                 containerStyle={{paddingHorizontal:5, borderRadius:20}}
                 backgroundColor={R.colors.blue}
                 textColor={R.colors.white}
+                fontSize={12}
+                width={85}
             />
         </View>
       </View>
@@ -80,7 +85,7 @@ const ListRollCallView = props => {
   };
   return (
     <View style={styles.container}>
-      <Header title={'Báo bù lịch dạy'} isBack />
+      <Header title={'Danh sách lớp điểm danh'} isBack />
       <View style={styles.body}>
         <View style={styles.card}>
           <TouchableOpacity style={styles.btnCard}>
@@ -101,6 +106,7 @@ const ListRollCallView = props => {
           keyExtractor={(item, index) => `${index}`}
           style={styles.list}
         />
+ 
       </View>
     </View>
   );