Styling

ReactNativeClient/lib/components/action-button.js

@@ -3,6 +3,7 @@ import { StyleSheet, Text } from 'react-native';
 import Icon from 'react-native-vector-icons/Ionicons';
 import ReactNativeActionButton from 'react-native-action-button';
 import { connect } from 'react-redux'
+import { globalStyle } from 'lib/components/global-style.js'
 import { Log } from 'lib/log.js'
 import { _ } from 'lib/locale.js'
 
@@ -12,6 +13,9 @@ const styles = StyleSheet.create({
 		height: 22,
 		color: 'white',
 	},
+	itemText: {
+		// fontSize: 14, // Cannot currently set fontsize since the bow surrounding the label has a fixed size
+	}
 });
 
 class ActionButtonComponent extends React.Component {
@@ -118,7 +122,7 @@ class ActionButtonComponent extends React.Component {
 			);
 		} else {
 			return (
-				<ReactNativeActionButton icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
+				<ReactNativeActionButton textStyle={styles.itemText} icon={mainIcon} buttonColor="rgba(231,76,60,1)" onPress={ function() { } }>
 					{ buttonComps }
 				</ReactNativeActionButton>
 			);

ReactNativeClient/lib/components/global-style.js

@@ -1,9 +1,12 @@
 const globalStyle = {
+	fontSize: 16,
 	margin: 15, // No text and no interactive component should be within this margin
+	itemMarginTop: 10,
+	itemMarginBottom: 10,
 	backgroundColor: "#ffffff",
 	color: "#555555", // For regular text
 	colorFaded: "#777777", // For less important text
-	fontSize: 10,
+	fontSizeSmaller: 14,
 	dividerColor: "#dddddd",
 	selectedColor: '#e5e5e5',
 	disabledOpacity: 0.3,
@@ -13,7 +16,7 @@ const globalStyle = {
 	raisedHighlightedColor: "#ffffff",
 
 	// For WebView - must correspond to the properties above
-	htmlFontSize: '14px',
+	htmlFontSize: '20x',
 	htmlColor: 'black', // Note: CSS in WebView component only seem to work if the colour is written in full letters (so no hexadecimal)
 	htmlDividerColor: 'Gainsboro',
 };

ReactNativeClient/lib/components/note-body-viewer.js

@@ -58,6 +58,7 @@ class NoteBodyViewer extends Component {
 			body {
 				font-size: ` + style.htmlFontSize + `;
 				color: ` + style.htmlColor + `;
+				line-height: 1.5em;
 			}
 			h1 {
 				font-size: 1.2em;
@@ -74,7 +75,7 @@ class NoteBodyViewer extends Component {
 				padding-left: 1em;
 			}
 			a.checkbox {
-				font-size: 1.4em;
+				font-size: 1.6em;
 				position: relative;
 				top: 0.1em;
 				text-decoration: none;

ReactNativeClient/lib/components/note-item.js

@@ -12,17 +12,20 @@ import { globalStyle } from 'lib/components/global-style.js';
 let styles = {
 	listItem: {
 		flexDirection: 'row',
-		height: 40,
+		//height: 40,
 		borderBottomWidth: 1,
 		borderBottomColor: globalStyle.dividerColor,
 		alignItems: 'center',
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: globalStyle.marginRight,
+		paddingTop: globalStyle.itemMarginTop,
+		paddingBottom: globalStyle.itemMarginBottom,
 		backgroundColor: globalStyle.backgroundColor,
 	},
 	listItemText: {
 		flex: 1,
 		color: globalStyle.color,
+		fontSize: globalStyle.fontSize,
 	},
 };
 

ReactNativeClient/lib/components/note-list.js

@@ -16,7 +16,8 @@ const styles = StyleSheet.create({
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: globalStyle.marginRight,
 		paddingTop: globalStyle.marginTop,
-		paddingBottom: globalStyle.marginBottom
+		paddingBottom: globalStyle.marginBottom,
+		fontSize: globalStyle.fontSize,
 	},
 });
 

ReactNativeClient/lib/components/screen-header.js

@@ -81,18 +81,21 @@ let styleObject = {
 	},
 	contextMenuItemText: {
 		flex: 1,
-		height: 40,
 		textAlignVertical: 'center',
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: globalStyle.marginRight,
+		paddingTop: globalStyle.itemMarginTop,
+		paddingBottom: globalStyle.itemMarginBottom,
 		color: globalStyle.color,
 		backgroundColor: globalStyle.backgroundColor,
+		fontSize: globalStyle.fontSize,
 	},
 	titleText: {
 		flex: 1,
 		marginLeft: 0,
 		color: globalStyle.raisedHighlightedColor,
 		fontWeight: 'bold',
+		fontSize: globalStyle.fontSize,
 	}
 };
 

ReactNativeClient/lib/components/screens/config.js

@@ -19,11 +19,18 @@ let styles = {
 	settingText: {
 		fontWeight: 'bold',
 		color: globalStyle.color,
+		fontSize: globalStyle.fontSize,
 	},
 	settingControl: {
 		color: globalStyle.color,
 	},
+	pickerItem: {
+		fontSize: globalStyle.fontSize,
 	}
+}
+
+styles.switchSettingText = Object.assign({}, styles.settingText);
+styles.switchSettingText.width = '80%';
 
 styles.switchSettingContainer = Object.assign({}, styles.settingContainer);
 styles.switchSettingContainer.flexDirection = 'row';
@@ -31,6 +38,7 @@ styles.switchSettingContainer.justifyContent = 'space-between';
 
 styles.switchSettingControl = Object.assign({}, styles.settingControl);
 delete styles.switchSettingControl.color;
+styles.switchSettingControl.width = '20%';
 
 styles = StyleSheet.create(styles);
 
@@ -90,7 +98,7 @@ class ConfigScreenComponent extends BaseScreenComponent {
 		} else if (setting.type == Setting.TYPE_BOOL) {
 			return (
 				<View key={key} style={styles.switchSettingContainer}>
-					<Text key="label" style={styles.settingText}>{setting.label()}</Text>
+					<Text key="label" style={styles.switchSettingText}>{setting.label()}</Text>
 					<Switch key="control" style={styles.switchSettingControl} value={value} onValueChange={(value) => updateSettingValue(key, value)} />
 				</View>
 			);

ReactNativeClient/lib/components/screens/note.js

@@ -26,6 +26,8 @@ const styleObject = {
 		paddingLeft: 0,
 		color: globalStyle.color,
 		backgroundColor: globalStyle.backgroundColor,
+		fontWeight: 'bold',
+		fontSize: globalStyle.fontSize,
 	},
 	bodyTextInput: {
 		flex: 1,
@@ -34,6 +36,7 @@ const styleObject = {
 		textAlignVertical: 'top',
 		color: globalStyle.color,
 		backgroundColor: globalStyle.backgroundColor,
+		fontSize: globalStyle.fontSize,
 	},
 	noteBodyViewer: {
 		flex: 1,
@@ -48,7 +51,6 @@ styleObject.titleContainer = {
 	flexDirection: 'row',
 	paddingLeft: globalStyle.marginLeft,
 	paddingRight: globalStyle.marginRight,
-	height: 40,
 	borderBottomColor: globalStyle.dividerColor,
 	borderBottomWidth: 1,
 };

ReactNativeClient/lib/components/screens/status.js

@@ -54,6 +54,7 @@ class StatusScreenComponent extends BaseScreenComponent {
 				paddingTop: 0,
 				paddingBottom: 0,
 				flex: 0,
+				fontSize: globalStyle.fontSize,
 			};
 			for (let i = 0; i < report.length; i++) {
 				let section = report[i];

ReactNativeClient/lib/components/screens/welcome.js

@@ -11,6 +11,7 @@ import { globalStyle } from 'lib/components/global-style.js';
 const styles = StyleSheet.create({
 	message: {
 		margin: globalStyle.margin,
+		fontSize: globalStyle.fontSize,
 	},
 });
 

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

@@ -19,15 +19,6 @@ let styles = {
 		borderTopWidth: 1,
 		borderTopColor: globalStyle.dividerColor,
 	},
-	name: {
-		position: 'absolute',
-		left: 70,
-		top: 20,
-	},
-	item: {
-		fontSize: 14,
-		fontWeight: '300',
-	},
 	button: {
 		flex: 1,
 		flexDirection: 'row',
@@ -40,11 +31,13 @@ let styles = {
 		flex: 1,
 		color: globalStyle.color,
 		paddingLeft: 10,
+		fontSize: globalStyle.fontSize,
 	},
 	syncStatus: {
 		paddingLeft: globalStyle.marginLeft,
 		paddingRight: globalStyle.marginRight,
 		color: globalStyle.colorFaded,
+		fontSize: globalStyle.fontSizeSmaller,
 	},
 	tagItemList: {
 		flex: 1,