Fixed styling

ReactNativeClient/lib/components/global-style.js

@@ -57,7 +57,7 @@ function themeStyle(theme) {
 	output.htmlColor = 'white';
 
 	output.raisedBackgroundColor = "#0F2051";
-	output.raisedColor = "#405593";
+	output.raisedColor = "#788BC3";
 	output.raisedHighlightedColor = "#ffffff";
 
 	themeCache_[theme] = output;

ReactNativeClient/lib/components/note-list.js

@@ -9,17 +9,7 @@ import { reg } from 'lib/registry.js';
 import { Note } from 'lib/models/note.js';
 import { Setting } from 'lib/models/setting.js';
 import { time } from 'lib/time-utils.js';
-import { globalStyle } from 'lib/components/global-style.js';
-
-const styles = StyleSheet.create({
-	noItemMessage: {
-		paddingLeft: globalStyle.marginLeft,
-		paddingRight: globalStyle.marginRight,
-		paddingTop: globalStyle.marginTop,
-		paddingBottom: globalStyle.marginBottom,
-		fontSize: globalStyle.fontSize,
-	},
-});
+import { themeStyle } from 'lib/components/global-style.js';
 
 class NoteListComponent extends Component {
 
@@ -34,6 +24,29 @@ class NoteListComponent extends Component {
 			selectedItemIds: [],
 		};
 		this.rootRef_ = null;
+		this.styles_ = {};
+	}
+
+	styles() {
+		const themeId = this.props.theme;
+		const theme = themeStyle(themeId);
+
+		if (this.styles_[themeId]) return this.styles_[themeId];
+		this.styles_ = {};
+
+		let styles = {
+			noItemMessage: {
+				paddingLeft: theme.marginLeft,
+				paddingRight: theme.marginRight,
+				paddingTop: theme.marginTop,
+				paddingBottom: theme.marginBottom,
+				fontSize: theme.fontSize,
+				color: theme.color,
+			},
+		};
+
+		this.styles_[themeId] = StyleSheet.create(styles);
+		return this.styles_[themeId];
 	}
 
 	filterNotes(notes) {
@@ -89,7 +102,7 @@ class NoteListComponent extends Component {
 			);
 		} else {
 			const noItemMessage = _('There are currently no notes. Create one by clicking on the (+) button.');
-			return <Text style={styles.noItemMessage} >{noItemMessage}</Text>;
+			return <Text style={this.styles().noItemMessage} >{noItemMessage}</Text>;
 		}
 	}
 }
@@ -99,6 +112,7 @@ const NoteList = connect(
 		return {
 			items: state.notes,
 			notesSource: state.notesSource,
+			theme: state.settings.theme,
 		};
 	}
 )(NoteListComponent)

ReactNativeClient/lib/components/screens/welcome.js

@@ -6,14 +6,7 @@ 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,
-		fontSize: globalStyle.fontSize,
-	},
-});
+import { themeStyle } from 'lib/components/global-style.js';
 
 class WelcomeScreenComponent extends BaseScreenComponent {
 	
@@ -21,13 +14,37 @@ class WelcomeScreenComponent extends BaseScreenComponent {
 		return { header: null };
 	}
 
+	constructor() {
+		super();
+		this.styles_ = {};
+	}
+
+	styles() {
+		const themeId = this.props.theme;
+		const theme = themeStyle(themeId);
+
+		if (this.styles_[themeId]) return this.styles_[themeId];
+		this.styles_ = {};
+
+		let styles = {
+			message: {
+				margin: theme.margin,
+				fontSize: theme.fontSize,
+				color: theme.color,
+			},
+		};
+
+		this.styles_[themeId] = StyleSheet.create(styles);
+		return this.styles_[themeId];
+	}
+
 	render() {
 		let message = this.props.folders.length ? _('Click on the (+) button to create a new note or notebook. Click on the side menu to access your existing notebooks.') : _('You currently have no notebook. Create one by clicking on (+) button.');
 
 		return (
-			<View style={this.styles().screen} >
+			<View style={this.rootStyle(this.props.theme).root} >
 				<ScreenHeader title={_('Welcome')}/>
-				<Text style={styles.message}>{message}</Text>
+				<Text style={this.styles().message}>{message}</Text>
 				<ActionButton addFolderNoteButtons={true}/>
 			</View>
 		);
@@ -39,6 +56,7 @@ const WelcomeScreen = connect(
 	(state) => {
 		return {
 			folders: state.folders,
+			theme: state.settings.theme,
 		};
 	}
 )(WelcomeScreenComponent)