Mobile: Fixed tag box styling in dark theme

ReactNativeClient/lib/components/ModalDialog.js

@@ -35,16 +35,17 @@ class ModalDialog extends React.Component {
 			modalContentWrapper2: {
 				flex:1,
 			},
-			title: {
+			title: Object.assign({}, theme.normalText, {
 				borderBottomWidth: 1,
 				borderBottomColor: theme.dividerColor,
 				paddingBottom: 10,
 				fontWeight: 'bold',
-			},
+			}),
 			buttonRow: {
 				flexDirection: 'row',
 				borderTopWidth: 1,
 				borderTopColor: theme.dividerColor,
+				paddingTop: 10,
 			},
 		};
 

ReactNativeClient/lib/components/global-style.js

@@ -1,4 +1,5 @@
 const Setting = require('lib/models/Setting.js');
+const { Platform } = require('react-native');
 
 const globalStyle = {
 	fontSize: 16,
@@ -36,30 +37,66 @@ globalStyle.marginTop = globalStyle.margin;
 globalStyle.marginBottom = globalStyle.margin;
 globalStyle.htmlMarginLeft = ((globalStyle.marginLeft / 10) * 0.6).toFixed(2) + 'em';
 
-globalStyle.icon = {
-	color: globalStyle.color,
-	fontSize: 30,
-};
+// globalStyle.icon = {
+// 	color: globalStyle.color,
+// 	fontSize: 30,
+// };
 
-globalStyle.lineInput = {
-	color: globalStyle.color,
-	backgroundColor: globalStyle.backgroundColor,
-};
+// globalStyle.lineInput = {
+// 	color: globalStyle.color,
+// 	backgroundColor: globalStyle.backgroundColor,
+// };
 
-globalStyle.buttonRow = {
-	flexDirection: 'row',
-	borderTopWidth: 1,
-	borderTopColor: globalStyle.dividerColor,
-	paddingTop: 10,
-};
+// globalStyle.buttonRow = {
+// 	flexDirection: 'row',
+// 	borderTopWidth: 1,
+// 	borderTopColor: globalStyle.dividerColor,
+// 	paddingTop: 10,
+// };
+
+// globalStyle.normalText = {
+// 	color: globalStyle.color,
+// 	fontSize: globalStyle.fontSize,
+// };
 
 let themeCache_ = {};
 
+function addExtraStyles(style) {
+	style.icon = {
+		color: style.color,
+		fontSize: 30,
+	};
+
+	style.lineInput = {
+		color: style.color,
+		backgroundColor: style.backgroundColor,
+	};
+
+	if (Platform.OS === 'ios') {
+		style.lineInput.borderBottomWidth = 1;
+		style.lineInput.borderBottomColor = style.dividerColor;
+	}
+
+	style.buttonRow = {
+		flexDirection: 'row',
+		borderTopWidth: 1,
+		borderTopColor: style.dividerColor,
+		paddingTop: 10,
+	};
+
+	style.normalText = {
+		color: style.color,
+		fontSize: style.fontSize,
+	};
+
+	return style;
+}
+
 function themeStyle(theme) {
 	if (themeCache_[theme]) return themeCache_[theme];
 
 	let output = Object.assign({}, globalStyle);
-	if (theme == Setting.THEME_LIGHT) return output;
+	if (theme == Setting.THEME_LIGHT) return addExtraStyles(output);
 
 	output.backgroundColor = '#1D2024';
 	output.color = '#dddddd';
@@ -76,7 +113,7 @@ function themeStyle(theme) {
 	output.htmlLinkColor = 'rgb(166,166,255)';
 
 	themeCache_[theme] = output;
-	return themeCache_[theme];
+	return addExtraStyles(themeCache_[theme]);
 }
 
 module.exports = { globalStyle, themeStyle };

ReactNativeClient/lib/components/screens/NoteTagsDialog.js

@@ -65,7 +65,7 @@ class NoteTagsDialogComponent extends React.Component {
 			return (
 				<TouchableOpacity key={tag.id} onPress={() => this.tag_press(tag.id)} style={this.styles().tag}>
 					<View style={this.styles().tagIconText}>
-						<Icon name={iconName} style={this.styles().tagCheckbox}/><Text>{tag.title}</Text>
+						<Icon name={iconName} style={this.styles().tagCheckbox}/><Text style={this.styles().tagText}>{tag.title}</Text>
 					</View>
 				</TouchableOpacity>
 			);
@@ -114,7 +114,6 @@ class NoteTagsDialogComponent extends React.Component {
 
 		tagListData.sort((a, b) => {
 			return naturalCompare.caseInsensitive(a.title, b.title);
-			//return a.title.toLowerCase() < b.title.toLowerCase() ? -1 : +1;
 		});
 
 		this.setState({ tagListData: tagListData });
@@ -137,9 +136,11 @@ class NoteTagsDialogComponent extends React.Component {
 				flexDirection: 'row',
 				alignItems: 'center',
 			},
+			tagText: Object.assign({}, theme.normalText),
 			tagCheckbox: {
-				marginRight: 5,
+				marginRight: 8,
 				fontSize: 20,
+				color: theme.color,
 			},
 			newTagBox: {
 				flexDirection:'row',
@@ -149,6 +150,8 @@ class NoteTagsDialogComponent extends React.Component {
 				borderBottomWidth: 1,
 				borderBottomColor: theme.dividerColor
 			},
+			newTagBoxLabel: Object.assign({}, theme.normalText, { marginRight: 8 }),
+			newTagBoxInput: Object.assign({}, theme.lineInput, { flex: 1 }),
 		};
 
 		this.styles_[themeId] = StyleSheet.create(styles);
@@ -161,7 +164,7 @@ class NoteTagsDialogComponent extends React.Component {
 		const dialogContent = (
 			<View style={{flex:1}}>
 				<View style={this.styles().newTagBox}>
-					<Text>{_('New tags:')}</Text><TextInput value={this.state.newTags} onChangeText={value => { this.setState({ newTags: value }) }} style={{flex:1}}/>
+					<Text style={this.styles().newTagBoxLabel}>{_('New tags:')}</Text><TextInput value={this.state.newTags} onChangeText={value => { this.setState({ newTags: value }) }} style={this.styles().newTagBoxInput}/>
 				</View>
 				<FlatList
 					data={this.state.tagListData}

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

@@ -138,8 +138,10 @@ class SideMenuContentComponent extends Component {
 	}
 
 	synchronizeButton(state) {
+		const theme = themeStyle(this.props.theme);
+		
 		const title = state == 'sync' ? _('Synchronise') : _('Cancel synchronisation');
-		const iconComp = state == 'sync' ? <Icon name='md-sync' style={globalStyle.icon} /> : <Icon name='md-close' style={globalStyle.icon} />;
+		const iconComp = state == 'sync' ? <Icon name='md-sync' style={theme.icon} /> : <Icon name='md-close' style={theme.icon} />;
 
 		return (
 			<TouchableOpacity key={'synchronize_button'} onPress={() => { this.synchronize_press() }}>