src/components/dialogBoxes/JournalAlertBoxOverlay.js
import React from 'react';
import {Modal, StyleSheet, Text, View} from 'react-native';
import BackSquareButton from '../buttons/BackSquareButton';
import LockIconSvgr from '../../assets/iconsSvgr/LockIconSvgr';
import LoginSquareButton from '../buttons/LoginSquareButton';
import {ColorPalette, UIColors} from '../../utils/ColorConstants';
import {globalStyles} from '../../styles/styles';
import {iOSxxxLargeTypo} from '../../styles/Typography';
/**
* Component displaying an overlay view with alert box for login to journal.
* Contains a button to go back to the previous view and another to login.
* @param {Object} props - Properties
* @param {function} props.onModalRequestCloseAction - Action to be executed when the device "back" button is pressed
* @param {function} props.onPressOkButtonAction - Action to be executed when the ok button is pressed
* @param {function} props.onPressCancelButtonAction - Action to be executed when the cancel button is pressed
* @param {boolean} props.modalVisible - Defines if the overlay is shown. Shown if true
* @returns {Object} Overlay alert box for login to journal
*/
export default function JournalAlertBoxOverlay(props) {
const onModalRequestCloseAction = props.onModalRequestCloseAction;
const onPressOkButtonAction = props.onPressOkButtonAction;
const onPressCancelButtonAction = props.onPressCancelButtonAction;
const modalVisible = props.modalVisible;
return (
<Modal
animationType="fade"
transparent={true}
visible={modalVisible}
onRequestClose={onModalRequestCloseAction}>
<View style={styles.overlay}>
<View style={[styles.dialogBox, globalStyles.shadow]}>
<View style={styles.headerContainer}>
<LockIconSvgr style={styles.icon} />
<View style={styles.message}>
<Text
style={[
iOSxxxLargeTypo.title2,
styles.textMessage,
]}>
Kun for helsepersonell!
</Text>
</View>
</View>
<View style={styles.buttonsContainer}>
<BackSquareButton onPress={onPressCancelButtonAction} />
<LoginSquareButton onPress={onPressOkButtonAction} />
</View>
</View>
</View>
</Modal>
);
}
/** Local styles
* @type {Object}
*/
const styles = StyleSheet.create({
overlay: {
flex: 1,
width: '100%',
height: '100%',
paddingHorizontal: 250, // Set size of the dialog box
paddingVertical: 180,
justifyContent: 'center',
alignItems: 'center',
alignContent: 'center',
backgroundColor: UIColors.OVERLAY,
},
dialogBox: {
flex: 1,
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
width: '100%',
height: '100%',
backgroundColor: ColorPalette.ALMOST_WHITE,
borderRadius: 20,
},
headerContainer: {
flexDirection: 'column',
justifyContent: 'center',
alignContent: 'center',
alignItems: 'center',
width: '100%',
height: '60%',
borderTopLeftRadius: 20,
borderTopRightRadius: 20,
backgroundColor: ColorPalette.PACIFIC_BLUE,
},
icon: {
width: '40%',
height: '45%',
marginTop: 30,
},
message: {
justifyContent: 'center',
},
textMessage: {
padding: 25,
color: ColorPalette.WHITE,
},
buttonsContainer: {
width: '100%',
height: '40%',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-around',
alignContent: 'center',
paddingBottom: 5,
},
});