Minor tweaks for refactored touch component

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -7439,11 +7439,10 @@ exports[`Storyshots List with custom colors 1`] = `
       style={
         Array [
           Object {
-            "backgroundColor": "#ffffff",
+            "backgroundColor": "red",
           },
         ]
       }
-      underlayColor="green"
     >
       <View
         style={

app/containers/List/ListItem.js

@@ -79,11 +79,11 @@ const Content = React.memo(({
 ));
 
 const Button = React.memo(({
-	onPress, underlayColor, ...props
+	onPress, backgroundColor, underlayColor, ...props
 }) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		underlayColor={underlayColor}
+		style={({ pressed }) => [{ backgroundColor: pressed ? underlayColor || themes[props.theme].bannerBackground : backgroundColor || themes[props.theme].backgroundColor }]}
 		enabled={!props.disabled}
 		theme={props.theme}
 	>

app/containers/LoginServices.js

@@ -7,6 +7,7 @@ import { connect } from 'react-redux';
 import { Base64 } from 'js-base64';
 import * as AppleAuthentication from 'expo-apple-authentication';
 
+import { transparentize } from 'color2k';
 import { withTheme } from '../theme';
 import sharedStyles from '../views/Styles';
 import { themes } from '../constants/colors';
@@ -344,10 +345,8 @@ class LoginServices extends React.PureComponent {
 			<Touch
 				key={service.name}
 				onPress={onPress}
-				style={[styles.serviceButton, { backgroundColor }]}
+				style={({ pressed }) => [styles.serviceButton, { backgroundColor: pressed ? transparentize(themes[theme].buttonText, 0.5) : backgroundColor }]}
 				theme={theme}
-				activeOpacity={0.5}
-				underlayColor={themes[theme].buttonText}
 			>
 				<View style={styles.serviceButtonContainer}>
 					{service.authType === 'oauth' || service.authType === 'apple' ? <CustomIcon name={icon} size={24} color={themes[theme].titleText} style={styles.serviceIcon} /> : null}

app/containers/Passcode/Base/Button.js

@@ -14,7 +14,7 @@ const Button = React.memo(({
 
 	return (
 		<Touch
-			style={[styles.buttonView, { backgroundColor: 'transparent' }]}
+			style={({ pressed }) => [styles.buttonView, { backgroundColor: pressed ? 'transparent' : themes[theme].bannerBackground }]}
 			underlayColor={themes[theme].passcodeButtonActive}
 			rippleColor={themes[theme].passcodeButtonActive}
 			enabled={!disabled}

app/presentation/RoomItem/Touchable.js

@@ -10,6 +10,7 @@ import {
 	LONG_SWIPE
 } from './styles';
 import { isRTL } from '../../i18n';
+import { themes } from '../../constants/colors';
 import { LeftActions, RightActions } from './Actions';
 
 class Touchable extends React.Component {
@@ -253,6 +254,7 @@ class Touchable extends React.Component {
 								onLongPress={this.onLongPress}
 								theme={theme}
 								testID={testID}
+								style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor }]}
 							>
 								{children}
 							</Touch>

app/utils/touch.js

@@ -15,7 +15,7 @@ class Touch extends React.Component {
 
 	render() {
 		const {
-			children, onPress, onLongPress, theme, ...props
+			children, onPress, onLongPress, theme, style, ...props
 		} = this.props;
 
 		return (
@@ -24,9 +24,7 @@ class Touch extends React.Component {
 				onPress={onPress}
 				onLongPress={onLongPress}
 				activeOpacity={1}
-				style={({ pressed }) => [{
+				style={style}
-					backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor
-				}]}
 				android_ripple={{ color: themes[theme].bannerBackground }}
 				{...props}
 			>
@@ -41,7 +39,8 @@ Touch.propTypes = {
 	onPress: PropTypes.func,
 	onLongPress: PropTypes.func,
 	theme: PropTypes.string,
-	underlayColor: PropTypes.string
+	underlayColor: PropTypes.string,
+	style: PropTypes.object
 };
 
 export default Touch;

app/views/AddChannelTeamView.js

@@ -72,6 +72,9 @@ class AddChannelTeamView extends React.Component {
 		return (
 			<Touch
 				onPress={onPress}
+				style={({ pressed }) => [{
+					backgroundColor: pressed ? themes[theme].chatComponentBackground : themes[theme].backgroundColor
+				}]}
 				testID={testID}
 				theme={theme}
 			>

app/views/DirectoryView/Options.js

@@ -67,7 +67,7 @@ export default class DirectoryOptions extends PureComponent {
 		return (
 			<Touch
 				onPress={() => changeType(itemType)}
-				style={styles.dropdownItemButton}
+				style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]}
 				theme={theme}
 			>
 				<View style={styles.dropdownItemContainer}>

app/views/DirectoryView/index.js

@@ -169,7 +169,7 @@ class DirectoryView extends React.Component {
 				/>
 				<Touch
 					onPress={this.toggleDropdown}
-					style={styles.dropdownItemButton}
+					style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }, styles.dropdownItemButton]}
 					testID='directory-view-dropdown'
 					theme={theme}
 				>

app/views/NewMessageView.js

@@ -148,6 +148,9 @@ class NewMessageView extends React.Component {
 		return (
 			<Touch
 				onPress={onPress}
+				style={({ pressed }) => [{
+					backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor
+				}]}
 				testID={testID}
 				theme={theme}
 			>

app/views/ProfileView/index.js

@@ -309,7 +309,7 @@ class ProfileView extends React.Component {
 				key={key}
 				testID={key}
 				onPress={onPress}
-				style={[styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: themes[theme].borderColor }]}
+				style={({ pressed }) => [styles.avatarButton, { opacity: disabled ? 0.5 : 1 }, { backgroundColor: pressed ? themes[theme].borderColor : themes[theme].bannerBackground }]}
 				enabled={!disabled}
 				theme={theme}
 			>

app/views/RoomActionsView/index.js

@@ -433,7 +433,7 @@ class RoomActionsView extends React.Component {
 							rid, t, room, member
 						}
 					})}
-					style={{ backgroundColor: themes[theme].backgroundColor }}
+					style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }]}
 					accessibilityLabel={I18n.t('Room_Info')}
 					accessibilityTraits='button'
 					enabled={!isGroupChat}

app/views/SidebarView/SidebarItem.js

@@ -15,7 +15,7 @@ const Item = React.memo(({
 		testID={testID}
 		onPress={onPress}
 		theme={theme}
-		style={[styles.item, current && { backgroundColor: themes[theme].borderColor }]}
+		style={({ pressed }) => [styles.item, current && { backgroundColor: pressed ? themes[theme].borderColor : themes[theme].bannerBackground }]}
 	>
 		<View style={styles.itemHorizontal}>
 			{left}

app/views/ThreadMessagesView/Dropdown/DropdownItem.js

@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
 const DropdownItem = React.memo(({
 	theme, onPress, iconName, text
 }) => (
-	<Touch theme={theme} onPress={onPress} style={{ backgroundColor: themes[theme].backgroundColor }}>
+	<Touch theme={theme} onPress={onPress} style={({ pressed }) => [{ backgroundColor: pressed ? themes[theme].bannerBackground : themes[theme].backgroundColor }]}>
 		<View style={styles.container}>
 			<Text style={[styles.text, { color: themes[theme].auxiliaryText }]}>{text}</Text>
 			{iconName ? <CustomIcon name={iconName} size={22} color={themes[theme].auxiliaryText} /> : null}