@hedia/recommendation-screen 1.1.2 → 1.2.0

package/src/components/ExitModal.jsx

@@ -0,0 +1,87 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const macro_1 = require("@lingui/macro");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const i18nUtils_1 = require("../locale/i18nUtils");
+const Constants_1 = require("../utils/Constants");
+const Icon_1 = __importDefault(require("./Icon"));
+const RecommendationModal_1 = require("./RecommendationModal");
+class ExitModal extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        return (<react_native_1.View style={[react_native_1.StyleSheet.absoluteFillObject, styles.container]}>
+				<react_native_1.View style={styles.modalContainer}>
+					<Icon_1.default accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={styles.icon} onPress={this.props.onClose}/>
+					<react_native_1.View style={styles.textContainer}>
+						<react_native_1.Text style={styles.title}>{i18nUtils_1.i18n._(macro_1.t `Save data before closing?`)}</react_native_1.Text>
+						<react_native_1.Text style={styles.message}>
+							{i18nUtils_1.i18n._(macro_1.t `Your saved data will be used for future calculations.`)}
+						</react_native_1.Text>
+					</react_native_1.View>
+					<react_native_1.View style={styles.buttonContainer}>
+						<react_native_1.TouchableOpacity accessibilityLabel="SaveToLogbook" onPress={this.props.onSave} style={styles.button}>
+							<react_native_1.Text style={styles.textButton}>{i18nUtils_1.i18n._(macro_1.t `Save to logbook`)}</react_native_1.Text>
+						</react_native_1.TouchableOpacity>
+						<react_native_1.TouchableOpacity accessibilityLabel="CloseCalculation" onPress={this.props.onCloseCalculation} style={styles.button}>
+							<react_native_1.Text style={styles.textButton}>{i18nUtils_1.i18n._(macro_1.t `Close calculation`)}</react_native_1.Text>
+						</react_native_1.TouchableOpacity>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = ExitModal;
+const { height, width } = react_native_1.Dimensions.get(`screen`);
+const styles = react_native_1.StyleSheet.create({
+    container: { justifyContent: `center`, backgroundColor: `rgba(0, 0, 0, 0.9)` },
+    modalContainer: { margin: `4%`, backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE, borderRadius: width / 25 },
+    icon: {
+        color: Constants_1.BORDER_COLOUR_GREY,
+        fontSize: width / 12,
+        textAlign: `right`,
+        marginRight: `4%`,
+        marginTop: `3%`,
+    },
+    textContainer: { marginHorizontal: `4%`, marginBottom: `5%`, alignSelf: `flex-start` },
+    title: {
+        color: `rgba(139, 144, 196, 1)`,
+        fontSize: width / 17,
+        fontWeight: `bold`,
+        textAlign: `center`,
+        marginBottom: `5%`,
+    },
+    message: { color: `rgba(245, 242, 242, 1)`, fontSize: width / 21, textAlign: `center` },
+    buttonContainer: {
+        flexDirection: `row`,
+        justifyContent: `space-around`,
+        marginHorizontal: `4%`,
+        marginVertical: `6%`,
+    },
+    button: { ...RecommendationModal_1.stylesModal.okButton, height: height / 17, marginTop: 0 },
+    textButton: { textAlign: `center`, fontSize: width / 24, color: `white` },
+});

package/src/components/ExitModal.tsx

@@ -0,0 +1,85 @@
+import { t } from "@lingui/macro";
+import * as React from "react";
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
+import Icon from "./Icon";
+import { stylesModal } from "./RecommendationModal";
+
+interface IModalProps {
+	onSave(): void;
+	onCloseCalculation(): void;
+	onClose(): void;
+}
+
+export default class ExitModal extends React.Component<IModalProps> {
+	constructor(props: IModalProps) {
+		super(props);
+	}
+
+	public render(): JSX.Element {
+		return (
+			<View style={[StyleSheet.absoluteFillObject, styles.container]}>
+				<View style={styles.modalContainer}>
+					<Icon
+						accessibilityLabel="ModalExitIcon"
+						iconIdentifier={`Ionicons/ios-close-circle-outline`}
+						style={styles.icon}
+						onPress={this.props.onClose}
+					/>
+					<View style={styles.textContainer}>
+						<Text style={styles.title}>{i18n._(t`Save data before closing?`)}</Text>
+						<Text style={styles.message}>
+							{i18n._(t`Your saved data will be used for future calculations.`)}
+						</Text>
+					</View>
+					<View style={styles.buttonContainer}>
+						<TouchableOpacity
+							accessibilityLabel="SaveToLogbook"
+							onPress={this.props.onSave}
+							style={styles.button}
+						>
+							<Text style={styles.textButton}>{i18n._(t`Save to logbook`)}</Text>
+						</TouchableOpacity>
+						<TouchableOpacity
+							accessibilityLabel="CloseCalculation"
+							onPress={this.props.onCloseCalculation}
+							style={styles.button}
+						>
+							<Text style={styles.textButton}>{i18n._(t`Close calculation`)}</Text>
+						</TouchableOpacity>
+					</View>
+				</View>
+			</View>
+		);
+	}
+}
+const { height, width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
+	container: { justifyContent: `center`, backgroundColor: `rgba(0, 0, 0, 0.9)` },
+	modalContainer: { margin: `4%`, backgroundColor: BACKGROUND_COLOUR_PURPLE, borderRadius: width / 25 },
+	icon: {
+		color: BORDER_COLOUR_GREY,
+		fontSize: width / 12,
+		textAlign: `right`,
+		marginRight: `4%`,
+		marginTop: `3%`,
+	},
+	textContainer: { marginHorizontal: `4%`, marginBottom: `5%`, alignSelf: `flex-start` },
+	title: {
+		color: `rgba(139, 144, 196, 1)`,
+		fontSize: width / 17,
+		fontWeight: `bold`,
+		textAlign: `center`,
+		marginBottom: `5%`,
+	},
+	message: { color: `rgba(245, 242, 242, 1)`, fontSize: width / 21, textAlign: `center` },
+	buttonContainer: {
+		flexDirection: `row`,
+		justifyContent: `space-around`,
+		marginHorizontal: `4%`,
+		marginVertical: `6%`,
+	},
+	button: { ...stylesModal.okButton, height: height / 17, marginTop: 0 },
+	textButton: { textAlign: `center`, fontSize: width / 24, color: `white` },
+});

