Add font files and basic styling

mozilla-magnet · Jan 11, 2017 · f482c88 · f482c88
1 parent 43b478d
commit f482c88
Show file tree

Hide file tree

Showing 13 changed files with 140 additions and 36 deletions.
diff --git a/android/app/src/main/assets/fonts/FiraSans-Book.ttf b/android/app/src/main/assets/fonts/FiraSans-Book.ttf
diff --git a/android/app/src/main/assets/fonts/FiraSans-LightItalic.ttf b/android/app/src/main/assets/fonts/FiraSans-LightItalic.ttf
diff --git a/config.js b/config.js
@@ -1,5 +1,12 @@
 export const theme = {
   'colorBackground': '#f2f2f2',
+  'fontLightItalic': 'FiraSans-LightItalic',
+  'fontBook': 'FiraSans-Book',
+};
+
+export const defaultTextStyle = {
+  'fontFamily': theme.fontBook,
+  'fontSize': 16,
 };
 
 export const settings = {

diff --git a/ios/MagnetJourney.xcodeproj/project.pbxproj b/ios/MagnetJourney.xcodeproj/project.pbxproj
@@ -24,6 +24,8 @@
 		146834051AC3E58100842450 /* libReact.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 146834041AC3E56700842450 /* libReact.a */; };
 		5E9157361DD0AC6A00FF2AA8 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		4171ADEE82944774BC4A228B /* FiraSans-Book.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 200F0BC049A247F6A9FD9A5C /* FiraSans-Book.ttf */; };
