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