From ae7edd8fec3e1af6ea04269f113d8b47385732c3 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Fri, 6 Oct 2023 13:26:56 -0700
Subject: [PATCH] more overlay debugging

---
 app/mobile/src/utils/Prompt.jsx       | 41 +++++++++++++--------------
 app/mobile/src/utils/Prompt.styled.js | 14 +--------
 2 files changed, 20 insertions(+), 35 deletions(-)

diff --git a/app/mobile/src/utils/Prompt.jsx b/app/mobile/src/utils/Prompt.jsx
index 94965b93..4d5160f1 100644
--- a/app/mobile/src/utils/Prompt.jsx
+++ b/app/mobile/src/utils/Prompt.jsx
@@ -40,27 +40,24 @@ export function Prompt() {
         onRequestClose={display.actions.hidePrompt}
       >
         <View style={styles.modalOverlay}>
-          <View style={styles.blur} />
-          <View style={styles.modalBase}>
-            <View style={styles.modalContainer}>
-              <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
-              <View style={display.state.prompt?.centerButtons ? styles.centerModalButtons : styles.modalButtons}>
-                { display.state.prompt?.cancel && (
-                  <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
-                    <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
-                  </TouchableOpacity>
-                )}
-                { display.state.prompt?.ok && (
-                  <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
-                    { !busy && (
-                      <Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
-                    )}
-                    { busy && (
-                      <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
-                    )}
-                  </TouchableOpacity>
-                )}
-              </View>
+          <View style={styles.modalContainer}>
+            <Text style={styles.modalHeader}>{ display.state.prompt?.title }?</Text>
+            <View style={display.state.prompt?.centerButtons ? styles.centerModalButtons : styles.modalButtons}>
+              { display.state.prompt?.cancel && (
+                <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
+                  <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
+                </TouchableOpacity>
+              )}
+              { display.state.prompt?.ok && (
+                <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
+                  { !busy && (
+                    <Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
+                  )}
+                  { busy && (
+                    <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
+                  )}
+                </TouchableOpacity>
+              )}
             </View>
           </View>
         </View>
@@ -73,7 +70,7 @@ export function Prompt() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={display.actions.hideAlert}
       >
-        <View styles={styles.blur}>
+        <View styles={styles.modalOverlay}>
           <View style={styles.modalContainer}>
             <Text style={styles.modalHeader}>{ display.state.alert?.title }</Text>
             <Text style={styles.modalMessage}>{ display.state.alert?.message }</Text>
diff --git a/app/mobile/src/utils/Prompt.styled.js b/app/mobile/src/utils/Prompt.styled.js
index dc6336db..bae43f8f 100644
--- a/app/mobile/src/utils/Prompt.styled.js
+++ b/app/mobile/src/utils/Prompt.styled.js
@@ -5,16 +5,10 @@ export const styles = StyleSheet.create({
   modalOverlay: {
     width: '100%',
     height: '100%',
-  },
-  modalBase: {
+    backgroundColor: '#333333',
     display: 'flex',
-    width: '100%',
-    height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
-    position: 'absolute',
-    top: 0,
-    left: 0,
   },
   modalContainer: {
     backgroundColor: Colors.modalBase,
@@ -112,11 +106,5 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
-  blur: {
-    width: '100%',
-    height: '100%',
-    backgroundColor: '#333333',
-    opacity: 0.8,
-  },
 });