diff --git a/app/components/login/token-help.js b/app/components/login/token-help.js
new file mode 100644
index 0000000..acb9f61
--- /dev/null
+++ b/app/components/login/token-help.js
@@ -0,0 +1,54 @@
+import React from 'react-native';
+import GlobalStyles from '../../settings/styles';
+import Modal from 'react-native-modalbox';
+
+const {
+ StyleSheet,
+ Text,
+ View
+} = React;
+
+const styles = StyleSheet.create({
+ modal: {
+ justifyContent: 'center',
+ alignItems: 'center',
+ backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
+ height: 300
+ },
+ title: {
+ fontSize: 18,
+ color: 'white'
+ },
+ text: {
+ fontSize: 13,
+ color: 'white'
+ },
+ modalView: {
+ flex: 1,
+ justifyContent: 'center',
+ alignItems: 'center',
+ }
+});
+
+export default class Login extends React.Component {
+ render() {
+ return (
+
+
+
+ What is a token?
+
+
+ A token is a thing.
+
+
+
+ Swipe down to dismiss
+
+
+ );
+ }
+};
diff --git a/app/components/routes/login.js b/app/components/routes/login.js
index a73bdec..6f0a537 100644
--- a/app/components/routes/login.js
+++ b/app/components/routes/login.js
@@ -1,5 +1,8 @@
import React from 'react-native';
import GlobalStyles from '../../settings/styles';
+import TokenHelp from '../login/token-help';
+
+var dismissKeyboard = require('dismissKeyboard');
const {
StyleSheet,
@@ -8,13 +11,14 @@ const {
TextInput,
TouchableHighlight,
ScrollView,
- BackAndroid
+ BackAndroid,
+ TouchableWithoutFeedback
} = React;
const styles = StyleSheet.create({
container: {
flex: 1,
- backgroundColor: '#F5FCFF',
+ backgroundColor: GlobalStyles.get('CIRCLE_GREY_DARK'),
},
contentWrapper: {
flex: 0.85,
@@ -28,10 +32,13 @@ const styles = StyleSheet.create({
},
loginButton: {
flex: 1,
- backgroundColor: GlobalStyles.get('CIRCLE_BLUE'),
+ backgroundColor: GlobalStyles.get('CIRCLE_GREEN'),
justifyContent: 'center',
alignItems: 'center',
- padding: 10
+ padding: 10,
+ borderColor: GlobalStyles.get('CIRCLE_GREEN'),
+ borderWidth: 2,
+ borderRadius: 12
},
loginButtonText: {
fontSize: 18,
@@ -53,7 +60,11 @@ const styles = StyleSheet.create({
marginVertical: 20
},
helpText: {
- fontSize: 12,
+ fontSize: 11,
+ fontStyle: 'italic'
+ },
+ text: {
+ color: 'white'
}
});
@@ -61,10 +72,13 @@ export default class Login extends React.Component {
constructor() {
super();
this.state = {
- token: ''
+ token: '',
+ showTokenHelp: false
};
this.validate = this.validate.bind(this);
this.updateState = this.updateState.bind(this);
+ this.showTokenHelp = this.showTokenHelp.bind(this);
+ this.hideTokenHelp = this.hideTokenHelp.bind(this);
}
updateState(key, value) {
@@ -74,6 +88,20 @@ export default class Login extends React.Component {
}
validate() {
+ dismissKeyboard();
+ }
+
+ showTokenHelp() {
+ dismissKeyboard();
+ this.setState({
+ showTokenHelp: true
+ });
+ }
+
+ hideTokenHelp() {
+ this.setState({
+ showTokenHelp: false
+ });
}
componentWillUnmount() {
@@ -88,35 +116,42 @@ export default class Login extends React.Component {
return (
-
+
Sphere
-
+
Please enter your CircleCI token
this.updateState('token', token)}
value={this.state.token}
onSubmitEditing={this.validate}
placeholder="CircleCI Token"
+ placeholderTextColor="#A7A7A7"
autoCorrect={false}
/>
-
- What's this?
-
+
+
+ What's this?
+
+
-
-
+
+
Authenticate
+
);
}
diff --git a/app/settings/styles.js b/app/settings/styles.js
index 194bfe7..4e57cc2 100644
--- a/app/settings/styles.js
+++ b/app/settings/styles.js
@@ -1,5 +1,6 @@
import { Map } from 'immutable';
export default Map({
- CIRCLE_BLUE: 'blue'
+ CIRCLE_GREEN: '#229922',
+ CIRCLE_GREY_DARK: '#343434'
});
diff --git a/package.json b/package.json
index cd8ea1f..b2c4c98 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"circleci": "=0.3.0",
"immutable": "=3.7.6",
"react-native": "=0.19.0",
+ "react-native-modalbox": "=1.2.8",
"react-native-side-menu": "=0.18.0",
"react-native-vector-icons": "=1.0.4",
"underscore": "=1.8.3"