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

@@ -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',

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]
     },
 

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

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