feature: improvements + UI fixes

mobile-app/components/commons/LoaderComponent.tsx

@@ -1,5 +1,5 @@
 import {View, ActivityIndicator, ActivityIndicatorProps, ViewStyle, StyleProp} from 'react-native'
-import {tailwind} from "@tailwind";
+import {getColor, tailwind} from "@tailwind";
 
 interface LoaderComponentProps extends ActivityIndicatorProps {
  containerStyle?: StyleProp<ViewStyle>
@@ -8,7 +8,7 @@ export function LoaderComponent (props: LoaderComponentProps): JSX.Element {
     const {containerStyle, ...otherProps} = props
     return (
         <View style={[tailwind(''), containerStyle]}>
-           <ActivityIndicator {...otherProps} />
+           <ActivityIndicator {...otherProps}  />
         </View>
     )
 }
@@ -20,4 +20,4 @@ export function LoaderComponentScreen (): JSX.Element {
             <LoaderComponent size='large' />
         </View>
     )
-}
+}

mobile-app/components/commons/buttons/GenericButton.tsx

@@ -1,15 +1,17 @@
 import {StyleProp, Text, TextProps, TouchableOpacity, TouchableOpacityProps} from "react-native";
-import {tailwind} from "@tailwind";
+import {getColor, tailwind} from "@tailwind";
 import {LoaderComponent} from "@components/commons/LoaderComponent";
 
 interface  GenericButtonProps {
     onPress: () => void,
     label: string
     style?: StyleProp<TouchableOpacityProps>
-    backgroundColor: StyleProp<TouchableOpacityProps>
+    backgroundColor?: StyleProp<TouchableOpacityProps>
     labelColor?: StyleProp<TextProps>
     testId: string
     loading?: boolean
+
+    overRideBackgroundColor?: StyleProp<TouchableOpacityProps>
 }
 
 
@@ -21,6 +23,7 @@ export function GenericButton (props: Props): JSX.Element {
         backgroundColor,
         label,
         labelColor,
+        overRideBackgroundColor,
         style,
         ...rest
     } = props
@@ -31,11 +34,11 @@ export function GenericButton (props: Props): JSX.Element {
             style={[backgroundColor as any, tailwind('rounded-xl', {
                 'bg-brand-gray-700': props.disabled,
                 'flex flex-row justify-center w-full items-center bg-brand-gray-700': props.loading
-            }), style]}
+            }), style, tailwind('bg-primary-100'), overRideBackgroundColor]}
             {...rest}
         >
             <Text style={[tailwind('text-center text-lg py-3.5'), labelColor]}>{label}</Text>
-            {props.loading !== undefined && props.loading && <LoaderComponent size='small' style={tailwind('pl-2 text-white')} />}
+            {props.loading !== undefined && props.loading && <LoaderComponent color={getColor('white')} size='small' style={tailwind('pl-2 text-white')} />}
         </TouchableOpacity>
     )
 }

mobile-app/components/commons/inputs/ControlledTextInput.tsx

