TODO: Đã chính sửa giao diện

src/screens/class_schedule/style.js

@@ -115,13 +115,13 @@ const styles = StyleSheet.create({
     },
     moreEventsText: {
       fontSize: R.sizes.xs,
-      color: R.colors.grey_100,
+      color: R.colors.gray,
       textAlign: 'center',
     },
   
     modalBackdrop: {
       flex: 1,
-      backgroundColor: R.colors.grey_200,
+      backgroundColor: R.colors.grayBorderInputTextHeader,
       justifyContent: 'flex-end',
     },
     bottomSheet: {
@@ -137,7 +137,7 @@ const styles = StyleSheet.create({
     dragHandle: {
       width: 40,
       height: 4,
-      backgroundColor: R.colors.grey_200,
+      backgroundColor: R.colors.gray,
       borderRadius: 2,
       alignSelf: 'center',
       marginTop: 10,
@@ -150,8 +150,8 @@ const styles = StyleSheet.create({
       marginBottom: 20,
     },
     bottomSheetTitle: {
-      fontSize: R.fontsize.fontSizeHeader1,
-      fontFamily: R.fonts.InterMedium,
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontMedium,
       color: R.colors.black,
       flex: 1,
     },
@@ -159,14 +159,14 @@ const styles = StyleSheet.create({
       width: 30,
       height: 30,
       borderRadius: 15,
-      backgroundColor: R.colors.grey_200,
+      backgroundColor: R.colors.gray,
       alignItems: 'center',
       justifyContent: 'center',
     },
     closeButtonText: {
       fontSize: R.fontsize.fontsSize12,
-      color: R.colors.grey_800,
-      fontFamily: R.fonts.InterRegular,
+      color: R.colors.black,
+      fontFamily: R.fonts.fontRegular,
     },
   
     noEventsContainer: {
@@ -176,9 +176,9 @@ const styles = StyleSheet.create({
       paddingVertical: 40,
     },
     noEventsText: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterRegular,
-      color: R.colors.grey_800,
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontRegular,
+      color: R.colors.gray,
       fontWeight: '400'
     },
     eventCard: {
@@ -205,25 +205,25 @@ const styles = StyleSheet.create({
       marginRight: 15,
     },
     eventTime: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterMedium,
-      color: R.colors.blue500,
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontMedium,
+      color: R.colors.blue,
       fontWeight: '600',
     },
     eventContent: {
       flex: 1,
     },
     eventTitle: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterMedium,
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontMedium,
       color: R.colors.black,
       fontWeight: '600',
       marginBottom: 4,
     },
     eventDescription: {
-      fontSize: R.fontsize.fontsSize12,
-      fontFamily: R.fonts.InterRegular,
-      color: R.colors.grey_800,
+      fontSize: R.fontsize.fontSizeContent,
+      fontFamily: R.fonts.fontRegular,
+      color: R.colors.gray,
     },
 });
 

src/screens/class_schedule/view.js

@@ -242,14 +242,16 @@ const ClassScheduleView = ({
 
   return (
     
-    <SafeAreaView style={styles.container}>
+    <View style={styles.container}>
       <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.body}>
           {renderHeader()}
           {renderWeekDays()}
           {renderCalendarGrid()}
+        </View>
       </ScrollView>
       {renderBottomSheet()}
-    </SafeAreaView>
+    </View>
   );
 };