ui tweaks

app/(auth)/calendar/index.tsx

@@ -1,21 +1,40 @@
-import React, {useRef, useState} from "react";
+import React, { useRef, useState } from "react";
-import {LayoutChangeEvent} from "react-native";
+import { LayoutChangeEvent, StyleSheet } from "react-native";
-import {Calendar} from "react-native-big-calendar";
+import { Calendar } from "react-native-big-calendar";
-import {Button, Picker, PickerModes, SegmentedControl, Text, View} from "react-native-ui-lib";
+import {
-import {MaterialIcons} from "@expo/vector-icons";
+  Button,
-import {AddEventDialog} from "@/components/pages/calendar/AddEventDialog";
+  Picker,
-import {useGetEvents} from "@/hooks/firebase/useGetEvents";
+  PickerModes,
+  SegmentedControl,
+  Text,
+  View,
+} from "react-native-ui-lib";
+import { MaterialIcons } from "@expo/vector-icons";
+import { AddEventDialog } from "@/components/pages/calendar/AddEventDialog";
+import { useGetEvents } from "@/hooks/firebase/useGetEvents";
 import { useAuthContext } from "@/contexts/AuthContext";
+import HeaderTemplate from "@/components/shared/HeaderTemplate";
+import CalendarViewSwitch from "@/components/pages/calendar/CalendarViewSwitch";
 
 const modeMap = new Map([
   [0, "day"],
   [1, "week"],
-    [2, "month"]
+  [2, "month"],
 ]);
 
 const months = [
-    "January", "February", "March", "April", "May", "June",
+  "January",
-    "July", "August", "September", "October", "November", "December"
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December",
 ];
 
 export default function Screen() {
@@ -25,10 +44,10 @@ export default function Screen() {
   const [selectedDate, setSelectedDate] = useState<Date>(new Date());
 
   const calendarContainerRef = useRef(null);
-    const { data: events} = useGetEvents()
+  const { data: events } = useGetEvents();
 
   const onLayout = (event: LayoutChangeEvent) => {
-        const {height} = event.nativeEvent.layout;
+    const { height } = event.nativeEvent.layout;
     setCalendarHeight(height);
   };
 
@@ -49,21 +68,22 @@ export default function Screen() {
     setSelectedDate(updatedDate);
   };
 
-    console.log(events)
+  console.log(events);
 
   return (
-        <View style={{flex: 1, height: "100%", padding: 10}}>
+    <View style={{ flex: 1, height: "100%", padding: 10 }}>
-            <View style={{height: 60, justifyContent: "space-evenly", alignItems: "flex-start"}}>
+      <HeaderTemplate
-                <Text>Welcome {profileData?.firstName}</Text>
+        message={"Let's get your week started!"}
-                <Text>Let's get your week started!</Text>
+        isWelcome={true}
-            </View>
+      />
 
       <View
-                style={{flex: 1, backgroundColor: "#fff", borderRadius: 30}}
+        style={{ flex: 1, backgroundColor: "#fff", borderRadius: 30 }}
         ref={calendarContainerRef}
         onLayout={onLayout}
       >
-                <View style={{
+        <View
+          style={{
             flexDirection: "row",
             justifyContent: "space-between",
             alignItems: "center",
@@ -72,54 +92,68 @@ export default function Screen() {
             borderRadius: 20,
             borderBottomLeftRadius: 0,
             borderBottomRightRadius: 0,
-                    backgroundColor: "#f9f9f9",
+            backgroundColor: "white",
             marginBottom: 10,
-                    shadowColor: "#000",
+          }}
-                    shadowOffset: { width: 0, height: 2 },
+        >
-                    shadowOpacity: 0.1,
-                    shadowRadius: 5,
-                    elevation: 3,
-                }}>
           <Picker
             value={months[selectedDate.getMonth()]} // Get the month from the date
             placeholder={"Select Month"}
             mode={PickerModes.SINGLE}
             onChange={(itemValue) => handleMonthChange(itemValue as string)}
-                        trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"}/>}
+            trailingAccessory={<MaterialIcons name={"keyboard-arrow-down"} />}
           >
             {months.map((month) => (
-                            <Picker.Item key={month} label={month} value={month}/>
+              <Picker.Item key={month} label={month} value={month} />
             ))}
           </Picker>
 
           <View>
             <SegmentedControl
-                        segments={[
+              segments={[{ label: "D" }, { label: "W" }, { label: "M" }]}
-                            {label: "D"},
+              backgroundColor="#ececec"
-                            {label: "W"},
+              inactiveColor="#919191"
-                            {label: "M"}
+              activeBackgroundColor="#ea156c"
-                        ]}
+              activeColor="white"
+              outlineColor="white"
+              outlineWidth={3}
+              style={{ backgroundColor: "green" }}
+              segmentLabelStyle={styles.segmentslblStyle}
               onChangeIndex={handleSegmentChange}
-                        initialIndex={[...modeMap.entries()].find(([_, value]) => value === mode)?.[0] || 1}
+              initialIndex={
+                [...modeMap.entries()].find(
+                  ([_, value]) => value === mode
+                )?.[0] || 1
+              }
             />
           </View>
         </View>
 
         {calendarHeight > 0 && (
           <Calendar
+          bodyContainerStyle={styles.calHeader}
             mode={mode}
             events={events ?? []}
             height={calendarHeight}
             activeDate={selectedDate}
             onSwipeEnd={(newDate) => {
-                            console.log(newDate)
+              console.log(newDate);
               setSelectedDate(newDate);
             }}
           />
         )}
       </View>
-
+        <CalendarViewSwitch />
-            <AddEventDialog/>
+      <AddEventDialog />
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  segmentslblStyle: {
+    fontSize: 14,
+  },
+  calHeader: {
+    borderWidth: 0
+  },
+});

components/pages/brain_dump/BrainDumpPage.tsx

@@ -13,9 +13,16 @@ const BrainDumpPage = () => {
 
   return (
     <View>
-      <ScrollView>
+      <ScrollView
-        <HeaderTemplate message={"Welcome to your notes!"} isWelcome={false} />
+        showsVerticalScrollIndicator={false}
+        showsHorizontalScrollIndicator={false}
+      >
         <View marginH-25>
+          <HeaderTemplate
+            message={"Welcome to your notes!"}
+            isWelcome={false}
+          />
+          <View>
             <View style={styles.searchField} centerV>
               <TextField
                 value={searchText}
@@ -35,6 +42,7 @@ const BrainDumpPage = () => {
             </View>
             <DumpList searchText={searchText} />
           </View>
+        </View>
       </ScrollView>
     </View>
   );

components/pages/brain_dump/DumpItem.tsx

@@ -1,7 +1,7 @@
 import { View, Text } from "react-native-ui-lib";
 import React, { useState } from "react";
 import { IBrainDump } from "@/contexts/DumpContext";
-import { TouchableOpacity } from "react-native-gesture-handler";
+import { TouchableOpacity, TouchableWithoutFeedback } from "react-native-gesture-handler";
 import MoveBrainDump from "./MoveBrainDump";
 
 const BrainDumpItem = (props: { item: IBrainDump }) => {
@@ -9,7 +9,7 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
 
   return (
     <View>
-      <TouchableOpacity onPress={() => setIsVisible(true)}>
+      <TouchableWithoutFeedback onPress={() => setIsVisible(true)}>
         <View
           backgroundColor="white"
           marginV-5
@@ -19,9 +19,9 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
           <Text text70BL marginB-8>
             {props.item.title}
           </Text>
-          <Text text80>{props.item.description}</Text>
+          <Text text70>{props.item.description}</Text>
         </View>
-      </TouchableOpacity>
+      </TouchableWithoutFeedback>
       <MoveBrainDump item={props.item} isVisible={isVisible} setIsVisible={setIsVisible} />
     </View>
   );

components/pages/calendar/AddEventDialog.tsx

@@ -22,16 +22,19 @@ export const AddEventDialog = () => {
                     position: "absolute",
                     bottom: 20,
                     right: 20,
-                    height: 60,
+                    height: 40,
-                    width: 60,
                     borderRadius: 30,
-                    backgroundColor: "#fff",
+                    backgroundColor: "#fd1775",
                     alignItems: 'center',
                     justifyContent: 'center',
                 }}
+                centerV
+                color="white"
                 enableShadow
-                iconSource={() => <MaterialIcons name="add" size={30}/>}
+                iconSource={() => <MaterialIcons name="add" size={22} color={'white'}/>}
                 onPress={() => setShow(true)}
+                label="New"
+                text60R
             />
 
             <Dialog

components/pages/calendar/CalendarViewSwitch.tsx

@@ -0,0 +1,74 @@
+import { View, Text, Button, TouchableOpacity } from "react-native-ui-lib";
+import React, { useState } from "react";
+import { MaterialIcons } from "@expo/vector-icons";
+import { StyleSheet } from "react-native";
+
+const CalendarViewSwitch = () => {
+  const [show, setShow] = useState<boolean>(false);
+  const [calView, setCalView] = useState<boolean>(false);
+
+  return (
+    <View
+      row
+      spread
+      style={{
+        position: "absolute",
+        bottom: 20,
+        left: 20,
+        borderRadius: 30,
+        backgroundColor: "white",
+        alignItems: "center",
+        justifyContent: "center",
+        // iOS shadow
+        shadowColor: "#000",
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+        // Android shadow (elevation)
+        elevation: 6,
+      }}
+      centerV
+    >
+      <TouchableOpacity onPress={() => setCalView(true)}>
+        <View
+          centerV
+          centerH
+          height={40}
+          paddingH-15
+          style={calView ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={calView ? "white" : "#a1a1a1"} text70R>
+            Family View
+          </Text>
+        </View>
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={() => setCalView(false)}>
+        <View
+          centerV
+          centerH
+          height={40}
+          paddingH-15
+          style={!calView ? styles.switchBtnActive : styles.switchBtn}
+        >
+          <Text color={!calView ? "white" : "#a1a1a1"} text70R>
+            My View
+          </Text>
+        </View>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default CalendarViewSwitch;
+
+const styles = StyleSheet.create({
+  switchBtnActive: {
+    backgroundColor: "#a1a1a1",
+    borderRadius: 50,
+  },
+  switchBtn: {
+    backgroundColor: "white",
+    borderRadius: 50,
+  },
+});

components/pages/grocery/GroceryItem.tsx

@@ -4,6 +4,7 @@ import {
   Button,
   TouchableOpacity,
   Checkbox,
+  ButtonSize,
 } from "react-native-ui-lib";
 import React, { useEffect, useState } from "react";
 import { ProfileType, useAuthContext } from "@/contexts/AuthContext";
@@ -15,9 +16,8 @@ import {
   useGroceryContext,
 } from "@/contexts/GroceryContext";
 import EditGroceryFrequency from "./EditGroceryFrequency";
-import { TextInput } from "react-native";
 import EditGroceryItem from "./EditGroceryItem";
-import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+import { StyleSheet } from "react-native";
 
 const GroceryItem = ({
   item,
@@ -32,7 +32,9 @@ const GroceryItem = ({
   const [openFreqEdit, setOpenFreqEdit] = useState<boolean>(false);
   const [isEditingTitle, setIsEditingTitle] = useState<boolean>(false);
   const [newTitle, setNewTitle] = useState<string>("");
-  const [category, setCategory] = useState<GroceryCategory>(GroceryCategory.None);
+  const [category, setCategory] = useState<GroceryCategory>(
+    GroceryCategory.None
+  );
 
   const handleTitleChange = (newTitle: string) => {
     updateGroceryItem(item.id, { title: newTitle });
@@ -47,12 +49,14 @@ const GroceryItem = ({
   }, []);
 
   return (
-    <ListItem
+    <View
       key={item.id}
-      style={{ borderRadius: 50, marginVertical: 5, height: 55 }}
+      style={{ borderRadius: 18, marginVertical: 5 }}
       backgroundColor="white"
       centerV
       padding-0
+    >
+      <ListItem
         onPress={() => {
           setOpenFreqEdit(true);
         }}
@@ -78,7 +82,7 @@ const GroceryItem = ({
                 id: item.id,
                 title: newTitle,
                 setTitle: setNewTitle,
-                category:category,
+                category: category,
                 updateCategory: updateGroceryItem,
                 closeEdit: setIsEditingTitle,
                 setCategory: setCategory,
@@ -86,9 +90,9 @@ const GroceryItem = ({
             />
           )}
         </ListItem.Part>
-      <ListItem.Part right containerStyle={{ paddingEnd: 20 }}>
+        <ListItem.Part right containerStyle={{ paddingEnd: item.approved ? 20 : 5 }}>
           {!item.approved ? (
-          <View row>
+            <View row >
               <Button
                 padding-0
                 children={
@@ -125,7 +129,7 @@ const GroceryItem = ({
           ) : (
             <Checkbox
               value={item.bought}
-            color={"#f58749"}
+              style={styles.checkbox}
               onValueChange={() =>
                 updateGroceryItem(item.id, { bought: !item.bought })
               }
@@ -133,7 +137,36 @@ const GroceryItem = ({
           )}
         </ListItem.Part>
       </ListItem>
+      {!item.approved && (
+        <View>
+          <View centerH>
+            <View height={1} backgroundColor="#e7e7e7" width={"90%"} />
+          </View>
+          <View paddingL-10 paddingV-15 flexS row centerV>
+            <View
+              style={{
+                width: 25,
+                aspectRatio: 1,
+                borderRadius: 50,
+                backgroundColor: "red",
+                marginHorizontal: 10,
+              }}
+            ></View>
+            <Text color="#858585" text70>Requested by Austin</Text>
+          </View>
+        </View>
+      )}
+    </View>
   );
 };
 
+const styles = StyleSheet.create({
+  checkbox:{
+    borderRadius: 50,
+    borderWidth: 1,
+    color: "#bfbfbf",
+    borderColor: "#bfbfbf",
+  }
+})
+
 export default GroceryItem;

components/pages/grocery/GroceryList.tsx

@@ -83,7 +83,7 @@ const GroceryList = () => {
         message={"Welcome to your grocery list"}
         isWelcome={false}
       >
-        <View row spread>
+        <View row spread gap-5>
           <View
             backgroundColor="#e2eed8"
             padding-8

components/shared/DrawerButton.tsx

@@ -1,5 +1,7 @@
 import React from "react";
+import { StyleSheet } from "react-native";
 import { Button, View, Text } from "react-native-ui-lib";
+
 interface IDrawerButtonProps {
   bgColor: string;
   color: string;
@@ -7,6 +9,7 @@ interface IDrawerButtonProps {
   icon: React.ReactNode;
   title: string;
 }
+
 const DrawerButton = (props: IDrawerButtonProps) => {
   return (
     <Button
@@ -18,9 +21,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
       iconSource={() => (
         <View
           backgroundColor={props.bgColor}
-          width={60}
+          style={styles.iconContainer}
-          height={60}
-          style={{ borderRadius: 50 }}
           centerV
           centerH
         >
@@ -34,18 +35,16 @@ const DrawerButton = (props: IDrawerButtonProps) => {
         flexDirection: "column",
         justifyContent: "space-between",
         paddingVertical: 15,
-
-        // Shadow for iOS
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.3,
-        shadowRadius: 10, // This will create a blurry shadow
-
-        // Shadow for Android
-        elevation: 1, 
       }}
     ></Button>
   );
 };
-
 export default DrawerButton;
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    width: '70%',
+    aspectRatio: 1,
+    borderRadius: 50,
+  },
+});

components/shared/HeaderTemplate.tsx

@@ -10,7 +10,7 @@ const HeaderTemplate = (props: {
 }) => {
   const { user, profileData } = useAuthContext();
   return (
-    <View row centerV padding-25>
+    <View row centerV marginV-15>
       <View
         backgroundColor="pink"
         height={65}

contexts/DumpContext.tsx

@@ -28,19 +28,19 @@ export const BrainDumpProvider: React.FC<{ children: React.ReactNode }> = ({
       id: 0,
       title: "Favorite Weekend Activities",
       description:
-        "What's something fun we can do together this weekend? Maybe a new game, a picnic, or trying out a family recipe. Everyone share one idea!",
+        "What's something fun we can do together this weekend? Maybe a new game, a picnic?",
     },
     {
       id: 1,
       title: "What’s For Dinner",
       description:
-        "What’s one meal you’d love to have for dinner this week? Let’s get creative with new ideas we haven’t tried yet.",
+        "What’s one meal you’d love to have for dinner this week?",
     },
     {
       id: 2,
       title: "The Best Thing About Today",
       description:
-        "What was the highlight of your day? Let’s each take a moment to share something good that happened, no matter how small.",
+        "What was the highlight of your day? Let’s each take a moment to share something!",
     },
     {
       id: 3,