new fonts, ui tweaks

components/pages/calendar/UploadImageDialog.tsx

@@ -11,6 +11,8 @@ import { Dialog, PanningProvider, Card } from "react-native-ui-lib";
 import { StyleSheet } from "react-native";
 import { Feather, MaterialIcons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
+import AddImageIcon from "@/assets/svgs/AddImageIcon";
+import CameraIcon from "@/assets/svgs/CameraIcon";
 
 interface IUploadDialogProps {
   show: boolean;
@@ -51,19 +53,9 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
       panDirection={PanningProvider.Directions.DOWN}
       center
     >
-      <Card
-        style={{
-          paddingHorizontal: 40,
-          paddingTop: 20,
-          paddingBottom: 10,
-          justifyContent: "center",
-          alignItems: "center",
-        }}
-      >
+      <Card style={styles.modalCard}>
         <View centerH>
-          <Text text60 marginB-20>
-            Upload an Image
-          </Text>
+          <Text style={styles.modalTitle}>Upload an Image</Text>
           {!selectedImage && (
             <TouchableOpacity onPress={handleImagePick}>
               <View
@@ -73,12 +65,8 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
                 gap-8
                 marginB-20
               >
-                <MaterialIcons
-                  name="add-photo-alternate"
-                  size={30}
-                  color="#fd1775"
-                />
-                <Text color="#fd1775" text70>
+                <AddImageIcon />
+                <Text style={styles.uploadTxt}>
                   Click here to upload an image
                 </Text>
               </View>
@@ -102,38 +90,31 @@ const UploadImageDialog = (uploadDialogProps: IUploadDialogProps) => {
                     setImageTitle("");
                   }}
                 >
-                  <Feather
-                    name="trash"
-                    size={22}
-                    color="#919191"
-                  />
+                  <Feather name="trash" size={22} color="#919191" />
                 </TouchableOpacity>
               </View>
               <Button
                 style={{
                   marginBottom: 10,
-                  marginTop: 20,
+                  marginTop: 35,
                   backgroundColor: "#ea156c",
                   justifyContent: "center",
-                  paddingVertical: 13,
+                  paddingVertical: 15,
+                  width: 285,
                   alignItems: "center",
                 }}
                 label="Upload Image"
                 onPress={() => {}}
+                labelStyle={styles.btnLbl}
                 iconSource={() => (
-                  <Feather
-                    name="camera"
-                    size={21}
-                    style={{ marginRight: 7 }}
-                    color="white"
-                  />
+                  <CameraIcon color="white" style={{marginRight: 10}}/>
                 )}
               />
             </>
           )}
 
           <TouchableOpacity onPress={() => uploadDialogProps.setShow(false)}>
-            <Text text80 color="#999999">
+            <Text style={styles.bottomText}>
               Go back
             </Text>
           </TouchableOpacity>
@@ -148,6 +129,7 @@ export default UploadImageDialog;
 const styles = StyleSheet.create({
   uploadImgBox: {
     backgroundColor: "#ffe8f2",
+    padding: 35,
     width: "100%",
     aspectRatio: 1.8,
     borderRadius: 20,
@@ -155,10 +137,20 @@ const styles = StyleSheet.create({
     borderColor: "#fd1775",
     borderStyle: "dashed",
   },
+  btnLbl: {
+    fontFamily: "PlusJakartaSans_500Medium",
+    fontSize: 15,
+  },
+  uploadTxt: {
+    color: "#b11d5a",
+    fontSize: 15,
+    fontFamily: "PlusJakartaSans_400Regular",
+    marginTop: 12
+  },
   selectedImage: {
-    width: 60,
+    width: 38.69,
     aspectRatio: 1,
-    borderRadius: 10,
+    borderRadius: 5,
   },
   imageContainer: {
     alignItems: "center",
@@ -166,13 +158,33 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: "#d9d9d9",
     padding: 10,
-    borderRadius: 13,
+    borderRadius: 10,
   },
   imageInfo: {
     marginLeft: 10,
   },
   imageTitle: {
-    fontSize: 16,
-    color: "#333",
+    fontSize: 15,
+    color: "#262627",
+    fontFamily: "PlusJakartaSans_400Regular"
+  },
+  modalCard: {
+    paddingHorizontal: 25,
+    paddingTop: 30,
+    paddingBottom: 17,
+    justifyContent: "center",
+    alignItems: "center",
+    borderRadius: 20,
+  },
+  modalTitle: {
+    fontSize: 22,
+    fontFamily: "Manrope_600SemiBold",
+    marginBottom: 20,
+  },
+  bottomText: {
+    marginTop: 20,
+    color: "#999999",
+    fontSize: 13.53,
+    fontFamily: "Poppins_500Medium",
   },
 });