martin/databag
1
0
Fork 0
mirror of https://github.com/balzack/databag.git synced 2025-02-12 03:29:16 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fixing overlay on logout modal

Browse Source
This commit is contained in:
balzack 2023-09-13 22:59:58 -07:00
parent 1e6a8e0e79
commit 5f7483c17b
3 changed files with 31 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/mobile/src/session/profile/Profile.styled.js
View File

@ -157,6 +157,7 @@ export const styles = StyleSheet.create({
fontSize: 16,
color: Colors.text,
fontFamily: 'roboto',
paddingRight: 8,
},
track: {
false: Colors.idleFill,

43
app/mobile/src/utils/Prompt.jsx
View File

@ -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

7
app/mobile/src/utils/Prompt.styled.js
View File

@ -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,