ordering-ui-react-native 0.12.86 → 0.12.87

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ordering-ui-react-native",
-  "version": "0.12.86",
+  "version": "0.12.87",
   "description": "Reusable components made in react native",
   "main": "src/index.tsx",
   "author": "ordering.inc",

package/themes/single-business/src/components/BusinessProductsListing/index.tsx

@@ -210,6 +210,13 @@ const BusinessProductsListingUI = (props: BusinessProductsListingParams) => {
 								noBorderShow
 								placeholder={t('SEARCH', 'Search')}
 								lazyLoad={businessState?.business?.lazy_load_products_recommended}
+                inputStyle={{
+                  borderRadius: 8,
+                  borderBottomWidth: 1,
+                  borderBottomColor: theme.colors.border,
+                  borderBottomLeftRadius: 0,
+                  borderBottomRightRadius: 0,
+                }}
 							/>
 						</WrapSearchBar>
 						{!(business?.categories?.length === 0) && (

package/themes/single-business/src/components/BusinessesListing/index.tsx

@@ -106,10 +106,6 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
 			color: theme.colors.warning5,
 			marginRight: 8
 		},
-		farAwayMsg: {
-			paddingVertical: 6,
-			paddingHorizontal: 20
-		}
   });
 
 
@@ -199,11 +195,11 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           </OText>
         </AddressInput>
         {isFarAway && (
-					<FarAwayMessage style={styles.farAwayMsg}>
-						<Ionicons name='md-warning-outline' style={styles.iconStyle} />
-						<OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'Your are far from this address')}</OText>
-					</FarAwayMessage>
-				)}
+          <FarAwayMessage>
+            <Ionicons name='md-warning-outline' style={styles.iconStyle} />
+            <OText size={12} numberOfLines={1} ellipsizeMode={'tail'} color={theme.colors.textNormal}>{t('YOU_ARE_FAR_FROM_ADDRESS', 'You are far from this address')}</OText>
+          </FarAwayMessage>
+        )}
         <OrderControlContainer>
           <View style={styles.wrapperOrderOptions}>
             <DropOptionButton
@@ -256,6 +252,13 @@ const BusinessesListingUI = (props: BusinessesListingParams) => {
           noBorderShow
           placeholder={t('SEARCH', 'Search')}
           lazyLoad
+          inputStyle={{
+            borderRadius: 8,
+            borderBottomWidth: 1,
+            borderBottomColor: theme.colors.border,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          }}
         />
       </WrapSearchBar>
       <View style={{ height: 8, backgroundColor: theme.colors.backgroundGray100 }} />

package/themes/single-business/src/components/BusinessesListing/styles.tsx

@@ -23,7 +23,7 @@ export const AddressInput = styled.TouchableOpacity`
   justify-content: flex-start;
   background-color: white;
   padding-horizontal: 15px;
-  border-radius: 24px;
+  border-radius: 8px;
   height: 44px;
   min-height: 44px;
 `
@@ -93,14 +93,16 @@ export const WrapSearchBar = styled.View`
   padding: 10px 30px;
   margin-bottom: 10px;
   background-color: ${(props: any) => props.theme.colors.white};
-  flex: 1;
 `
 
 export const FarAwayMessage = styled.View`
+  display: flex;
   flex-direction: row;
   align-items: center;
 	background-color: ${(props: any) => props.theme.colors.warning1};
-  border-radius: 7.6px;
+  border-radius: 8px;
   border: 1px solid ${(props: any) => props.theme.colors.warning5};
   width: 100%;
+  padding: 6px 20px;
+  margin-top: 20px;
 `

package/themes/single-business/src/components/SearchBar/index.tsx

@@ -4,7 +4,6 @@ import { OInput, OButton } from '../shared'
 import { useLanguage } from 'ordering-components/native'
 import { useTheme } from 'styled-components/native';
 import Icon from 'react-native-vector-icons/Feather'
-import { useEffect } from 'hoist-non-react-statics/node_modules/@types/react';
 
 export const SearchBar = (props: any) => {
 	const {
@@ -31,8 +30,6 @@ export const SearchBar = (props: any) => {
 			padding: 1,
 			maxHeight: 47,
 			height: 47,
-			borderBottomColor: theme.colors.border,
-			borderBottomWidth: 1,
 		},
 		borderStyle: {
 			borderColor: theme.colors.primary,
@@ -74,16 +71,15 @@ export const SearchBar = (props: any) => {
 	}
 
 	return (
-		<View style={[styles.container, { height: height }]}>
+		<View style={[styles.container]}>
 			<OInput
 				value={searchValue}
 				onChange={onChangeSearch}
-				style={styles.inputStyle}
+				style={{ ...styles.inputStyle, ...inputStyle }}
 				placeholder={placeholder}
 				icon={theme.images.general.search}
 				iconStyle={{ width: 17 }}
 				returnKeyType='done'
-				inputStyle={inputStyle}
 			/>
 			{isCancelButtonShow && (
 				<OButton