fix: ui fixes

nanahq · Mar 3, 2024 · 0fa0a4b · 0fa0a4b
1 parent a0f31f9
commit 0fa0a4b
Show file tree

Hide file tree

Showing 43 changed files with 374 additions and 302 deletions.
diff --git a/mobile-app/App.tsx b/mobile-app/App.tsx
@@ -41,6 +41,7 @@ export default function App() {
   const customToast = {
     app_toast_success: (toast: ToastProps) => <AppToast  type="success" toast={toast} />,
     app_toast_error: (toast: ToastProps) => <AppToast type="error" toast={toast} />,
+    app_toast_warning: (toast: ToastProps) => <AppToast type="warning" toast={toast} />,
   };
 
   return (

diff --git a/mobile-app/components/commons/AppToast.tsx b/mobile-app/components/commons/AppToast.tsx
@@ -5,14 +5,15 @@ import { IconComponent } from './IconComponent';
 
 interface AppToastProps {
     toast: ToastProps;
-    type: "success" | "error"
+    type: "success" | "error" | "warning"
   }
 
 export function AppToast (props: AppToastProps): JSX.Element {
     return  (
         <View style={tailwind('py-4 w-3/4 px-4 mt-16 rounded-lg flex items-center justify-center', {
-            'bg-success-500': props.type === 'success',
+            'bg-nana-lime': props.type === 'success',
             'bg-error-500': props.type === 'error',
+            'bg-warning-500': props.type === 'warning'
         })}>
            <View style={tailwind('flex flex-row w-full items-center justify-center')}>
            <Text style={tailwind('text-sm font-bold  text-white')}>{props.toast.message as string}</Text>

diff --git a/mobile-app/components/commons/buttons/GenericButton.tsx b/mobile-app/components/commons/buttons/GenericButton.tsx
@@ -34,7 +34,7 @@ export function GenericButton (props: Props): JSX.Element {
             }), style]}
             {...rest}
         >
-            <Text style={[tailwind('font-semibold text-center text-lg py-3.5'), labelColor]}>{label}</Text>
+            <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')} />}
         </TouchableOpacity>
     )

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/ListingsNavigator.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/ListingsNavigator.tsx
@@ -40,13 +40,10 @@ export function ListingsNavigator(): JSX.Element {
                 headerLeft: () => <></>,
                 headerTitle: 'Listings',
                 headerTitleAlign: 'left',
-                headerLeftContainerStyle: tailwind('pl-5'),
-                headerTitleStyle: tailwind('font-semibold text-brand-black-500 text-lg'),
+                headerTitleStyle: tailwind('text-xl'),
                 headerStyle: [tailwind(''), {
                     shadowOpacity: 8,
-                    height: insets.top + 40
                 }],
-                headerBackTitleVisible: false,
                 headerShown: true
             }}
         >
@@ -74,7 +71,10 @@ export function ListingsNavigator(): JSX.Element {
                 name={ListingsScreenName.ADD_CATEGORY}
                 options={{
                     headerShown: true,
-                    headerTitle: 'New Category'
+                    headerTitle: 'Add Category',
+                    headerBackTitleVisible: false,
+                    headerTitleAlign: 'left',
+                    headerTitleStyle: tailwind('text-xl'),
                 }}
             />
 
@@ -83,7 +83,9 @@ export function ListingsNavigator(): JSX.Element {
                 name={ListingsScreenName.SCHEDULED}
                 options={{
                     headerShown: true,
-                    headerTitle: 'New Scheduled Listing'
+                    headerTitle: 'New Scheduled Listing',
+                    headerTitleAlign: 'left',
+                    headerTitleStyle: tailwind('text-xl'),
                 }}
             />
             <ListingsStack.Screen
@@ -93,7 +95,7 @@ export function ListingsNavigator(): JSX.Element {
                     headerShown: true,
                     headerTitle: 'Add Menu Option',
                     headerBackTitleVisible: false,
-                    headerTitleAlign: 'center',
+                    headerTitleAlign: 'left',
                     headerTitleStyle: tailwind('text-xl'),
                 }}
             />
@@ -103,7 +105,10 @@ export function ListingsNavigator(): JSX.Element {
                 name={ListingsScreenName.ADD_LISTING}
                 options={{
                     headerShown: true,
-                    headerTitle: 'Add Menu'
+                    headerTitle: 'Add Menu',
+                    headerBackTitleVisible: false,
+                    headerTitleAlign: 'left',
+                    headerTitleStyle: tailwind('text-xl'),
                 }}
             />
             <ListingsStack.Screen

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddCategory.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddCategory.tsx
@@ -72,6 +72,13 @@ export function AddCategory ({route, navigation}: AddCategoryNavProps): JSX.Elem
         }
     }, [])
 
