Commit 6e9a6de1 by tungnq

TODO: Chỉnh sửa một xíu giao diện drawer navigation

parent 94256c6f
...@@ -30,9 +30,8 @@ const DrawerNavigatorView = (props) => { ...@@ -30,9 +30,8 @@ const DrawerNavigatorView = (props) => {
<TouchableOpacity <TouchableOpacity
style={styles.headerBackButton} style={styles.headerBackButton}
onPress={onPress} onPress={onPress}
activeOpacity={0.7}
> >
<Image source={ArrowLeft} width={20} height={20} /> <Image source={R.images.icBack} style={{width: 25, height: 20}}/>
</TouchableOpacity> </TouchableOpacity>
); );
...@@ -59,7 +58,7 @@ const DrawerNavigatorView = (props) => { ...@@ -59,7 +58,7 @@ const DrawerNavigatorView = (props) => {
const MenuButton = ({ onPress }) => ( const MenuButton = ({ onPress }) => (
<TouchableOpacity style={styles.menuButton} onPress={onPress}> <TouchableOpacity style={styles.menuButton} onPress={onPress}>
<Image source={IconMenu} width={24} height={24} /> <Image source={IconMenu} style={{width: 25, height: 20}} tintColor={R.colors.white}/>
</TouchableOpacity> </TouchableOpacity>
); );
...@@ -74,6 +73,9 @@ const DrawerNavigatorView = (props) => { ...@@ -74,6 +73,9 @@ const DrawerNavigatorView = (props) => {
if (route.name === ScreenName.FILTERWEEK) { if (route.name === ScreenName.FILTERWEEK) {
return `Tháng ${currentDate.getMonth() + 1}`; return `Tháng ${currentDate.getMonth() + 1}`;
} }
if (route.name === ScreenName.FILTERMONTH) {
return `Tháng ${currentDate.getMonth() + 1}`;
}
...@@ -85,6 +87,7 @@ const DrawerNavigatorView = (props) => { ...@@ -85,6 +87,7 @@ const DrawerNavigatorView = (props) => {
<Text style={styles.headerTitleText}> <Text style={styles.headerTitleText}>
{getHeaderTitle()} {getHeaderTitle()}
</Text> </Text>
<Image source={R.images.icDrop} style={{width: 25, height: 20}} tintColor={R.colors.white}/>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
...@@ -115,13 +118,15 @@ const DrawerNavigatorView = (props) => { ...@@ -115,13 +118,15 @@ const DrawerNavigatorView = (props) => {
), ),
headerTitle: () => ( headerTitle: () => (
<HeaderTitle navigation={navigation} route={route} /> <View style={styles.headerTitleContainer}>
<HeaderTitle navigation={navigation} route={route} />
</View>
), ),
headerRight: () => ( headerRight: () => (
<View style={styles.headerRightContainer}> <View style={styles.headerRightContainer}>
<TouchableOpacity style={styles.searchButton}> <TouchableOpacity style={styles.searchButton}>
<Image source={IconSearch} width={20} height={20} /> <Image source={IconSearch} style={{width: 25, height: 25}} tintColor={R.colors.white}/>
</TouchableOpacity> </TouchableOpacity>
<View style={styles.avatarButton} /> <View style={styles.avatarButton} />
</View> </View>
...@@ -174,13 +179,10 @@ const mapStateToProps = (state) => ({ ...@@ -174,13 +179,10 @@ const mapStateToProps = (state) => ({
const styles = StyleSheet.create({ const styles = StyleSheet.create({
headerBackButton: { headerBackButton: {
padding: 10, marginLeft:15
marginLeft: 10,
borderRadius: 8,
}, },
menuButton: { menuButton: {
padding: 10, marginLeft: 15,
marginLeft: 5,
}, },
headerLeftContainer: { headerLeftContainer: {
flexDirection: "row", flexDirection: "row",
...@@ -204,12 +206,16 @@ const styles = StyleSheet.create({ ...@@ -204,12 +206,16 @@ const styles = StyleSheet.create({
headerTitleButton: { headerTitleButton: {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
flexDirection: 'row',
}, },
headerTitleText: { headerTitleText: {
fontSize: R.sizes.lg, fontSize: R.sizes.lg,
color: R.colors.white, color: R.colors.white,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
}, },
headerTitleContainer: {
flexDirection: 'row',
},
}); });
export default connect(mapStateToProps, {})(DrawerNavigatorView); export default connect(mapStateToProps, {})(DrawerNavigatorView);
\ No newline at end of file
...@@ -93,8 +93,8 @@ const CustomDrawerContent = (props) => { ...@@ -93,8 +93,8 @@ const CustomDrawerContent = (props) => {
onValueChange={(newValue) => handleCheckboxChange(config.key, newValue)} onValueChange={(newValue) => handleCheckboxChange(config.key, newValue)}
label={config.label} label={config.label}
labelSpacing={30} labelSpacing={30}
size={25} size={20}
labelSize={R.sizes.lg} labelSize={R.sizes.md}
checkedColor={R.colors.black} checkedColor={R.colors.black}
marginBottom={20} marginBottom={20}
labelFontFamily={R.fonts.fontRegular} labelFontFamily={R.fonts.fontRegular}
...@@ -122,6 +122,7 @@ const CustomDrawerContent = (props) => { ...@@ -122,6 +122,7 @@ const CustomDrawerContent = (props) => {
source={item.iconSource} source={item.iconSource}
style={styles.filterIcon} style={styles.filterIcon}
resizeMode="contain" resizeMode="contain"
tintColor={isSelected ? R.colors.white : R.colors.black}
/> />
<Text style={[ <Text style={[
styles.filterLabel, styles.filterLabel,
...@@ -196,14 +197,14 @@ const styles = StyleSheet.create({ ...@@ -196,14 +197,14 @@ const styles = StyleSheet.create({
}, },
filterLabel: { filterLabel: {
marginLeft: 30, marginLeft: 30,
fontSize: R.sizes.lg, fontSize: R.sizes.md,
color: R.colors.black, color: R.colors.black,
flex: 1, flex: 1,
fontFamily: R.fonts.fontMedium, fontFamily: R.fonts.fontMedium,
fontWeight: '400', fontWeight: '400',
}, },
filterLabelSelected: { filterLabelSelected: {
color: R.colors.blue, color: R.colors.white,
fontFamily: R.fonts.fontSemiBold, fontFamily: R.fonts.fontSemiBold,
}, },
divider: { divider: {
......
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