From 41c696a5ebd2239943869fb6415a496eae02118e Mon Sep 17 00:00:00 2001 From: Philipp Walter Date: Wed, 17 Jul 2024 13:35:11 +0200 Subject: [PATCH] fix(ui): update button pressed style --- package.json | 1 + src/components/ActivityHeader.tsx | 2 + src/components/AdjustValue.tsx | 2 + src/components/BalanceHeader.tsx | 2 + src/components/Balances.tsx | 11 +- src/components/BaseFeedWidget.tsx | 4 +- src/components/Biometrics.tsx | 2 +- src/components/BlurView.tsx | 25 ++- src/components/BottomSheetScreen.tsx | 2 +- src/components/Button.tsx | 148 --------------- src/components/CameraNoAuth.tsx | 2 +- src/components/Card.tsx | 42 ----- src/components/ContactSmall.tsx | 41 +++-- src/components/ContactsList.tsx | 2 +- src/components/Dialog.tsx | 2 + src/components/HeadlinesWidget.tsx | 2 +- src/components/ImageText.tsx | 2 +- src/components/InfoScreen.tsx | 2 +- src/components/IntroScreen.tsx | 2 +- src/components/List.tsx | 6 +- src/components/LuganoFeedWidget.tsx | 4 +- src/components/NetworkRow.tsx | 6 +- src/components/OnboardingScreen.tsx | 2 +- src/components/PinPad.tsx | 2 +- src/components/ProfileCard.tsx | 2 +- src/components/ProfileLinks.tsx | 2 + src/components/RectangleButton.tsx | 51 ------ src/components/SeedInputAccessory.tsx | 4 +- src/components/SlashtagURL.tsx | 2 +- src/components/Social.tsx | 60 +++--- src/components/SuggestionCard.tsx | 14 +- src/components/TabBar.tsx | 65 ++----- src/components/Tabs.tsx | 2 +- src/components/Tag.tsx | 5 +- src/components/WalletOnboarding.tsx | 1 + src/components/Widgets.tsx | 27 ++- src/components/buttons/Button.tsx | 172 ++++++++++++++++++ src/components/buttons/ButtonBlur.tsx | 76 ++++++++ src/components/buttons/ButtonTertiary.tsx | 23 +++ src/components/{ => buttons}/CheckButton.tsx | 8 +- src/components/{ => buttons}/IconButton.tsx | 16 +- src/components/{ => buttons}/RadioButton.tsx | 6 +- src/components/buttons/RectangleButton.tsx | 65 +++++++ .../bottom-sheet/ConnectionClosed.tsx | 2 +- src/screens/Activity/ActivityDetail.tsx | 18 +- src/screens/Activity/ActivityFiltered.tsx | 2 + src/screens/Activity/ActivityList.tsx | 8 +- src/screens/Activity/ActivityListShort.tsx | 14 +- src/screens/Activity/ActivitySavings.tsx | 2 +- src/screens/Activity/ActivitySpending.tsx | 2 +- src/screens/Activity/ActivityTagsPrompt.tsx | 2 +- src/screens/Activity/ListItem.tsx | 10 +- src/screens/Activity/TimeRangePrompt.tsx | 17 +- src/screens/AppError.tsx | 2 + src/screens/Contacts/AddContact.tsx | 4 +- src/screens/Contacts/Contact.tsx | 2 +- src/screens/Contacts/ContactEdit.tsx | 2 +- src/screens/Contacts/Contacts.tsx | 7 +- src/screens/Lightning/Availability.tsx | 2 +- src/screens/Lightning/CustomSetup.tsx | 2 +- src/screens/Lightning/Funding.tsx | 4 +- src/screens/Lightning/LNURLChannel.tsx | 2 +- src/screens/Lightning/QuickSetup.tsx | 2 +- src/screens/Lightning/SettingUp.tsx | 2 +- src/screens/Onboarding/Passphrase.tsx | 4 +- src/screens/Onboarding/RestoreFromSeed.tsx | 2 +- src/screens/Onboarding/Restoring.tsx | 2 +- src/screens/Onboarding/Slideshow.tsx | 55 +++--- src/screens/Onboarding/TermsOfUse.tsx | 4 +- src/screens/Onboarding/Welcome.tsx | 2 +- src/screens/Profile/Profile.tsx | 2 +- src/screens/Profile/ProfileEdit.tsx | 2 +- src/screens/Profile/ProfileLink.tsx | 3 +- .../Profile/ProfileLinkSuggestions.tsx | 2 +- src/screens/Profile/ProfileOnboarding.tsx | 2 +- src/screens/Recovery/Mnemonic.tsx | 2 +- src/screens/Recovery/Recovery.tsx | 2 +- src/screens/Scanner/ScannerComponent.tsx | 44 ++--- .../AddressViewer/AddressViewerListItem.tsx | 2 + src/screens/Settings/AddressViewer/index.tsx | 2 +- .../Settings/Backup/ConfirmMnemonic.tsx | 2 +- .../Settings/Backup/ConfirmPassphrase.tsx | 2 +- src/screens/Settings/Backup/ExportToPhone.tsx | 2 +- src/screens/Settings/Backup/Metadata.tsx | 2 +- .../Settings/Backup/MultipleDevices.tsx | 2 +- .../Settings/Backup/ResetAndRestore.tsx | 2 +- src/screens/Settings/Backup/ShowMnemonic.tsx | 2 +- .../Settings/Backup/ShowPassphrase.tsx | 2 +- src/screens/Settings/Backup/Success.tsx | 2 +- src/screens/Settings/Backup/Warning.tsx | 2 +- src/screens/Settings/BackupSettings/index.tsx | 23 +-- src/screens/Settings/ElectrumConfig/index.tsx | 4 +- src/screens/Settings/Fee/index.tsx | 2 +- src/screens/Settings/GapLimit/index.tsx | 2 +- .../Settings/Ledger/LedgerTransaction.tsx | 6 +- src/screens/Settings/Ledger/index.tsx | 2 +- .../Settings/Lightning/AddConnection.tsx | 2 +- .../Lightning/AddConnectionResult.tsx | 2 +- .../Settings/Lightning/ChannelDetails.tsx | 8 +- src/screens/Settings/Lightning/Channels.tsx | 6 +- .../Settings/Lightning/CloseConnection.tsx | 2 +- .../Settings/Lightning/LightningNodeInfo.tsx | 2 +- .../Lightning/OpenConnectionSuccess.tsx | 2 +- src/screens/Settings/PIN/AskForBiometrics.tsx | 2 +- src/screens/Settings/PIN/DisablePin.tsx | 2 +- src/screens/Settings/PIN/ForgotPIN.tsx | 2 +- src/screens/Settings/PIN/PinChanged.tsx | 2 +- src/screens/Settings/PIN/Result.tsx | 2 +- src/screens/Settings/RGSServer/index.tsx | 2 +- .../Settings/ReportIssue/FormError.tsx | 2 +- .../Settings/ReportIssue/FormSuccess.tsx | 2 +- src/screens/Settings/ReportIssue/index.tsx | 2 +- .../Settings/TransactionSpeed/CustomFee.tsx | 2 +- src/screens/Settings/WebRelay/index.tsx | 2 +- src/screens/Wallets/BoostPrompt.tsx | 9 +- src/screens/Wallets/Header.tsx | 68 +++---- src/screens/Wallets/LNURLPay/Amount.tsx | 2 +- src/screens/Wallets/LNURLWithdraw/Amount.tsx | 8 +- src/screens/Wallets/LNURLWithdraw/Confirm.tsx | 2 +- src/screens/Wallets/NewTxPrompt.tsx | 2 +- src/screens/Wallets/NumberPadButtons.tsx | 10 +- src/screens/Wallets/Receive/Liquidity.tsx | 2 +- src/screens/Wallets/Receive/ReceiveAmount.tsx | 4 +- .../Wallets/Receive/ReceiveConnect.tsx | 2 +- .../Wallets/Receive/ReceiveDetails.tsx | 2 +- src/screens/Wallets/Receive/ReceiveQR.tsx | 3 +- src/screens/Wallets/Receive/Tags.tsx | 2 +- src/screens/Wallets/Send/Address.tsx | 2 +- src/screens/Wallets/Send/Amount.tsx | 8 +- src/screens/Wallets/Send/AutoRebalance.tsx | 2 +- src/screens/Wallets/Send/CoinSelection.tsx | 2 +- src/screens/Wallets/Send/Error.tsx | 2 +- src/screens/Wallets/Send/FeeCustom.tsx | 2 +- src/screens/Wallets/Send/FeeItem.tsx | 8 +- src/screens/Wallets/Send/FeeRate.tsx | 2 +- src/screens/Wallets/Send/Pending.tsx | 2 +- src/screens/Wallets/Send/Recipient.tsx | 38 ++-- src/screens/Wallets/Send/ReviewAndSend.tsx | 4 +- src/screens/Wallets/Send/Success.tsx | 2 +- src/screens/Wallets/Send/Tags.tsx | 2 +- src/screens/Wallets/UnitButton.tsx | 18 +- src/screens/Widgets/Widget.tsx | 4 +- src/screens/Widgets/WidgetEdit.tsx | 2 +- src/screens/Widgets/WidgetsSuggestions.tsx | 4 +- src/styles/components.ts | 16 ++ src/utils/color.ts | 16 ++ yarn.lock | 3 +- 147 files changed, 844 insertions(+), 673 deletions(-) delete mode 100644 src/components/Button.tsx delete mode 100644 src/components/Card.tsx delete mode 100644 src/components/RectangleButton.tsx create mode 100644 src/components/buttons/Button.tsx create mode 100644 src/components/buttons/ButtonBlur.tsx create mode 100644 src/components/buttons/ButtonTertiary.tsx rename src/components/{ => buttons}/CheckButton.tsx (89%) rename src/components/{ => buttons}/IconButton.tsx (77%) rename src/components/{ => buttons}/RadioButton.tsx (94%) create mode 100644 src/components/buttons/RectangleButton.tsx create mode 100644 src/utils/color.ts diff --git a/package.json b/package.json index f64779131..1a63b0605 100644 --- a/package.json +++ b/package.json @@ -69,6 +69,7 @@ "bitcoin-address-validation": "2.2.3", "bitcoin-units": "0.3.0", "bitcoinjs-lib": "6.1.5", + "color": "4.2.3", "events": "3.3.0", "fuzzysort": "1.9.0", "i18next": "23.11.2", diff --git a/src/components/ActivityHeader.tsx b/src/components/ActivityHeader.tsx index 1d19e8b97..5fbf0bb2a 100644 --- a/src/components/ActivityHeader.tsx +++ b/src/components/ActivityHeader.tsx @@ -49,11 +49,13 @@ const ActivityHeader = ({ onSwipeRight={toggleHideBalance}> {hideBalance && ( diff --git a/src/components/AdjustValue.tsx b/src/components/AdjustValue.tsx index 127a64257..46af85924 100644 --- a/src/components/AdjustValue.tsx +++ b/src/components/AdjustValue.tsx @@ -32,6 +32,7 @@ const AdjustValue = ({ { {hideBalance && ( diff --git a/src/components/Balances.tsx b/src/components/Balances.tsx index d021ade4d..32b0a57d7 100644 --- a/src/components/Balances.tsx +++ b/src/components/Balances.tsx @@ -3,12 +3,13 @@ import { View, StyleSheet } from 'react-native'; import { useNavigation } from '@react-navigation/native'; import { useTranslation } from 'react-i18next'; -import { View as ThemedView, Pressable } from '../styles/components'; +import { View as ThemedView } from '../styles/components'; import { TransferIcon, BitcoinCircleIcon, LightningCircleIcon, } from '../styles/icons'; +import Button from './buttons/Button'; import NetworkRow from './NetworkRow'; import { useBalance } from '../hooks/wallet'; import { useAppSelector } from '../hooks/redux'; @@ -54,14 +55,14 @@ const Balances = (): ReactElement => { /> - } disabled={!canTransfer} testID="TransferButton" - onPress={onTransfer}> - - + onPress={onTransfer} + /> diff --git a/src/components/Biometrics.tsx b/src/components/Biometrics.tsx index 7672433a2..46f8b7e9a 100644 --- a/src/components/Biometrics.tsx +++ b/src/components/Biometrics.tsx @@ -121,7 +121,7 @@ const Biometrics = ({ authenticate()} testID="Biometrics"> diff --git a/src/components/BlurView.tsx b/src/components/BlurView.tsx index d72f65f43..0ec0e3acd 100644 --- a/src/components/BlurView.tsx +++ b/src/components/BlurView.tsx @@ -4,23 +4,38 @@ import { BlurView as Blur } from '@react-native-community/blur'; import { View } from '../styles/components'; type BlurViewProps = { + pressed?: boolean; style?: StyleProp; children?: ReactNode; }; -const BlurView = ({ style, ...props }: BlurViewProps): ReactElement => { +const BlurView = ({ + pressed, + style, + ...props +}: BlurViewProps): ReactElement => { return Platform.OS === 'ios' ? ( - + ) : ( - + ); }; const styles = StyleSheet.create({ - containerIos: {}, - containerAndroid: { + ios: {}, + android: { backgroundColor: 'rgba(20, 20, 20, 0.95)', }, + androidPressed: { + backgroundColor: 'rgba(20, 20, 20, 1)', + }, }); export default BlurView; diff --git a/src/components/BottomSheetScreen.tsx b/src/components/BottomSheetScreen.tsx index 4d8bb0077..0b89253c2 100644 --- a/src/components/BottomSheetScreen.tsx +++ b/src/components/BottomSheetScreen.tsx @@ -10,7 +10,7 @@ import { import { BodyM, Display } from '../styles/text'; import BottomSheetNavigationHeader from '../components/BottomSheetNavigationHeader'; import SafeAreaInset from '../components/SafeAreaInset'; -import Button from '../components/Button'; +import Button from './buttons/Button'; const BottomSheetScreen = ({ navTitle, diff --git a/src/components/Button.tsx b/src/components/Button.tsx deleted file mode 100644 index 524893181..000000000 --- a/src/components/Button.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import React, { memo, ReactElement, useMemo } from 'react'; -import { - StyleSheet, - ActivityIndicator, - TouchableOpacityProps, - Platform, -} from 'react-native'; -import { IThemeColors } from '../styles/themes'; -import { CaptionB, BodySSB } from '../styles/text'; -import { View, TouchableOpacity } from '../styles/components'; -import useColors from '../hooks/colors'; - -export interface IButton extends TouchableOpacityProps { - text?: string | ReactElement; - color?: keyof IThemeColors; - variant?: 'primary' | 'secondary' | 'transparent'; - size?: 'small' | 'large'; - disabled?: boolean; - loading?: boolean; - icon?: ReactElement; - textStyle?: Object; -} - -const Button = ({ - text, - color, - variant = 'primary', - size = 'small', - disabled = false, - loading = false, - textStyle = {}, - style, - icon, - ...props -}: IButton): ReactElement => { - const { white16, white32, white80 } = useColors(); - - const buttonStyle = useMemo(() => { - const borderColor = variant === 'transparent' ? undefined : white16; - - return StyleSheet.compose( - { - ...styles.buttonBase, - ...(size === 'small' ? styles.buttonSmall : styles.buttonLarge), - ...(variant === 'primary' - ? styles.buttonPrimary - : { ...styles.buttonSecondary, borderColor }), - ...(disabled && !icon - ? { backgroundColor: 'transparent', borderColor: 'transparent' } - : {}), - ...(disabled && icon ? { opacity: disabled ? 0.4 : 1 } : {}), - }, - style, - ); - }, [variant, size, icon, disabled, white16, style]); - - const buttonColor = useMemo(() => { - if (color) { - return color; - } - return variant === 'primary' ? 'white16' : 'transparent'; - }, [color, variant]); - - const textStyles = useMemo(() => { - return { - ...textStyle, - ...(text && icon && { marginLeft: 8 }), - ...(text && !icon && { maxWidth: '100%', textAlign: 'center' }), // on android text sometimes get shrinked. So if there is no icon, make sure it takes the full width - ...(variant === 'primary' ? {} : { color: white80 }), - ...(disabled && !icon && { color: white32 }), - ...Platform.select({ - android: { - lineHeight: size === 'small' ? 15 : 18, - }, - }), - }; - }, [textStyle, text, icon, variant, disabled, size, white32, white80]); - - const Text = size === 'small' ? CaptionB : BodySSB; - - return ( - - {icon && ( - - {React.cloneElement(icon, { - ...{ ...(disabled && { color: 'white32' }) }, - })} - - )} - - - {text} - - - {loading && ( - - - - )} - - ); -}; - -const styles = StyleSheet.create({ - buttonBase: { - alignItems: 'center', - justifyContent: 'center', - flexDirection: 'row', - // TODO: shadows are not drawn correctly on transparent buttons - // shadowColor: 'rgba(0, 0, 0, 0.1)', - // shadowOpacity: 0.8, - // elevation: 6, - // shadowRadius: 15, - // shadowOffset: { width: 1, height: 13 }, - }, - buttonSmall: { - height: 40, - borderRadius: 54, - paddingHorizontal: 16, - minWidth: 110, - }, - buttonLarge: { - height: 56, - borderRadius: 64, - paddingHorizontal: 23, - minWidth: 110, - }, - buttonPrimary: {}, - buttonSecondary: { - borderWidth: 2, - }, - loading: { - ...StyleSheet.absoluteFillObject, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'center', - borderRadius: 54, - paddingVertical: 12, - paddingHorizontal: 16, - }, -}); - -export default memo(Button); diff --git a/src/components/CameraNoAuth.tsx b/src/components/CameraNoAuth.tsx index 68a1ba01f..1dcf0d4aa 100644 --- a/src/components/CameraNoAuth.tsx +++ b/src/components/CameraNoAuth.tsx @@ -8,7 +8,7 @@ import SafeAreaView from './SafeAreaView'; import NavigationHeader from './NavigationHeader'; import BottomSheetNavigationHeader from './BottomSheetNavigationHeader'; import SafeAreaInset from './SafeAreaInset'; -import Button from './Button'; +import Button from './buttons/Button'; const CameraNoAuth = ({ bottomSheet = false, diff --git a/src/components/Card.tsx b/src/components/Card.tsx deleted file mode 100644 index 765ab770f..000000000 --- a/src/components/Card.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import React, { ReactElement, ReactNode } from 'react'; -import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; -import { TouchableOpacity } from '../styles/components'; -import { IThemeColors } from '../styles/themes'; - -type CardProps = { - style?: StyleProp; - children?: ReactNode; - color?: keyof IThemeColors; - onPress?: () => void; - testID?: string; -}; - -const Card = ({ - style, - children, - color = 'surface', - testID, - onPress, -}: CardProps): ReactElement => ( - - {children} - -); - -const styles = StyleSheet.create({ - container: { - width: '100%', - alignSelf: 'center', - borderRadius: 15, - marginVertical: 10, - paddingVertical: 10, - paddingHorizontal: 20, - }, -}); - -export default Card; diff --git a/src/components/ContactSmall.tsx b/src/components/ContactSmall.tsx index 4f5ac4f81..235cd93be 100644 --- a/src/components/ContactSmall.tsx +++ b/src/components/ContactSmall.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, memo } from 'react'; import { StyleProp, StyleSheet, ViewStyle } from 'react-native'; -import { TouchableOpacity } from '../styles/components'; +import { TouchableHighlight, TouchableOpacity } from '../styles/components'; import { BodySSB } from '../styles/text'; import { useProfile } from '../hooks/slashtags'; import ProfileImage from './ProfileImage'; @@ -25,7 +25,7 @@ const ContactSmall = ({ const { profile } = useProfile(url); return ( - - - - {profile.name} - - {onDelete && ( - - - - )} - + <> + + + {profile.name} + + {onDelete && ( + + + + )} + + ); }; diff --git a/src/components/ContactsList.tsx b/src/components/ContactsList.tsx index a5042da64..eea3325c9 100644 --- a/src/components/ContactsList.tsx +++ b/src/components/ContactsList.tsx @@ -36,7 +36,7 @@ export const ContactItem = ({ return ( { onPress?.(contact); }}> diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx index 1e1add864..fd00a71f1 100644 --- a/src/components/Dialog.tsx +++ b/src/components/Dialog.tsx @@ -69,6 +69,7 @@ const Dialog = ({ {onCancel && ( {cancelText} @@ -77,6 +78,7 @@ const Dialog = ({ {onConfirm && ( {confirmText} diff --git a/src/components/HeadlinesWidget.tsx b/src/components/HeadlinesWidget.tsx index 313184ac7..c3b47f126 100644 --- a/src/components/HeadlinesWidget.tsx +++ b/src/components/HeadlinesWidget.tsx @@ -118,7 +118,7 @@ const HeadlinesWidget = ({ { if (link) { diff --git a/src/components/ImageText.tsx b/src/components/ImageText.tsx index c657320e1..faaa7e453 100644 --- a/src/components/ImageText.tsx +++ b/src/components/ImageText.tsx @@ -22,7 +22,7 @@ const ImageText = ({ return ( {icon} diff --git a/src/components/InfoScreen.tsx b/src/components/InfoScreen.tsx index 3aee1d924..70b298dac 100644 --- a/src/components/InfoScreen.tsx +++ b/src/components/InfoScreen.tsx @@ -4,7 +4,7 @@ import { View, Image, ImageSourcePropType, StyleSheet } from 'react-native'; import { Display, BodyM } from '../styles/text'; import { View as ThemedView } from '../styles/components'; import SafeAreaInset from './SafeAreaInset'; -import Button from './Button'; +import Button from './buttons/Button'; import NavigationHeader from './NavigationHeader'; const InfoScreen = ({ diff --git a/src/components/IntroScreen.tsx b/src/components/IntroScreen.tsx index 1652b7f2e..338951725 100644 --- a/src/components/IntroScreen.tsx +++ b/src/components/IntroScreen.tsx @@ -5,7 +5,7 @@ import { Trans, useTranslation } from 'react-i18next'; import { Display, BodyM } from '../styles/text'; import { View as ThemedView } from '../styles/components'; import SafeAreaInset from './SafeAreaInset'; -import Button from './Button'; +import Button from './buttons/Button'; import { IColors } from '../styles/colors'; const IntroScreen = ({ diff --git a/src/components/List.tsx b/src/components/List.tsx index c60bde639..b6b9d58c2 100644 --- a/src/components/List.tsx +++ b/src/components/List.tsx @@ -157,7 +157,7 @@ const _Item = memo((item: ItemData): ReactElement => { return ( @@ -197,7 +197,7 @@ const _Item = memo((item: ItemData): ReactElement => { @@ -255,7 +255,7 @@ const _Item = memo((item: ItemData): ReactElement => { // eslint-disable-next-line react-native/no-inline-styles { opacity: enabled ? 1 : 0.5 } } - activeOpacity={0.6} + activeOpacity={0.7} disabled={disabled} testID={testID} onPress={enabled ? _onPress : undefined}> diff --git a/src/components/LuganoFeedWidget.tsx b/src/components/LuganoFeedWidget.tsx index 9dc5de20e..de9f5f147 100644 --- a/src/components/LuganoFeedWidget.tsx +++ b/src/components/LuganoFeedWidget.tsx @@ -13,7 +13,7 @@ import BaseFeedWidget from './BaseFeedWidget'; import { openURL } from '../utils/helpers'; import { useSlashfeed } from '../hooks/widgets'; -import Button from './Button'; +import Button from './buttons/Button'; import { CalendarIcon, MapPinLineIcon, MapTrifoldIcon } from '../styles/icons'; import { useAppSelector } from '../hooks/redux'; @@ -182,7 +182,7 @@ const LuganoWidget = ({ { openURL('https://bitkit.to/treasure-hunt'); }}> diff --git a/src/components/NetworkRow.tsx b/src/components/NetworkRow.tsx index 0a4f69625..ff678a021 100644 --- a/src/components/NetworkRow.tsx +++ b/src/components/NetworkRow.tsx @@ -24,7 +24,11 @@ const NetworkRow = ({ const { t } = useTranslation('wallet'); return ( - + {icon} {title} diff --git a/src/components/OnboardingScreen.tsx b/src/components/OnboardingScreen.tsx index 2e9fdf188..b66417e6b 100644 --- a/src/components/OnboardingScreen.tsx +++ b/src/components/OnboardingScreen.tsx @@ -4,7 +4,7 @@ import { View, Image, ImageSourcePropType, StyleSheet } from 'react-native'; import { Display, BodyM, Title } from '../styles/text'; import { View as ThemedView } from '../styles/components'; import SafeAreaInset from './SafeAreaInset'; -import Button from './Button'; +import Button from './buttons/Button'; import NavigationHeader from './NavigationHeader'; const OnboardingScreen = ({ diff --git a/src/components/PinPad.tsx b/src/components/PinPad.tsx index a285bb3dd..5649e361f 100644 --- a/src/components/PinPad.tsx +++ b/src/components/PinPad.tsx @@ -16,7 +16,7 @@ import SafeAreaInset from './SafeAreaInset'; import NavigationHeader from './NavigationHeader'; import { IsSensorAvailableResult } from './Biometrics'; import NumberPad from './NumberPad'; -import Button from './Button'; +import Button from './buttons/Button'; import useColors from '../hooks/colors'; import { wipeApp } from '../store/utils/settings'; import { showBottomSheet } from '../store/utils/ui'; diff --git a/src/components/ProfileCard.tsx b/src/components/ProfileCard.tsx index abb9c4a79..7fd30e4ad 100644 --- a/src/components/ProfileCard.tsx +++ b/src/components/ProfileCard.tsx @@ -91,7 +91,7 @@ const ProfileCard = ({ {editable && !contact ? ( => { const result = await launchImageLibrary({ diff --git a/src/components/ProfileLinks.tsx b/src/components/ProfileLinks.tsx index a3a585165..18782457c 100644 --- a/src/components/ProfileLinks.tsx +++ b/src/components/ProfileLinks.tsx @@ -77,6 +77,7 @@ const ProfileLinks = ({ onChange({ ...link, url: value }); }}> onRemove(link.id)}> @@ -85,6 +86,7 @@ const ProfileLinks = ({ ) : ( { openAppURL(link.url); }}> diff --git a/src/components/RectangleButton.tsx b/src/components/RectangleButton.tsx deleted file mode 100644 index 94e7bc94c..000000000 --- a/src/components/RectangleButton.tsx +++ /dev/null @@ -1,51 +0,0 @@ -import React, { ReactElement } from 'react'; -import { StyleSheet, View } from 'react-native'; - -import { Pressable } from '../styles/components'; -import { BodyMB } from '../styles/text'; - -const RectangleButton = ({ - icon, - text, - actions, - disabled, - testID, - onPress, -}: { - icon: ReactElement; - text: string; - actions?: ReactElement; - disabled?: boolean; - testID?: string; - onPress: () => void; -}): ReactElement => ( - - {icon} - {text} - {actions} - -); - -const styles = StyleSheet.create({ - button: { - flexDirection: 'row', - alignItems: 'center', - borderRadius: 8, - padding: 24, - marginBottom: 8, - height: 80, - }, - buttonIcon: { - marginRight: 16, - }, - buttonActions: { - marginLeft: 'auto', - }, -}); - -export default RectangleButton; diff --git a/src/components/SeedInputAccessory.tsx b/src/components/SeedInputAccessory.tsx index 59f78e4c2..3175ed9d4 100644 --- a/src/components/SeedInputAccessory.tsx +++ b/src/components/SeedInputAccessory.tsx @@ -3,11 +3,11 @@ import { StyleSheet, View } from 'react-native'; import * as bip39 from 'bip39'; import { KeyboardAccessoryView } from 'react-native-keyboard-accessory'; -import Button, { IButton } from './Button'; +import Button, { ButtonProps } from './buttons/Button'; import { Text13UP } from '../styles/text'; import seedSuggestions from '../utils/seed-suggestions'; -const Word = (props: IButton): ReactElement => { +const Word = (props: ButtonProps): ReactElement => { return