Skip to content

Commit

Permalink
Update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pierre-LHOSTE
Pierre-LHOSTE committed Jun 19, 2024
1 parent 0e19519 commit 0f46e67
Show file tree
Hide file tree
Showing 2 changed files with 91 additions and 39 deletions.
23 changes: 18 additions & 5 deletions src/navigation/store/NewDeliveryForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,23 @@ import {
} from '../../redux/Store/actions';
import { selectStore, selectTimeSlots } from '../../redux/Store/selectors';
import TimeSlotSelector from './components/TimeSlotSelector';
import {
useBackgroundColor,
useBackgroundContainerColor,
useBackgroundHighlightColor,
} from '../../styles/theme';

function NewDelivery(props) {
const [isDateTimePickerVisible, setIsDateTimePickerVisible] = useState(false);
const [selectedTimeSlot, setSelectedTimeSlot] = useState('');
const backgroundContainerColor = useBackgroundContainerColor();
const backgroundColor = useBackgroundColor();
const backgroundHighlightColor = useBackgroundHighlightColor();

const inputStyles = {
backgroundColor: backgroundContainerColor,
borderColor: backgroundHighlightColor,
};

useEffect(() => {
InteractionManager.runAfterInteractions(() => {
Expand Down Expand Up @@ -223,15 +236,15 @@ function NewDelivery(props) {
<VStack
flex={1}
justifyContent="space-between"
style={{ backgroundColor: 'red' }}>
style={{ backgroundColor }}>
<Box p="3">
<View style={[styles.formGroup]}>
<Text style={styles.label}>
{props.t('STORE_NEW_DELIVERY_ADDRESS')}
</Text>
<Input
variant="filled"
style={[styles.textInput]}
style={[styles.textInput, inputStyles]}
value={address.streetAddress}
isReadOnly={true}
/>
Expand All @@ -241,7 +254,7 @@ function NewDelivery(props) {
{props.t('STORE_NEW_DELIVERY_PHONE_NUMBER')}
</Text>
<Input
style={[styles.textInput]}
style={[styles.textInput, inputStyles]}
autoCorrect={false}
keyboardType="phone-pad"
returnKeyType="done"
Expand All @@ -265,7 +278,7 @@ function NewDelivery(props) {
{props.t('STORE_NEW_DELIVERY_CONTACT_NAME')}
</Text>
<Input
style={[styles.textInput]}
style={[styles.textInput, inputStyles]}
autoCorrect={false}
returnKeyType="done"
onChangeText={handleChange('address.contactName')}
Expand All @@ -286,7 +299,7 @@ function NewDelivery(props) {
{props.t('STORE_NEW_DELIVERY_COMMENTS')}
</Text>
<Input
style={[styles.textInput, styles.textarea]}
style={[styles.textInput, styles.textarea, inputStyles]}
autoCorrect={false}
multiline={true}
onChangeText={handleChange('address.description')}
Expand Down
107 changes: 73 additions & 34 deletions src/navigation/store/components/TimeSlotSelector.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,15 @@ import { Button, Text, View } from 'native-base';
import React from 'react';
import { useTranslation } from 'react-i18next';
import { StyleSheet } from 'react-native';
import { usePrimaryColor } from '../../../styles/theme';
import {
useBackgroundColor,
useBackgroundContainerColor,
useBackgroundHighlightColor,
useBaseTextColor,
usePrimaryColor,
} from '../../../styles/theme';
import RNPickerSelect from 'react-native-picker-select';
import { IconChevronDown } from '@tabler/icons-react-native';

const styles = StyleSheet.create({
label: {
Expand All @@ -20,6 +27,31 @@ const styles = StyleSheet.create({
alignItems: 'center',
marginBottom: 10,
},
button: {
flex: 1,
borderWidth: 1,
},
errorText: {
color: 'red',
},
});

const selectStyles = {
borderWidth: 1,
borderRadius: 4,
paddingRight: 30,
paddingVertical: 12,
paddingHorizontal: 10,
fontSize: 16,
};

const pickerSelectStyles = StyleSheet.create({
inputIOS: {
...selectStyles,
},
inputAndroid: {
...selectStyles,
},
});

export default function TimeSlotSelector({
Expand All @@ -34,6 +66,10 @@ export default function TimeSlotSelector({
}) {
const { t } = useTranslation();
const primaryColor = usePrimaryColor();
const backgroundContainerColor = useBackgroundContainerColor();
const backgroundColor = useBackgroundColor();
const backgroundHighlightColor = useBackgroundHighlightColor();
const textColor = useBaseTextColor();

return (
<View style={[styles.formGroup]}>
Expand All @@ -43,19 +79,22 @@ export default function TimeSlotSelector({
return (
<Button
onPress={() => updateSelectedTimeSlot(timeSlot)}
style={{
backgroundColor:
selectedTimeSlot === timeSlot.name
? primaryColor
: 'transparent',
borderColor:
selectedTimeSlot === timeSlot.name
? 'transparent'
: '#878787',
borderWidth: 1,
}}
style={[
{
backgroundColor:
selectedTimeSlot === timeSlot.name
? primaryColor
: 'transparent',
borderColor:
selectedTimeSlot === timeSlot.name
? 'transparent'
: '#878787',
},
styles.button,
]}
key={index}>
<Text
numberOfLines={1}
style={{
color:
selectedTimeSlot === timeSlot.name ? 'white' : '#878787',
Expand All @@ -67,7 +106,28 @@ export default function TimeSlotSelector({
})}
</View>
<RNPickerSelect
style={pickerSelectStyles}
style={{
...pickerSelectStyles,
inputIOS: {
...pickerSelectStyles.inputIOS,
backgroundColor: backgroundContainerColor,
borderColor: backgroundHighlightColor,
color: textColor,
},
inputAndroid: {
...pickerSelectStyles.inputAndroid,
backgroundColor: backgroundContainerColor,
borderColor: backgroundHighlightColor,
color: textColor,
},
iconContainer: {
top: 12,
right: 12,
},
}}
Icon={() => {
return <IconChevronDown color={'gray'} />;
}}
onValueChange={value => {
if (!value) return;
setFieldValue('timeSlot', value.key);
Expand All @@ -89,24 +149,3 @@ export default function TimeSlotSelector({
</View>
);
}

const selectStyles = {
backgroundColor: '#FAFAFA',
borderColor: '#E3E3E3',
borderWidth: 1,
borderRadius: 4,
color: '#6B6B6B',
paddingRight: 30,
paddingVertical: 12,
paddingHorizontal: 10,
fontSize: 16,
};

const pickerSelectStyles = StyleSheet.create({
inputIOS: {
...selectStyles,
},
inputAndroid: {
...selectStyles,
},
});

0 comments on commit 0f46e67

Please sign in to comment.