calendar ui changes

app/(auth)/_layout.tsx

@@ -7,7 +7,7 @@ import {
   DrawerItemList,
 } from "@react-navigation/drawer";
 import { Button, View, Text, ButtonSize } from "react-native-ui-lib";
-import { StyleSheet } from "react-native";
+import { ImageBackground, StyleSheet } from "react-native";
 import Feather from "@expo/vector-icons/Feather";
 import DrawerButton from "@/components/shared/DrawerButton";
 import {
@@ -43,7 +43,16 @@ export default function TabLayout() {
       drawerContent={(props) => {
         return (
           <DrawerContentScrollView {...props} style={{ height: "100%" }}>
-            <View centerH centerV margin-30>
+            <View centerV margin-30 row>
+              <ImageBackground
+                source={require("../../assets/images/splash.png")}
+                style={{
+                  backgroundColor: "transparent",
+                  height: 51.43,
+                  aspectRatio: 1,
+                  marginRight: 8,
+                }}
+              />
               <Text style={styles.title}>Welcome to Cally</Text>
             </View>
             <View
@@ -203,7 +212,7 @@ const styles = StyleSheet.create({
   label: { fontFamily: "Poppins_400Medium", fontSize: 15 },
   title: {
     fontSize: 26.13,
-    fontFamily: 'Manrope_600SemiBold',
-    color: "#262627"
-  }
+    fontFamily: "Manrope_600SemiBold",
+    color: "#262627",
+  },
 });

components/pages/calendar/CalendarHeader.tsx

@@ -1,104 +1,134 @@
-import React, {memo} from 'react';
-import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
-import {MaterialIcons} from "@expo/vector-icons";
-import {modeMap, months} from './constants';
-import {StyleSheet} from "react-native";
-import {useAtom} from "jotai";
-import {modeAtom, selectedDateAtom} from "@/components/pages/calendar/atoms";
-import {isSameDay} from "date-fns";
+import React, { memo } from "react";
+import {
+  Button,
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { modeMap, months } from "./constants";
+import { StyleSheet } from "react-native";
+import { useAtom } from "jotai";
+import { modeAtom, selectedDateAtom } from "@/components/pages/calendar/atoms";
+import { isSameDay } from "date-fns";
+import { useAuthContext } from "@/contexts/AuthContext";
 
 export const CalendarHeader = memo(() => {
-    const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
-    const [mode, setMode] = useAtom(modeAtom);
+  const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
+  const [mode, setMode] = useAtom(modeAtom);
+  const { profileData } = useAuthContext();
 
-    const handleSegmentChange = (index: number) => {
-        const selectedMode = modeMap.get(index);
-        if (selectedMode) {
-            setTimeout(() => {
-                setMode(selectedMode as "day" | "week" | "month");
-            }, 150);
-        }
-    };
+  const handleSegmentChange = (index: number) => {
+    const selectedMode = modeMap.get(index);
+    if (selectedMode) {
+      setTimeout(() => {
+        setMode(selectedMode as "day" | "week" | "month");
+      }, 150);
+    }
+  };
 
-    const handleMonthChange = (month: string) => {
-        const currentDay = selectedDate.getDate();
-        const currentYear = selectedDate.getFullYear();
-        const newMonthIndex = months.indexOf(month);
+  const handleMonthChange = (month: string) => {
+    const currentDay = selectedDate.getDate();
+    const currentYear = selectedDate.getFullYear();
+    const newMonthIndex = months.indexOf(month);
 
-        const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
-        setSelectedDate(updatedDate);
-    };
+    const updatedDate = new Date(currentYear, newMonthIndex, currentDay);
+    setSelectedDate(updatedDate);
+  };
 
-    const isSelectedDateToday = isSameDay(selectedDate, new Date())
+  const isSelectedDateToday = isSameDay(selectedDate, new Date());
 
-    return (
-        <View
-            style={{
-                flexDirection: "row",
-                justifyContent: "space-between",
-                alignItems: "center",
-                paddingHorizontal: 10,
-                paddingVertical: 8,
-                borderRadius: 20,
-                borderBottomLeftRadius: 0,
-                borderBottomRightRadius: 0,
-                backgroundColor: "white",
-                marginBottom: 10,
-            }}
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        justifyContent: "space-between",
+        alignItems: "center",
+        paddingHorizontal: 10,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        backgroundColor: "white",
+        marginBottom: 10,
+      }}
+    >
+      <View row centerV gap-3>
+        <Text style={{ fontFamily: "Manrope_500Medium", fontSize: 17 }}>
+          {selectedDate.getFullYear()}
+        </Text>
+        <Picker
+          value={months[selectedDate.getMonth()]}
+          placeholder={"Select Month"}
+          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
+          mode={PickerModes.SINGLE}
+          onChange={(itemValue) => handleMonthChange(itemValue as string)}
+          trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
+          topBarProps={{
+            title: selectedDate.getFullYear().toString(),
+            titleStyle: { fontFamily: "Manrope_500Medium", fontSize: 17 },
+          }}
         >
-            <View row centerV gap-3>
-                <Text style={{fontFamily: "Manrope_500Medium", fontSize: 17}}>
-                    {selectedDate.getFullYear()}
-                </Text>
-                <Picker
-                    value={months[selectedDate.getMonth()]}
-                    placeholder={"Select Month"}
-                    style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
-                    mode={PickerModes.SINGLE}
-                    onChange={(itemValue) => handleMonthChange(itemValue as string)}
-                    trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
-                    topBarProps={{
-                        title: selectedDate.getFullYear().toString(),
-                        titleStyle: {fontFamily: "Manrope_500Medium", fontSize: 17},
-                    }}
-                >
-                    {months.map((month) => (
-                        <Picker.Item key={month} label={month} value={month}/>
-                    ))}
-                </Picker>
-            </View>
+          {months.map((month) => (
+            <Picker.Item key={month} label={month} value={month} />
+          ))}
+        </Picker>
+      </View>
 
-            <View row>
-                {!isSelectedDateToday && (
-                    <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
-                        setSelectedDate(new Date())
-                        setMode("day")
-                    }}/>
-                )}
+      <View row centerV>
+        {!isSelectedDateToday && (
+          <Button
+            size={"xSmall"}
+            marginR-0
+            avoidInnerPadding
+            padding-7
+            style={{
+              borderRadius: 5,
+              backgroundColor: "white",
+              borderWidth: 0.7,
+              borderColor: "#dadce0",
+              height: 30,
+            }}
+            labelStyle={{
+              fontSize: 12,
+              color: "black",
+              fontFamily: "Manrope_500Medium",
+            }}
+            label={new Date().toLocaleDateString("en-US", {
+              timeZone: profileData?.timeZone || "",
+            })}
+            onPress={() => {
+              setSelectedDate(new Date());
+              setMode("day");
+              console.log(profileData?.timeZone)
+            }}
+          />
+        )}
 
-                <View>
-                    <SegmentedControl
-                        segments={[{label: "D"}, {label: "W"}, {label: "M"}]}
-                        backgroundColor="#ececec"
-                        inactiveColor="#919191"
-                        activeBackgroundColor="#ea156c"
-                        activeColor="white"
-                        outlineColor="white"
-                        outlineWidth={3}
-                        segmentLabelStyle={styles.segmentslblStyle}
-                        onChangeIndex={handleSegmentChange}
-                        initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
-                    />
-                </View>
-            </View>
+        <View>
+          <SegmentedControl
+            segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
+            backgroundColor="#ececec"
+            inactiveColor="#919191"
+            activeBackgroundColor="#ea156c"
+            activeColor="white"
+            outlineColor="white"
+            outlineWidth={3}
+            segmentLabelStyle={styles.segmentslblStyle}
+            onChangeIndex={handleSegmentChange}
+            initialIndex={mode === "day" ? 0 : mode === "week" ? 1 : 2}
+          />
         </View>
-    )
-        ;
+      </View>
+    </View>
+  );
 });
 
 const styles = StyleSheet.create({
-    segmentslblStyle: {
-        fontSize: 12,
-        fontFamily: "Manrope_600SemiBold",
-    },
-});
+  segmentslblStyle: {
+    fontSize: 12,
+    fontFamily: "Manrope_600SemiBold",
+  },
+});

