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',
+    fontFamily: "Manrope_600SemiBold",
-    color: "#262627"
+    color: "#262627",
-  }
+  },
 });

components/pages/calendar/CalendarHeader.tsx

@@ -1,15 +1,24 @@
-import React, {memo} from 'react';
+import React, { memo } from "react";
-import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
+import {
+  Button,
+  Picker,
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
 import { MaterialIcons } from "@expo/vector-icons";
-import {modeMap, months} from './constants';
+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 { profileData } = useAuthContext();
 
   const handleSegmentChange = (index: number) => {
     const selectedMode = modeMap.get(index);
@@ -29,7 +38,7 @@ export const CalendarHeader = memo(() => {
     setSelectedDate(updatedDate);
   };
 
-    const isSelectedDateToday = isSameDay(selectedDate, new Date())
+  const isSelectedDateToday = isSameDay(selectedDate, new Date());
 
   return (
     <View
@@ -53,7 +62,7 @@ export const CalendarHeader = memo(() => {
         <Picker
           value={months[selectedDate.getMonth()]}
           placeholder={"Select Month"}
-                    style={{fontFamily: "Manrope_500Medium", fontSize: 17}}
+          style={{ fontFamily: "Manrope_500Medium", fontSize: 17, width: 85 }}
           mode={PickerModes.SINGLE}
           onChange={(itemValue) => handleMonthChange(itemValue as string)}
           trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
@@ -68,12 +77,34 @@ export const CalendarHeader = memo(() => {
         </Picker>
       </View>
 
-            <View row>
+      <View row centerV>
         {!isSelectedDateToday && (
-                    <Button size={"small"} marginR-5 label={"Today"} onPress={() => {
+          <Button
-                        setSelectedDate(new Date())
+            size={"xSmall"}
-                        setMode("day")
+            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>
@@ -92,8 +123,7 @@ export const CalendarHeader = memo(() => {
         </View>
       </View>
     </View>
-    )
+  );
-        ;
 });
 
 const styles = StyleSheet.create({

components/pages/calendar/EventCalendar.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react';
+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";
@@ -8,7 +8,7 @@ import {
   eventForEditAtom,
   modeAtom,
   selectedDateAtom,
-    selectedNewEventDateAtom
+  selectedNewEventDateAtom,
 } from "@/components/pages/calendar/atoms";
 import { useAuthContext } from "@/contexts/AuthContext";
 import { CalendarEvent } from "@/components/pages/calendar/interfaces";
@@ -22,9 +22,10 @@ interface EventCalendarProps {
 const getTotalMinutes = () => {
   const date = new Date();
   return Math.abs(date.getUTCHours() * 60 + date.getUTCMinutes() - 200);
-}
+};
 
-export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendarHeight}) => {
+export const EventCalendar: React.FC<EventCalendarProps> = React.memo(
+  ({ calendarHeight }) => {
     const { data: events, isLoading } = useGetEvents();
     const { profileData } = useAuthContext();
     const [selectedDate, setSelectedDate] = useAtom(selectedDateAtom);
@@ -35,7 +36,7 @@ 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) {
@@ -47,32 +48,38 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
       }
     }, [events, mode]);
 
-    const handlePressEvent = useCallback((event: CalendarEvent) => {
+    const handlePressEvent = useCallback(
+      (event: CalendarEvent) => {
         if (mode === "day" || mode === "week") {
           setEditVisible(true);
-            console.log({event})
+          console.log({ event });
           setEventForEdit(event);
         } else {
-            setMode("day")
+          setMode("day");
           setSelectedDate(event.start);
         }
-    }, [setEditVisible, setEventForEdit, mode]);
+      },
+      [setEditVisible, setEventForEdit, mode]
+    );
 
     const handlePressCell = useCallback(
       (date: Date) => {
         if (mode === "day" || mode === "week") {
           setSelectedNewEndDate(date);
         } else {
-                setMode("day")
+          setMode("day");
           setSelectedDate(date);
         }
       },
       [mode, setSelectedNewEndDate, setSelectedDate]
     );
 
-    const handleSwipeEnd = useCallback((date: Date) => {
+    const handleSwipeEnd = useCallback(
+      (date: Date) => {
         setSelectedDate(date);
-    }, [setSelectedDate]);
+      },
+      [setSelectedDate]
+    );
 
     const memoizedEventCellStyle = useCallback(
       (event: CalendarEvent) => ({ backgroundColor: event.eventColor }),
@@ -92,7 +99,7 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
     const memoizedEvents = useMemo(() => events ?? [], [events]);
 
     useEffect(() => {
-        setOffsetMinutes(getTotalMinutes())
+      setOffsetMinutes(getTotalMinutes());
     }, [events, mode]);
 
     if (isLoading || isRendering) {
@@ -122,7 +129,8 @@ export const EventCalendar: React.FC<EventCalendarProps> = React.memo(({calendar
         scrollOffsetMinutes={offsetMinutes}
       />
     );
-});
+  }
+);
 
 const styles = StyleSheet.create({
   segmentslblStyle: {
@@ -138,10 +146,18 @@ const styles = StyleSheet.create({
     alignContent: "center",
     width: 38,
     right: 42,
+    height: 13,
   },
   loadingContainer: {
     flex: 1,
-        justifyContent: 'center',
+    justifyContent: "center",
-        alignItems: 'center',
+    alignItems: "center",
+  },
+  dayHeader: {
+    backgroundColor: "#4184f2",
+    aspectRatio: 1,
+    borderRadius: 100,
+    alignItems: "center",
+    justifyContent: "center",
   },
 });