From 5f7483c17b03b24325f3e7f34bcd2d0a448166fd Mon Sep 17 00:00:00 2001
From: balzack <roland.osborne@gmail.com>
Date: Wed, 13 Sep 2023 22:59:58 -0700
Subject: [PATCH] fixing overlay on logout modal

---
 .../src/session/profile/Profile.styled.js     |  1 +
 app/mobile/src/utils/Prompt.jsx               | 43 ++++++++++---------
 app/mobile/src/utils/Prompt.styled.js         |  7 +++
 3 files changed, 31 insertions(+), 20 deletions(-)

diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index e8c28f6a..aa923585 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -157,6 +157,7 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     color: Colors.text,
     fontFamily: 'roboto',
+    paddingRight: 8,
   },
   track: {
     false: Colors.idleFill,
diff --git a/app/mobile/src/utils/Prompt.jsx b/app/mobile/src/utils/Prompt.jsx
index 32bcc417..6ad74bb8 100644
--- a/app/mobile/src/utils/Prompt.jsx
+++ b/app/mobile/src/utils/Prompt.jsx
@@ -40,28 +40,31 @@ export function Prompt() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={display.actions.hidePrompt}
       >
-        <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
-          <View style={styles.modalContainer}>
-            <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
-            <View style={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 style={styles.modalOverlay}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
+          <View style={styles.modalBase}>
+            <View style={styles.modalContainer}>
+              <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
+              <View style={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>
-        </BlurView>
+        </View>
       </Modal>
 
       <Modal
diff --git a/app/mobile/src/utils/Prompt.styled.js b/app/mobile/src/utils/Prompt.styled.js
index 08540076..85921a8a 100644
--- a/app/mobile/src/utils/Prompt.styled.js
+++ b/app/mobile/src/utils/Prompt.styled.js
@@ -3,11 +3,18 @@ import { Colors } from 'constants/Colors';
 
 export const styles = StyleSheet.create({
   modalOverlay: {
+    width: '100%',
+    height: '100%',
+  },
+  modalBase: {
     display: 'flex',
     width: '100%',
     height: '100%',
     alignItems: 'center',
     justifyContent: 'center',
+    position: 'absolute',
+    top: 0,
+    left: 0,
   },
   modalContainer: {
     backgroundColor: Colors.modalBase,