@@ -71,7 +71,7 @@ export function ControlledTextInputWithLabel(props: ControlledTextInputWithLabel
                     placeholderTextColor={getColor('brand-gray-800')}
                     style={[tailwind('rounded-lg bg-primary-200 flex lowercase flex-row items-center justify-center w-full p-3 text-xs font-medium text-black', {
                         'text-sm': Device.osName === 'iOS',
-                        'border-0.5 border-primary-500': inputFocus
+                        'border-0.5 border-primary-100': inputFocus
                     }), {
                         height: 50,
                         lineHeight:15

mobile-app/components/commons/inputs/TextInputWithLabel.tsx

@@ -57,7 +57,7 @@ export const  TextInputWithLabel =  forwardRef<any, TextInputWithLabelProps>(
                     ref={ref}
                     style={[tailwind('rounded-lg bg-primary-200 flex w-full items-center px-3 py-3 font-medium  text-lg text-brand-black-500', {
                         'text-base': Device.osName === 'iOS',
-                        'border-1.5 border-primary-500': inputFocus
+                        'border-1.5 border-primary-100': inputFocus
                     }), {
                         height: 50,
                         lineHeight: 15

mobile-app/screens/AppNavigator/OrdersNavigator/components/OrderCatergory.tsx

@@ -3,32 +3,41 @@ import {tailwind} from '@tailwind'
 import {NavigationProp, useNavigation} from "@react-navigation/native";
 import {OrderParamsList} from "@screens/AppNavigator/OrdersNavigator/OrdersNavigator";
 import {PropsWithChildren, useCallback, useMemo} from "react";
-
+import {RefreshControl, ScrollView} from 'react-native'
 import {DeliveredOrderCard, OrdersCard} from "@screens/AppNavigator/OrdersNavigator/components/OrderCard";
 import {EmptyAnimation} from "@components/lottie/Empty";
 import {DeliveryI, OrderI, OrderStatus, OrderType, VendorSettingsI} from '@nanahq/sticky';
-import {ScrollView} from 'react-native-gesture-handler';
-import {RootState, useAppSelector} from "@store/index";
+import {RootState, useAppDispatch, useAppSelector} from "@store/index";
+import {fetchOrders} from "@store/orders.reducer";
 
 interface OrderCatergoryProps {
     vendorSetting?: VendorSettingsI
     orders: OrderI[]
     type: OrderStatus | OrderType
 
+    fetchingOrders: boolean
+
 }
 export function OrderCategory (props: PropsWithChildren<OrderCatergoryProps>): JSX.Element {
     const navigation = useNavigation<NavigationProp<OrderParamsList>>()
     const {deliveries, hasFetchedDeliveries} = useAppSelector((state: RootState) => state.deliveries )
+    const dispatch = useAppDispatch()
     const onPress = (order: OrderI): void => navigation.navigate("GetOrder", {order})
 
     const findDeliveryInfo = useCallback<(id: string) => DeliveryI | undefined>((id: string) => {
         return deliveries.find(d => d.order._id === id)
     }, [hasFetchedDeliveries, deliveries ])
 
+
+    const handleRefresh = () => {
+        dispatch(fetchOrders())
+    }
+
     return (
 
-            <ScrollView style={[tailwind('px-3 h-full'),{
-            }]}>
+            <ScrollView
+                refreshControl={<RefreshControl refreshing={props.fetchingOrders} onRefresh={handleRefresh} />}
+                style={tailwind('px-3 h-full')}>
                 {props.orders.length === 0 && (
                     <EmptyAnimation text='No orders yet.' />
                 )}

mobile-app/screens/AppNavigator/OrdersNavigator/screens/Orders.screen.tsx

@@ -1,10 +1,10 @@
 import {getColor, tailwind} from '@tailwind'
 import {OrderCategory} from "@screens/AppNavigator/OrdersNavigator/components/OrderCatergory";
-import {RootState, useAppDispatch, useAppSelector} from "@store/index";
+import {RootState, useAppSelector} from "@store/index";
 import { useCallback, useEffect, useRef, useState} from "react";
 import {OrderHeaderStatus} from "@screens/AppNavigator/OrdersNavigator/components/OrderHeader";
 import {SceneMap, TabBar, TabView} from "react-native-tab-view";
-import {useWindowDimensions, View, Text, ScrollView, RefreshControl} from "react-native";
+import {useWindowDimensions, View} from "react-native";
 import * as Location from "expo-location";
 import {useBottomSheetModal} from "@gorhom/bottom-sheet";
 import { AddBankModal as LocationModal} from "@screens/AppNavigator/SettingsNavigator/components/AddBankModal";
@@ -18,14 +18,10 @@ import {OrderI, OrderStatus, VendorApprovalStatusEnum, VendorOperationType} from
 import {StackScreenProps} from "@react-navigation/stack";
 import {OrderParamsList} from "@screens/AppNavigator/OrdersNavigator/OrdersNavigator";
 import {OrderScreenName} from "@screens/AppNavigator/OrdersNavigator/OrderScreenName.enum";
-import {fetchOrders} from "@store/orders.reducer";
 
 const LOCATION_MODAL_NAME = 'LOCATION_MODAL'
 const DATA = (type: VendorOperationType)  => {
-    const defaultData = [
-
-    ]
-
+    const defaultData = []
 
     if(type === 'ON_DEMAND') {
         defaultData.push({key: 'demand', title: 'Instant'})
@@ -46,9 +42,8 @@ export function OrdersScreen ({navigation}: OrdersScreenNavigationProps): JSX.El
     // State selectors
     const {orders, hasFetchedOrders, fetchingOrders} = useAppSelector((state: RootState) => state.orders )
     const {profile, hasFetchedProfile} = useAppSelector((state: RootState) => state.profile )
-    const dispatch = useAppDispatch()
-    const [index, setIndex] = useState<number>(DATA(profile.settings?.operations?.deliveryType ?? 'PRE_ORDER').findIndex(d => d.key.includes('pre') || d.key.includes('demand') ));
-    const [routes] = useState<Array<{key: string, title: string}>>(DATA(profile.settings?.operations?.deliveryType ?? 'PRE_ORDER'));
+    const [index, setIndex] = useState<number>(DATA(profile.settings?.operations?.deliveryType ?? 'PRE_AND_INSTANT').findIndex(d => d.key.includes('demand') || d.key.includes('pre') ));
+    const [routes, setRoutes] = useState<Array<{key: string, title: string}>>(DATA(profile.settings?.operations?.deliveryType ?? 'PRE_ORDER'));
     const [showProfileCompleteMsg, setShowProfileCompleteMsg]  = useState<boolean>(false)
     const [showAccountApprovalMsg, setShowAccountApprovalMsg]  = useState<boolean>(false)
 
@@ -58,6 +53,14 @@ export function OrdersScreen ({navigation}: OrdersScreenNavigationProps): JSX.El
     const { dismiss } = useBottomSheetModal();
 
 
+
+    useEffect(() => {
+        if(profile.settings?.operations?.deliveryType !== undefined) {
+            setIndex(DATA(profile.settings?.operations?.deliveryType).findIndex(d => d.key.includes('pre') || d.key.includes('demand') ))
+            setRoutes(DATA(profile.settings?.operations?.deliveryType))
+        }
+    }, [profile.settings?.operations?.deliveryType])
+
     useEffect(() => {
         navigation.setOptions({
             headerLeft: () => <></>,
@@ -96,33 +99,34 @@ export function OrdersScreen ({navigation}: OrdersScreenNavigationProps): JSX.El
 
 
     const renderScene = SceneMap<any>({
-
         delivered:  () => <OrderCategory
+            fetchingOrders={fetchingOrders}
             vendorSetting={profile.settings}
             orders={getFulfilledOrders()}
             type={OrderStatus.FULFILLED}
         />,
         courier:  () => <OrderCategory
+            fetchingOrders={fetchingOrders}
             vendorSetting={profile.settings}
             orders={readyForPickup()}
             type={OrderStatus.COURIER_PICKUP}
         />,
 
         pre:  () => <OrderCategory
+            fetchingOrders={fetchingOrders}
             vendorSetting={profile.settings}
 
         orders={getPreOrders()}
         type={'PRE_ORDER'}
     />,
     demand:  () => <OrderCategory
+        fetchingOrders={fetchingOrders}
         vendorSetting={profile.settings}
     orders={getOnDemandOrders()}
     type={'ON_DEMAND'}
 />
    });
 
-
-
     useEffect(() => {
         void openModal()
     }, [])
@@ -183,15 +187,11 @@ export function OrdersScreen ({navigation}: OrdersScreenNavigationProps): JSX.El
         return <LoaderComponentScreen />
     }
 
-    const handleRefresh = () => {
-        dispatch(fetchOrders())
-    }
 
 
     return (
      <>
-         <ScrollView
-             refreshControl={<RefreshControl refreshing={fetchingOrders} onRefresh={handleRefresh} />}
+         <View
              style={tailwind('w-full bg-white h-full flex-col flex pb-5')}
          >
              <View testID="OrdersScreen" style={tailwind('px-3.5 py-5')}>
@@ -216,7 +216,7 @@ export function OrdersScreen ({navigation}: OrdersScreenNavigationProps): JSX.El
                  onIndexChange={setIndex}
                  initialLayout={{ width: layout.width }}
              />
-         </ScrollView>
+         </View>
          <LocationModal promptModalName={LOCATION_MODAL_NAME} modalRef={bottomSheetModalRef}>
              <LocationModalContent requestLocation={requestLocation} />
          </LocationModal>

mobile-app/screens/OnboardingNavigator/screens/Onboarding.screen.tsx

@@ -43,15 +43,15 @@ export function OnboardingScreen(): JSX.Element {
                             onPress={() => navigator.navigate(OnboardingScreenName.SIGN_UP_PROFILE)}
                             label="Sign up"
                             labelColor={tailwind('text-white text-2xl w-full font-normal')}
-                            backgroundColor={tailwind('bg-black w-1/2')}
+                            overRideBackgroundColor={tailwind('bg-black w-1/2')}
                             testId="GenericButton.Onboarding.Continue"
                         />
                         <View style={tailwind('w-4')} />
                         <GenericButton
                             onPress={() => navigator.navigate(OnboardingScreenName.LOGIN)}
                             label="Log in"
                             labelColor={tailwind('text-black text-2xl font-normal')}
-                            backgroundColor={tailwind('bg-white w-1/2')}
+                            overRideBackgroundColor={tailwind('bg-white w-1/2')}
                             testId="GenericButton.Onboarding.Continue"
                         />
                     </View>

mobile-app/styles.json

@@ -5808,10 +5808,10 @@
 	},
 	"border-primary-100": {
 		"--tw-border-opacity": 1,
-		"borderTopColor": "rgba(237, 248, 238, var(--tw-border-opacity))",
-		"borderRightColor": "rgba(237, 248, 238, var(--tw-border-opacity))",
-		"borderBottomColor": "rgba(237, 248, 238, var(--tw-border-opacity))",
-		"borderLeftColor": "rgba(237, 248, 238, var(--tw-border-opacity))"
+		"borderTopColor": "rgba(70, 154, 220, var(--tw-border-opacity))",
+		"borderRightColor": "rgba(70, 154, 220, var(--tw-border-opacity))",
+		"borderBottomColor": "rgba(70, 154, 220, var(--tw-border-opacity))",
+		"borderLeftColor": "rgba(70, 154, 220, var(--tw-border-opacity))"
 	},
 	"border-primary-200": {
 		"--tw-border-opacity": 1,
@@ -6548,7 +6548,7 @@
 	},
 	"bg-primary-100": {
 		"--tw-bg-opacity": 1,
-		"backgroundColor": "rgba(237, 248, 238, var(--tw-bg-opacity))"
+		"backgroundColor": "rgba(70, 154, 220, var(--tw-bg-opacity))"
 	},
 	"bg-primary-200": {
 		"--tw-bg-opacity": 1,
@@ -8230,7 +8230,7 @@
 	},
 	"text-primary-100": {
 		"--tw-text-opacity": 1,
-		"color": "rgba(237, 248, 238, var(--tw-text-opacity))"
+		"color": "rgba(70, 154, 220, var(--tw-text-opacity))"
 	},
 	"text-primary-200": {
 		"--tw-text-opacity": 1,
@@ -8981,7 +8981,7 @@
 	},
 	"ring-primary-100": {
 		"--tw-ring-opacity": 1,
-		"--tw-ring-color": "rgba(237, 248, 238, var(--tw-ring-opacity))"
+		"--tw-ring-color": "rgba(70, 154, 220, var(--tw-ring-opacity))"
 	},
 	"ring-primary-200": {
 		"--tw-ring-opacity": 1,
@@ -9503,7 +9503,7 @@
 		"--tw-ring-offset-color": "#F2FAFE"
 	},
 	"ring-offset-primary-100": {
-		"--tw-ring-offset-color": "#edf8ee"
+		"--tw-ring-offset-color": "#469ADC"
 	},
 	"ring-offset-primary-200": {
 		"--tw-ring-offset-color": "#DFE5E7"

mobile-app/tailwind.config.js

@@ -25,7 +25,7 @@ module.exports = {
           900: "#F2FAFE",
         },
         primary: {
-          100: '#edf8ee',
+          100: '#469ADC',
           200: '#DFE5E7',
           300: '#a3dbac',
           400: '#7fcd8b',