new fonts, ui tweaks

components/pages/calendar/AddEventDialog.tsx

@@ -14,11 +14,14 @@ import {
   Text,
   View,
 } from "react-native-ui-lib";
-import { TouchableOpacity } from "react-native";
+import { StyleSheet, TouchableOpacity } from "react-native";
 import { ManuallyAddEventModal } from "@/components/pages/calendar/ManuallyAddEventModal";
 import AddChoreDialog from "../todos/AddChoreDialog";
 import { ToDosContextProvider } from "@/contexts/ToDosContext";
 import UploadImageDialog from "./UploadImageDialog";
+import CameraIcon from "@/assets/svgs/CameraIcon";
+import CalendarIcon from "@/assets/svgs/CalendarIcon";
+import NavToDosIcon from "@/assets/svgs/NavToDosIcon";
 
 export const AddEventDialog = () => {
   const [show, setShow] = useState(false);
@@ -60,9 +63,9 @@ export const AddEventDialog = () => {
         >
           <View row centerV centerH>
             <MaterialIcons name="add" size={22} color={"white"} />
-            <Text white tex30 style={{ fontSize: 17 }}>
-              New
-            </Text>
+            <Text white style={{ fontSize: 16, fontFamily: 'Manrope_600SemiBold' }}>
+            New
+          </Text>
           </View>
         </Button>
 
@@ -72,16 +75,10 @@ export const AddEventDialog = () => {
           panDirection={PanningProvider.Directions.DOWN}
           center
         >
-          <Card
-            style={{
-              paddingHorizontal: 40,
-              paddingTop: 40,
-              paddingBottom: 20,
-              justifyContent: "center",
-              alignItems: "center",
-            }}
-          >
-            <Text text50R>Create a new event</Text>
+          <Card style={styles.dialogCard}>
+            <Text text60 style={styles.modalTitle}>
+              Create a new event
+            </Text>
 
             <View
               style={{ marginTop: 20, alignItems: "center", width: "100%" }}
@@ -95,14 +92,10 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Scan Image"
+                labelStyle={styles.btnLabel}
                 onPress={handleScanImageDialog}
                 iconSource={() => (
-                  <Feather
-                    name="camera"
-                    size={21}
-                    style={{ marginRight: 7 }}
-                    color="white"
-                  />
+                  <CameraIcon color="white" style={styles.btnIcon} />
                 )}
               />
 
@@ -115,14 +108,10 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Create Event"
+                labelStyle={styles.btnLabel}
                 onPress={handleOpenManualInputModal}
                 iconSource={() => (
-                  <MaterialCommunityIcons
-                    name="calendar-text-outline"
-                    size={22}
-                    style={{ marginRight: 5 }}
-                    color="white"
-                  />
+                  <CalendarIcon color={"white"} style={styles.btnIcon} />
                 )}
               />
 
@@ -135,20 +124,20 @@ export const AddEventDialog = () => {
                   paddingVertical: 13,
                 }}
                 label="Add To Do"
+                labelStyle={styles.btnLabel}
                 onPress={() => setChoreDialogVisible(true)}
                 iconSource={() => (
-                  <AntDesign
-                    name="checkcircleo"
-                    size={20}
-                    style={{ marginRight: 7 }}
-                    color="white"
+                  <NavToDosIcon
+                    color={"white"}
+                    width={23}
+                    style={styles.btnIcon}
                   />
                 )}
               />
             </View>
 
             <TouchableOpacity onPress={() => setShow(false)}>
-              <Text style={{ marginTop: 20, color: "#999999" }} text70>
+              <Text style={styles.bottomText} text70>
                 Go back to calendar
               </Text>
             </TouchableOpacity>
@@ -170,3 +159,30 @@ export const AddEventDialog = () => {
     </ToDosContextProvider>
   );
 };
+
+const styles = StyleSheet.create({
+  modalTitle: {
+    fontSize: 22,
+    fontFamily: "Manrope_600SemiBold",
+    marginBottom: 16,
+  },
+  bottomText: {
+    marginTop: 20,
+    color: "#999999",
+    fontSize: 13.53,
+    fontFamily: "Poppins_500Medium",
+  },
+  dialogCard: {
+    paddingHorizontal: 40,
+    paddingTop: 35,
+    paddingBottom: 20,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 20,
+  },
+  btnLabel: {
+    fontSize: 15,
+    fontFamily: "PlusJakartaSans_500Medium",
+  },
+  btnIcon: { marginRight: 10 },
+});