overall UI done; working on UX

blink672 · Apr 26, 2017 · 9c2d23a · 9c2d23a
1 parent b8e4e6e
commit 9c2d23a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 43 deletions.
diff --git a/app/AddFence.js b/app/AddFence.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import { View, Text, StyleSheet, Button, Picker, ListView } from 'react-native';
 import {GooglePlacesAutocomplete} from 'react-native-google-places-autocomplete';
 import AuthAxios from './AuthAxios.js';
+import styles from './styles.js';
 
 const Item = Picker.Item
 export default class AddFence extends Component {
@@ -69,26 +70,24 @@ export default class AddFence extends Component {
 
   renderFence(fence) {
     return (
-      <View>
-        <Text>
+      <View style={styles.container}>
+        <Text style={styles.settingText}>
           {fence.label}
         </Text>
-        <Text>
-          {fence.address}{'\n'}{'\n'}
+        <Text style={styles.fenceAddress}>
+          {fence.address}
         </Text>
       </View>
     )
   }
 
   render() {
     return (
-      <View>
-        <View>
-          <ListView
-            dataSource={this.state.fences}
-            renderRow={this.renderFence}
-          />
-        </View>
+      <View style={styles.container}>
+        <Button
+            title='Set this fence'
+            onPress={() => this.makeFence(this.state.coordinates)}
+        />
         <Picker 
           selectedValue={this.state.label}
           onValueChange={this.onValueChange.bind(this)}>
@@ -153,10 +152,13 @@ export default class AddFence extends Component {
             debounce={200}
         />
         </View>
-          <Button
-              title='Set this fence'
-              onPress={() => this.makeFence(this.state.coordinates)}
+        <View>
+          <ListView
+            dataSource={this.state.fences}
+            renderRow={this.renderFence}
+            style={styles.listView}
           />
+        </View>
       </View>
     );
   }

diff --git a/app/CreateGroup.js b/app/CreateGroup.js
@@ -77,37 +77,40 @@ export default class CreateGroup extends Component {
     const params = this.props.navigation.state.params;
     return (
       <View style={styles.container}>
-        <Text style={styles.createGroupText}>Create Group:</Text>
-        <TextInput
-          style={{fontSize: 18, textAlign: 'left'}}
-          onChangeText={(text) => this.setState( {groupName: text} )}
-          placeholder='Insert Group Name'
-          value={this.state.text}
-        />
-        <Text style={styles.createGroupText}>Privacy Setting:</Text>
-        <Picker
-          selectedValue={this.state.privacy}
-          onValueChange={(privacy) => this.setState({ privacy: privacy })}
-        >
-          <Picker.Item label='Label' value='label' />
-          <Picker.Item label='GPS' value='gps' />
-        </Picker>
-        <Text style={styles.createGroupText}>Members:</Text>
-        <ListView
-          dataSource={this.state.friends}
-          style={styles.listView}
-          renderRow={(rowData) => (
-            <CheckBox
-              label={rowData.first}
-              onChange={() => this.handleUserChange(rowData)}
-              underlayColor='transparent'
-            />
-          )}
-        />
         <Button 
           title="Create Group"
           onPress={this.submitGroup}
         />
+        <View style={styles.createGroupContainer}>
+          <Text style={styles.createGroupText}>Create Group:</Text>
+          <TextInput
+            style={styles.createGroupTextInput}
+            onChangeText={(text) => this.setState( {groupName: text} )}
+            placeholder='Insert Group Name'
+            value={this.state.text}
+          />
+          <Text style={styles.createGroupText}>Privacy Setting:</Text>
+          <Picker
+            selectedValue={this.state.privacy}
+            onValueChange={(privacy) => this.setState({ privacy: privacy })}
+          >
+            <Picker.Item label='Label' value='label' />
+            <Picker.Item label='GPS' value='gps' />
+          </Picker>
+          <Text style={styles.createGroupText}>Members:</Text>
+          <ListView
+            dataSource={this.state.friends}
+            style={styles.listView}
+            renderRow={(rowData) => (
+              <CheckBox
+                label={rowData.first}
+                labelStyle={styles.fenceAddress}
+                onChange={() => this.handleUserChange(rowData)}
+                underlayColor='transparent'
+              />
+            )}
+          />
+        </View>
       </View>
     );
   }

diff --git a/app/FriendMap.js b/app/FriendMap.js
@@ -61,14 +61,14 @@ export default class FriendMap extends Component {
   render() {
     return (
       <View style={styles.container}>
+        <Button title='Let me know when they get home' onPress={() => {this.subscribeTo(data)}} />
         <View style={styles.switchContainer}>
           <Switch
               onValueChange={this.switchChange}
               value={this.state.showLabel}
             />
           <Text style={styles.switchText}>{this.state.showLabel ? 'Show Only Label' : 'Show GPS'}</Text>
         </View>
-        <Button title='Let me know when they get home' onPress={() => {this.subscribeTo(data)}} />
         {this.whichPageToRender()}
       </View>
     )

diff --git a/app/styles.js b/app/styles.js
@@ -24,6 +24,10 @@ module.exports = StyleSheet.create({
   map: {
     ...StyleSheet.absoluteFillObject,
   },
+  createGroupContainer: {
+    flex: 1,
+    paddingLeft: 10,
+  },
   switchContainer: {
     // paddingTop: 10, 
     paddingLeft: 10,
@@ -75,10 +79,11 @@ module.exports = StyleSheet.create({
     color: 'black',
     fontWeight: 'bold',
     fontSize: 20,
-    margin: 20,
+    margin: 10,
   },
   createGroupText: {
     fontSize: 20,
+    color: 'black',
   },
   phoneNumber: {
     textAlign: 'center',
@@ -109,9 +114,20 @@ module.exports = StyleSheet.create({
     textAlign: 'auto',
     color: 'black',
   },
+  fenceAddress: {
+    fontSize: 14,
+    textAlign: 'auto',
+    color: 'black',
+    fontStyle: 'italic'
+  },
   labelImage: {
     width: 225,
     height: 225,
     alignItems: 'center',
+  },
+  createGroupTextInput: {
+    fontSize: 18,
+    textAlign: 'left',
+    color: 'black',
   }
 });