components/pages/calendar/EventCalendar.tsx

@@ -1,32 +1,33 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
-import {Calendar} from "react-native-big-calendar";
-import {ActivityIndicator, StyleSheet, View} from "react-native";
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
-import {useAtom, useSetAtom} from "jotai";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Calendar } from "react-native-big-calendar";
+import { ActivityIndicator, StyleSheet, View } from "react-native";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
+import { useAtom, useSetAtom } from "jotai";
 import {
-    editVisibleAtom,
-    eventForEditAtom,
-    modeAtom,
-    selectedDateAtom,
-    selectedNewEventDateAtom
+  editVisibleAtom,
+  eventForEditAtom,
+  modeAtom,
+  selectedDateAtom,
+  selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
-import {useAuthContext} from "@/contexts/AuthContext";
-import {CalendarEvent} from "@/components/pages/calendar/interfaces";
+import { useAuthContext } from "@/contexts/AuthContext";
+import { CalendarEvent } from "@/components/pages/calendar/interfaces";
 
 interface EventCalendarProps {
-    calendarHeight: number;
-    // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
-    calendarWidth: number;
+  calendarHeight: number;
+  // WAS USED FOR SCROLLABLE CALENDARS, PERFORMANCE WAS NOT OPTIMAL
+  calendarWidth: number;
 }
 
 const getTotalMinutes = () => {
-    const date = new Date();
-    return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
-}
+  const date = new Date();
+  return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
+};
 
