Merge pull request #2069 from synonymdev/fix/button-pressed

fix: update button pressed style

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",

src/components/ActivityHeader.tsx

@@ -49,11 +49,13 @@ const ActivityHeader = ({
 				onSwipeRight={toggleHideBalance}>
 				<TouchableOpacity
 					style={styles.balance}
+					activeOpacity={0.7}
 					testID="TotalBalance"
 					onPress={onSwitchUnit}>
 					<Money sats={balance} enableHide={true} symbol={true} />
 					{hideBalance && (
 						<TouchableOpacity
+							activeOpacity={0.7}
 							hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
 							testID="ShowBalance"
 							onPress={toggleHideBalance}>

src/components/AdjustValue.tsx

@@ -32,6 +32,7 @@ const AdjustValue = ({
 		<View style={[styles.root, style]}>
 			<TouchableOpacity
 				style={styles.icon}
+				activeOpacity={0.9}
 				disabled={decreaseDisabled}
 				onPress={decreaseValue}>
 				<MinusCircledIcon
@@ -50,6 +51,7 @@ const AdjustValue = ({
 			</View>
 			<TouchableOpacity
 				style={styles.icon}
+				activeOpacity={0.9}
 				disabled={increaseDisabled}
 				onPress={increaseValue}>
 				<PlusCircledIcon

src/components/BalanceHeader.tsx

@@ -51,11 +51,13 @@ const BalanceHeader = (): ReactElement => {
 
 			<TouchableOpacity
 				style={styles.balance}
+				activeOpacity={0.7}
 				testID="TotalBalance"
 				onPress={onSwitchUnit}>
 				<Money sats={totalBalance} enableHide={true} symbol={true} />
 				{hideBalance && (
 					<TouchableOpacity
+						activeOpacity={0.7}
 						hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
 						testID="ShowBalance"
 						onPress={toggleHideBalance}>

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 => {
 			/>
 			<View style={styles.transferRow}>
 				<ThemedView style={styles.line} color="white16" />
-				<Pressable
+				<Button
 					style={styles.transferButton}
 					color="white16"
+					icon={<TransferIcon color="white" />}
 					disabled={!canTransfer}
 					testID="TransferButton"
-					onPress={onTransfer}>
-					<TransferIcon color="white" />
-				</Pressable>
+					onPress={onTransfer}
+				/>
 				<ThemedView style={styles.line} color="white16" />
 			</View>
 			<NetworkRow

src/components/BaseFeedWidget.tsx

@@ -89,6 +89,7 @@ const BaseFeedWidget = ({
 							<View style={styles.actions}>
 								<TouchableOpacity
 									style={styles.actionButton}
+									activeOpacity={0.7}
 									color="transparent"
 									hitSlop={{ top: 15, bottom: 15 }}
 									testID="WidgetActionDelete"
@@ -97,6 +98,7 @@ const BaseFeedWidget = ({
 								</TouchableOpacity>
 								<TouchableOpacity
 									style={styles.actionButton}
+									activeOpacity={0.7}
 									color="transparent"
 									hitSlop={{ top: 15, bottom: 15 }}
 									testID="WidgetActionEdit"
@@ -105,9 +107,9 @@ const BaseFeedWidget = ({
 								</TouchableOpacity>
 								<TouchableOpacity
 									style={styles.actionButton}
+									activeOpacity={0.7}
 									color="transparent"
 									hitSlop={{ top: 15, bottom: 15 }}
-									activeOpacity={0.9}
 									testID="WidgetActionDrag"
 									onLongPress={onLongPress}
 									onPressIn={onPressIn}>

src/components/Biometrics.tsx

@@ -121,7 +121,7 @@ const Biometrics = ({
 			<TouchableOpacity
 				style={[styles.container, { paddingBottom: insets.bottom + 120 }]}
 				color="transparent"
-				activeOpacity={0.6}
+				activeOpacity={0.7}
 				onPress={(): void => authenticate()}
 				testID="Biometrics">
 				<Icon />

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<ViewStyle>;
 	children?: ReactNode;
 };
 
-const BlurView = ({ style, ...props }: BlurViewProps): ReactElement => {
+const BlurView = ({
+	pressed,
+	style,
+	...props
+}: BlurViewProps): ReactElement => {
 	return Platform.OS === 'ios' ? (
-		<Blur {...props} style={[styles.containerIos, style]} blurAmount={4} />
+		<Blur
+			{...props}
+			style={[styles.ios, style]}
+			blurAmount={pressed ? 10 : 4}
+		/>
 	) : (
-		<View {...props} style={[styles.containerAndroid, style]} />
+		<View
+			{...props}
+			style={[styles.android, style, pressed && styles.androidPressed]}
+		/>
 	);
 };
 
 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;

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,

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,