diff --git a/src/app/Components/MenuItem.tsx b/src/app/Components/MenuItem.tsx index 0c894a01c4f..d1d1f493763 100644 --- a/src/app/Components/MenuItem.tsx +++ b/src/app/Components/MenuItem.tsx @@ -20,6 +20,7 @@ export const MenuItem: React.FC<{ ellipsizeMode?: TextProps["ellipsizeMode"] icon?: React.ReactNode isBeta?: boolean + px?: ResponsiveValue py?: ResponsiveValue onPress?: () => void rightView?: React.ReactNode @@ -41,6 +42,7 @@ export const MenuItem: React.FC<{ icon, isBeta, onPress, + px, py, rightView, style, @@ -56,7 +58,7 @@ export const MenuItem: React.FC<{ flexDirection="row" alignItems="center" py={py ?? "7.5px"} - px={2} + px={px ?? 2} style={style} opacity={disabled && allowDisabledVisualClue ? 0.5 : 1} > diff --git a/src/app/Scenes/SavedSearchAlert/Components/Form.tsx b/src/app/Scenes/SavedSearchAlert/Components/Form.tsx index 4e9915a005d..754a86ad411 100644 --- a/src/app/Scenes/SavedSearchAlert/Components/Form.tsx +++ b/src/app/Scenes/SavedSearchAlert/Components/Form.tsx @@ -4,7 +4,9 @@ import { Box, Button, Flex, + Join, Pill, + Separator, Spacer, Text, Touchable, @@ -13,6 +15,7 @@ import { NavigationProp, useNavigation } from "@react-navigation/native" import { SearchCriteria } from "app/Components/ArtworkFilter/SavedSearch/types" import { InfoButton } from "app/Components/Buttons/InfoButton" import { Input, InputTitle } from "app/Components/Input" +import { MenuItem } from "app/Components/MenuItem" import { SavedSearchNameInputQueryRenderer } from "app/Scenes/SavedSearchAlert/Components/SavedSearchNameInput" import { CreateSavedSearchAlertNavigationStack, @@ -133,101 +136,118 @@ export const Form: React.FC = ({ /> )} - - {isFallbackToGeneratedAlertNamesEnabled ? ( - - ) : ( - - )} - + : <>}> + + {isFallbackToGeneratedAlertNamesEnabled ? ( + + ) : ( + + )} - + - - Filters - - {pills.map((pill, index) => ( - onRemovePill(pill)} - > - {pill.label} - - ))} - - + + Filters + + {pills.map((pill, index) => ( + onRemovePill(pill)} + > + {pill.label} + + ))} + + + - + {!!enableAlertsFilters ? ( + <> + { + // navigate to filters screen + }} + px={0} + /> + + ) : null} - {/* Price range is part of the new filters screen, no need to show it here anymore */} - {!enableAlertsFilters && ( - - navigation.navigate("AlertPriceRange")} - > - - - Set price range you are interested in - - - + {/* Price range is part of the new filters screen, no need to show it here anymore */} + {!enableAlertsFilters && ( + + navigation.navigate("AlertPriceRange")} + > + + + Set price range you are interested in + + + + - - - - )} + + + )} - + + - + - + - {!!shouldShowEmailWarning && ( - - - Change your email preferences - - - To receive Email Alerts, please update your email preferences. - + {!!shouldShowEmailWarning && ( + + + Change your email preferences + + + To receive Email Alerts, please update your email preferences. + + + )} + + {!!values.email && ( + + Update email preferences + + )} - )} + - {!!values.email && ( - - Update email preferences - - )} +