-export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
-    const {data: events, isLoading} = useGetEvents();
-    const {profileData} = useAuthContext();
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
+  ({ calendarHeight }) => {
+    const { data: events, isLoading } = useGetEvents();
+    const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
     const [mode, setMode] = useAtom(modeAtom);
 
@@ -35,113 +36,128 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     const setSelectedNewEndDate = useSetAtom(selectedNewEventDateAtom);
 
     const [isRendering, setIsRendering] = useState(true);
-    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes())
+    const [offsetMinutes, setOffsetMinutes] = useState(getTotalMinutes());
 
     useEffect(() => {
-        if (events && mode) {
-            setIsRendering(true);
-            const timeout = setTimeout(() => {
-                setIsRendering(false);
-            }, 300);
-            return () => clearTimeout(timeout);
-        }
+      if (events && mode) {
+        setIsRendering(true);
+        const timeout = setTimeout(() => {
+          setIsRendering(false);
+        }, 300);
+        return () => clearTimeout(timeout);
+      }
     }, [events, mode]);
 
-    const handlePressEvent = useCallback((event: CalendarEvent) => {
+    const handlePressEvent = useCallback(
+      (event: CalendarEvent) => {
         if (mode === "day" || mode === "week") {
-            setEditVisible(true);
-            console.log({event})
-            setEventForEdit(event);
+          setEditVisible(true);
+          console.log({ event });
+          setEventForEdit(event);
         } else {
-            setMode("day")
-            setSelectedDate(event.start);
+          setMode("day");
+          setSelectedDate(event.start);
         }
-    }, [setEditVisible, setEventForEdit, mode]);
-
-    const handlePressCell = useCallback(
-        (date: Date) => {
-            if (mode === "day" || mode === "week") {
-                setSelectedNewEndDate(date);
-            } else {
-                setMode("day")
-                setSelectedDate(date);
-            }
-        },
-        [mode, setSelectedNewEndDate, setSelectedDate]
+      },
+      [setEditVisible, setEventForEdit, mode]
     );
 
-    const handleSwipeEnd = useCallback((date: Date) => {
+    const handlePressCell = useCallback(
+      (date: Date) => {
+        if (mode === "day" || mode === "week") {
+          setSelectedNewEndDate(date);
+        } else {
+          setMode("day");
+          setSelectedDate(date);
+        }
+      },
+      [mode, setSelectedNewEndDate, setSelectedDate]
+    );
+
+    const handleSwipeEnd = useCallback(
+      (date: Date) => {
         setSelectedDate(date);
-    }, [setSelectedDate]);
+      },
+      [setSelectedDate]
+    );
 
     const memoizedEventCellStyle = useCallback(
-        (event: CalendarEvent) => ({backgroundColor: event.eventColor}),
-        []
+      (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
+      []
     );
 
     const memoizedWeekStartsOn = useMemo(
-        () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
-        [profileData]
+      () => (profileData?.firstDayOfWeek === "Mondays" ? 1 : 0),
+      [profileData]
     );
 
     const memoizedHeaderContentStyle = useMemo(
-        () => (mode === "day" ? styles.dayModeHeader : {}),
-        [mode]
+      () => (mode === "day" ? styles.dayModeHeader : {}),
+      [mode]
     );
 
     const memoizedEvents = useMemo(() => events ?? [], [events]);
 
     useEffect(() => {
-        setOffsetMinutes(getTotalMinutes())
+      setOffsetMinutes(getTotalMinutes());
     }, [events, mode]);
 
     if (isLoading || isRendering) {
-        return (
-            <View style={styles.loadingContainer}>
-                <ActivityIndicator size="large" color="#0000ff"/>
-            </View>
-        );
+      return (
+        <View style={styles.loadingContainer}>
+          <ActivityIndicator size="large" color="#0000ff" />
+        </View>
+      );
     }
 
     return (
-        <Calendar
-            bodyContainerStyle={styles.calHeader}
-            swipeEnabled
-            enableEnrichedEvents
-            mode={mode}
-            events={memoizedEvents}
-            eventCellStyle={memoizedEventCellStyle}
-            onPressEvent={handlePressEvent}
-            weekStartsOn={memoizedWeekStartsOn}
-            height={calendarHeight}
-            activeDate={selectedDate}
-            date={selectedDate}
-            onPressCell={handlePressCell}
-            headerContentStyle={memoizedHeaderContentStyle}
-            onSwipeEnd={handleSwipeEnd}
-            scrollOffsetMinutes={offsetMinutes}
-        />
+      <Calendar
+        bodyContainerStyle={styles.calHeader}
+        swipeEnabled
+        enableEnrichedEvents
+        mode={mode}
+        events={memoizedEvents}
+        eventCellStyle={memoizedEventCellStyle}
+        onPressEvent={handlePressEvent}
+        weekStartsOn={memoizedWeekStartsOn}
+        height={calendarHeight}
+        activeDate={selectedDate}
+        date={selectedDate}
+        onPressCell={handlePressCell}
+        headerContentStyle={memoizedHeaderContentStyle}
+        onSwipeEnd={handleSwipeEnd}
+        scrollOffsetMinutes={offsetMinutes}
+      />
     );
-});
+  }
+);
 
 const styles = StyleSheet.create({
-    segmentslblStyle: {
-        fontSize: 12,
-        fontFamily: "Manrope_600SemiBold",
-    },
-    calHeader: {
-        borderWidth: 0,
-    },
-    dayModeHeader: {
-        alignSelf: "flex-start",
-        justifyContent: "space-between",
-        alignContent: "center",
-        width: 38,
-        right: 42,
-    },
-    loadingContainer: {
-        flex: 1,
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-});
+  segmentslblStyle: {
+    fontSize: 12,
+    fontFamily: "Manrope_600SemiBold",
+  },
+  calHeader: {
+    borderWidth: 0,
+  },
+  dayModeHeader: {
+    alignSelf: "flex-start",
+    justifyContent: "space-between",
+    alignContent: "center",
+    width: 38,
+    right: 42,
+    height: 13,
+  },
+  loadingContainer: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  dayHeader: {
+    backgroundColor: "#4184f2",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});