+
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft: () => <GoBackButton onPress={() => navigation.goBack()} />
+        })
+    }, [])
+
     const toggleSwitch = (): void => {
         setIsLive((prev) => !prev)
     }
@@ -168,8 +175,7 @@ return true
         return false
     }
     return (
-        <ScrollView style={tailwind('h-full px-5')}>
-            <GoBackButton onPress={() => navigation.goBack()}  style={tailwind('mt-5 mb-1')}/>
+        <ScrollView style={tailwind('flex-1 bg-white px-5')}>
             <View style={tailwind('flex flex-col mt-5')}>
                 <TextInputWithLabel
                     defaultValue={name}

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddMenu.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddMenu.tsx
@@ -1,5 +1,5 @@
 import {Dimensions, KeyboardAvoidingView, Pressable, ScrollView, Switch, Text, View} from 'react-native'
-import {useRef, useState} from "react";
+import {useEffect, useRef, useState} from "react";
 
 import {getColor, tailwind} from '@tailwind'
 import {GoBackButton} from "@screens/AppNavigator/SettingsNavigator/components/Goback";
@@ -30,9 +30,11 @@ import {TextInputWithLabel} from "@components/commons/inputs/TextInputWithLabel"
 import * as Device from "expo-device";
 import * as FileSystem from "expo-file-system";
 import {CategoryPickerModal} from "@screens/AppNavigator/ListingsNavigator/screens/components/CategoryPickerModal";
+import {StackNavigationProp, StackScreenProps} from "@react-navigation/stack";
+import {ListingsParams} from "@screens/AppNavigator/ListingsNavigator/ListingsNavigator";
+import {ListingsScreenName} from "@screens/AppNavigator/ListingsNavigator/ListingsScreenName.enum";
 
 export const CATEGORY_PICKER_MODAL = 'CAT_MENU_MODAL'
-export const OPTION_PICKER_MODAL = 'OPTION_MENU_MODAL'
 
 
 const MAX_SELECTION_LIMIT = 1
@@ -49,11 +51,11 @@ interface MenuFormInterface {
 
     serving: string
 }
-export function AddMenu (): JSX.Element {
-    const navigation = useNavigation<any>()
-    const bottomSheetModalRef = useRef<any>(null)
-   const height = Dimensions.get('screen').height
 
+type AddMenuNavigationProps = StackScreenProps<ListingsParams, ListingsScreenName.ADD_LISTING>
+export const AddMenu: React.FC<AddMenuNavigationProps>  = ({navigation}) => {
+   const height = Dimensions.get('screen').height
+    const bottomSheetModalRef = useRef<any>()
     const { dismiss } = useBottomSheetModal()
 
     const {listingsCategory, listingsOptionGroup} = useAppSelector((state: RootState) => state.listings)
@@ -88,6 +90,13 @@ export function AddMenu (): JSX.Element {
 
     }
 
+
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft: () => <GoBackButton onPress={() => navigation.goBack()} />
+        })
+    }, [])
+
     async function pickImage(): Promise<void> {
         await ImagePicker.requestMediaLibraryPermissionsAsync()
         const result = await ImagePicker.launchImageLibraryAsync({
@@ -198,9 +207,8 @@ export function AddMenu (): JSX.Element {
 
 
     return (
-        <KeyboardAvoidingView style={tailwind('px-5 flex-1 bg-white')}>
+        <KeyboardAvoidingView style={tailwind('p-5  flex-1 bg-white')}>
             <ScrollView showsVerticalScrollIndicator={false}>
-                <GoBackButton onPress={() => navigation.goBack()} />
                 <TextInputWithLabel
                     label="Menu Name"
                     labelTestId=""

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddOption.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddOption.tsx
@@ -69,6 +69,10 @@ export function AddOption ({route, navigation}: AddOptionNavProps): JSX.Element
             })
             setOptions(op.options)
         }
+
+        navigation.setOptions({
+            headerLeft: () => <GoBackButton onPress={() => navigation.goBack()} />
+        })
     }, [])
 
     function openModal (): void {
@@ -131,11 +135,6 @@ return true
         try {
            const res = await dispatch(updateOptionGroup({payload, type})).unwrap()
            if (res.status === 1) {
-               Toast.show({
-                   type: 'success',
-                   text1: 'Operation successful',
-                   autoHide: true,
-               })
                showTost(toast, 'Option added!', 'success')
                setTimeout(() => {
                   void navigation.goBack()
@@ -150,9 +149,7 @@ return true
 
 
     return (
-        <SafeAreaView style={tailwind('flex-1 bg-white')}>
-           <ScrollView showsVerticalScrollIndicator={false} style={tailwind('px-5')}>
-               <GoBackButton style={tailwind('mb-1')} onPress={() => navigation.goBack()} />
+           <ScrollView showsVerticalScrollIndicator={false} style={tailwind('flex-1 py-5 bg-white px-5')}>
                <View>
                    <TextInputWithLabel
                        defaultValue={form.name}
@@ -239,7 +236,6 @@ return true
                    />
                )}
            </ScrollView>
-        </SafeAreaView>
     )
 }
 

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddScheduledListing.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/AddScheduledListing.tsx
@@ -1,9 +1,9 @@
 import { KeyboardAvoidingView, Pressable, ScrollView, Text, View} from 'react-native'
-import {useMemo, useState} from "react";
+import React, {useEffect, useMemo, useState} from "react";
 import {Picker} from '@react-native-picker/picker'
 import { tailwind} from '@tailwind'
 import {GoBackButton} from "@screens/AppNavigator/SettingsNavigator/components/Goback";
-import {NavigationProp, useNavigation} from "@react-navigation/native";
+import {NavigationProp} from "@react-navigation/native";
 
 import {IconComponent} from "@components/commons/IconComponent";
 
@@ -21,9 +21,12 @@ import {TextInputWithLabel} from "@components/commons/inputs/TextInputWithLabel"
 import {fetchScheduled} from "@store/listings.reducer";
 import * as Device from 'expo-device'
 import {AndroidPickerListing} from "@screens/AppNavigator/ListingsNavigator/screens/components/AndroidPicker";
+import { StackScreenProps} from "@react-navigation/stack";
+import {ListingsParams} from "@screens/AppNavigator/ListingsNavigator/ListingsNavigator";
+import {ListingsScreenName} from "@screens/AppNavigator/ListingsNavigator/ListingsScreenName.enum";
 
-export function AddScheduledListing (): JSX.Element {
-    const navigation = useNavigation()
+type AddScheduledListingNavigationProps = StackScreenProps<ListingsParams, ListingsScreenName.SCHEDULED>
+export const AddScheduledListing:React.FC<AddScheduledListingNavigationProps> =  ({navigation}) => {
     const dispatch = useAppDispatch()
 
     const {listingsCategory} = useAppSelector((state: RootState) => state.listings)
@@ -35,7 +38,15 @@ export function AddScheduledListing (): JSX.Element {
         listing: "",
         quantity: '' as any
     })
+    const [loading, setLoading] = useState<boolean>(false)
+
+
 
+    useEffect(() => {
+        navigation.setOptions({
+            headerLeft: () => <GoBackButton onPress={() => navigation.goBack()} />
+        })
+    }, [])
 
 
     const showDatePickerAndriod = () => {
@@ -56,7 +67,7 @@ export function AddScheduledListing (): JSX.Element {
     }, [listingsCategory])
 
 
-    const [loading, setLoading] = useState<boolean>(false)
+
     async function onSubmitCb (): Promise<void>  {
         const data = {...menuForm, availableDate: menuForm.availableDate.getTime(), quantity: +menuForm.quantity}
 
@@ -96,12 +107,10 @@ export function AddScheduledListing (): JSX.Element {
 
     }
 
-    console.log(menuForm)
 
     return (
         <KeyboardAvoidingView style={tailwind('px-5 bg-white flex-1')}>
             <ScrollView showsVerticalScrollIndicator={false}>
-                <GoBackButton onPress={() => navigation.goBack()} />
                 <View>
                     <View style={tailwind('w-2/3 mt-6')}>
                         <Text  style={tailwind('font-medium text-sm text-brand-black-500')}>Menu</Text>

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/Menu.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/Menu.tsx
@@ -62,25 +62,25 @@ export function ListingMenuCard ({menu, onPress}: {menu:ListingMenuI, onPress: (
         <Pressable onPress={() => onPress(menu)} style={[tailwind('flex w-full h-full  px-2 mb-4 rounded-lg overflow-hidden'), {
 
         }]}>
-            <View style={tailwind('relative overflow-hidden  bg-white border-0.5 border-brand-black-500  rounded-lg')}>
-                <View style={tailwind('w-full h-20')}>
+            <View style={tailwind('relative overflow-hidden  bg-white border-0.5 border-gray-300 rounded-lg')}>
+                <View style={tailwind('w-full h-28')}>
                     <Image source={{uri: menu.photo , cache: 'force-cache'}} resizeMode='cover'   style={tailwind('w-full h-full')} />
                 </View>
-               <View style={tailwind('p-4')}>
+               <View style={tailwind('p-2')}>
                   <View style={tailwind('flex flex-row justify-between w-full items-center')}>
-                      <Text style={tailwind('font-semibold text-lg text-brand-black-500')}>{menu.name}</Text>
+                      <Text style={tailwind('text-lg text-black')}>{menu.name}</Text>
                       <IconButton iconName="more-horizontal" iconType="Feather" iconSize={24} iconStyle={tailwind('text-brand-gray-700')} />
                   </View>
                    <View style={tailwind('flex flex-row items-center justify-between w-full')}>
                        <View style={tailwind('flex flex-row items-center')}>
-                           <Text style={tailwind('text-lg font-medium text-brand-black-500')}>{menu.isAvailable ? 'Available' : 'Not Available'}</Text>
+                           <Text style={tailwind('text-lg font-medium text-black')}>{menu.isAvailable ? 'Available' : 'Not Available'}</Text>
                            <View style={tailwind('rounded-full ml-1 h-2 w-2', {
-                               'bg-green-500': menu.isAvailable,
+                               'bg-nana-lime': menu.isAvailable,
                                'bg-brand-gray-700': !menu.isAvailable
                            })} />
                        </View>
                        <View style={tailwind('flex flex-row items-center')}>
-                           <Text style={tailwind('text-lg font-medium text-brand-black-500')}>{menu.isLive ? 'Live': 'Not Live'}</Text>
+                           <Text style={tailwind('text-lg font-medium text-black')}>{menu.isLive ? 'Live': 'Not Live'}</Text>
                            <View style={tailwind('rounded-full ml-1 h-2 w-2', {
                                'bg-green-500': menu.isLive,
                                'bg-brand-gray-700': !menu.isLive
@@ -90,7 +90,7 @@ export function ListingMenuCard ({menu, onPress}: {menu:ListingMenuI, onPress: (
                </View>
                 {menu.status === ListingApprovalStatus.PENDING && (
                     <View style={tailwind('absolute top-0 right-0 bg-warning-200 px-3 py-1')}>
-                        <Text style={tailwind('text-brand-black-500')}>Pending Approval</Text>
+                        <Text style={tailwind('text-black')}>Pending Approval</Text>
                     </View>
                 )}
             </View>

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/Options.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/Options.tsx
@@ -63,18 +63,14 @@ export interface OptionCardProps {
 export function OptionCard ({option, onPress}: OptionCardProps): JSX.Element {
     return (
         <TouchableOpacity onPress={() => onPress(option)} style={[tailwind('flex flex-col w-full px-2 mb-4 bg-transparent'),{
-            // shadowColor: '#171717',
-            // shadowOffset: {width: -2, height: 4},
-            // shadowOpacity: 0.2,
-            // shadowRadius: 3,
+
         }]}>
-           <View style={tailwind('border-0.5 border-brand-black-500 bg-white p-3 rounded-lg')}>
+           <View style={tailwind('border-0.5 border-gray-300 bg-white p-3 rounded-lg')}>
                <View style={tailwind('flex flex-row w-full items-start justify-between ')}>
-                   <Text style={tailwind('text-brand-black-500 font-semibold text-lg mb-5')}>{option.name}</Text>
-                   <IconButton iconName="more-horizontal" iconType="Feather" iconSize={18} iconStyle={tailwind('text-brand-gray-700')} />
+                   <Text style={tailwind('text-black mb-2')}>{option.name}</Text>
                </View>
                <View style={tailwind('flex flex-row w-full items-center justify-between')}>
-                   <Text style={tailwind('text-brand-black-500 font-medium text-sm')} >{`No. of options: ${option.options.length} `}</Text>
+                   <Text style={tailwind('text-black  text-sm')} >{`No. of options: ${option.options.length} `}</Text>
                </View>
            </View>
         </TouchableOpacity>

diff --git a/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx b/mobile-app/screens/AppNavigator/ListingsNavigator/screens/ScheduledListings.tsx
@@ -60,26 +60,26 @@ export function ListingCard ({listing, onPress}: {listing:ScheduledListingI, onP
         <Pressable onPress={() => onPress(listing)} style={[tailwind(' flex w-full h-full px-2 mb-4 rounded-lg overflow-hidden'), {
 
         }]}>
-            <View style={tailwind('overflow-hidden relative bg-white border-0.5 border-brand-black-500  rounded-lg')}>
+            <View style={tailwind('overflow-hidden relative bg-white border-0.5 border-gray-300 rounded-lg')}>
                 <View style={tailwind('p-4')}>
                     <View style={tailwind('flex flex-row justify-between w-full items-center')}>
-                        <Text style={tailwind('font-semibold text-lg text-brand-black-500')}>{listing?.listing?.name}</Text>
+                        <Text style={tailwind('text-lg text-black')}>{listing?.listing?.name}</Text>
                         <IconButton iconName="more-horizontal" iconType="Feather" iconSize={24} iconStyle={tailwind('text-brand-gray-700')} />
                     </View>
                     <View style={tailwind('flex flex-col  w-full')}>
                         <View style={tailwind('flex flex-row items-center w-full justify-between')}>
                             <View style={tailwind('flex flex-row items-center')}>
-                                <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-4')}>Quantity remaining</Text>
-                                <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{listing?.remainingQuantity}</Text>
+                                <Text style={tailwind('text-black mr-4')}>Quantity remaining</Text>
+                                <Text style={tailwind('text-black')}>{listing?.remainingQuantity}</Text>
                             </View>
                             <View style={tailwind('flex flex-row items-center')}>
-                                <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-4')}>Quantity Sold</Text>
-                                <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{listing?.quantity - listing?.remainingQuantity }</Text>
+                                <Text style={tailwind(' text-black mr-4')}>Quantity Sold</Text>
+                                <Text style={tailwind('text-black')}>{listing?.quantity - listing?.remainingQuantity }</Text>
                             </View>
                         </View>
-                        <View style={tailwind('flex flex-row items-center')}>
-                            <Text style={tailwind('text-lg font-medium text-brand-black-500 mr-5')}>Available Date</Text>
-                            <Text style={tailwind('text-lg font-medium text-brand-black-500 font-bold')}>{date}</Text>
+                        <View style={tailwind('flex mt-2 flex-row items-center')}>
+                            <Text style={tailwind(' text-black mr-5')}>Available Date</Text>
+                            <Text style={tailwind(' text-black')}>{date}</Text>
                         </View>
                     </View>
                 </View>