add base shadow

src/screens/confirm_date/ConfirmDateContainer.js

@@ -8,6 +8,7 @@ import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
 import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
 import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
 import ConfirmDateMainView from './template/ConfirmMainView';
+import confirmDatePropsProvider from './confirmDatePropsProvider';
 const ConfirmDateContainer = props => {
   const {confirmDateList, confirmApprovedDateList, userInfo} = props;
   const dispatch = useDispatch();
@@ -93,7 +94,7 @@ const ConfirmDateContainer = props => {
     });
   };
 
-  const loadDataRequestApprove = async () => {
+  const fetchAbsentApprovalRequests = async () => {
     const res = await dispatch(
       getConfirmApprovedDate({
         filter: approveReqPayload.filter,
@@ -362,7 +363,7 @@ const ConfirmDateContainer = props => {
   }, [confirmApprovedDateList]);
 
   useEffect(() => {
-    approveReqPayload && loadDataRequestApprove();
+    approveReqPayload && fetchAbsentApprovalRequests();
   }, [approveReqPayload]);
   useEffect(() => {
     userConfirmPayload && loadDataConfirmDay();
@@ -395,7 +396,7 @@ const ConfirmDateContainer = props => {
     onChangeMonthFilter,
     minutesToHours,
   };
-  return <ConfirmDateMainView {...confirmProps} />;
+  return <ConfirmDateMainView {...confirmDatePropsProvider(confirmProps)} />;
 };
 
 export default ConfirmDateContainer;

src/screens/confirm_date/confirmDatePropsProvider.js

+export default function confirmDatePropsProvider(props) {
+  const {
+    userInfo,
+    showAlert,
+    requestApproveArr,
+    confirmList,
+    isDisableLoadMore,
+    dataChart,
+    modalContent,
+    approveReqPayload,
+    dayPress,
+    onChangeDayPressInChart,
+    onOpenDetailModal,
+    onOpenAddModal,
+    onLoadMoreConfirmList,
+    onHideAlert,
+    navigateToDayWage,
+    alertMessage,
+    onLoadMoreRequestApprove,
+    onRefreshApproveList,
+    onRefreshConfirmList,
+    onChangeSelectFilter,
+    onChangeMonthFilter,
+    minutesToHours,
+  } = props;
+  return {
+    userInfo,
+    showAlert,
+    requestApproveArr,
+    confirmList,
+    isDisableLoadMore,
+    dataChart,
+    modalContent,
+    approveReqPayload,
+    dayPress,
+    onChangeDayPressInChart,
+    onOpenDetailModal,
+    onOpenAddModal,
+    onLoadMoreConfirmList,
+    onHideAlert,
+    navigateToDayWage,
+    alertMessage,
+    onLoadMoreRequestApprove,
+    onRefreshApproveList,
+    onRefreshConfirmList,
+    onChangeSelectFilter,
+    onChangeMonthFilter,
+    minutesToHours,
+  };
+}

src/screens/confirm_date/style.js

@@ -396,5 +396,13 @@ const styles = StyleSheet.create({
     paddingTop: 15,
   },
 });
-
+export const statisticsConfirmWorkdaysStyles = StyleSheet.create({
+  container: {
+    padding: 15,
+    backgroundColor: 'white',
+    height: 380,
+    margin: 10,
+    borderRadius: 5,
+  },
+});
 export default styles;

src/screens/confirm_date/template/ConfirmMainView.js

@@ -16,20 +16,17 @@ import FastImage from 'react-native-fast-image';
 import SelectDropdown from 'react-native-select-dropdown';
 import AppText from '../../../components/AppText';
 import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays';
+import commonStyles from '../../../styles/commonStyles';
 
 const ConfirmDateMainView = ({
-  dataChart,
   isDisableLoadMore,
-  userDetails,
   showAlert,
   onHideAlert,
   navigateToDayWage,
-  alertMessage,
   onLoadMoreRequestApprove,
   onLoadMoreConfirmList,
   requestApproveArr,
   confirmList,
-  monthChart,
   onRefreshConfirmList,
   modalContent,
   onOpenDetailModal,
@@ -37,31 +34,19 @@ const ConfirmDateMainView = ({
   approveReqPayload,
   onChangeSelectFilter,
   minutesToHours,
+  dataChart,
+  onChangeMonthFilter,
+  dayPress,
 }) => {
-  const typeChartColor = [
-    {color: '#7d93ff', name: 'Trên 6h'},
-    {color: '#9eaeff', name: '4-6h'},
-    {color: '#bec9ff', name: '2-4h'},
-    {color: '#dfe4ff', name: '0-2h'},
-    {color: '#f2f2f2', name: '0h'},
-  ];
-
-  //console.log(dataChart?.data);
-  const dayOfWeek = [
-    'Monday',
-    'Tuesday',
-    'Wednesday',
-    'Thursday',
-    'Friday',
-    'Saturday',
-    'Sunday',
-  ];
-
   return (
     <SafeAreaView>
       <ScrollView nestedScrollEnabled={true}>
-        <StatisticsConfirmWorkdays />
-        <View style={styles.view}>
+        <StatisticsConfirmWorkdays
+          dataChart={dataChart}
+          onChangeMonthFilter={onChangeMonthFilter}
+          dayPress={dayPress}
+        />
+        <View style={[styles.view, commonStyles.baseShadow]}>
           <AppText style={{fontWeight: '500', marginBottom: 10}}>
             Xác nhận ngày công của bạn:{' '}
           </AppText>

src/screens/home/style.js

@@ -5,17 +5,15 @@ const windowWidth = Dimensions.get('window').width;
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    padding: 10,
   },
   viewContent: {
     borderRadius: 5,
     borderWidth: 1,
-    width: '100%',
-    borderColor: 'white',
-    backgroundColor: 'white',
+    width: windowWidth - 20,
+    borderColor: colors.white,
+    backgroundColor: colors.white,
     alignSelf: 'center',
-    marginTop: 10,
-    marginBottom: 10,
+    margin: 10,
   },
   bgQuote: {
     width: windowWidth - 10,
@@ -33,7 +31,7 @@ const styles = StyleSheet.create({
     textAlign: 'right',
   },
   calendarHolder: {
-    marginBottom: 10,
+    margin: 10,
     borderTopLeftRadius: 15,
     borderTopRightRadius: 15,
     backgroundColor: 'white',

src/screens/home/template/subViews/CalendarBirthday.js

@@ -8,6 +8,7 @@ import AppText from '../../../../components/AppText';
 import colors from '../../../../values/colors';
 import {IMAGES} from '../../../../values/images';
 import styles from '../../style';
+import commonStyles from '../../../../styles/commonStyles';
 const CalendarBirthday = React.memo(
   ({
     birthdayOfUser,
@@ -17,7 +18,7 @@ const CalendarBirthday = React.memo(
   }) => {
     const today = moment(moment()).format('YYYY-MM-DD'); // Today
     return (
-      <View style={styles.viewContent}>
+      <View style={[styles.viewContent, commonStyles.baseShadow]}>
         <Image source={IMAGES.BgBirthdayHeader} style={styles.BgBirthday} />
         {birthdayOfUser && (
           <Swiper

src/screens/home/template/subViews/QuotationList.js

-/* eslint-disable prettier/prettier */
 import React from 'react';
 import {Dimensions, Image, StyleSheet, View} from 'react-native';
 import AppText from '../../../../components/AppText';
 import {IMAGES} from '../../../../values/images';
+import commonStyles from '../../../../styles/commonStyles';
 const windowWidth = Dimensions.get('window').width;
 const Quotation = ({quotation}) => {
   return (
-    <View style={styles.quotationContainer}>
+    <View style={[styles.quotationContainer, commonStyles.baseShadow]}>
       <View style={styles.quotationContent}>
         <AppText style={styles.textQuote}>
           {quotation?.content
@@ -26,9 +26,9 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: 'white',
     backgroundColor: 'white',
-    marginTop: 10,
     paddingTop: 30,
     borderRadius: 5,
+    margin: 10,
   },
   quotationContent: {
     justifyContent: 'center',

src/screens/onleave/template/OnLeaveMainView.js

@@ -16,6 +16,7 @@ import config from '../../../config';
 import {GifType, IMAGES} from '../../../values/images';
 import styles from '../style';
 import RequestLeavesDays from './subViews/RequestLeavesDays';
+import commonStyles from '../../../styles/commonStyles';
 
 const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
 const selectDataDropDown = [
@@ -35,7 +36,9 @@ const DataChartLeavesRestDays = React.memo(
               dataChart?.length &&
               dataChart.map((item, index) => {
                 return (
-                  <View key={index} style={styles.pieChartView}>
+                  <View
+                    key={index}
+                    style={[styles.pieChartView, commonStyles.baseShadow]}>
                     <View style={styles.pieItem}>
                       <View style={{marginBottom: 10}}>
                         <AppText style={{textAlign: 'center', fontSize: 12}}>
@@ -100,9 +103,9 @@ const AddNewLeavesSection = React.memo(props => {
   const {onOpenRequestLeavesModal, navigateToConfirmDate, navigateToOverTime} =
     props;
   return (
-    <View style={styles.view}>
+    <View style={[styles.view, commonStyles.baseShadow]}>
       <AppText style={{fontWeight: '500', marginBottom: 10}}>
-        Nghỉ phép của bạn:{' '}
+        Nghỉ phép của bạn:
       </AppText>
       <View style={{alignItems: 'center', justifyContent: 'center'}}>
         <TouchableOpacity
@@ -139,7 +142,7 @@ const ApproveRequestLeavesDays = React.memo(
       onOpenDetailModal,
     } = props;
     return (
-      <View style={styles.view}>
+      <View style={[styles.view, commonStyles.baseShadow]}>
         <View style={styles.approveRequestFilter}>
           <AppText style={styles.approveRequestTitle}>
             Duyệt yêu cầu nghỉ phép
@@ -226,7 +229,7 @@ const LeavesRequest = React.memo(
   props => {
     const {leaveRequestList, onRefreshLeaveList, onOpenDetailModal} = props;
     return (
-      <View style={[styles.view, {marginBottom: 30}]}>
+      <View style={[styles.view, commonStyles.baseShadow, {marginBottom: 10}]}>
         <View style={styles.myLeavesTitleView}>
           <AppText
             style={{

src/styles/commonStyles.js

+import {Dimensions, StyleSheet} from 'react-native';
+import colors from '../values/colors';
+const windowWidth = Dimensions.get('window').width;
+const windowHeight = Dimensions.get('window').height;
+const commonStyles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  baseShadow: {
+    shadowColor: colors.baseShadowColor,
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+
+    elevation: 5,
+  },
+});
+export default commonStyles;

src/values/colors.js

@@ -32,5 +32,6 @@ const colors = {
   gray59: '#595959',
   grayE9: '#e9eaf9',
   textColor: '#202121',
+  baseShadowColor: '#000',
 };
 export default colors;