Fixed note sorting and changed colour of header

ReactNativeClient/lib/components/global-style.js

@@ -8,6 +8,10 @@ const globalStyle = {
 	selectedColor: '#e5e5e5',
 	disabledOpacity: 0.3,
 
+	raisedBackgroundColor: "#0072D5",
+	raisedColor: "#003363",
+	raisedHighlightedColor: "#ffffff",
+
 	// For WebView - must correspond to the properties above
 	htmlFontSize: '14px',
 	htmlColor: 'black', // Note: CSS in WebView component only seem to work if the colour is written in full letters (so no hexadecimal)

ReactNativeClient/lib/components/screen-header.js

@@ -16,7 +16,7 @@ let styleObject = {
 		flexDirection: 'row',
 		paddingTop: 10,
 		paddingBottom: 10,
-		backgroundColor: globalStyle.backgroundColor,
+		backgroundColor: globalStyle.raisedBackgroundColor,
 		alignItems: 'center',
 		shadowColor: '#000000',
 		elevation: 5,
@@ -24,7 +24,7 @@ let styleObject = {
 	folderPicker: {
 		height: 30,
 		flex:1,
-		color: globalStyle.color,
+		color: globalStyle.raisedHighlightedColor,
 		// Note: cannot set backgroundStyle as that would remove the arrow in the component
 	},
 	divider: {
@@ -35,14 +35,14 @@ let styleObject = {
 	sideMenuButton: {
 		flex: 1,
 		alignItems: 'center',
-		backgroundColor: globalStyle.backgroundColor,
+		backgroundColor: globalStyle.raisedBackgroundColor,
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: 5,
 		marginRight: 2,
 	},
 	iconButton: {
 		flex: 1,
-		backgroundColor: globalStyle.backgroundColor,
+		backgroundColor: globalStyle.raisedBackgroundColor,
 		paddingLeft: 15,
 		paddingRight: 15,
 	},
@@ -70,11 +70,11 @@ let styleObject = {
 	contextMenuTrigger: {
 		fontSize: 25,
 		paddingRight: globalStyle.marginRight,
-		color: globalStyle.color,
+		color: globalStyle.raisedColor,
 		fontWeight: 'bold',
 	},
 	contextMenu: {
-		backgroundColor: globalStyle.backgroundColor,
+		backgroundColor: globalStyle.raisedBackgroundColor,
 	},
 	contextMenuItem: {
 		backgroundColor: globalStyle.backgroundColor,
@@ -91,13 +91,15 @@ let styleObject = {
 	titleText: {
 		flex: 1,
 		marginLeft: 0,
-		color: globalStyle.color,
+		color: globalStyle.raisedHighlightedColor,
+		fontWeight: 'bold',
 	}
 };
 
 styleObject.topIcon = Object.assign({}, globalStyle.icon);
 styleObject.topIcon.flex = 1;
 styleObject.topIcon.textAlignVertical = 'center';
+styleObject.topIcon.color = globalStyle.raisedColor;
 
 styleObject.backButton = Object.assign({}, styleObject.iconButton);
 styleObject.backButton.marginRight = 1;

ReactNativeClient/lib/components/side-menu-content.js

@@ -167,12 +167,6 @@ class SideMenuContentComponent extends Component {
 		return <View style={{ marginTop: 15, marginBottom: 15, flex: -1, borderBottomWidth: 1, borderBottomColor: globalStyle.dividerColor }} key={key}></View>
 	}
 
-	// onLayout(event) {
-	// 	const newWidth = event.nativeEvent.layout.width;
-	// 	if (this.state.width == newWidth) return;
-	// 	this.setState({ width: newWidth });
-	// }
-
 	render() {
 		let items = [];
 
@@ -202,6 +196,7 @@ class SideMenuContentComponent extends Component {
 		if (items.length) items.push(this.makeDivider('divider_2'));
 
 		let lines = Synchronizer.reportToLines(this.props.syncReport);
+		while (lines.length < 10) lines.push(''); // Add blank lines so that height of report text is fixed and doesn't affect scrolling
 		const syncReportText = lines.join("\n");
 
 		items.push(this.synchronizeButton(this.props.syncStarted ? 'cancel' : 'sync'));