feat(navigation) style updates

react/features/mobile/navigation/components/HeaderNavigationButton.js

@@ -4,11 +4,16 @@ import React from 'react';
 import { Text, TouchableRipple } from 'react-native-paper';
 
 import { Icon } from '../../../base/icons';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import type { StyleType } from '../../../base/styles';
 import styles from '../../../conference/components/native/styles';
 
 type Props = {
 
+    /**
+     * Style of the header button .
+     */
+    buttonStyle?: StyleType,
+
     /**
      * Is the button disabled?
      */
@@ -37,6 +42,7 @@ type Props = {
 
 const HeaderNavigationButton
     = ({
+        buttonStyle,
         disabled,
         label,
         onPress,
@@ -49,8 +55,10 @@ const HeaderNavigationButton
                     src ? (
                         <TouchableRipple
                             onPress = { onPress }
-                            rippleColor = { BaseTheme.palette.screen02Header }
-                            style = { styles.headerNavigationButton } >
+                            rippleColor = { 'transparent' }
+                            style = { [
+                                buttonStyle,
+                                styles.headerNavigationButton ] } >
                             <Icon
                                 size = { 24 }
                                 src = { src } />
@@ -59,7 +67,7 @@ const HeaderNavigationButton
                         <TouchableRipple
                             disabled = { disabled }
                             onPress = { onPress }
-                            rippleColor = { BaseTheme.palette.screen02Header }>
+                            rippleColor = { 'transparent' }>
                             <Text
                                 style = {
                                     twoActions

react/features/mobile/navigation/components/styles.js

@@ -8,6 +8,11 @@ export const TEXT_COLOR = BaseTheme.palette.text01;
  * Styles of the navigation feature.
  */
 export const navigationStyles = {
+
+    arrowBackStyle: {
+        marginLeft: 14
+    },
+
     connectingScreenContainer: {
         backgroundColor: BaseTheme.palette.uiBackground,
         flex: 1

react/features/mobile/navigation/components/welcome/functions.js

@@ -6,6 +6,7 @@ import { getFeatureFlag, WELCOME_PAGE_ENABLED } from '../../../../base/flags';
 import { IconArrowBack } from '../../../../base/icons';
 import HeaderNavigationButton
     from '../HeaderNavigationButton';
+import { navigationStyles } from '../styles';
 
 /**
  * Determines whether the {@code WelcomePage} is enabled by the app itself
@@ -31,6 +32,7 @@ export function isWelcomePageAppEnabled(stateful: Function | Object) {
 export function renderArrowBackButton(onPress: Function) {
     return (
         <HeaderNavigationButton
+            buttonStyle = { navigationStyles.arrowBackStyle }
             onPress = { onPress }
             src = { IconArrowBack } />
     );