update pop-up dialog box UI

android/app/build/intermediates/incremental/packageDebug/tmp/debug/dex-renamer-state.txt

@@ -1,4 +1,4 @@
-#Mon May 05 11:25:25 SGT 2025
+#Tue May 06 11:28:05 SGT 2025
 path.4=15/classes.dex
 path.3=14/classes.dex
 path.2=0/classes.dex

app/components/assets.manager.js

@@ -96,7 +96,8 @@ const bg = {
   scheduler: require("../assets/bg_scheduler.png"),
   about: require("../assets/img_bg_about.png"),
   loginBg: require('../assets/login_background.jpg'),
-  login_bg: require('../assets/login_bg.jpg')
+  login_bg: require('../assets/login_bg.jpg'),
+  modal_bg: require("../assets/bg_modal.png"),
 }
 
 const boarding = [

app/components/elements.js

@@ -777,7 +777,10 @@ const customAlert = function(props) {
   }
 
   return (
-    <TouchableOpacity activeOpacity={1} onPress={!backdropCancellable ? () => {} : onPressNo} style={{
+    <TouchableOpacity
+      activeOpacity={1}
+      onPress={!backdropCancellable ? () => { } : onPressNo}
+      style={{
         position: 'absolute',
         top: 0,
         left: 0,
@@ -787,29 +790,103 @@ const customAlert = function(props) {
         backgroundColor: 'rgba(0,0,0,.5)',
         paddingHorizontal: 25
       }}>
-      <TouchableOpacity activeOpacity={1} onPress={null} style= {{
+
+      <TouchableOpacity
+        activeOpacity={1}
+        onPress={null}
+        style={{
           backgroundColor: theme?.theme.dark ? theme.theme.colors.border : 'white',
           zIndex: 10,
           borderRadius: 10,
-        alignItems: 'center'
+          alignItems: 'center',
+          overflow: 'hidden', 
+          height: 500  
+        }}>
+
+        {/* Image in the top half */}
+        <View style={{ flex: 1 }}>
+          <Image
+            source={Assets.bg.modal_bg}  
+            style={{
+              height: '100%',
+              resizeMode: 'contain',  
+            }}
+          />
+        </View>
+
+        {/* Text in the bottom half */}
+        <View style={{
+          // flex: 1,
+          justifyContent: 'center',
+          alignItems: 'center',
+          paddingHorizontal: 15,
         }}>
           {
             children ?
-            children
-            :
+              children :
               <>
-              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", fontWeight: 'bold', fontSize: 18, marginTop: 18, marginBottom: 19}}>{title}</Text>
-              <Text style={{color: theme?.theme.dark ? theme?.theme.colors.text : "black", paddingHorizontal: 15, textAlign: 'center', fontSize: 18, marginBottom: 35}}>{body}</Text>
+                <Text
+                  style={{
+                    color: theme?.theme.dark ? theme?.theme.colors.text : "black",
+                    fontWeight: 'bold',
+                    fontSize: 18,
+                    marginTop: 18,
+                    marginBottom: 19
+                  }}>
+                  {title}
+                </Text>
+                <Text
+                  style={{
+                    color: theme?.theme.dark ? theme?.theme.colors.text : "black",
+                    textAlign: 'center',
+                    fontSize: 16,
+                    marginBottom: 35
+                  }}>
+                  {body}
+                </Text>
 
                 <View style={{ flexDirection: 'row', paddingHorizontal: 31, marginBottom: 18 }}>
-                { !yesButtonOnly && <TouchableOpacity onPress={onPressNo} style={{flex: 1, borderWidth: 1, borderColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginRight: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17}}>{noText ? noText : "Cancel"}</Text></TouchableOpacity> }
-                { !noButtonOnly && <TouchableOpacity onPress={onPressYes} style={{flex: 1, backgroundColor: Theme.colors.primary, alignItems: 'center', paddingVertical: 6, marginLeft: 6, borderRadius: 5}}><Text style={{fontWeight: 'bold', color: 'white', fontSize: 17}}>{yesText ? yesText : "Yes"}</Text></TouchableOpacity> }
+                  {!yesButtonOnly &&
+                    <TouchableOpacity
+                      onPress={onPressNo}
+                      style={{
+                        flex: 1,
+                        borderWidth: 1,
+                        borderColor: Theme.colors.primary,
+                        alignItems: 'center',
+                        paddingVertical: 6,
+                        marginRight: 6,
+                        borderRadius: 5
+                      }}>
+                      <Text style={{ fontWeight: 'bold', color: Theme.colors.primary, fontSize: 17 }}>
+                        {noText ? noText : "Cancel"}
+                      </Text>
+                    </TouchableOpacity>
+                  }
+                  {!noButtonOnly &&
+                    <TouchableOpacity
+                      onPress={onPressYes}
+                      style={{
+                        flex: 1,
+                        backgroundColor: Theme.colors.primary,
+                        alignItems: 'center',
+                        paddingVertical: 6,
+                        marginLeft: 6,
+                        borderRadius: 5
+                      }}>
+                      <Text style={{ fontWeight: 'bold', color: 'white', fontSize: 17 }}>
+                        {yesText ? yesText : "Yes"}
+                      </Text>
+                    </TouchableOpacity>
+                  }
                 </View>
               </>
           }
-      </TouchableOpacity>
+        </View>
 
       </TouchableOpacity>
+    </TouchableOpacity>
+
   )
 }