diff --git a/index.android.js b/index.android.js index 31af358..eddf1c1 100644 --- a/index.android.js +++ b/index.android.js @@ -6,7 +6,16 @@ var React = require('react-native'); var RNGMap = require('react-native-gmaps'); +var MK = require('react-native-material-kit'); var Polyline = require('react-native-gmaps/Polyline'); + +var { + MKButton, + MKColor, + mdl, + MKCardStyles +} = MK; + var { AppRegistry, StyleSheet, @@ -16,6 +25,11 @@ var { TouchableHighlight } = React; +MK.setTheme({ + primaryColor: MKColor.Teal, + accentColor: MKColor.Purple, +}); + var getMeHighMobile = React.createClass({ getInitialState: function(){ @@ -90,15 +104,19 @@ var getMeHighMobile = React.createClass({ } }, _renderStart: function(){ + var ColoredFlatButton = MKButton.coloredButton() + .withText('Get Me High') + .withTextStyle(styles.buttonText) + .withOnPress(this._getMeHigh) + .build(); if( this.state.lastPosition !== 'unknown' && this.state.shops.length > 1 ){ return( - - Get Me High - + ); }else { return( + Getting your location ); } @@ -152,13 +170,22 @@ var styles = StyleSheet.create({ borderRadius: 300 }, buttonText: { - fontSize: 60, - color: '#F5FCFF', - textAlign: 'center' + fontSize: 30 }, scrollView: { height: 300, }, + legendLabel: { + textAlign: 'center', + color: '#666666', + marginTop: 10, marginBottom: 20, + fontSize: 12, + fontWeight: '300', + }, + spinner: { + width: 120, + height: 120, + }, instructions: { textAlign: 'center', color: '#333333',