More styling

ReactNativeClient/lib/components/action-button.js

@@ -78,7 +78,7 @@ class ActionButtonComponent extends React.Component {
 			}
 
 			buttons.push({
-				title: _('New folder'),
+				title: _('New notebook'),
 				onPress: () => { this.newFolder_press() },
 				color: '#3498db',
 				icon: 'md-folder',

ReactNativeClient/lib/components/app-nav.js

@@ -12,8 +12,8 @@ class AppNavComponent extends Component {
 		let Screen = this.props.screens[route.routeName].screen;
 
 		return (
-			<View style={{flex:1}}>
-				<Screen style={{backgroundColor: '#f00'}} navigation={{ state: route }} />
+			<View style={{ flex: 1 }}>
+				<Screen navigation={{ state: route }} />
 			</View>
 		);
 	}

ReactNativeClient/lib/components/screen-header.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux'
 import { View, Text, Button, StyleSheet, TouchableOpacity, Picker } from 'react-native';
+import Icon from 'react-native-vector-icons/Ionicons';
 import { Log } from 'lib/log.js';
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
 import { _ } from 'lib/locale.js';
@@ -13,10 +14,8 @@ import { globalStyle } from 'lib/components/global-style.js';
 let styleObject = {
 	container: {
 		flexDirection: 'row',
-		paddingLeft: globalStyle.marginLeft,
 		paddingTop: 10,
 		paddingBottom: 10,
-		paddingRight: 0,
 		backgroundColor: globalStyle.backgroundColor,
 		alignItems: 'center',
 		shadowColor: '#000000',
@@ -35,29 +34,29 @@ let styleObject = {
 	},
 	sideMenuButton: {
 		flex: 1,
-		backgroundColor: "#0482E3",
-		paddingLeft: 15,
-		paddingRight: 15,
-		marginRight: 10,
+		backgroundColor: globalStyle.backgroundColor,
+		paddingLeft: globalStyle.marginLeft,
+		paddingRight: 5,
+		marginRight: 2,
 	},
 	sideMenuButtonText: {
 		textAlignVertical: 'center',
-		color: "#ffffff",
+		color: globalStyle.color,
 		fontWeight: 'bold',
 		flex: 1,
 	},
 	backButton: {
 		flex: 1,
-		backgroundColor: "#0482E3",
+		backgroundColor: globalStyle.backgroundColor,
 		paddingLeft: 15,
 		paddingRight: 15,
-		marginRight: 10,
+		marginRight: 1,
 	},
-	backButtonText: {
-		textAlignVertical: 'center',
-		color: "#ffffff",
-		fontWeight: 'bold',
+	backButtonIcon: {
 		flex: 1,
+		fontSize: 20,
+		color: globalStyle.color,
+		textAlignVertical: 'center',
 	},
 	saveButton: {
 		flex: 1,
@@ -94,13 +93,13 @@ let styleObject = {
 	},
 	titleText: {
 		flex: 1,
-		marginLeft: 10,
+		marginLeft: 0,
 		color: globalStyle.color,
 	}
 };
 
-styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { backgroundColor: "#c6c6c6" });
-styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { backgroundColor: "#c6c6c6" });
+styleObject.backButtonDisabled = Object.assign({}, styleObject.backButton, { opacity: 0.2 });
+styleObject.saveButtonDisabled = Object.assign({}, styleObject.saveButton, { opacity: 0.2 });
 
 const styles = StyleSheet.create(styleObject);
 
@@ -147,10 +146,11 @@ class ScreenHeaderComponent extends Component {
 		}
 
 		function backButton(styles, onPress, disabled) {
+			// <Text style={styles.backButtonText}>&lt;</Text>
 			return (
 				<TouchableOpacity onPress={onPress} disabled={disabled}>
 					<View style={disabled ? styles.backButtonDisabled : styles.backButton}>
-						<Text style={styles.backButtonText}>&lt;</Text>
+						<Icon name='md-arrow-back' style={styles.backButtonIcon} />
 					</View>
 				</TouchableOpacity>
 			);

ReactNativeClient/lib/components/screens/status.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { ListView, View, Text, Button } from 'react-native';
+import { ListView, StyleSheet, View, Text, Button } from 'react-native';
 import { Setting } from 'lib/models/setting.js';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
@@ -13,6 +13,14 @@ import { Folder } from 'lib/models/folder.js';
 import { ReportService } from 'lib/services/report.js';
 import { _ } from 'lib/locale.js';
 import { BaseScreenComponent } from 'lib/components/base-screen.js';
+import { globalStyle } from 'lib/components/global-style.js';
+
+const styles = StyleSheet.create({
+	body: {
+		flex: 1,
+		margin: globalStyle.margin,
+	},
+});
 
 class StatusScreenComponent extends BaseScreenComponent {
 	
@@ -70,7 +78,7 @@ class StatusScreenComponent extends BaseScreenComponent {
 		return (
 			<View style={this.styles().screen}>
 				<ScreenHeader navState={this.props.navigation.state} />
-				<View style={{flex: 1}}>
+				<View style={styles.body}>
 					{ body }
 				</View>
 				<Button title="Refresh" onPress={() => this.resfreshScreen()}/>

ReactNativeClient/lib/components/screens/welcome.js

@@ -1,11 +1,18 @@
 import React, { Component } from 'react';
-import { View, Text } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { connect } from 'react-redux'
 import { Log } from 'lib/log.js'
 import { ScreenHeader } from 'lib/components/screen-header.js';
 import { ActionButton } from 'lib/components/action-button.js';
 import { BaseScreenComponent } from 'lib/components/base-screen.js';
 import { _ } from 'lib/locale.js';
+import { globalStyle } from 'lib/components/global-style.js';
+
+const styles = StyleSheet.create({
+	message: {
+		margin: globalStyle.margin,
+	},
+});
 
 class WelcomeScreenComponent extends BaseScreenComponent {
 	
@@ -26,7 +33,7 @@ class WelcomeScreenComponent extends BaseScreenComponent {
 			return (
 				<View style={this.styles().screen} >
 					<ScreenHeader navState={this.props.navigation.state}/>
-					<Text>{message}</Text>
+					<Text style={styles.message}>{message}</Text>
 					<ActionButton addFolderNoteButtons={true}/>
 				</View>
 			);			

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

@@ -103,7 +103,7 @@ class SideMenuContentComponent extends Component {
 
 		if (items.length) items.push(<View style={{ height: 50, flex: -1 }} key='divider_1'></View>); // DIVIDER
 
-		const syncTitle = this.props.syncStarted ? 'Cancel sync' : 'Synchronize';
+		const syncTitle = this.props.syncStarted ? _('Cancel sync') : _('Synchronize');
 
 		let lines = Synchronizer.reportToLines(this.props.syncReport);
 		const syncReportText = lines.join("\n");