updated dailyview

SCCapstone · Apr 23, 2024 · 30ae156 · 30ae156
1 parent 6b082a6
commit 30ae156
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 8 deletions.
diff --git a/components/DailyView.js b/components/DailyView.js
@@ -14,6 +14,8 @@ import eventEmitter from "./EventEmitter";
 import { useTheme } from "../services/ThemeContext";
 import getStyles from "../styles/DailyViewStyles";
 import BirthdayCelebration from "./BDCelebration";
+import Icon from 'react-native-vector-icons/FontAwesome';
+import Icon2 from 'react-native-vector-icons/Fontisto';
 
 const DailyView = ({
   userID,
@@ -136,23 +138,38 @@ const DailyView = ({
         keyExtractor={(item) => item.id.toString()}
         renderItem={({ item }) => (
           <View style={styles.taskItem}>
-            <Text style={styles.taskItemText}>
-              {item.name} {item.completed ? "✓" : ""}
+            <Text style={styles.taskItemText} numberOfLines={1} ellipsizeMode='tail'>
+            {item.completed ? <Icon name="check-circle" size={20} color="green" /> : ""} {item.name} 
             </Text>
             <TouchableOpacity
               style={styles.moreButton}
               onPress={() => setVisibleTaskActions(prev => ({
                 ...prev,
-                [item.id]: !prev[item.id]  // Toggle visibility of action buttons
+                [item.id]: !prev[item.id]
               }))}
             >
-              <Text>☰</Text>
+              <Icon name="bars" size={20} color="#000" />
             </TouchableOpacity>
             {visibleTaskActions[item.id] && (
               <View style={styles.taskActions}>
-                <Button title="Completion" onPress={() => toggleCompletion(item)} />
-                <Button title="Edit" onPress={() => navigation.navigate("EditTaskScreen", { task: item, userId: userID })} />
-                <Button title="Delete" onPress={() => onTaskDelete(item.id)} />
+                <TouchableOpacity
+                  style={[styles.actionButton, styles.completeButton]}
+                  onPress={() => toggleCompletion(item)}
+                >
+                  <Icon2 name={item.completed ? "checkbox-active" : "checkbox-passive"} size={15} color={"white"} />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.actionButton, styles.editButton]}
+                  onPress={() => navigation.navigate("EditTaskScreen", { task: item, userId: userID })}
+                >
+                  <Icon name="pencil" size={15} color="white" />
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.actionButton, styles.deleteButton]}
+                  onPress={() => onTaskDelete(item.id)}
+                >
+                  <Icon name="trash" size={20} color="white" />
+                </TouchableOpacity>
               </View>
             )}
           </View>
@@ -162,4 +179,4 @@ const DailyView = ({
   );
 };
 
-export default DailyView;
+export default DailyView;
diff --git a/styles/DailyViewStyles.js b/styles/DailyViewStyles.js
@@ -24,6 +24,9 @@ const getStyles = (theme) =>
     },
     taskItemText: {
       fontSize: 16,
+      maxWidth: '50%',  // Set the maxWidth to a value that works with your layout
+      marginRight: 10, // Add some margin to the right of the text
+      minWidth: '50%', // Set the minWidth to a value that works with your layout
     },
     taskActions: {
         flexDirection: 'row',
@@ -50,6 +53,35 @@ const getStyles = (theme) =>
       alignSelf: "center",
       color: theme === "dark" ? "white" : "black",
     },
+    taskItem: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: 10,
+    },
+    moreButton: {
+      padding: 10,
+    },
+    taskActions: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    actionButton: {
+      marginHorizontal: 5,
+      borderRadius: 15,
+      padding: 10,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    completeButton: {
+      backgroundColor: '#20B2AA',
+    },
+    editButton: {
+      backgroundColor: '#778899',
+    },
+    deleteButton: {
+      backgroundColor: '#FFA07A',
+    },
   });
 
 export default getStyles;