+		607DD96F3FEB4B86AC5BD465 /* FiraSans-LightItalic.ttf in Resources */ = {isa = PBXBuildFile; fileRef = BA448575D2574E7091F92885 /* FiraSans-LightItalic.ttf */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -234,6 +236,8 @@
 		5E91572D1DD0AC6500FF2AA8 /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		78C398B01ACF4ADC00677621 /* RCTLinking.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTLinking.xcodeproj; path = "../node_modules/react-native/Libraries/LinkingIOS/RCTLinking.xcodeproj"; sourceTree = "<group>"; };
 		832341B01AAA6A8300B99B32 /* RCTText.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTText.xcodeproj; path = "../node_modules/react-native/Libraries/Text/RCTText.xcodeproj"; sourceTree = "<group>"; };
+		200F0BC049A247F6A9FD9A5C /* FiraSans-Book.ttf */ = {isa = PBXFileReference; name = "FiraSans-Book.ttf"; path = "../js/fonts/FiraSans-Book.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
+		BA448575D2574E7091F92885 /* FiraSans-LightItalic.ttf */ = {isa = PBXFileReference; name = "FiraSans-LightItalic.ttf"; path = "../js/fonts/FiraSans-LightItalic.ttf"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = unknown; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -424,6 +428,7 @@
 				832341AE1AAA6A7D00B99B32 /* Libraries */,
 				00E356EF1AD99517003FC87E /* MagnetJourneyTests */,
 				83CBBA001A601CBA00E9B192 /* Products */,
+				2F0A17BC77814540B01C778F /* Resources */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -438,6 +443,16 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		2F0A17BC77814540B01C778F /* Resources */ = {
+			isa = PBXGroup;
+			children = (
+				200F0BC049A247F6A9FD9A5C /* FiraSans-Book.ttf */,
+				BA448575D2574E7091F92885 /* FiraSans-LightItalic.ttf */,
+			);
+			name = Resources;
+			path = "";
+			sourceTree = "<group>";
+		};
 /* End PBXGroup section */
 
 /* Begin PBXNativeTarget section */
@@ -749,6 +764,8 @@
 			files = (
 				13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */,
 				13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */,
+				4171ADEE82944774BC4A228B /* FiraSans-Book.ttf in Resources */,
+				607DD96F3FEB4B86AC5BD465 /* FiraSans-LightItalic.ttf in Resources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};

diff --git a/ios/MagnetJourney/Info.plist b/ios/MagnetJourney/Info.plist
@@ -50,5 +50,10 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>UIAppFonts</key>
+	<array>
+		<string>FiraSans-Book.ttf</string>
+		<string>FiraSans-LightItalic.ttf</string>
+	</array>
 </dict>
 </plist>
diff --git a/js/fonts/FiraSans-Book.ttf b/js/fonts/FiraSans-Book.ttf
diff --git a/js/fonts/FiraSans-LightItalic.ttf b/js/fonts/FiraSans-LightItalic.ttf
diff --git a/js/scenes/Item.js b/js/scenes/Item.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import {
   View,
   Text,
-  TouchableHighlight,
+  TouchableOpacity,
+  StyleSheet,
 } from 'react-native';
 
+import { defaultTextStyle } from '../../config';
+
 export default class Item extends Component {
   constructor(props) {
     super(props);
@@ -25,15 +28,15 @@ export default class Item extends Component {
   render() {
     return (
       <View>
-        <Text>Item scene</Text>
-        <TouchableHighlight
+        <Text style={styles.header}>Item</Text>
+        <TouchableOpacity
           onPress={this.onMapPress}>
-          <Text>Go to Map scene</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
+          <Text style={styles.text}>Go to Map scene</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
           onPress={this.onBackPress}>
-          <Text>Back</Text>
-        </TouchableHighlight>
+          <Text style={styles.text}>Back</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -42,3 +45,15 @@ export default class Item extends Component {
 Item.propTypes = {
   navigator: React.PropTypes.object,
 };
+
+const styles = StyleSheet.create({
+  header: {
+    ...defaultTextStyle,
+    fontSize: 22,
+    textAlign: 'center',
+  },
+
+  text: {
+    ...defaultTextStyle,
+  },
+});
diff --git a/js/scenes/List.js b/js/scenes/List.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import {
   View,
   Text,
-  TouchableHighlight,
+  TouchableOpacity,
+  StyleSheet,
 } from 'react-native';
 
+import { defaultTextStyle } from '../../config';
+
 export default class List extends Component {
   constructor(props) {
     super(props);
@@ -19,23 +22,23 @@ export default class List extends Component {
   render() {
     return (
       <View>
-        <Text>List scene</Text>
-        <TouchableHighlight
+        <Text style={styles.header}>List</Text>
+        <TouchableOpacity
           onPress={this.onItemPress.bind(this, 'item')}>
-          <Text>Go to Item scene</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
+          <Text style={styles.text}>Go to Item scene</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
           onPress={this.onItemPress.bind(this, 'map')}>
-          <Text>Go to Map scene</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
+          <Text style={styles.text}>Go to Map scene</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
           onPress={this.onItemPress.bind(this, 'profile')}>
-          <Text>Go to Profile scene</Text>
-        </TouchableHighlight>
-        <TouchableHighlight
+          <Text style={styles.text}>Go to Profile scene</Text>
+        </TouchableOpacity>
+        <TouchableOpacity
           onPress={this.onItemPress.bind(this, 'settings')}>
-          <Text>Go to Settings scene</Text>
-        </TouchableHighlight>
+          <Text style={styles.text}>Go to Settings scene</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -44,3 +47,15 @@ export default class List extends Component {
 List.propTypes = {
   navigator: React.PropTypes.object,
 };
+
+const styles = StyleSheet.create({
+  header: {
+    ...defaultTextStyle,
+    fontSize: 22,
+    textAlign: 'center',
+  },
+
+  text: {
+    ...defaultTextStyle,
+  },
+});
diff --git a/js/scenes/Map.js b/js/scenes/Map.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import {
   View,
   Text,
-  TouchableHighlight,
+  TouchableOpacity,
+  StyleSheet,
 } from 'react-native';
 
+import { defaultTextStyle } from '../../config';
+
 export default class Map extends Component {
   constructor(props) {
     super(props);
@@ -20,11 +23,11 @@ export default class Map extends Component {
   render() {
     return (
       <View>
-        <Text>Map scene</Text>
-        <TouchableHighlight
+        <Text style={styles.header}>Map</Text>
+        <TouchableOpacity
           onPress={this.onBackPress}>
-          <Text>Back</Text>
-        </TouchableHighlight>
+          <Text style={styles.text}>Back</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -33,3 +36,15 @@ export default class Map extends Component {
 Map.propTypes = {
   navigator: React.PropTypes.object,
 };
+
+const styles = StyleSheet.create({
+  header: {
+    ...defaultTextStyle,
+    fontSize: 22,
+    textAlign: 'center',
+  },
+
+  text: {
+    ...defaultTextStyle,
+  },
+});
diff --git a/js/scenes/Profile.js b/js/scenes/Profile.js
@@ -2,9 +2,12 @@ import React, { Component } from 'react';
 import {
   View,
   Text,
-  TouchableHighlight,
+  TouchableOpacity,
+  StyleSheet,
 } from 'react-native';
 
+import { defaultTextStyle } from '../../config';
+
 export default class Profile extends Component {
   constructor(props) {
     super(props);
@@ -20,11 +23,11 @@ export default class Profile extends Component {
   render() {
     return (
       <View>
-        <Text>Profile scene</Text>
-        <TouchableHighlight
+        <Text style={styles.header}>Profile</Text>
+        <TouchableOpacity
           onPress={this.onBackPress}>
-          <Text>Back</Text>
-        </TouchableHighlight>
+          <Text style={styles.text}>Back</Text>
+        </TouchableOpacity>
       </View>
     );
   }
@@ -33,3 +36,15 @@ export default class Profile extends Component {
 Profile.propTypes = {
   navigator: React.PropTypes.object,
 };
+
+const styles = StyleSheet.create({
+  header: {
+    ...defaultTextStyle,
+    fontSize: 22,
+    textAlign: 'center',
+  },
+
+  text: {
+    ...defaultTextStyle,
+  },
+});
diff --git a/js/scenes/Settings.js b/js/scenes/Settings.js
@@ -7,7 +7,7 @@ import {
   StyleSheet,
 } from 'react-native';
 
-import { settings } from '../../config';
+import { defaultTextStyle, settings } from '../../config';
 
 export default class Settings extends Component {
   constructor(props) {
@@ -33,21 +33,21 @@ export default class Settings extends Component {
   render() {
     return (
       <View>
-        <Text>Settings scene</Text>
+        <Text style={styles.header}>Settings</Text>
 
         {settings.links.map((link, id) => (
           <View key={id}>
             <View style={styles.separator}/>
             <TouchableOpacity
               onPress={this.onItemPress.bind(this, link.url)}>
-              <Text>{link.label}</Text>
+              <Text style={styles.text}>{link.label}</Text>
             </TouchableOpacity>
           </View>
         ))}
 
         <TouchableOpacity
           onPress={this.onBackPress}>
-          <Text>Back</Text>
+          <Text style={styles.text}>Back</Text>
         </TouchableOpacity>
       </View>
     );
@@ -59,6 +59,16 @@ Settings.propTypes = {
 };
 
 const styles = StyleSheet.create({
+  header: {
+    ...defaultTextStyle,
+    fontSize: 22,
+    textAlign: 'center',
+  },
+
+  text: {
+    ...defaultTextStyle,
+  },
+
   separator: {
     height: 1,
     backgroundColor: '#eee',

diff --git a/package.json b/package.json
@@ -27,6 +27,11 @@
   "jest": {
     "preset": "react-native"
   },
+  "rnpm": {
+    "assets": [
+      "./js/fonts"
+    ]
+  },
   "repository": {
     "url": "git+ssh://[email protected]/mozilla-magnet/journey.git",
     "type": "git"