From 721f4dc3d3bc86221f3a74da6d028400b4407f16 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= <saghul@jitsi.org>
Date: Mon, 2 May 2022 11:15:37 +0200
Subject: [PATCH] feat(rn,ui) use dark gray for screen headers

Skip the welcome page for now, until we can remove the audio / video
toggle.
---
 react/features/base/ui/Tokens.js                 |  2 ++
 .../add-people-dialog/native/styles.js           |  2 +-
 .../components/HeaderNavigationButton.js         |  2 +-
 .../features/mobile/navigation/screenOptions.js  | 16 +++++++++-------
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/react/features/base/ui/Tokens.js b/react/features/base/ui/Tokens.js
index d70677353..a1e3d1987 100644
--- a/react/features/base/ui/Tokens.js
+++ b/react/features/base/ui/Tokens.js
@@ -38,6 +38,7 @@ export const colors = {
     surface14: '#555555',
     surface15: '#474747',
     surface16: '#131519',
+    surface17: '#161618',
 
     success04: '#189B55',
     success05: '#1EC26A',
@@ -83,6 +84,7 @@ export const colorMap = {
 
     // Screen header
     screen01Header: 'primary10',
+    screen02Header: 'surface17',
 
     // Status bar
     status01Bar: 'primary11',
diff --git a/react/features/invite/components/add-people-dialog/native/styles.js b/react/features/invite/components/add-people-dialog/native/styles.js
index 1279bed00..4632d5755 100644
--- a/react/features/invite/components/add-people-dialog/native/styles.js
+++ b/react/features/invite/components/add-people-dialog/native/styles.js
@@ -27,7 +27,7 @@ export default {
     bottomBar: {
         alignItems: 'center',
         justifyContent: 'center',
-        backgroundColor: BaseTheme.palette.screen01Header,
+        backgroundColor: BaseTheme.palette.screen02Header,
         height: BaseTheme.spacing[10]
     },
 
diff --git a/react/features/mobile/navigation/components/HeaderNavigationButton.js b/react/features/mobile/navigation/components/HeaderNavigationButton.js
index 7e93266b8..0f1f60f45 100644
--- a/react/features/mobile/navigation/components/HeaderNavigationButton.js
+++ b/react/features/mobile/navigation/components/HeaderNavigationButton.js
@@ -60,7 +60,7 @@ const HeaderNavigationButton
                         <TouchableRipple
                             disabled = { disabled }
                             onPress = { onPress }
-                            rippleColor = { BaseTheme.palette.screen01Header }>
+                            rippleColor = { BaseTheme.palette.screen02Header }>
                             <Text
                                 style = {
                                     twoActions
diff --git a/react/features/mobile/navigation/screenOptions.js b/react/features/mobile/navigation/screenOptions.js
index 183544928..cf39be4e8 100644
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@@ -51,7 +51,7 @@ export const dialInSummaryScreenOptions = {
     gestureEnabled: true,
     headerShown: true,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
@@ -76,7 +76,7 @@ export const drawerScreenOptions = {
     gestureEnabled: true,
     headerShown: true,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     }
 };
 
@@ -108,9 +108,11 @@ export const welcomeScreenOptions = {
             size = { 20 }
             src = { IconHome } />
     ),
-    headerTitleStyle: {
-        color: BaseTheme.palette.screen01Header
-    }
+    headerStyle: {
+        backgroundColor: BaseTheme.palette.screen01Header
+    },
+    // eslint-disable-next-line no-empty-function
+    headerTitle: () => {}
 };
 
 /**
@@ -194,7 +196,7 @@ export const presentationScreenOptions = {
     headerLeft: () => screenHeaderCloseButton(goBack),
     headerStatusBarHeight: 0,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01
@@ -262,7 +264,7 @@ export const sharedDocumentScreenOptions = {
     headerBackTitleVisible: false,
     headerShown: true,
     headerStyle: {
-        backgroundColor: BaseTheme.palette.screen01Header
+        backgroundColor: BaseTheme.palette.screen02Header
     },
     headerTitleStyle: {
         color: BaseTheme.palette.text01