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, fontSize: 16,
color: Colors.text, color: Colors.text,
fontFamily: 'roboto', fontFamily: 'roboto',
paddingRight: 8,
}, },
track: { track: {
false: Colors.idleFill, false: Colors.idleFill,

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

@ -40,28 +40,31 @@ export function Prompt() {
supportedOrientations={['portrait', 'landscape']} supportedOrientations={['portrait', 'landscape']}
onRequestClose={display.actions.hidePrompt} onRequestClose={display.actions.hidePrompt}
> >
<BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black"> <View style={styles.modalOverlay}>
<View style={styles.modalContainer}> <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black" />
<Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text> <View style={styles.modalBase}>
<View style={styles.modalButtons}> <View style={styles.modalContainer}>
{ display.state.prompt?.cancel && ( <Text style={styles.modalHeader}>{ display.state.prompt?.title }</Text>
<TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}> <View style={styles.modalButtons}>
<Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text> { display.state.prompt?.cancel && (
</TouchableOpacity> <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={display.actions.hidePrompt}>
)} <Text style={styles.cancelButtonText}>{ display.state.prompt?.cancel?.label }</Text>
{ display.state.prompt?.ok && ( </TouchableOpacity>
<TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}> )}
{ !busy && ( { display.state.prompt?.ok && (
<Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text> <TouchableOpacity style={styles.okButton} activeOpacity={1} onPress={okPrompt}>
)} { !busy && (
{ busy && ( <Text style={styles.okButtonText}>{ display.state.prompt?.ok?.label }</Text>
<ActivityIndicator animating={true} color={Colors.primaryButtonText} /> )}
)} { busy && (
</TouchableOpacity> <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
)} )}
</TouchableOpacity>
)}
</View>
</View> </View>
</View> </View>
</BlurView> </View>
</Modal> </Modal>
<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({ export const styles = StyleSheet.create({
modalOverlay: { modalOverlay: {
width: '100%',
height: '100%',
},
modalBase: {
display: 'flex', display: 'flex',
width: '100%', width: '100%',
height: '100%', height: '100%',
alignItems: 'center', alignItems: 'center',
justifyContent: 'center', justifyContent: 'center',
position: 'absolute',
top: 0,
left: 0,
}, },
modalContainer: { modalContainer: {
backgroundColor: Colors.modalBase, backgroundColor: Colors.modalBase,