package/src/components/Header.jsx

@@ -18,7 +18,7 @@ class Header extends react_1.default.Component {
 					<react_native_1.View style={exports.headerStyles.margin}>
 						<react_native_1.View style={exports.headerStyles.exitButtonContainer}>
 							<react_native_1.View style={exports.headerStyles.exitButton}>
-								<react_native_1.TouchableOpacity accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
+								<react_native_1.TouchableOpacity testID="closeCalc" accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
 									<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.headerStyles.iconStyle}/>
 								</react_native_1.TouchableOpacity>
 								<react_native_1.View style={exports.headerStyles.headerFiller}/>

package/src/components/Header.tsx

@@ -19,6 +19,7 @@ export default class Header extends React.Component<IProps> {
 						<View style={headerStyles.exitButtonContainer}>
 							<View style={headerStyles.exitButton}>
 								<TouchableOpacity
+									testID="closeCalc"
 									accessibilityLabel="exitButton"
 									style={headerStyles.exitButton}
 									onPress={this.props.exitCallback}

package/src/components/RecommendationModal.d.ts

@@ -0,0 +1,180 @@
+import * as React from "react";
+import { AttentionMessage } from "../utils/AttentionMessages";
+interface IModalProps {
+    isVisible: boolean;
+    suggestedCarbohydrates?: number;
+    attentionMessage: AttentionMessage;
+    limitationMessage: AttentionMessage;
+    onClickOkButton(): void;
+    onAcceptCarbohydrates(): void;
+    onDeclineCarbohydrates(): void;
+}
+interface IModalState {
+    firstPageVisible: boolean;
+}
+export default class RecommendationModal extends React.Component<IModalProps, IModalState> {
+    constructor(props: IModalProps);
+    okayButton(): JSX.Element;
+    nextButton(): JSX.Element;
+    onPressNextButton: () => void;
+    recommendationButtons: () => JSX.Element;
+    recommendCarbohydrates: () => JSX.Element;
+    secondPage: () => JSX.Element;
+    firstPage: () => JSX.Element;
+    render(): JSX.Element;
+}
+export declare const stylesModal: {
+    modalStyle: {
+        margin: number;
+    };
+    flex1: {
+        flex: number;
+    };
+    container: {
+        flex: number;
+        backgroundColor: string;
+    };
+    marginHorizontal: {
+        marginHorizontal: string;
+    };
+    marginVertical: {
+        marginVertical: string;
+    };
+    flexStart: {
+        flex: number;
+        justifyContent: "flex-start";
+    };
+    center: {
+        justifyContent: "center";
+        flex: number;
+    };
+    recommendationRow: {
+        flex: number;
+        justifyContent: "center";
+        alignContent: "center";
+    };
+    textContainer: {
+        flex: number;
+        justifyContent: "center";
+        marginHorizontal: string;
+    };
+    textContainerIfCarbs: {
+        flex: number;
+        justifyContent: "flex-end";
+        marginHorizontal: string;
+    };
+    textTittleMessage: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    textMessage: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    buttonText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    okayButtonContainer: {
+        justifyContent: "center";
+        alignSelf: "center";
+        flexDirection: "row";
+        marginTop: string;
+    };
+    recommendationContainer: {
+        flex: number;
+        justifyContent: "flex-start";
+        marginHorizontal: string;
+    };
+    addToCalculationContainer: {
+        flex: number;
+        justifyContent: "flex-start";
+        marginVertical: string;
+    };
+    innerView: {
+        flex: number;
+        alignContent: "center";
+        paddingVertical: string;
+        paddingHorizontal: string;
+        marginVertical: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    suggestedView: {
+        flexDirection: "row";
+        justifyContent: "center";
+    };
+    suggestedCarbs: {
+        color: string;
+        fontSize: number;
+        fontWeight: "bold";
+        textAlign: "center";
+    };
+    recommendEatingText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    carbohydrateText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    addToCalculation: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    recommendationButtonsContainer: {
+        justifyContent: "center";
+        flexDirection: "row";
+        marginTop: string;
+    };
+    affirmativeCarbsText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    negativeCarbsText: {
+        color: string;
+        fontSize: number;
+        textAlign: "center";
+    };
+    affirmativeCarbsButton: {
+        marginTop: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        height: number;
+        alignSelf: "center";
+        justifyContent: "center";
+        marginRight: string;
+    };
+    negativeCarbsButton: {
+        marginTop: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        height: number;
+        alignSelf: "center";
+        justifyContent: "center";
+        marginLeft: string;
+    };
+    okButton: {
+        marginTop: string;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+        width: number;
+        height: number;
+        alignSelf: "center";
+        justifyContent: "center";
+    };
+};
+export {};

package/src/components/{HediaRecommendationModal.jsx → RecommendationModal.jsx}

@@ -22,12 +22,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.stylesModal = void 0;
 const macro_1 = require("@lingui/macro");
 const React = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const react_native_modal_1 = __importDefault(require("react-native-modal"));
 const i18nUtils_1 = require("../locale/i18nUtils");
-class HediaRecommendationModal extends React.Component {
+const Constants_1 = require("../utils/Constants");
+class RecommendationModal extends React.Component {
     constructor(props) {
         super(props);
         this.onPressNextButton = () => {
@@ -36,67 +38,69 @@ class HediaRecommendationModal extends React.Component {
             return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
         };
         this.recommendationButtons = () => {
-            return (<react_native_1.View style={styles.recommendationButtonsContainer}>
-				<react_native_1.TouchableOpacity accessibilityLabel="yesButtonModal" style={styles.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
-					<react_native_1.Text style={styles.affirmativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
+            return (<react_native_1.View style={exports.stylesModal.recommendationButtonsContainer}>
+				<react_native_1.TouchableOpacity accessibilityLabel="yesButtonModal" style={exports.stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+					<react_native_1.Text style={exports.stylesModal.affirmativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
-				<react_native_1.TouchableOpacity accessibilityLabel="noButtonModal" style={styles.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<react_native_1.Text style={styles.negativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `NO`)}</react_native_1.Text>
+				<react_native_1.TouchableOpacity accessibilityLabel="noButtonModal" style={exports.stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+					<react_native_1.Text style={exports.stylesModal.negativeCarbsText}>{i18nUtils_1.i18n._(macro_1.t `NO`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
 			</react_native_1.View>);
         };
         this.recommendCarbohydrates = () => {
             const { suggestedCarbohydrates } = this.props;
-            return (<react_native_1.View style={styles.flex1}>
-				<react_native_1.View style={styles.innerView}>
-					<react_native_1.View style={styles.recommendationRow}>
-						<react_native_1.Text style={styles.recommendEatingText}>{i18nUtils_1.i18n._(macro_1.t `We recommend eating an additional:`)}</react_native_1.Text>
+            return (<react_native_1.View style={exports.stylesModal.flex1}>
+				<react_native_1.View style={exports.stylesModal.innerView}>
+					<react_native_1.View style={exports.stylesModal.recommendationRow}>
+						<react_native_1.Text style={exports.stylesModal.recommendEatingText}>
+							{i18nUtils_1.i18n._(macro_1.t `We recommend eating an additional:`)}
+						</react_native_1.Text>
 					</react_native_1.View>
-					<react_native_1.View style={styles.center}>
-						<react_native_1.View style={styles.suggestedView}>
-							<react_native_1.Text style={styles.suggestedCarbs}>{`${Math.ceil(suggestedCarbohydrates)} `}</react_native_1.Text>
-							<react_native_1.Text style={styles.carbohydrateText}>{i18nUtils_1.i18n._(macro_1.t `grams of carbohydrates`)}</react_native_1.Text>
+					<react_native_1.View style={exports.stylesModal.center}>
+						<react_native_1.View style={exports.stylesModal.suggestedView}>
+							<react_native_1.Text style={exports.stylesModal.suggestedCarbs}>{`${Math.round(suggestedCarbohydrates)} `}</react_native_1.Text>
+							<react_native_1.Text style={exports.stylesModal.carbohydrateText}>{i18nUtils_1.i18n._(macro_1.t `grams of carbohydrates`)}</react_native_1.Text>
 						</react_native_1.View>
 					</react_native_1.View>
-					<react_native_1.View style={styles.recommendationRow}>
-						<react_native_1.Text style={styles.recommendEatingText}>{i18nUtils_1.i18n._(macro_1.t `Instead of taking insulin`)}</react_native_1.Text>
+					<react_native_1.View style={exports.stylesModal.recommendationRow}>
+						<react_native_1.Text style={exports.stylesModal.recommendEatingText}>{i18nUtils_1.i18n._(macro_1.t `Instead of taking insulin`)}</react_native_1.Text>
 					</react_native_1.View>
 				</react_native_1.View>
-				<react_native_1.View style={styles.addToCalculationContainer}>
-					<react_native_1.View style={styles.center}>
-						<react_native_1.Text style={styles.addToCalculation}>
+				<react_native_1.View style={exports.stylesModal.addToCalculationContainer}>
+					<react_native_1.View style={exports.stylesModal.center}>
+						<react_native_1.Text style={exports.stylesModal.addToCalculation}>
 							{i18nUtils_1.i18n._(macro_1.t `Would you like to add this to your current calculation?`)}
 						</react_native_1.Text>
 					</react_native_1.View>
-					<react_native_1.View style={{ ...styles.flexStart, flex: 2 }}>{this.recommendationButtons()}</react_native_1.View>
+					<react_native_1.View style={{ ...exports.stylesModal.flexStart, flex: 2 }}>{this.recommendationButtons()}</react_native_1.View>
 				</react_native_1.View>
 			</react_native_1.View>);
         };
         this.secondPage = () => {
             const { attentionMessage, suggestedCarbohydrates } = this.props;
             const areCarbs = suggestedCarbohydrates && suggestedCarbohydrates > 0;
-            return (<react_native_1.View style={styles.container}>
-				<react_native_1.View style={areCarbs ? styles.textContainerIfCarbs : styles.textContainer}>
-					<react_native_1.View style={styles.marginVertical}>
-						<react_native_1.Text style={styles.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
+            return (<react_native_1.View style={exports.stylesModal.container}>
+				<react_native_1.View style={areCarbs ? exports.stylesModal.textContainerIfCarbs : exports.stylesModal.textContainer}>
+					<react_native_1.View style={exports.stylesModal.marginVertical}>
+						<react_native_1.Text style={exports.stylesModal.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
 					</react_native_1.View>
-					<react_native_1.Text style={styles.textMessage}>{attentionMessage}</react_native_1.Text>
+					<react_native_1.Text style={exports.stylesModal.textMessage}>{attentionMessage}</react_native_1.Text>
 				</react_native_1.View>
-				<react_native_1.View style={areCarbs ? styles.recommendationContainer : styles.flexStart}>
+				<react_native_1.View style={areCarbs ? exports.stylesModal.recommendationContainer : exports.stylesModal.flexStart}>
 					{areCarbs ? this.recommendCarbohydrates() : this.okayButton()}
 				</react_native_1.View>
 			</react_native_1.View>);
         };
         this.firstPage = () => {
             const { limitationMessage } = this.props;
-            return (<react_native_1.View style={styles.container}>
-				<react_native_1.View style={styles.textContainer}>
-					<react_native_1.View style={styles.marginVertical}>
-						<react_native_1.Text style={styles.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
+            return (<react_native_1.View style={exports.stylesModal.container}>
+				<react_native_1.View style={exports.stylesModal.textContainer}>
+					<react_native_1.View style={exports.stylesModal.marginVertical}>
+						<react_native_1.Text style={exports.stylesModal.textTittleMessage}>{i18nUtils_1.i18n._(macro_1.t `Attention`)}</react_native_1.Text>
 					</react_native_1.View>
-					<react_native_1.Text style={styles.textMessage}>{limitationMessage}</react_native_1.Text>
+					<react_native_1.Text style={exports.stylesModal.textMessage}>{limitationMessage}</react_native_1.Text>
 				</react_native_1.View>
-				<react_native_1.View style={styles.flexStart}>{this.nextButton()}</react_native_1.View>
+				<react_native_1.View style={exports.stylesModal.flexStart}>{this.nextButton()}</react_native_1.View>
 			</react_native_1.View>);
         };
         this.state = {
@@ -104,40 +108,39 @@ class HediaRecommendationModal extends React.Component {
         };
     }
     okayButton() {
-        return (<react_native_1.View style={styles.okayButtonContainer}>
-				<react_native_1.TouchableOpacity accessibilityLabel="okayButtonModal" style={styles.okButton} onPress={this.props.onClickOkButton}>
-					<react_native_1.Text style={styles.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
+        return (<react_native_1.View style={exports.stylesModal.okayButtonContainer}>
+				<react_native_1.TouchableOpacity accessibilityLabel="okayButtonModal" style={exports.stylesModal.okButton} onPress={this.props.onClickOkButton}>
+					<react_native_1.Text style={exports.stylesModal.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
 			</react_native_1.View>);
     }
     nextButton() {
-        return (<react_native_1.View style={styles.okayButtonContainer}>
-				<react_native_1.TouchableOpacity accessibilityLabel="nextButtonModal" style={styles.okButton} onPress={this.onPressNextButton}>
-					<react_native_1.Text style={styles.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
+        return (<react_native_1.View style={exports.stylesModal.okayButtonContainer}>
+				<react_native_1.TouchableOpacity accessibilityLabel="nextButtonModal" style={exports.stylesModal.okButton} onPress={this.onPressNextButton}>
+					<react_native_1.Text style={exports.stylesModal.buttonText}>{i18nUtils_1.i18n._(macro_1.t `OK`)}</react_native_1.Text>
 				</react_native_1.TouchableOpacity>
 			</react_native_1.View>);
     }
     render() {
         const { isVisible } = this.props;
         const { firstPageVisible } = this.state;
-        return (<react_native_modal_1.default isVisible={isVisible} style={styles.modalStyle}>
+        return (<react_native_modal_1.default isVisible={isVisible} style={exports.stylesModal.modalStyle}>
 				{firstPageVisible ? this.firstPage() : this.secondPage()}
 			</react_native_modal_1.default>);
     }
 }
-exports.default = HediaRecommendationModal;
+exports.default = RecommendationModal;
 const { height, width } = react_native_1.Dimensions.get(`screen`);
 const buttonHeight = height / 20;
 const buttonWidth = width / 2.5;
 const buttonFontSize = height / 45;
 const buttonBorderRadius = height / 30;
 const buttonBorderWidth = height / 500;
-const tealColor = `rgba(73, 255, 252, 1)`;
 const sugestionFontSize = height / 35;
 const recommendEatingFontSize = height / 45;
 const textFontSize = height / 42;
 const titleFontSize = height / 30;
-const styles = react_native_1.StyleSheet.create({
+exports.stylesModal = react_native_1.StyleSheet.create({
     modalStyle: { margin: 0 },
     flex1: { flex: 1 },
     container: { flex: 1, backgroundColor: `rgba(30, 35, 87, 0.9)` },
@@ -150,7 +153,7 @@ const styles = react_native_1.StyleSheet.create({
     textContainerIfCarbs: { flex: 3, justifyContent: `flex-end`, marginHorizontal: `6%` },
     textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
     textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-    buttonText: { color: tealColor, fontSize: buttonFontSize, textAlign: `center` },
+    buttonText: { color: Constants_1.BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     okayButtonContainer: { justifyContent: `center`, alignSelf: `center`, flexDirection: `row`, marginTop: `2%` },
     recommendationContainer: { flex: 6, justifyContent: `flex-start`, marginHorizontal: `5%` },
     addToCalculationContainer: { flex: 2, justifyContent: `flex-start`, marginVertical: `10%` },
@@ -162,7 +165,7 @@ const styles = react_native_1.StyleSheet.create({
         marginVertical: `8%`,
         borderRadius: height / 80,
         borderWidth: height / 300,
-        borderColor: tealColor,
+        borderColor: Constants_1.BORDER_COLOUR_TEAL,
     },
     suggestedView: { flexDirection: `row`, justifyContent: `center` },
     suggestedCarbs: { color: `white`, fontSize: sugestionFontSize, fontWeight: `bold`, textAlign: `center` },
@@ -170,13 +173,13 @@ const styles = react_native_1.StyleSheet.create({
     carbohydrateText: { color: `white`, fontSize: sugestionFontSize, textAlign: `center` },
     addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, marginTop: `3%` },
-    affirmativeCarbsText: { color: tealColor, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: Constants_1.BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: tealColor,
+        borderColor: Constants_1.BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -198,7 +201,7 @@ const styles = react_native_1.StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: tealColor,
+        borderColor: Constants_1.BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,