Merge branch 'master' into fix/detox

# Conflicts: # src/navigation/home/AskAddress.js # yarn.lock
coopcycle · May 6, 2024 · ee62551 · ee62551
2 parents f44139e + 996e5a7
commit ee62551
Show file tree

Hide file tree

Showing 19 changed files with 190 additions and 117 deletions.
diff --git a/package.json b/package.json
@@ -44,6 +44,7 @@
     "buffer": "^6.0.3",
     "centrifuge": "^2.8.4",
     "color-hash": "^2.0.2",
+    "colorjs.io": "^0.5.0",
     "coopcycle-frontend-js": "git+https://[email protected]/coopcycle/coopcycle-frontend-js.git#3.0.0-beta.2",
     "countly-sdk-react-native-bridge": "^22.06.1",
     "currency-symbol-map": "^5.1.0",

diff --git a/src/components/RestaurantCard.js b/src/components/RestaurantCard.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 import i18n from '../i18n';
 import { TimingBadge } from '../navigation/checkout/components/RestaurantBadges';
+import { useBackgroundContainerColor } from '../styles/theme';
 import { isRestaurantClosed } from '../utils/checkout';
 import { RestaurantBadge } from './RestaurantBadge';
 import { RestaurantTag } from './RestaurantTag';
@@ -108,15 +109,12 @@ const styles = StyleSheet.create({
 });
 
 export const RestaurantCard = ({ restaurant }) => {
-  // const backgroundColor = useColorModeValue('white', '#121212');
-  // const backgroundColor = useColorModeValue('white', '#222222');
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
+  const backgroundColor = useBackgroundContainerColor();
   const isClosed = isRestaurantClosed(restaurant);
   const overlayBackgroundColor = useColorModeValue(
     'rgba(0,0,0,0.5)',
     'rgba(0,0,0,0.75)',
   );
-  //   const backgroundColor = useColorModeValue('white', '#FFFFFF16');
 
   return (
     <View style={[styles.item, { backgroundColor }]}>

diff --git a/src/components/RestaurantMenuHeader.js b/src/components/RestaurantMenuHeader.js
@@ -7,12 +7,12 @@ import {
 } from 'native-base';
 import React, { useEffect, useRef, useState } from 'react';
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { useBackgroundContainerColor, usePrimaryColor } from '../styles/theme';
 
 const styles = StyleSheet.create({
   sectionMenu: {
     display: 'flex',
     flexDirection: 'row',
-    backgroundColor: '#201E1E',
   },
   sectionMenuItem: {
     borderBottomWidth: 1,
@@ -31,13 +31,13 @@ const RestaurantMenuHeader = ({
 }) => {
   const [active, setActive] = useState(0);
   const ref = useRef(null);
-  const backgroundColor = useColorModeValue('#fff', '#201E1E');
+  const backgroundColor = useBackgroundContainerColor();
   const inactiveText = useColorModeValue('gray', 'rgba(255,255,255,.5)');
   const inactiveBorderBottomColor = useColorModeValue(
     'lightgray',
     'rgba(255,255,255,.25)',
   );
-  const activeBorderBottomColor = useColorModeValue('red', '#fff');
+  const activeBorderBottomColor = usePrimaryColor();
 
   const scrollToSection = index => {
     sectionRef.current.scrollToIndex({ index: index + 3, viewOffset: 16 });
@@ -90,7 +90,6 @@ const RestaurantMenuHeader = ({
     </View>
   );
 
-  const backgroundColor2 = useColorModeValue('#fff', '#201E1E');
   const loadingSkeleton = (
     <HStack
       style={[
@@ -104,7 +103,7 @@ const RestaurantMenuHeader = ({
           overflow: 'hidden',
           backgroundColor: '#ffffff',
         },
-        { backgroundColor: backgroundColor2 },
+        { backgroundColor: backgroundColor },
       ]}
       space={6}
       p="4">

diff --git a/src/components/RestaurantMenuItem.js b/src/components/RestaurantMenuItem.js
@@ -1,7 +1,8 @@
 import _ from 'lodash';
-import { Image, Text, View, useColorModeValue } from 'native-base';
+import { Image, Text, View } from 'native-base';
 import React from 'react';
 import { ActivityIndicator, StyleSheet, TouchableOpacity } from 'react-native';
+import { useBackgroundContainerColor } from '../styles/theme';
 import { formatPrice } from '../utils/formatting';
 import { DietBadge } from './RestaurantProductBadge';
 
@@ -80,7 +81,7 @@ const styles = StyleSheet.create({
 
 const RestaurantMenuItem = ({ item, onPress, isLoading }) => {
   const enabled = item.hasOwnProperty('enabled') ? item.enabled : true;
-  const backgroundColor = useColorModeValue('#fff', '#201E1E');
+  const backgroundColor = useBackgroundContainerColor();
 
   const diets = item.suitableForDiet
     ? item.suitableForDiet.map(element =>

diff --git a/src/components/RestaurantSearch.js b/src/components/RestaurantSearch.js
@@ -6,6 +6,7 @@ import { Platform, StyleSheet, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { TouchableNativeFeedback } from 'react-native-gesture-handler';
 import Svg, { Path } from 'react-native-svg';
+import { useBackgroundContainerColor, useBaseTextColor } from '../styles/theme';
 
 const textInputContainerHeight = 54;
 
@@ -62,8 +63,8 @@ const IconPin = ({ color }) => (
 
 function RestaurantSearch(props) {
   const navigation = useNavigation();
-  const backgroundColor = useColorModeValue('#fff', '#201E1E');
-  const fill = useColorModeValue('#201E1E', '#fff');
+  const backgroundColor = useBackgroundContainerColor();
+  const fill = useBaseTextColor();
   const borderColor = useColorModeValue(
     'rgba(0,0,0,.25)',
     'rgba(255,255,255,.25)',

diff --git a/src/components/RestaurantTag.js b/src/components/RestaurantTag.js
@@ -1,8 +1,9 @@
-import { Text, useColorModeValue } from 'native-base';
+import { Text } from 'native-base';
 import { StyleSheet, View } from 'react-native';
+import { useBackgroundHighlightColor } from '../styles/theme';
 
 export const RestaurantTag = ({ text }) => {
-  const backgroundColor = useColorModeValue('rgba(0,0,0,.05)', '#353030');
+  const backgroundColor = useBackgroundHighlightColor();
 
   const styles = StyleSheet.create({
     tag: {

diff --git a/src/navigation/checkout/ProductDetails/OptionHeader.js b/src/navigation/checkout/ProductDetails/OptionHeader.js
@@ -1,7 +1,8 @@
-import { Heading, Text, View, useColorModeValue } from 'native-base';
+import { Heading, Text, View } from 'native-base';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { StyleSheet } from 'react-native';
+import { useBackgroundContainerColor } from '../../../styles/theme';
 import {
   isMandatoryOption,
   parseOptionValuesRange,
@@ -28,7 +29,7 @@ const styles = StyleSheet.create({
 });
 
 export const OptionHeader = ({ option }) => {
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
+  const backgroundColor = useBackgroundContainerColor();
   const { t } = useTranslation();
 
   return (

diff --git a/src/navigation/checkout/ProductDetails/OptionValue.js b/src/navigation/checkout/ProductDetails/OptionValue.js
@@ -1,6 +1,11 @@
-import { Text, View, useColorModeValue } from 'native-base';
+import { Text, View } from 'native-base';
 import React from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
+import {
+  useBackgroundContainerColor,
+  useBaseTextColor,
+  useSecondaryTextColor,
+} from '../../../styles/theme';
 import { formatPrice } from '../../../utils/formatting';
 import {
   getPriceForOptionValue,
@@ -85,12 +90,9 @@ const RangeOption = ({
   onPressDecrement,
   quantity,
 }) => {
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
+  const backgroundColor = useBackgroundContainerColor();
+  const priceColor = useSecondaryTextColor();
 
-  const priceColor = useColorModeValue(
-    'rgba(0, 0, 0, .6)',
-    'rgba(255, 255,255, .6)',
-  );
   return (
     <View style={[styles.item, { gap: 16, backgroundColor }]}>
       <Range
@@ -119,8 +121,9 @@ const SimpleOption = ({
   index,
   sectionIndex,
 }) => {
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
-  const radioButtonColor = useColorModeValue('black', 'white');
+  const backgroundColor = useBackgroundContainerColor();
+  const radioButtonColor = useBaseTextColor();
+
   return (
     <TouchableOpacity
       style={[styles.item, { backgroundColor }]}

diff --git a/src/navigation/checkout/ProductDetails/Range.js b/src/navigation/checkout/ProductDetails/Range.js
@@ -1,7 +1,8 @@
-import { Text, View, useColorModeValue } from 'native-base';
+import { Text, View } from 'native-base';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
+import { useBackgroundHighlightColor } from '../../../styles/theme';
 
 const styles = StyleSheet.create({
   button: {
@@ -30,10 +31,8 @@ const styles = StyleSheet.create({
 });
 
 function Range({ onPressDecrement, quantity, onPressIncrement, minimum = 0 }) {
-  const buttonBackgroundColor = useColorModeValue(
-    'rgba(0, 0, 0, .1)',
-    'rgba(255, 255,255, .1)',
-  );
+  const buttonBackgroundColor = useBackgroundHighlightColor();
+
   return (
     <View style={styles.rangeButtonWrapper}>
       <TouchableOpacity

diff --git a/src/navigation/checkout/ProductDetails/index.js b/src/navigation/checkout/ProductDetails/index.js
@@ -1,10 +1,11 @@
 import _ from 'lodash';
-import { SectionList, View, useColorModeValue } from 'native-base';
+import { SectionList, View } from 'native-base';
 import React, { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import ItemSeparator from '../../../components/ItemSeparator';
 import { addItemV2 } from '../../../redux/Checkout/actions';
+import { useBackgroundContainerColor } from '../../../styles/theme';
 import { formatPrice } from '../../../utils/formatting';
 import { isAdditionalOption } from '../../../utils/product';
 import FooterButton from '../components/FooterButton';
@@ -23,7 +24,8 @@ const LIST_SECTION_OPTION = 'option';
 const PADDING = 24;
 
 function ListHeaderComponent({ product }) {
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
+  const backgroundColor = useBackgroundContainerColor();
+
   return (
     <>
       <ProductImage product={product} />
@@ -49,7 +51,7 @@ export default props => {
     increment,
     decrement,
   } = useProductOptionsBuilder(productOptions);
-  const backgroundColor = useColorModeValue('white', '#1a1a1a');
+  const backgroundColor = useBackgroundContainerColor();
 
   const list = useRef();
 

diff --git a/src/navigation/checkout/Search.js b/src/navigation/checkout/Search.js
@@ -2,7 +2,6 @@ import { Text } from 'native-base';
 import React, { Component } from 'react';
 import { withTranslation } from 'react-i18next';
 import { Dimensions, InteractionManager, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { connect } from 'react-redux';
 
 import { SceneMap, TabBar, TabView } from 'react-native-tab-view';
@@ -180,9 +179,7 @@ class RestaurantsPage extends Component {
       );
     } else {
       return (
-        <SafeAreaView
-          edges={['right', 'bottom', 'left']}
-          style={{ flexGrow: 1 }}>
+        <View style={{ flexGrow: 1 }}>
           <RestaurantList
             restaurants={restaurants}
             addressAsText={addressAsText}
@@ -194,7 +191,7 @@ class RestaurantsPage extends Component {
               });
             }}
           />
-        </SafeAreaView>
+        </View>
       );
     }
   }

diff --git a/src/navigation/checkout/components/RestaurantBadges.js b/src/navigation/checkout/components/RestaurantBadges.js
@@ -1,8 +1,9 @@
 import { IconClock, IconPlugX } from '@tabler/icons-react-native';
-import { Badge, HStack, Text, useColorModeValue } from 'native-base';
+import { Badge, HStack, Text } from 'native-base';
 import React from 'react';
 import { StyleSheet } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
+import { useBaseTextColor } from '../../../styles/theme';
 import {
   getNextShippingTimeAsText,
   isRestaurantClosed,
@@ -46,7 +47,7 @@ export const CategoryBadge = ({ label }) => {
 };
 
 export const TimingBadge = ({ restaurant }) => {
-  const color = useColorModeValue('#000', '#fff');
+  const color = useBaseTextColor();
 
   const isClosed = isRestaurantClosed(restaurant);
   const shippingTime = getNextShippingTimeAsText(restaurant);

diff --git a/src/navigation/checkout/components/RestaurantProfile.js b/src/navigation/checkout/components/RestaurantProfile.js
@@ -1,10 +1,15 @@
 import { IconMapPin } from '@tabler/icons-react-native';
 import i18next from 'i18next';
-import { Button, Image, Text, useColorModeValue } from 'native-base';
+import { Button, Image, Text } from 'native-base';
 import React from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 import { RestaurantBadge } from '../../../components/RestaurantBadge';
 import { RestaurantTag } from '../../../components/RestaurantTag';
+import {
+  useBackgroundContainerColor,
+  useBaseTextColor,
+  useSecondaryTextColor,
+} from '../../../styles/theme';
 import { TimingBadge } from './RestaurantBadges';
 
 const styles = StyleSheet.create({
@@ -21,8 +26,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-end',
     paddingLeft: 16,
-    // backgroundColor: '#fff0004F',
-    // width: '100%',
   },
   logoWrapper: {
     flexShrink: 0,
@@ -84,8 +87,9 @@ const styles = StyleSheet.create({
 });
 
 function RestaurantProfile({ restaurant, onInfo }) {
-  const backgroundColor = useColorModeValue('#fff', '#201E1E');
-  const stroke = useColorModeValue('#000', '#fff');
+  const backgroundColor = useBackgroundContainerColor();
+  const stroke = useBaseTextColor();
+  const textSecondary = useSecondaryTextColor();
 
   return (
     <View style={([styles.profile], { backgroundColor })}>
@@ -136,7 +140,9 @@ function RestaurantProfile({ restaurant, onInfo }) {
         </View>
         {restaurant.description ? (
           <View style={styles.description}>
-            <Text>{restaurant.description}</Text>
+            <Text style={{ color: textSecondary }}>
+              {restaurant.description}
+            </Text>
           </View>
         ) : null}
         {restaurant.tags?.length > 0 ? (

diff --git a/src/navigation/home/AskAddress.js b/src/navigation/home/AskAddress.js
@@ -6,13 +6,20 @@ import AddressAutocomplete from '../../components/AddressAutocomplete';
 import KeyboardAdjustView from '../../components/KeyboardAdjustView';
 import { newAddress } from '../../redux/Account/actions';
 import { searchRestaurantsForAddress } from '../../redux/Checkout/actions';
-import { lightGreyColor, primaryColor, whiteColor } from '../../styles/common';
+import {
+  useBackgroundColor,
+  useBaseTextColor,
+  useSecondaryTextColor,
+} from '../../styles/theme';
 
 const textInputContainerHeight = 54;
 const autocompleteListMarginBottom = 8;
 
 const AskAddress = props => {
   const [autocompleteListHeight, setAutocompleteListHeight] = useState(0);
+  const backgroundColor = useBackgroundColor();
+  const textColor = useBaseTextColor();
+  const secondaryTextColor = useSecondaryTextColor();
 
   const onLayout = event => {
     const currentFrame = event.nativeEvent.layout;
@@ -29,10 +36,12 @@ const AskAddress = props => {
   return (
     <KeyboardAdjustView
       testID="checkoutAskAddress"
-      style={{ backgroundColor: primaryColor, flex: 1, padding: 20 }}>
+      style={{ backgroundColor, flex: 1, padding: 20 }}>
       <Box style={{ flex: 1, justifyContent: 'flex-end', marginBottom: 20 }}>
-        <Heading color={whiteColor}>{props.t('WHERE_ARE_YOU')}</Heading>
-        <Text color={lightGreyColor}>{props.t('ASK_ADDRESS_DISCLAIMER')}</Text>
+        <Heading color={textColor}>{props.t('WHERE_ARE_YOU')}</Heading>
+        <Text color={secondaryTextColor}>
+          {props.t('ASK_ADDRESS_DISCLAIMER')}
+        </Text>
       </Box>
       <Box style={{ flex: 2 }} onLayout={onLayout}>
         <AddressAutocomplete
@@ -44,7 +53,7 @@ const AskAddress = props => {
           style={{
             height: textInputContainerHeight * 0.7,
             borderRadius: 3,
-            borderWidth: 0,
+            borderWidth: 1,
           }}
           flatListProps={{
             maxHeight: autocompleteListHeight,