[FIX] Wrong styling on E2E encryption banner

__tests__/__snapshots__/Storyshots.test.js.snap

@@ -6796,7 +6796,7 @@ exports[`Storyshots List with black theme 1`] = `
 </RNCSafeAreaView>
 `;
 
-exports[`Storyshots List with custom color 1`] = `
+exports[`Storyshots List with custom colors 1`] = `
 <RCTScrollView
   contentContainerStyle={
     Object {
@@ -6893,6 +6893,65 @@ exports[`Storyshots List with custom color 1`] = `
         ]
       }
     />
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flex": 1,
+            "flexDirection": "row",
+            "justifyContent": "center",
+            "paddingHorizontal": 12,
+          },
+          false,
+          Object {
+            "height": 92,
+          },
+        ]
+      }
+    >
+      <View
+        style={
+          Object {
+            "flex": 1,
+            "justifyContent": "center",
+          }
+        }
+      >
+        <Text
+          numberOfLines={1}
+          style={
+            Array [
+              Object {
+                "backgroundColor": "transparent",
+                "fontFamily": "System",
+                "fontSize": 16,
+                "fontWeight": "400",
+                "textAlign": "left",
+              },
+              Object {
+                "color": "white",
+              },
+            ]
+          }
+        >
+          Press me!
+        </Text>
+      </View>
+    </View>
+    <View
+      style={
+        Array [
+          Object {
+            "height": 0.5,
+          },
+          undefined,
+          Object {
+            "backgroundColor": "#cbcbcc",
+          },
+        ]
+      }
+    />
   </View>
 </RCTScrollView>
 `;

app/constants/colors.js

@@ -35,6 +35,7 @@ export const themes = {
 		auxiliaryText: '#9ca2a8',
 		infoText: '#6d6d72',
 		tintColor: '#1d74f5',
+		tintActive: '#549df9',
 		auxiliaryTintColor: '#6C727A',
 		actionTintColor: '#1d74f5',
 		separatorColor: '#cbcbcc',
@@ -80,6 +81,7 @@ export const themes = {
 		auxiliaryText: '#9297a2',
 		infoText: '#6D6D72',
 		tintColor: '#1d74f5',
+		tintActive: '#549df9',
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1d74f5',
 		separatorColor: '#2b2b2d',
@@ -125,6 +127,7 @@ export const themes = {
 		auxiliaryText: '#b2b8c6',
 		infoText: '#6d6d72',
 		tintColor: '#1e9bfe',
+		tintActive: '#76b7fc',
 		auxiliaryTintColor: '#f9f9f9',
 		actionTintColor: '#1e9bfe',
 		separatorColor: '#272728',

app/containers/List/ListItem.js

@@ -1,9 +1,6 @@
 import React from 'react';
 import {
-	View,
-	Text,
-	StyleSheet,
-	I18nManager
+	View, Text, StyleSheet, I18nManager
 } from 'react-native';
 import PropTypes from 'prop-types';
 
@@ -82,11 +79,12 @@ const Content = React.memo(({
 ));
 
 const Button = React.memo(({
-	onPress, ...props
+	onPress, backgroundColor, underlayColor, ...props
 }) => (
 	<Touch
 		onPress={() => onPress(props.title)}
-		style={{ backgroundColor: themes[props.theme].backgroundColor }}
+		style={{ backgroundColor: backgroundColor || themes[props.theme].backgroundColor }}
+		underlayColor={underlayColor}
 		enabled={!props.disabled}
 		theme={props.theme}
 	>
@@ -99,15 +97,16 @@ const ListItem = React.memo(({ ...props }) => {
 		return <Button {...props} />;
 	}
 	return (
-		<View style={{ backgroundColor: themes[props.theme].backgroundColor }}>
+		<View style={{ backgroundColor: props.backgroundColor || themes[props.theme].backgroundColor }}>
 			<Content {...props} />
 		</View>
 	);
 });
 
 ListItem.propTypes = {
 	onPress: PropTypes.func,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	backgroundColor: PropTypes.string
 };
 
 ListItem.displayName = 'List.Item';
@@ -137,7 +136,9 @@ Button.propTypes = {
 	title: PropTypes.string,
 	onPress: PropTypes.func,
 	disabled: PropTypes.bool,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	backgroundColor: PropTypes.string,
+	underlayColor: PropTypes.string
 };
 
 Button.defaultProps = {

app/ee/omnichannel/containers/OmnichannelStatus.js

@@ -1,12 +1,8 @@
 import React, { memo, useState, useEffect } from 'react';
-import {
-	View, Text, StyleSheet, Switch
-} from 'react-native';
+import { View, Switch } from 'react-native';
 import PropTypes from 'prop-types';
 
-import Touch from '../../../utils/touch';
-import { CustomIcon } from '../../../lib/Icons';
-import I18n from '../../../i18n';
+import * as List from '../../../containers/List';
 import styles from '../../../views/RoomsListView/styles';
 import { themes, SWITCH_TRACK_COLOR } from '../../../constants/colors';
 import { withTheme } from '../../../theme';
@@ -36,35 +32,32 @@ const OmnichannelStatus = memo(({
 	};
 
 	return (
-		<Touch
-			onPress={goQueue}
-			theme={theme}
-			style={{ backgroundColor: themes[theme].headerSecondaryBackground }}
-		>
-			<View
-				style={[
-					styles.dropdownContainerHeader,
-					{ borderBottomWidth: StyleSheet.hairlineWidth, borderColor: themes[theme].separatorColor }
-				]}
-			>
-				<CustomIcon style={[styles.queueIcon, { color: themes[theme].auxiliaryText }]} size={22} name='omnichannel' />
-				<Text style={[styles.queueToggleText, { color: themes[theme].auxiliaryText }]}>{I18n.t('Omnichannel')}</Text>
-				{inquiryEnabled
-					? (
-						<UnreadBadge
-							style={styles.queueIcon}
-							unread={queueSize}
+		<>
+			<List.Item
+				title='Omnichannel'
+				left={() => <List.Icon name='omnichannel' />}
+				color={themes[theme].auxiliaryText}
+				onPress={goQueue}
+				right={() => (
+					<View style={styles.omnichannelRightContainer}>
+						{inquiryEnabled
+							? (
+								<UnreadBadge
+									style={styles.queueIcon}
+									unread={queueSize}
+								/>
+							)
+							: null}
+						<Switch
+							value={status}
+							trackColor={SWITCH_TRACK_COLOR}
+							onValueChange={toggleLivechat}
 						/>
-					)
-					: null}
-				<Switch
-					style={styles.omnichannelToggle}
-					value={status}
-					trackColor={SWITCH_TRACK_COLOR}
-					onValueChange={toggleLivechat}
-				/>
-			</View>
-		</Touch>
+					</View>
+				)}
+			/>
+			<List.Separator />
+		</>
 	);
 });
 

app/utils/touch.js

@@ -15,15 +15,15 @@ class Touch extends React.Component {
 
 	render() {
 		const {
-			children, onPress, theme, ...props
+			children, onPress, theme, underlayColor, ...props
 		} = this.props;
 
 		return (
 			<RectButton
 				ref={this.getRef}
 				onPress={onPress}
 				activeOpacity={1}
-				underlayColor={themes[theme].bannerBackground}
+				underlayColor={underlayColor || themes[theme].bannerBackground}
 				rippleColor={themes[theme].bannerBackground}
 				{...props}
 			>
@@ -36,7 +36,8 @@ class Touch extends React.Component {
 Touch.propTypes = {
 	children: PropTypes.node,
 	onPress: PropTypes.func,
-	theme: PropTypes.string
+	theme: PropTypes.string,
+	underlayColor: PropTypes.string
 };
 
 export default Touch;