changed font

app.json

@@ -62,7 +62,8 @@
           "color": "#ffffff",
           "defaultChannel": "default"
         }
-      ]
+      ],
+      "expo-font"
     ],
     "experiments": {
       "typedRoutes": true

app/(auth)/_layout.tsx

@@ -43,7 +43,7 @@ export default function TabLayout() {
         return (
           <DrawerContentScrollView {...props} style={{ height: "100%" }}>
             <View centerH centerV margin-30>
-              <Text text50>Welcome to Cally</Text>
+              <Text text40>Welcome to Cally</Text>
             </View>
             <View
               style={{
@@ -101,6 +101,7 @@ export default function TabLayout() {
             <Button
               onPress={() => props.navigation.navigate("settings")}
               label={"Manage Settings"}
+              labelStyle={{fontFamily: "Manrope_500Medium"}}
               iconSource={() => (
                 <View
                   backgroundColor="#ededed"
@@ -128,13 +129,14 @@ export default function TabLayout() {
               marginH-30
               paddingV-15
               style={{
-                marginTop: "47%",
+                marginTop: "42%",
                 backgroundColor: "transparent",
-                borderWidth: 2,
+                borderWidth: 1.3,
                 borderColor: "#fd1775",
               }}
               label="Sign out of Cally"
               color="#fd1775"
+              labelStyle={{fontFamily: 'Manrope_700Bold'}}
               onPress={() => signOut()}
             />
           </DrawerContentScrollView>

app/_layout.tsx

@@ -1,44 +1,198 @@
-import {DefaultTheme, ThemeProvider} from '@react-navigation/native';
+import React, { useEffect } from "react";
-import {useFonts} from 'expo-font';
+import { DefaultTheme, ThemeProvider } from "@react-navigation/native";
-import {Stack} from 'expo-router';
+import {
-import * as SplashScreen from 'expo-splash-screen';
+  useFonts,
-import {useEffect} from 'react';
+  Manrope_200ExtraLight,
-import 'react-native-reanimated';
+  Manrope_300Light,
-import {AuthContextProvider} from "@/contexts/AuthContext";
+  Manrope_400Regular,
-import {QueryClient, QueryClientProvider} from "react-query";
+  Manrope_500Medium,
-import {Toast} from "react-native-ui-lib";
+  Manrope_600SemiBold,
+  Manrope_700Bold,
+  Manrope_800ExtraBold,
+} from "@expo-google-fonts/manrope";
+import { Stack } from "expo-router";
+import * as SplashScreen from "expo-splash-screen";
+import "react-native-reanimated";
+import { AuthContextProvider } from "@/contexts/AuthContext";
+import { QueryClient, QueryClientProvider } from "react-query";
+import {
+  ThemeManager,
+  Typography,
+  Toast,
+  TextProps,
+} from "react-native-ui-lib";
 
 SplashScreen.preventAutoHideAsync();
 
 const queryClient = new QueryClient();
 
-export default function RootLayout() {
+type TextStyleBase =
-    const [loaded] = useFonts({
+  | "text10"
-        SpaceMono: require('../assets/fonts/SpaceMono-Regular.ttf'),
+  | "text20"
-    });
+  | "text30"
+  | "text40"
+  | "text50"
+  | "text60"
+  | "text70"
+  | "text80"
+  | "text90"
+  | "text100";
+type TextStyleModifier = "R" | "M" | "BO" | "H" | "BL" | "L";
+type TextStyle = TextStyleBase | `${TextStyleBase}${TextStyleModifier}`;
 
-    useEffect(() => {
+type TextStyleProps = {
-        if (loaded) {
+  [K in TextStyle]?: boolean;
-            SplashScreen.hideAsync();
+};
-        }
-    }, [loaded]);
 
-    if (!loaded) {
+type ExtendedTextProps = TextProps & TextStyleProps;
-        return null;
-    }
 
-    return (
+interface FontStyle {
-        <QueryClientProvider client={queryClient}>
+  fontFamily: string;
-            <AuthContextProvider>
+  fontSize: number;
-                <ThemeProvider value={DefaultTheme}>
+}
-                    <Stack>
+
-                        <Stack.Screen name="(auth)" options={{headerShown: false}}/>
+const getManropeFontStyle = (style: TextStyle): FontStyle => {
-                        <Stack.Screen name="(unauth)" options={{headerShown: false}}/>
+  let fontFamily: string;
-                        <Stack.Screen name="+not-found"/>
+  let fontSize: number;
-                    </Stack>
+
-                    <Toast/>
+  if (style.includes("L") || style.includes("BL"))
-                </ThemeProvider>
+    fontFamily = "Manrope_300Light";
-            </AuthContextProvider>
+  else if (style.includes("R")) fontFamily = "Manrope_400Regular";
-        </QueryClientProvider>
+  else if (style.includes("M")) fontFamily = "Manrope_500Medium";
-    );
+  else if (style.includes("BO") || style.includes("H"))
+    fontFamily = "Manrope_700Bold";
+  else {
+    const baseStyle = style.slice(0, 6) as TextStyleBase;
+    switch (baseStyle) {
+      case "text10":
+      case "text20":
+        fontFamily = "Manrope_700Bold";
+        break;
+      case "text30":
+      case "text40":
+        fontFamily = "Manrope_600SemiBold";
+        break;
+      case "text50":
+        fontFamily = "Manrope_400Regular";
+        break;
+      default:
+        fontFamily = "Manrope_300Light";
+    }
+  }
+
+  switch (style.slice(0, 6) as TextStyleBase) {
+    case "text10":
+      fontSize = 64;
+      break;
+    case "text20":
+      fontSize = 50;
+      break;
+    case "text30":
+      fontSize = 36;
+      break;
+    case "text40":
+      fontSize = 28;
+      break;
+    case "text50":
+      fontSize = 24;
+      break;
+    case "text60":
+      fontSize = 20;
+      break;
+    case "text70":
+      fontSize = 16;
+      break;
+    case "text80":
+      fontSize = 14;
+      break;
+    case "text90":
+      fontSize = 12;
+      break;
+    case "text100":
+      fontSize = 10;
+      break;
+    default:
+      fontSize = 16;
+  }
+
+  return { fontFamily, fontSize };
+};
+
+export default function RootLayout() {
+  const [loaded] = useFonts({
+    Manrope_200ExtraLight,
+    Manrope_300Light,
+    Manrope_400Regular,
+    Manrope_500Medium,
+    Manrope_600SemiBold,
+    Manrope_700Bold,
+    Manrope_800ExtraBold,
+  });
+
+  useEffect(() => {
+    if (loaded) {
+      SplashScreen.hideAsync();
+
+      const typographies: Partial<Record<TextStyle, FontStyle>> = {};
+      (
+        [
+          "text10",
+          "text20",
+          "text30",
+          "text40",
+          "text50",
+          "text60",
+          "text70",
+          "text80",
+          "text90",
+          "text100",
+        ] as const
+      ).forEach((baseStyle) => {
+        typographies[baseStyle] = getManropeFontStyle(baseStyle);
+        (["R", "M", "BO", "H", "BL", "L"] as const).forEach((modifier) => {
+          const style = `${baseStyle}${modifier}` as TextStyle;
+          typographies[style] = getManropeFontStyle(style);
+        });
+      });
+
+      Typography.loadTypographies(typographies);
+
+      ThemeManager.setComponentTheme(
+        "Text",
+        (props: ExtendedTextProps, context: unknown) => {
+          const textStyle = (
+            Object.keys(props) as Array<keyof ExtendedTextProps>
+          ).find((key) => typographies[key as TextStyle]) as
+            | TextStyle
+            | undefined;
+
+          return {
+            style: [
+              Typography.text50,
+              textStyle ? typographies[textStyle] : undefined,
+            ],
+          };
+        }
+      );
+    }
+  }, [loaded]);
+
+  if (!loaded) {
+    return null;
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <AuthContextProvider>
+        <ThemeProvider value={DefaultTheme}>
+          <Stack>
+            <Stack.Screen name="(auth)" options={{ headerShown: false }} />
+            <Stack.Screen name="(unauth)" options={{ headerShown: false }} />
+            <Stack.Screen name="+not-found" />
+          </Stack>
+          <Toast />
+        </ThemeProvider>
+      </AuthContextProvider>
+    </QueryClientProvider>
+  );
 }

components/pages/brain_dump/BrainDumpPage.tsx

@@ -54,21 +54,20 @@ const BrainDumpPage = () => {
           height: 40,
           borderRadius: 30,
           backgroundColor: "#fd1775",
-          alignItems: "center",
-          justifyContent: "center",
         }}
-        centerV
         color="white"
         enableShadow
-        iconSource={() => (
-          <MaterialIcons name="add" size={22} color={"white"} />
-        )}
         onPress={() => {
           setIsAddVisible(true);
         }}
-        label="New"
+      >
-        text60R
+        <View row centerV centerH>
-      />
+          <MaterialIcons name="add" size={22} color={"white"} />
+          <Text white tex30 style={{ fontSize: 17 }}>
+            New
+          </Text>
+        </View>
+      </Button>
       <AddBrainDump
         addBrainDumpProps={{
           isVisible: isAddVisible,

components/pages/brain_dump/DumpItem.tsx

@@ -16,7 +16,7 @@ const BrainDumpItem = (props: { item: IBrainDump }) => {
           padding-15
           style={{ borderRadius: 20, elevation: 2 }}
         >
-          <Text text70BL marginB-8>
+          <Text text70B style={{fontSize: 17}} marginB-8>
             {props.item.title}
           </Text>
           <Text text70>{props.item.description}</Text>

components/pages/calendar/AddEventDialog.tsx

@@ -20,7 +20,6 @@ import AddChoreDialog from "../todos/AddChoreDialog";
 import { ToDosContextProvider } from "@/contexts/ToDosContext";
 import UploadImageDialog from "./UploadImageDialog";
 
-
 export const AddEventDialog = () => {
   const [show, setShow] = useState(false);
   const [showManualInputModal, setShowManualInputModal] = useState(false);
@@ -37,127 +36,137 @@ export const AddEventDialog = () => {
   const handleScanImageDialog = () => {
     setShow(false);
     setTimeout(() => {
-        setShowUploadDialog(true);
+      setShowUploadDialog(true);
     }, 100);
-  }
+  };
 
   return (
-    
     <ToDosContextProvider>
-    <>
+      <>
-      <Button
+        <Button
-        style={{
-          position: "absolute",
-          bottom: 20,
-          right: 20,
-          height: 40,
-          borderRadius: 30,
-          backgroundColor: "#fd1775",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-        centerV
-        color="white"
-        enableShadow
-        iconSource={() => (
-          <MaterialIcons name="add" size={22} color={"white"} />
-        )}
-        onPress={() => setShow(true)}
-        label="New"
-        text60R
-      />
-
-      <Dialog
-        visible={show}
-        onDismiss={() => setShow(false)}
-        panDirection={PanningProvider.Directions.DOWN}
-        center
-      >
-        <Card
           style={{
-            paddingHorizontal: 40,
+            position: "absolute",
-            paddingTop: 40,
+            bottom: 20,
-            paddingBottom: 20,
+            right: 20,
-            justifyContent: "center",
+            height: 40,
+            borderRadius: 30,
+            backgroundColor: "#fd1775",
             alignItems: "center",
+            justifyContent: "center",
           }}
+          color="white"
+          enableShadow
+          onPress={() => setShow(true)}
         >
-          <Text text50R>Create a new event</Text>
+          <View row centerV centerH>
-
+            <MaterialIcons name="add" size={22} color={"white"} />
-          <View style={{ marginTop: 20, alignItems: "center", width: "100%" }}>
+            <Text white tex30 style={{ fontSize: 17 }}>
-            <Button
+              New
-              style={{
+            </Text>
-                marginBottom: 10,
-                backgroundColor: "#ea156c",
-                justifyContent: "center",
-                width: "100%",
-                paddingVertical: 13,
-              }}
-              label="Scan Image"
-              onPress={handleScanImageDialog}
-              iconSource={() => (
-                <Feather
-                  name="camera"
-                  size={21}
-                  style={{ marginRight: 7 }}
-                  color="white"
-                />
-              )}
-            />
-
-            <Button
-              style={{
-                marginBottom: 10,
-                backgroundColor: "#e28800",
-                justifyContent: "center",
-                width: "100%",
-                paddingVertical: 13,
-              }}
-              label="Create Event"
-              onPress={handleOpenManualInputModal}
-              iconSource={() => (
-                <MaterialCommunityIcons
-                  name="calendar-text-outline"
-                  size={22}
-                  style={{ marginRight: 5 }}
-                  color="white"
-                />
-              )}
-            />
-
-            <Button
-              style={{
-                marginBottom: 10,
-                backgroundColor: "#05a8b6",
-                justifyContent: "center",
-                width: "100%",
-                paddingVertical: 13,
-              }}
-              label="Add To Do"
-              onPress={() => setChoreDialogVisible(true)}
-              iconSource={() => (
-                <AntDesign
-                  name="checkcircleo"
-                  size={20}
-                  style={{ marginRight: 7 }}
-                  color="white"
-                />
-              )}
-            />
           </View>
+        </Button>
 
-          <TouchableOpacity onPress={() => setShow(false)}>
+        <Dialog
-            <Text style={{ marginTop: 20, color: "#999999" }} text70>Go back to calendar</Text>
+          visible={show}
-          </TouchableOpacity>
+          onDismiss={() => setShow(false)}
-        </Card>
+          panDirection={PanningProvider.Directions.DOWN}
-      </Dialog>
+          center
-      <AddChoreDialog isVisible={choreDialogVisible} setIsVisible={setChoreDialogVisible} />
+        >
-      <ManuallyAddEventModal
+          <Card
-        show={showManualInputModal}
+            style={{
-        close={() => setShowManualInputModal(false)}
+              paddingHorizontal: 40,
-      />
+              paddingTop: 40,
-      <UploadImageDialog show={showUploadDialog} setShow={setShowUploadDialog} />
+              paddingBottom: 20,
-    </>
+              justifyContent: "center",
+              alignItems: "center",
+            }}
+          >
+            <Text text50R>Create a new event</Text>
+
+            <View
+              style={{ marginTop: 20, alignItems: "center", width: "100%" }}
+            >
+              <Button
+                style={{
+                  marginBottom: 10,
+                  backgroundColor: "#ea156c",
+                  justifyContent: "center",
+                  width: "100%",
+                  paddingVertical: 13,
+                }}
+                label="Scan Image"
+                onPress={handleScanImageDialog}
+                iconSource={() => (
+                  <Feather
+                    name="camera"
+                    size={21}
+                    style={{ marginRight: 7 }}
+                    color="white"
+                  />
+                )}
+              />
+
+              <Button
+                style={{
+                  marginBottom: 10,
+                  backgroundColor: "#e28800",
+                  justifyContent: "center",
+                  width: "100%",
+                  paddingVertical: 13,
+                }}
+                label="Create Event"
+                onPress={handleOpenManualInputModal}
+                iconSource={() => (
+                  <MaterialCommunityIcons
+                    name="calendar-text-outline"
+                    size={22}
+                    style={{ marginRight: 5 }}
+                    color="white"
+                  />
+                )}
+              />
+
+              <Button
+                style={{
+                  marginBottom: 10,
+                  backgroundColor: "#05a8b6",
+                  justifyContent: "center",
+                  width: "100%",
+                  paddingVertical: 13,
+                }}
+                label="Add To Do"
+                onPress={() => setChoreDialogVisible(true)}
+                iconSource={() => (
+                  <AntDesign
+                    name="checkcircleo"
+                    size={20}
+                    style={{ marginRight: 7 }}
+                    color="white"
+                  />
+                )}
+              />
+            </View>
+
+            <TouchableOpacity onPress={() => setShow(false)}>
+              <Text style={{ marginTop: 20, color: "#999999" }} text70>
+                Go back to calendar
+              </Text>
+            </TouchableOpacity>
+          </Card>
+        </Dialog>
+        <AddChoreDialog
+          isVisible={choreDialogVisible}
+          setIsVisible={setChoreDialogVisible}
+        />
+        <ManuallyAddEventModal
+          show={showManualInputModal}
+          close={() => setShowManualInputModal(false)}
+        />
+        <UploadImageDialog
+          show={showUploadDialog}
+          setShow={setShowUploadDialog}
+        />
+      </>
     </ToDosContextProvider>
   );
 };

components/pages/calendar/CalendarPage.tsx

@@ -41,6 +41,8 @@ export default function CalendarPage() {
     const styles = StyleSheet.create({
         segmentslblStyle: {
             fontSize: 14,
+            fontFamily: 'Manrope',
+            fontWeight: 'bold'
         },
         calHeader: {
             borderWidth: 0,
@@ -89,7 +91,7 @@ export default function CalendarPage() {
     };
 
     return (
-        <View style={{flex: 1, height: "100%", padding: 10}}>
+        <View style={{flex: 1, height: "100%", padding: 10}} paddingH-22 paddingT-10>
             <HeaderTemplate
                 message={"Let's get your week started!"}
                 isWelcome={true}

components/shared/DrawerButton.tsx

@@ -15,7 +15,7 @@ const DrawerButton = (props: IDrawerButtonProps) => {
     <Button
       onPress={props.pressFunc}
       label={props.title}
-      labelStyle={{ fontSize: 14 }}
+      labelStyle={styles.labelStyle}
       color={props.color}
       backgroundColor="white"
       iconSource={() => (
@@ -43,8 +43,9 @@ export default DrawerButton;
 
 const styles = StyleSheet.create({
   iconContainer: {
-    width: '70%',
+    width: "70%",
     aspectRatio: 1,
     borderRadius: 50,
   },
+  labelStyle: { fontSize: 14, fontFamily: "Manrope_600SemiBold" },
 });

components/shared/HeaderTemplate.tsx

@@ -1,6 +1,7 @@
 import { View, Text } from "react-native-ui-lib";
 import React from "react";
 import { useAuthContext } from "@/contexts/AuthContext";
+import { ImageBackground } from "react-native";
 
 const HeaderTemplate = (props: {
   message: string;
@@ -11,18 +12,23 @@ const HeaderTemplate = (props: {
   const { user, profileData } = useAuthContext();
   return (
     <View row centerV marginV-15>
-      <View
+      <ImageBackground
-        backgroundColor="pink"
+      source={require("../../assets/images/profile-picture.png")}
-        height={65}
+        style={{
-        width={65}
+          width: 65,
-        style={{ borderRadius: 22 }}
+          height: 65,
-        marginR-20
+          borderRadius: 22,
+          overflow: "hidden",
+          marginRight: 20,
+        }}
       />
       <View>
         {props.isWelcome && (
           <Text text70L>Welcome, {profileData?.firstName}!</Text>
         )}
-        <Text text70BL>{props.message}</Text>
+        <Text text70B style={{ fontSize: 17 }}>
+          {props.message}
+        </Text>
         {props.children && <View>{props.children}</View>}
         {props.link && <View>{props.link}</View>}
       </View>

package.json

@@ -27,6 +27,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@expo-google-fonts/manrope": "^0.2.3",
     "@expo/vector-icons": "^14.0.2",
     "@react-native-community/blur": "^4.4.0",
     "@react-native-community/datetimepicker": "^8.2.0",
@@ -40,6 +41,7 @@
     "date-fns": "^3.6.0",
     "debounce": "^2.1.1",
     "expo": "~51.0.24",
+    "expo-app-loading": "^2.1.1",
     "expo-auth-session": "^5.5.2",
     "expo-barcode-scanner": "~13.0.1",
     "expo-build-properties": "~0.12.4",
@@ -47,7 +49,7 @@
     "expo-constants": "~16.0.2",
     "expo-dev-client": "~4.0.27",
     "expo-device": "~6.0.2",
-    "expo-font": "~12.0.9",
+    "expo-font": "~12.0.10",
     "expo-image-picker": "~15.0.7",
     "expo-linking": "~6.3.1",
     "expo-notifications": "~0.28.18",