Skip to content

A
anawork-mobile-v2
Commit 32fb9014 authored by quynhquang400@gmail.com's avatar quynhquang400@gmail.com
Browse files
Options

add base shadow

parent 42a00560
Hide whitespace changes
Inline Side-by-side
Showing with 289 additions and 228 deletions
src/screens/confirm_date/ConfirmDateContainer.js
View file @ 32fb9014
...@@ -8,6 +8,7 @@ import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew'; ...@@ -8,6 +8,7 @@ import ConfirmModalAddNew from './confirm-modals/ConfirmModalAddNew';
import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails'; import ConfirmModalDetails from './confirm-modals/ConfirmModalDetails';
import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice'; import {getConfirmApprovedDate, getUserConfirmDay} from './confirmDateSlice';
import ConfirmDateMainView from './template/ConfirmMainView'; import ConfirmDateMainView from './template/ConfirmMainView';
import confirmDatePropsProvider from './confirmDatePropsProvider';
const ConfirmDateContainer = props => { const ConfirmDateContainer = props => {
const {confirmDateList, confirmApprovedDateList, userInfo} = props; const {confirmDateList, confirmApprovedDateList, userInfo} = props;
const dispatch = useDispatch(); const dispatch = useDispatch();
...@@ -93,7 +94,7 @@ const ConfirmDateContainer = props => { ...@@ -93,7 +94,7 @@ const ConfirmDateContainer = props => {
}); });
}; };
const loadDataRequestApprove = async () => { const fetchAbsentApprovalRequests = async () => {
const res = await dispatch( const res = await dispatch(
getConfirmApprovedDate({ getConfirmApprovedDate({
filter: approveReqPayload.filter, filter: approveReqPayload.filter,
...@@ -362,7 +363,7 @@ const ConfirmDateContainer = props => { ...@@ -362,7 +363,7 @@ const ConfirmDateContainer = props => {
}, [confirmApprovedDateList]); }, [confirmApprovedDateList]);
useEffect(() => { useEffect(() => {
approveReqPayload && loadDataRequestApprove(); approveReqPayload && fetchAbsentApprovalRequests();
}, [approveReqPayload]); }, [approveReqPayload]);
useEffect(() => { useEffect(() => {
userConfirmPayload && loadDataConfirmDay(); userConfirmPayload && loadDataConfirmDay();
...@@ -395,7 +396,7 @@ const ConfirmDateContainer = props => { ...@@ -395,7 +396,7 @@ const ConfirmDateContainer = props => {
onChangeMonthFilter, onChangeMonthFilter,
minutesToHours, minutesToHours,
}; };
return <ConfirmDateMainView {...confirmProps} />; return <ConfirmDateMainView {...confirmDatePropsProvider(confirmProps)} />;
}; };
export default ConfirmDateContainer; export default ConfirmDateContainer;
src/screens/confirm_date/confirmDatePropsProvider.js 0 → 100644
View file @ 32fb9014
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
View file @ 32fb9014
...@@ -396,5 +396,13 @@ const styles = StyleSheet.create({ ...@@ -396,5 +396,13 @@ const styles = StyleSheet.create({
paddingTop: 15, paddingTop: 15,
}, },
}); });
export const statisticsConfirmWorkdaysStyles = StyleSheet.create({
container: {
padding: 15,
backgroundColor: 'white',
height: 380,
margin: 10,
borderRadius: 5,
},
});
export default styles; export default styles;
src/screens/confirm_date/template/ConfirmMainView.js
View file @ 32fb9014
...@@ -16,20 +16,17 @@ import FastImage from 'react-native-fast-image'; ...@@ -16,20 +16,17 @@ import FastImage from 'react-native-fast-image';
import SelectDropdown from 'react-native-select-dropdown'; import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../../components/AppText'; import AppText from '../../../components/AppText';
import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays'; import StatisticsConfirmWorkdays from './components/StatisticsConfirmWorkdays';
import commonStyles from '../../../styles/commonStyles';
const ConfirmDateMainView = ({ const ConfirmDateMainView = ({
dataChart,
isDisableLoadMore, isDisableLoadMore,
userDetails,
showAlert, showAlert,
onHideAlert, onHideAlert,
navigateToDayWage, navigateToDayWage,
alertMessage,
onLoadMoreRequestApprove, onLoadMoreRequestApprove,
onLoadMoreConfirmList, onLoadMoreConfirmList,
requestApproveArr, requestApproveArr,
confirmList, confirmList,
monthChart,
onRefreshConfirmList, onRefreshConfirmList,
modalContent, modalContent,
onOpenDetailModal, onOpenDetailModal,
...@@ -37,31 +34,19 @@ const ConfirmDateMainView = ({ ...@@ -37,31 +34,19 @@ const ConfirmDateMainView = ({
approveReqPayload, approveReqPayload,
onChangeSelectFilter, onChangeSelectFilter,
minutesToHours, 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 ( return (
<SafeAreaView> <SafeAreaView>
<ScrollView nestedScrollEnabled={true}> <ScrollView nestedScrollEnabled={true}>
<StatisticsConfirmWorkdays /> <StatisticsConfirmWorkdays
<View style={styles.view}> dataChart={dataChart}
onChangeMonthFilter={onChangeMonthFilter}
dayPress={dayPress}
/>
<View style={[styles.view, commonStyles.baseShadow]}>
<AppText style={{fontWeight: '500', marginBottom: 10}}> <AppText style={{fontWeight: '500', marginBottom: 10}}>
Xác nhận ngày công của bạn:{' '} Xác nhận ngày công của bạn:{' '}
</AppText> </AppText>
......
src/screens/confirm_date/template/components/StatisticsConfirmWorkdays.js
View file @ 32fb9014
import Moment from 'moment'; import Moment from 'moment';
import React from 'react'; import React, {memo} from 'react';
import {Image, View} from 'react-native'; import {Image, View} from 'react-native';
import {IMAGES} from '../../../../values/images'; import {IMAGES} from '../../../../values/images';
import styles from '../../style'; import styles, {statisticsConfirmWorkdaysStyles} from '../../style';
import SelectDropdown from 'react-native-select-dropdown'; import SelectDropdown from 'react-native-select-dropdown';
import AppText from '../../../../components/AppText'; import AppText from '../../../../components/AppText';
import SelectDropdownComponent from '../../../../components/Select';
import commonStyles from '../../../../styles/commonStyles';
const StatisticsConfirmWorkdays = ({ const chartDaysOfWeek = ['T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'CN'];
dataChart, const typeChartColor = [
onChangeMonthFilter, {color: '#7d93ff', name: 'Trên 6h'},
dayPress, {color: '#9eaeff', name: '4-6h'},
}) => { {color: '#bec9ff', name: '2-4h'},
const typeChartColor = [ {color: '#dfe4ff', name: '0-2h'},
{color: '#7d93ff', name: 'Trên 6h'}, {color: '#f2f2f2', name: '0h'},
{color: '#9eaeff', name: '4-6h'}, ];
{color: '#bec9ff', name: '2-4h'}, const dayOfWeek = [
{color: '#dfe4ff', name: '0-2h'}, 'Monday',
{color: '#f2f2f2', name: '0h'}, 'Tuesday',
]; 'Wednesday',
'Thursday',
//console.log(dataChart?.data); 'Friday',
const dayOfWeek = [ 'Saturday',
'Monday', 'Sunday',
'Tuesday', ];
'Wednesday', const monthsOfYear = [
'Thursday', {label: 'Tháng 01', value: 'Tháng 01'},
'Friday', {label: 'Tháng 02', value: 'Tháng 02'},
'Saturday', {label: 'Tháng 03', value: 'Tháng 03'},
'Sunday', {label: 'Tháng 04', value: 'Tháng 04'},
]; {label: 'Tháng 05', value: 'Tháng 05'},
{label: 'Tháng 06', value: 'Tháng 06'},
return ( {label: 'Tháng 07', value: 'Tháng 07'},
<View style={{padding: 15, backgroundColor: 'white'}}> {label: 'Tháng 08', value: 'Tháng 08'},
<AppText style={[styles.title, {marginBottom: 20}]}> {label: 'Tháng 09', value: 'Tháng 09'},
Thống kê xác nhận ngày công của tôi {label: 'Tháng 10', value: 'Tháng 10'},
</AppText> {label: 'Tháng 11', value: 'Tháng 11'},
<SelectDropdown {label: 'Tháng 12', value: 'Tháng 12'},
data={[ ];
'Tháng 01', const StatisticsConfirmWorkdays = React.memo(
'Tháng 02', ({dataChart, onChangeMonthFilter, dayPress}) => {
'Tháng 03', return (
'Tháng 04', <View
'Tháng 05', style={[
'Tháng 06', statisticsConfirmWorkdaysStyles.container,
'Tháng 07', commonStyles.baseShadow,
'Tháng 08', ]}>
'Tháng 09', <AppText style={[styles.title, {marginBottom: 20}]}>
'Tháng 10', Thống kê xác nhận ngày công của tôi
'Tháng 11', </AppText>
'Tháng 12', <SelectDropdownComponent
]} selectData={monthsOfYear}
dropdownIconPosition={'right'} width={130}
defaultButtonText={'Tháng ' + (new Date().getMonth() + 1)} setValue={onChangeMonthFilter}
buttonStyle={styles.dropdown1BtnStyle} />
onSelect={selectedItem => onChangeMonthFilter(selectedItem)} <View style={{flexDirection: 'row', marginTop: 20}}>
dropdownStyle={styles.dropdown1DropdownStyle} <View style={styles.viewCalendar}>
rowStyle={styles.dropdown1RowStyle} <View style={styles.viewDayOfWeek}>
rowTextStyle={styles.dropdown1RowTxtStyle} {chartDaysOfWeek.map((day, i) => (
buttonTextStyle={styles.dropdown1BtnTxtStyle} <AppText key={day} style={{fontSize: 12, fontWeight: 'bold'}}>
renderDropdownIcon={isOpened => { {day}
return ( </AppText>
<Image ))}
source={isOpened ? IMAGES.IcUpArrow : IMAGES.IcArrowDown} </View>
style={{width: 20, height: 20}} {dataChart?.data.length > 0 &&
/> dataChart?.data?.map((item, index) => {
); let flag = false;
}} return (
/> <View key={index}>
{(index == 0 && (
<View style={{flexDirection: 'row', marginTop: 20}}> <View
<View style={styles.viewCalendar}> style={{
<View style={styles.viewDayOfWeek}> flexDirection: 'row',
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T2</AppText> }}>
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T3</AppText> {dayOfWeek.map((el, i) => {
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T4</AppText> if (flag) return true;
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T5</AppText> if (Moment(item.date).format('dddd') === el) {
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T6</AppText> flag = true;
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>T7</AppText> return (
<AppText style={{fontSize: 12, fontWeight: 'bold'}}>CN</AppText> <View
</View> key={i}
{dataChart?.data.length > 0 && style={{
dataChart?.data?.map((item, index) => { width: 30,
let flag = false; height: 30,
return ( backgroundColor:
<View key={index}> (parseInt(item.absent_hours) > 6 &&
{(index == 0 && ( '#7d93ff') ||
<View (parseInt(item.absent_hours) >= 4 &&
style={{ parseInt(item.absent_hours) <= 6 &&
flexDirection: 'row', '#7d93ff') ||
}}> (parseInt(item.absent_hours) >= 2 &&
{dayOfWeek.map((el, i) => { parseInt(item.absent_hours) <= 4 &&
if (flag) return true; '#7d93ff') ||
if (Moment(item.date).format('dddd') === el) { (parseInt(item.absent_hours) > 0 &&
flag = true; parseInt(item.absent_hours) <= 2 &&
return ( '#dfe4ff') ||
<View '#f2f2f2',
key={i} justifyContent: 'center',
style={{ alignItems: 'center',
width: 30, margin: 2,
height: 30, }}>
backgroundColor: {
(parseInt(item.absent_hours) > 6 && <AppText>{`${new Date(
'#7d93ff') || item.date,
(parseInt(item.absent_hours) >= 4 && ).getDate()}`}</AppText>
parseInt(item.absent_hours) <= 6 && }
'#7d93ff') || </View>
(parseInt(item.absent_hours) >= 2 && );
parseInt(item.absent_hours) <= 4 && } else {
'#7d93ff') || return (
(parseInt(item.absent_hours) > 0 && <View
parseInt(item.absent_hours) <= 2 && key={i}
'#dfe4ff') || style={{
'#f2f2f2', width: 30,
justifyContent: 'center', height: 30,
alignItems: 'center', backgroundColor: '#f2f2f2',
margin: 2, justifyContent: 'center',
}}> alignItems: 'center',
{ margin: 2,
<AppText>{`${new Date( }}></View>
item.date, );
).getDate()}`}</AppText> }
} })}
</View> </View>
); )) || (
} else { <View
return ( style={{
<View width: 30,
key={i} height: 30,
style={{ backgroundColor:
width: 30, (parseInt(item.absent_hours) > 6 && '#7d93ff') ||
height: 30, (parseInt(item.absent_hours) >= 4 &&
backgroundColor: '#f2f2f2', parseInt(item.absent_hours) <= 6 &&
justifyContent: 'center', '#7d93ff') ||
alignItems: 'center', (parseInt(item.absent_hours) >= 2 &&
margin: 2, parseInt(item.absent_hours) <= 4 &&
}}></View> '#7d93ff') ||
); (parseInt(item.absent_hours) > 0 &&
parseInt(item.absent_hours) <= 2 &&
'#dfe4ff') ||
'#f2f2f2',
justifyContent: 'center',
alignItems: 'center',
margin: 2,
}}>
{
<AppText>{`${new Date(
item.date,
).getDate()}`}</AppText>
} }
})} </View>
</View> )}
)) || ( </View>
<View );
style={{ })}
width: 30, </View>
height: 30, <View style={{marginLeft: 30}}>
backgroundColor: {typeChartColor &&
(parseInt(item.absent_hours) > 6 && '#7d93ff') || typeChartColor.map((item, i) => (
(parseInt(item.absent_hours) >= 4 && <View key={i} style={{flexDirection: 'row'}}>
parseInt(item.absent_hours) <= 6 && <View
'#7d93ff') || style={{
(parseInt(item.absent_hours) >= 2 && width: 20,
parseInt(item.absent_hours) <= 4 && height: 20,
'#7d93ff') || marginRight: 10,
(parseInt(item.absent_hours) > 0 && marginBottom: 2,
parseInt(item.absent_hours) <= 2 && backgroundColor: item.color,
'#dfe4ff') || }}
'#f2f2f2', />
justifyContent: 'center', <AppText style={{fontSize: 11}}>{item.name}</AppText>
alignItems: 'center',
margin: 2,
}}>
{<AppText>{`${new Date(item.date).getDate()}`}</AppText>}
</View>
)}
</View> </View>
); ))}
})} <View style={{marginTop: 10}}>
</View> {dayPress && <AppText>{dayPress}</AppText>}
<View style={{marginLeft: 30}}> </View>
{typeChartColor &&
typeChartColor.map((item, i) => (
<View key={i} style={{flexDirection: 'row'}}>
<View
style={{
width: 20,
height: 20,
marginRight: 10,
marginBottom: 2,
backgroundColor: item.color,
}}
/>
<AppText style={{fontSize: 11}}>{item.name}</AppText>
</View>
))}
<View style={{marginTop: 10}}>
{dayPress && <AppText>{dayPress}</AppText>}
</View> </View>
</View> </View>
</View> </View>
</View> );
); },
}; function areEquals(prevProps, nextProps) {
return prevProps.dataChart === nextProps.dataChart;
},
);
export default StatisticsConfirmWorkdays; export default memo(StatisticsConfirmWorkdays);
src/screens/home/style.js
View file @ 32fb9014
...@@ -5,17 +5,15 @@ const windowWidth = Dimensions.get('window').width; ...@@ -5,17 +5,15 @@ const windowWidth = Dimensions.get('window').width;
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { container: {
flex: 1, flex: 1,
padding: 10,
}, },
viewContent: { viewContent: {
borderRadius: 5, borderRadius: 5,
borderWidth: 1, borderWidth: 1,
width: '100%', width: windowWidth - 20,
borderColor: 'white', borderColor: colors.white,
backgroundColor: 'white', backgroundColor: colors.white,
alignSelf: 'center', alignSelf: 'center',
marginTop: 10, margin: 10,
marginBottom: 10,
}, },
bgQuote: { bgQuote: {
width: windowWidth - 10, width: windowWidth - 10,
...@@ -33,7 +31,7 @@ const styles = StyleSheet.create({ ...@@ -33,7 +31,7 @@ const styles = StyleSheet.create({
textAlign: 'right', textAlign: 'right',
}, },
calendarHolder: { calendarHolder: {
marginBottom: 10, margin: 10,
borderTopLeftRadius: 15, borderTopLeftRadius: 15,
borderTopRightRadius: 15, borderTopRightRadius: 15,
backgroundColor: 'white', backgroundColor: 'white',
......
src/screens/home/template/subViews/CalendarBirthday.js
View file @ 32fb9014
...@@ -8,6 +8,7 @@ import AppText from '../../../../components/AppText'; ...@@ -8,6 +8,7 @@ import AppText from '../../../../components/AppText';
import colors from '../../../../values/colors'; import colors from '../../../../values/colors';
import {IMAGES} from '../../../../values/images'; import {IMAGES} from '../../../../values/images';
import styles from '../../style'; import styles from '../../style';
import commonStyles from '../../../../styles/commonStyles';
const CalendarBirthday = React.memo( const CalendarBirthday = React.memo(
({ ({
birthdayOfUser, birthdayOfUser,
...@@ -17,7 +18,7 @@ const CalendarBirthday = React.memo( ...@@ -17,7 +18,7 @@ const CalendarBirthday = React.memo(
}) => { }) => {
const today = moment(moment()).format('YYYY-MM-DD'); // Today const today = moment(moment()).format('YYYY-MM-DD'); // Today
return ( return (
<View style={styles.viewContent}> <View style={[styles.viewContent, commonStyles.baseShadow]}>
<Image source={IMAGES.BgBirthdayHeader} style={styles.BgBirthday} /> <Image source={IMAGES.BgBirthdayHeader} style={styles.BgBirthday} />
{birthdayOfUser && ( {birthdayOfUser && (
<Swiper <Swiper
......
src/screens/home/template/subViews/QuotationList.js
View file @ 32fb9014
/* eslint-disable prettier/prettier */
import React from 'react'; import React from 'react';
import {Dimensions, Image, StyleSheet, View} from 'react-native'; import {Dimensions, Image, StyleSheet, View} from 'react-native';
import AppText from '../../../../components/AppText'; import AppText from '../../../../components/AppText';
import {IMAGES} from '../../../../values/images'; import {IMAGES} from '../../../../values/images';
import commonStyles from '../../../../styles/commonStyles';
const windowWidth = Dimensions.get('window').width; const windowWidth = Dimensions.get('window').width;
const Quotation = ({quotation}) => { const Quotation = ({quotation}) => {
return ( return (
<View style={styles.quotationContainer}> <View style={[styles.quotationContainer, commonStyles.baseShadow]}>
<View style={styles.quotationContent}> <View style={styles.quotationContent}>
<AppText style={styles.textQuote}> <AppText style={styles.textQuote}>
{quotation?.content {quotation?.content
...@@ -26,9 +26,9 @@ const styles = StyleSheet.create({ ...@@ -26,9 +26,9 @@ const styles = StyleSheet.create({
borderWidth: 1, borderWidth: 1,
borderColor: 'white', borderColor: 'white',
backgroundColor: 'white', backgroundColor: 'white',
marginTop: 10,
paddingTop: 30, paddingTop: 30,
borderRadius: 5, borderRadius: 5,
margin: 10,
}, },
quotationContent: { quotationContent: {
justifyContent: 'center', justifyContent: 'center',
......
src/screens/onleave/template/OnLeaveMainView.js
View file @ 32fb9014
...@@ -16,6 +16,7 @@ import config from '../../../config'; ...@@ -16,6 +16,7 @@ import config from '../../../config';
import {GifType, IMAGES} from '../../../values/images'; import {GifType, IMAGES} from '../../../values/images';
import styles from '../style'; import styles from '../style';
import RequestLeavesDays from './subViews/RequestLeavesDays'; import RequestLeavesDays from './subViews/RequestLeavesDays';
import commonStyles from '../../../styles/commonStyles';
const sliceColorRight = ['#6dc9ee', '#d9f4ff']; const sliceColorRight = ['#6dc9ee', '#d9f4ff'];
const selectDataDropDown = [ const selectDataDropDown = [
...@@ -35,7 +36,9 @@ const DataChartLeavesRestDays = React.memo( ...@@ -35,7 +36,9 @@ const DataChartLeavesRestDays = React.memo(
dataChart?.length && dataChart?.length &&
dataChart.map((item, index) => { dataChart.map((item, index) => {
return ( return (
<View key={index} style={styles.pieChartView}> <View
key={index}
style={[styles.pieChartView, commonStyles.baseShadow]}>
<View style={styles.pieItem}> <View style={styles.pieItem}>
<View style={{marginBottom: 10}}> <View style={{marginBottom: 10}}>
<AppText style={{textAlign: 'center', fontSize: 12}}> <AppText style={{textAlign: 'center', fontSize: 12}}>
...@@ -100,9 +103,9 @@ const AddNewLeavesSection = React.memo(props => { ...@@ -100,9 +103,9 @@ const AddNewLeavesSection = React.memo(props => {
const {onOpenRequestLeavesModal, navigateToConfirmDate, navigateToOverTime} = const {onOpenRequestLeavesModal, navigateToConfirmDate, navigateToOverTime} =
props; props;
return ( return (
<View style={styles.view}> <View style={[styles.view, commonStyles.baseShadow]}>
<AppText style={{fontWeight: '500', marginBottom: 10}}> <AppText style={{fontWeight: '500', marginBottom: 10}}>
Nghỉ phép của bạn:{' '} Nghỉ phép của bạn:
</AppText> </AppText>
<View style={{alignItems: 'center', justifyContent: 'center'}}> <View style={{alignItems: 'center', justifyContent: 'center'}}>
<TouchableOpacity <TouchableOpacity
...@@ -139,7 +142,7 @@ const ApproveRequestLeavesDays = React.memo( ...@@ -139,7 +142,7 @@ const ApproveRequestLeavesDays = React.memo(
onOpenDetailModal, onOpenDetailModal,
} = props; } = props;
return ( return (
<View style={styles.view}> <View style={[styles.view, commonStyles.baseShadow]}>
<View style={styles.approveRequestFilter}> <View style={styles.approveRequestFilter}>
<AppText style={styles.approveRequestTitle}> <AppText style={styles.approveRequestTitle}>
Duyệt yêu cầu nghỉ phép Duyệt yêu cầu nghỉ phép
...@@ -226,7 +229,7 @@ const LeavesRequest = React.memo( ...@@ -226,7 +229,7 @@ const LeavesRequest = React.memo(
props => { props => {
const {leaveRequestList, onRefreshLeaveList, onOpenDetailModal} = props; const {leaveRequestList, onRefreshLeaveList, onOpenDetailModal} = props;
return ( return (
<View style={[styles.view, {marginBottom: 30}]}> <View style={[styles.view, commonStyles.baseShadow, {marginBottom: 10}]}>
<View style={styles.myLeavesTitleView}> <View style={styles.myLeavesTitleView}>
<AppText <AppText
style={{ style={{
......
src/styles/commonStyles.js 0 → 100644
View file @ 32fb9014
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
View file @ 32fb9014
...@@ -32,5 +32,6 @@ const colors = { ...@@ -32,5 +32,6 @@ const colors = {
gray59: '#595959', gray59: '#595959',
grayE9: '#e9eaf9', grayE9: '#e9eaf9',
textColor: '#202121', textColor: '#202121',
baseShadowColor: '#000',
}; };
export default colors; export default colors;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment