From a272995b8c50fa6eaa90a4ce2ffc9d16baa7ffdf Mon Sep 17 00:00:00 2001
From: Calin Chitu <calinte2002@yahoo.co.uk>
Date: Thu, 9 Jun 2022 17:23:56 +0300
Subject: [PATCH] feat(navigation) style updates

---
 .../components/HeaderNavigationButton.js         | 16 ++++++++++++----
 .../mobile/navigation/components/styles.js       |  5 +++++
 .../navigation/components/welcome/functions.js   |  2 ++
 .../welcome/components/native/HelpView.js        |  2 +-
 .../welcome/components/native/PrivacyView.js     |  2 +-
 .../welcome/components/native/TermsView.js       |  2 +-
 .../native/settings/components/SettingsView.js   |  2 +-
 7 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/react/features/mobile/navigation/components/HeaderNavigationButton.js b/react/features/mobile/navigation/components/HeaderNavigationButton.js
index 28d042c17..79fa27615 100644
--- a/react/features/mobile/navigation/components/HeaderNavigationButton.js
+++ b/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
diff --git a/react/features/mobile/navigation/components/styles.js b/react/features/mobile/navigation/components/styles.js
index 3f6311280..060940b4e 100644
--- a/react/features/mobile/navigation/components/styles.js
+++ b/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
diff --git a/react/features/mobile/navigation/components/welcome/functions.js b/react/features/mobile/navigation/components/welcome/functions.js
index 464aeb19b..728de670b 100644
--- a/react/features/mobile/navigation/components/welcome/functions.js
+++ b/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 } />
     );
diff --git a/react/features/welcome/components/native/HelpView.js b/react/features/welcome/components/native/HelpView.js
index 552bb3c13..5434b9072 100644
--- a/react/features/welcome/components/native/HelpView.js
+++ b/react/features/welcome/components/native/HelpView.js
@@ -45,7 +45,7 @@ class HelpView extends PureComponent<Props> {
         navigation.setOptions({
             headerLeft: () =>
                 renderArrowBackButton(() =>
-                    navigation.jumpTo(screen.welcome.main))
+                    navigation.navigate(screen.welcome.main))
         });
     }
 
diff --git a/react/features/welcome/components/native/PrivacyView.js b/react/features/welcome/components/native/PrivacyView.js
index e77280d92..b57805507 100644
--- a/react/features/welcome/components/native/PrivacyView.js
+++ b/react/features/welcome/components/native/PrivacyView.js
@@ -29,7 +29,7 @@ const PrivacyView = ({ navigation }: Props) => {
         navigation.setOptions({
             headerLeft: () =>
                 renderArrowBackButton(() =>
-                    navigation.jumpTo(screen.welcome.main))
+                    navigation.navigate(screen.welcome.main))
         });
     });
 
diff --git a/react/features/welcome/components/native/TermsView.js b/react/features/welcome/components/native/TermsView.js
index bc19e0c66..4ace15988 100644
--- a/react/features/welcome/components/native/TermsView.js
+++ b/react/features/welcome/components/native/TermsView.js
@@ -29,7 +29,7 @@ const TermsView = ({ navigation }: Props) => {
         navigation.setOptions({
             headerLeft: () =>
                 renderArrowBackButton(() =>
-                    navigation.jumpTo(screen.welcome.main))
+                    navigation.navigate(screen.welcome.main))
         });
     });
 
diff --git a/react/features/welcome/components/native/settings/components/SettingsView.js b/react/features/welcome/components/native/settings/components/SettingsView.js
index 10a9a181e..3153597c6 100644
--- a/react/features/welcome/components/native/settings/components/SettingsView.js
+++ b/react/features/welcome/components/native/settings/components/SettingsView.js
@@ -165,7 +165,7 @@ class SettingsView extends AbstractSettingsView<Props, State> {
         navigation.setOptions({
             headerLeft: () =>
                 renderArrowBackButton(() =>
-                    navigation.jumpTo(screen.welcome.main))
+                    navigation.navigate(screen.welcome.main))
         });
     }