Stylize Task

skiser · Oct 16, 2019 · 6d58a9b · 6d58a9b
1 parent 32cccc1
commit 6d58a9b
Showing 1 changed file with 32 additions and 14 deletions.
diff --git a/Routinely/app/screens/tasks.js b/Routinely/app/screens/tasks.js
@@ -2,15 +2,17 @@ import React from 'react';
 import firebase from '@react-native-firebase/app';
 import firestore from '@react-native-firebase/firestore';
 import '@react-native-firebase/auth';
+import AwesomeButtonBlue from 'react-native-really-awesome-button/src/themes/blue';
 import {
   TextInput,
   Text,
   FlatList,
-  Button,
   View,
   StyleSheet,
   ListRenderItem,
 } from 'react-native';
+import {Hoshi} from 'react-native-textinput-effects';
+
 const ref = firestore()
   .collection('users')
   .doc('cteichmann')
@@ -56,10 +58,25 @@ class tasks extends React.Component {
   componentDidMount() {
     this.getTasks(this.onTasksRetrieved);
   }
-
   render() {
     return (
-      <View>
+      <View style={styles.container}>
+        <View style={styles.inputRow}>
+          <Hoshi
+            style={styles.card1}
+            label={'Enter Task Name'}
+            onChangeText={task => this.setState({task})}
+            value={this.state.task}
+            borderColor={'#2E68FF'}
+            maskColor={'#blue'}
+          />
+          <AwesomeButtonBlue
+            width={75}
+            title="addTitle"
+            onPress={() => this.addTask(this.state.task)}>
+            Add
+          </AwesomeButtonBlue>
+        </View>
         <FlatList
           data={this.state.taskList}
           keyExtractor={item => item.id}
@@ -68,24 +85,25 @@ class tasks extends React.Component {
             return <Text> {item.title}</Text>;
           }}
         />
-        <TextInput
-          style={styles.container}
-          placeholder="Enter Task Name"
-          onChangeText={task => this.setState({task})}
-          value={this.state.task}
-        />
-        <Button
-          title="add task"
-          onPress={() => this.addTask(this.state.task)}
-        />
       </View>
     );
   }
 }
 
 const styles = StyleSheet.create({
   container: {
-    paddingTop: 100,
+    paddingLeft: 10,
+    paddingRight: 10,
+  },
+  inputRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+    marginTop: 25,
+  },
+  card1: {
+    paddingVertical: 16,
+    width: 275,
   },
 });