From e0f5f47a155f978e5042419169ec8785122a5462 Mon Sep 17 00:00:00 2001
From: ruuti <miikka.varri@gmail.com>
Date: Fri, 15 Feb 2019 00:09:21 +0100
Subject: [PATCH] Load background color from theme colours and set it for top
 and bottom safe area to respect iOS style guide. (#1195)

---
 ReactNativeClient/lib/components/side-menu-content.js | 4 +---
 ReactNativeClient/root.js                             | 8 ++++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/ReactNativeClient/lib/components/side-menu-content.js b/ReactNativeClient/lib/components/side-menu-content.js
index 1929fa1c9..48e564f26 100644
--- a/ReactNativeClient/lib/components/side-menu-content.js
+++ b/ReactNativeClient/lib/components/side-menu-content.js
@@ -32,9 +32,7 @@ class SideMenuContentComponent extends Component {
 		let styles = {
 			menu: {
 				flex: 1,
-				backgroundColor: theme.backgroundColor,
-				borderTopWidth: 1,
-				borderTopColor: theme.dividerColor,
+				backgroundColor: theme.backgroundColor
 			},
 			button: {
 				flex: 1,
diff --git a/ReactNativeClient/root.js b/ReactNativeClient/root.js
index ada9a7aea..4834d951f 100644
--- a/ReactNativeClient/root.js
+++ b/ReactNativeClient/root.js
@@ -54,6 +54,7 @@ const ShareExtension = require('react-native-share-extension').default;
 const ResourceFetcher = require('lib/services/ResourceFetcher');
 const SearchEngine = require('lib/services/SearchEngine');
 const WelcomeUtils = require('lib/WelcomeUtils');
+const { themeStyle } = require('lib/components/global-style.js');
 
 const SyncTargetRegistry = require('lib/SyncTargetRegistry.js');
 const SyncTargetOneDrive = require('lib/SyncTargetOneDrive.js');
@@ -642,8 +643,9 @@ class AppComponent extends React.Component {
 
 	render() {
 		if (this.props.appState != 'ready') return null;
+		const theme = themeStyle(this.props.theme);
 
-		const sideMenuContent = <SafeAreaView style={{flex:1}}><SideMenuContent/></SafeAreaView>;
+		const sideMenuContent = <SafeAreaView style={{flex:1, backgroundColor: theme.backgroundColor}}><SideMenuContent/></SafeAreaView>;
 
 		const appNavInit = {
 			Welcome: { screen: WelcomeScreen },
@@ -671,7 +673,8 @@ class AppComponent extends React.Component {
 				}}
 				>
 				<MenuContext style={{ flex: 1 }}>
-					<SafeAreaView style={{flex:1}}>
+					<SafeAreaView style={{flex:0, backgroundColor: theme.raisedBackgroundColor}} />
+					<SafeAreaView style={{flex:1, backgroundColor: theme.backgroundColor}}>
 						<AppNav screens={appNavInit} />
 					</SafeAreaView>
 					<DropdownAlert ref={ref => this.dropdownAlert_ = ref} tapToCloseEnabled={true} />
@@ -689,6 +692,7 @@ const mapStateToProps = (state) => {
 		appState: state.appState,
 		noteSelectionEnabled: state.noteSelectionEnabled,
 		selectedFolderId: state.selectedFolderId,
+		theme: state.settings.theme
 	};
 };