- Changed the location field style

- Added creator information on the events in the events dialog

components/pages/calendar/ManuallyAddEventModal.tsx

@@ -38,6 +38,7 @@ import { useGetFamilyMembers } from "@/hooks/firebase/useGetFamilyMembers";
 import BinIcon from "@/assets/svgs/BinIcon";
 import DeleteEventDialog from "./DeleteEventDialog";
 import { useDeleteEvent } from "@/hooks/firebase/useDeleteEvent";
+import AddPersonIcon from "@/assets/svgs/AddPersonIcon";
 
 const daysOfWeek = [
   { label: "Monday", value: "monday" },
@@ -71,7 +72,6 @@ export const ManuallyAddEventModal = () => {
   };
 
   const detailsRef = useRef<TextFieldRef>(null);
-  const locationRef = useRef<TextFieldRef>(null);
   
   const [title, setTitle] = useState<string>(editEvent?.title || "");
   const [details, setDetails] = useState<string>(editEvent?.notes || "");
@@ -142,6 +142,15 @@ export const ManuallyAddEventModal = () => {
   const { data: members } = useGetFamilyMembers(true);
   const titleRef = useRef<TextFieldRef>(null);
 
+  const [creator, setCreator] = useState('');
+  useEffect(() => {
+    if (editEvent) {
+      let creatorMember = members?.find((member) => member?.uid === editEvent.creatorId);
+      const fullName = `${creatorMember?.firstName ?? ""}`;
+      setCreator(fullName);
+    }
+  }, [])
+
   const isLoading = isDeleting || isAdding;
 
   useEffect(() => {
@@ -647,34 +656,38 @@ export const ManuallyAddEventModal = () => {
             </View>
           </View>
           <View style={styles.divider} />
-          <View marginH-25 marginB-0 spread centerV flex-1>
-            <TouchableOpacity onPress={() => locationRef?.current?.focus()}>
-              <View row centerV>
-                <Ionicons name="location-outline" size={28} color="#919191" />
-                <Text
-                    style={{
-                      fontFamily: "PlusJakartaSans_500Medium",
-                      fontSize: 16,
-                    }}
-                    marginL-10
-                >
-                  Location
-                </Text>
-              </View>
-            </TouchableOpacity>
-
-            <TextField
-                value={location}
-                onChangeText={(text) => setLocation(text)}
-                ref={locationRef}
-                maxLength={2000}
-                multiline
-                numberOfLines={2}
-                marginT-5
-                marginL-10
-                style={{ flex: 1 }}
-            />
+          <View marginH-28 marginB-0 centerV flex-1>
+            <View row centerV style={{ flexGrow: 1}}>
+              <Ionicons name="location-outline" size={25} color={"#919191"}/>
+              <TextField
+                  placeholder="Location"
+                  value={location}
+                  onChangeText={(text) => {
+                    setLocation(text);
+                  }}
+                  placeholderTextColor="#2d2d30"
+                  style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%"}}
+                  marginL-12
+                  paddingR-12
+              />
+            </View>
           </View>
+          {editEvent && <>
+            <View style={styles.divider} />
+            <View marginH-32 marginB-0 centerV flex-1>
+              <View row centerV style={{ flexGrow: 1}}>
+                <AddPersonIcon />
+                <TextField
+                    editable={false}
+                    value={creator}
+                    placeholderTextColor="#2d2d30"
+                    style={{ fontFamily: "Manrope_500Medium", fontSize: 16, minWidth: "100%", color: "black"}}
+                    marginL-12
+                    paddingR-12
+                />
+              </View>
+            </View>
+          </>}
           <View style={styles.divider} />
           <View marginH-30 marginB-0 spread centerV flex-1>
             <TouchableOpacity onPress={() => detailsRef?.current?.focus()}>