@hedia/recommendation-screen 2.1.52 → 2.1.53-alpha.1

package/dist/src/components/ExitModal.js

@@ -0,0 +1,89 @@
+import * as React from "react";
+import { StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import Close from "../assets/IconsSVG/Close";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { FONTS } from "./styles/fonts";
+import Text from "./Text";
+const { ExitModalTestIds: TwoOptionModalTestIds } = Testing.Id;
+/** Display a modal with two buttons for the user to choose between. */
+export default class ExitModal extends React.Component {
+    /** Compose a JSX element for displaying the modal. */
+    render() {
+        return (<View style={style.container}>
+				<StatusBar backgroundColor={colors.transparentLightBlue}/>
+				<View style={style.modalContainer}>
+					<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={style.iconWrapper}>
+						{Close({ color: colors.white, style: style.icon })}
+					</TouchableOpacity>
+					<View style={style.textContainer}>
+						<Text style={style.titleRowLayout}>{this.props.title}</Text>
+						<Text style={style.message}>{this.props.message}</Text>
+					</View>
+					<View style={style.buttonContainer}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { marginBottom: 16 }]}>
+							<Text style={style.textButton}>{this.props.textFirstOption}</Text>
+						</TouchableOpacity>
+						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
+							<Text style={style.textButton}>{this.props.textSecondOption}</Text>
+						</TouchableOpacity>
+					</View>
+				</View>
+			</View>);
+    }
+}
+/** @internal */
+const style = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: `center`,
+        backgroundColor: colors.transparentBlack,
+    },
+    modalContainer: {
+        margin: 16,
+        padding: 24,
+        borderRadius: 24,
+        backgroundColor: colors.darkBlue,
+    },
+    iconWrapper: {
+        position: `absolute`,
+        zIndex: 1,
+        left: 24,
+        top: 28,
+    },
+    icon: {
+        height: 20,
+        width: 20,
+    },
+    textContainer: {
+        marginBottom: 24,
+    },
+    titleRowLayout: {
+        ...FONTS.Poppins.bold_XL,
+        color: colors.white,
+        textAlign: `center`,
+        paddingHorizontal: 46,
+        marginBottom: 24,
+    },
+    message: {
+        ...FONTS.Poppins.regular_Base,
+        color: colors.dustyBlue,
+        textAlign: `center`,
+    },
+    buttonContainer: {
+        flexDirection: `column`,
+        justifyContent: `space-around`,
+    },
+    button: {
+        borderRadius: 50,
+        borderWidth: 1,
+        borderColor: colors.teal,
+    },
+    textButton: {
+        ...FONTS.Poppins.bold_LG,
+        textAlign: `center`,
+        color: colors.teal,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+});

package/dist/src/components/InfoBars.d.ts

@@ -47,27 +47,15 @@ export default class InfoBars extends React.Component<IProps> {
 export declare const infoStyles: {
     container: {
         flex: number;
-    };
-    margin: {
-        flex: number;
-        margin: string;
+        flexDirection: "row";
         marginBottom: number;
-    };
-    border: {
+        padding: number;
         borderWidth: number;
         borderColor: string;
         borderRadius: number;
-        paddingVertical: string;
-    };
-    borderContainer: {
-        flex: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        paddingHorizontal: string;
     };
     labelContainer: {
         flex: number;
-        justifyContent: "center";
     };
     label: {
         color: string;
@@ -78,28 +66,18 @@ export declare const infoStyles: {
     valueUnitContainer: {
         flex: number;
         justifyContent: "flex-end";
+        alignItems: "center";
         flexDirection: "row";
     };
-    valueContainer: {
-        flex: number;
-        justifyContent: "flex-end";
-    };
     value: {
         color: string;
-        textAlign: "right";
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
     };
-    unitContainer: {
-        flex: number;
-        justifyContent: "flex-end";
-        paddingBottom: string;
-    };
     units: {
         color: string;
-        textAlign: "left";
-        paddingLeft: string;
+        paddingLeft: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;

package/dist/src/components/InfoBars.js

@@ -46,81 +46,51 @@ export default class InfoBars extends React.Component {
     render() {
         const { testID } = this.props;
         return (<View style={infoStyles.container}>
-				<View style={infoStyles.margin}>
-					<View style={infoStyles.border}>
-						<View style={infoStyles.borderContainer}>
-							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{this.props.label}</Text>
-							</View>
-							<View style={infoStyles.valueUnitContainer}>
-								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value} testID={testID?.valueID}>
-										{this.displayValue()}
-									</Text>
-								</View>
-								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units} testID={testID?.unitID}>
-										{this.displayUnit()}
-									</Text>
-								</View>
-							</View>
-						</View>
-					</View>
+				<View style={infoStyles.labelContainer}>
+					<Text style={infoStyles.label}>{this.props.label}</Text>
+				</View>
+				<View style={infoStyles.valueUnitContainer}>
+					<Text style={infoStyles.value} testID={testID?.valueID}>
+						{this.displayValue()}
+					</Text>
+					<Text style={{ ...infoStyles.units, paddingLeft: this.props.unit === null ? 0 : 4 }} testID={testID?.unitID}>
+						{this.displayUnit()}
+					</Text>
 				</View>
 			</View>);
     }
 }
 /** @internal */
 export const infoStyles = StyleSheet.create({
-    container: { flex: 1 },
-    margin: {
-        flex: 1,
-        margin: `3%`,
-        marginBottom: 0,
-    },
-    border: {
-        borderWidth: 2,
-        borderColor: colors.mistBlue,
-        borderRadius: 5,
-        paddingVertical: `1%`,
-    },
-    borderContainer: {
+    container: {
         flex: 1,
         flexDirection: `row`,
-        justifyContent: `space-between`,
-        paddingHorizontal: `3%`,
+        marginBottom: 8,
+        padding: 16,
+        borderWidth: 1,
+        borderColor: colors.dustyDarkBlue,
+        borderRadius: 5,
     },
     labelContainer: {
         flex: 7,
-        justifyContent: `center`,
     },
     label: {
-        ...FONTS.Poppins.bold_LG,
+        ...FONTS.Poppins.regular_Base,
         color: colors.white,
     },
     valueUnitContainer: {
         flex: 6.5,
         justifyContent: `flex-end`,
+        alignItems: `center`,
         flexDirection: `row`,
     },
-    valueContainer: {
-        flex: 5,
-        justifyContent: `flex-end`,
-    },
     value: {
-        ...FONTS.Poppins.bold_2XL,
-        color: colors.white,
-        textAlign: `right`,
-    },
-    unitContainer: {
-        flex: 3,
-        justifyContent: `flex-end`,
-        paddingBottom: `1%`,
+        ...FONTS.Poppins.regular_LG,
+        color: colors.lightBlue,
     },
     units: {
-        ...FONTS.Poppins.regular_SM,
-        color: colors.white,
-        textAlign: `left`,
-        paddingLeft: `10%`,
+        ...FONTS.Poppins.regular_XS,
+        color: colors.lightBlue,
+        paddingLeft: 4,
     },
 });

package/dist/src/components/LimitationMessage.js

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import * as React from "react";
-import { TouchableOpacity, View } from "react-native";
+import { TouchableOpacity } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { stylesModal } from "./RecommendationModal";
@@ -13,17 +13,11 @@ export default class LimitationMessage extends React.Component {
     render = () => {
         const { limitationMessage } = this.props;
         return (<React.Fragment>
-				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
-				</View>
-				<View style={stylesModal.containerAcceptButton}>
-					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
-					</TouchableOpacity>
-				</View>
+				<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+				<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
+				<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
+					<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+				</TouchableOpacity>
 			</React.Fragment>);
     };
 }

package/dist/src/components/LineSeparator.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 export interface IProps {
     /** The color that the line should have. */
-    color: string;
+    borderBottomColor: string;
+    /** The marginTop of the line. */
+    marginTop?: number;
+    /** The marginBottom of the line. */
+    marginBottom?: number;
 }
 /** Display a horizontal line for visually separating elements in the user interface. */
 export default class LineSeparator extends React.Component<IProps> {

package/dist/src/components/LineSeparator.js

@@ -5,14 +5,12 @@ export default class LineSeparator extends React.Component {
     /** @return JSX element for displaying a thin horizontal line in the given color. */
     render() {
         return (<React.Fragment>
-				<View style={[lineSeparatorStyles.lineStyle, { borderBottomColor: this.props.color }]}/>
+				<View style={[lineSeparatorStyles.lineStyle, { ...this.props }]}/>
 			</React.Fragment>);
     }
 }
 const lineSeparatorStyles = StyleSheet.create({
     lineStyle: {
-        marginHorizontal: `3%`,
-        marginVertical: `2%`,
         borderBottomWidth: 1,
     },
 });

package/dist/src/components/RecentInsulin.d.ts

@@ -9,7 +9,8 @@ export interface IProps {
 export default class RecentInsulin extends React.Component<IProps> {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours?
+     * Along with two buttons labeled “Yes” and “No” respectively.
      * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
      * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
      */

package/dist/src/components/RecentInsulin.js

@@ -4,89 +4,89 @@ import { StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import { infoStyles } from "./InfoBars";
 import { FONTS } from "./styles/fonts";
 import Text from "./Text";
 /** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours?
+     * Along with two buttons labeled “Yes” and “No” respectively.
      * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
      * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
      */
     render = () => {
         return (<View style={recentInsulinStyles.container}>
-				<View style={recentInsulinStyles.titleContainer}>
+				<View style={recentInsulinStyles.textContainer}>
 					<Text style={recentInsulinStyles.recommended}>{i18n._(t `Recommended amount of insulin`)}</Text>
-				</View>
-				<View style={recentInsulinStyles.takenInsulinContainer}>
 					<Text style={recentInsulinStyles.takenInsulin}>
 						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
 					</Text>
 				</View>
 				<View style={recentInsulinStyles.buttonContainer}>
-					<View style={recentInsulinStyles.filler}/>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={recentInsulinStyles.yesButton}>
 						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</Text>
 					</TouchableOpacity>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={recentInsulinStyles.noButton}>
 						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</Text>
 					</TouchableOpacity>
-					<View style={recentInsulinStyles.filler}/>
 				</View>
 			</View>);
     };
 }
 const recentInsulinStyles = StyleSheet.create({
     container: {
-        ...infoStyles.margin,
+        minHeight: 200,
         backgroundColor: colors.deepPurple,
         borderRadius: 5,
+        marginBottom: 32,
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 36,
     },
-    titleContainer: {
-        flex: 1,
+    textContainer: {
         justifyContent: `center`,
         alignItems: `center`,
-        marginTop: `4%`,
-        marginBottom: `4%`,
+        paddingHorizontal: 14.5,
+        marginBottom: 32,
     },
     recommended: {
-        ...infoStyles.label,
-    },
-    takenInsulinContainer: {
-        flex: 1,
-        justifyContent: `center`,
-        alignItems: `center`,
-        marginTop: `2%`,
+        ...FONTS.Poppins.medium_Base,
+        color: colors.white,
+        textAlign: `center`,
+        marginBottom: 2,
     },
     takenInsulin: {
-        ...infoStyles.label,
+        ...FONTS.Poppins.regular_SM,
+        color: colors.white,
         textAlign: `center`,
     },
     buttonContainer: {
-        flex: 1,
         flexDirection: `row`,
-        justifyContent: `space-evenly`,
-        marginTop: `4%`,
-        marginBottom: `5%`,
+        justifyContent: `center`,
+        paddingHorizontal: 9.5,
+    },
+    yesButton: {
+        flex: 1,
+        borderRadius: 50,
+        minWidth: 127,
+        marginLeft: 30,
+        marginRight: 12,
+        backgroundColor: colors.teal,
     },
-    yesNoContainer: {
+    noButton: {
         flex: 1,
-        borderColor: colors.white,
-        borderRadius: 100,
-        borderWidth: 2,
-        paddingHorizontal: `2%`,
-        paddingVertical: `1%`,
+        borderRadius: 50,
+        minWidth: 127,
+        marginRight: 30,
+        marginLeft: 12,
+        backgroundColor: colors.teal,
     },
     yesNoText: {
         ...FONTS.Poppins.bold_Base,
         textAlign: `center`,
-        paddingTop: `1%`,
-        paddingBottom: `1%`,
-        color: colors.white,
-    },
-    filler: {
-        flex: 1,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+        color: colors.black,
     },
 });

package/dist/src/components/RecommendationModal.d.ts

@@ -85,25 +85,11 @@ export declare const stylesModal: {
     };
     scrollViewContainer: {
         flexGrow: number;
-    };
-    container: {
-        flex: number;
-        backgroundColor: string;
         justifyContent: "center";
-        paddingHorizontal: string;
     };
-    containerAcceptButton: {
-        flex: number;
+    container: {
         backgroundColor: string;
-        justifyContent: "flex-start";
-    };
-    titleContainer: {
-        marginBottom: string;
-    };
-    recommendationRow: {
         justifyContent: "center";
-        alignContent: "center";
-        marginBottom: string;
     };
     textTittleMessage: {
         color: string;
@@ -115,6 +101,8 @@ export declare const stylesModal: {
     textMessage: {
         color: string;
         textAlign: "center";
+        marginHorizontal: number;
+        marginTop: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
@@ -122,27 +110,20 @@ export declare const stylesModal: {
     buttonText: {
         color: string;
         textAlign: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
     };
-    addToCalculationContainer: {
-        justifyContent: "flex-start";
-        marginVertical: string;
-    };
     innerView: {
         alignContent: "center";
-        paddingVertical: string;
-        paddingHorizontal: string;
-        marginTop: string;
         borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-    };
-    suggestedContainer: {
-        justifyContent: "center";
-        flexDirection: "row";
-        marginBottom: string;
+        backgroundColor: string;
+        paddingVertical: number;
+        marginHorizontal: number;
+        marginTop: number;
+        marginBottom: number;
     };
     suggestedCarbs: {
         color: string;
@@ -152,6 +133,7 @@ export declare const stylesModal: {
     };
     textCenter: {
         textAlign: "center";
+        paddingHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
@@ -159,6 +141,8 @@ export declare const stylesModal: {
     recommendEatingText: {
         color: string;
         textAlign: "center";
+        paddingHorizontal: number;
+        marginBottom: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
@@ -172,6 +156,8 @@ export declare const stylesModal: {
     addToCalculation: {
         color: string;
         textAlign: "center";
+        marginBottom: number;
+        marginHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
@@ -179,52 +165,31 @@ export declare const stylesModal: {
     recommendationButtonsContainer: {
         justifyContent: "center";
         flexDirection: "row";
-        margin: string;
+        paddingHorizontal: number;
     };
-    affirmativeCarbsText: {
+    carbsButtonText: {
         color: string;
         textAlign: "center";
+        paddingHorizontal: number;
+        paddingVertical: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
         lineHeight: number;
     };
-    negativeCarbsText: {
-        color: string;
-        textAlign: "center";
-        fontFamily: import("./styles/fonts").FontFamily;
-        fontSize: number;
-        lineHeight: number;
-    };
-    affirmativeCarbsButton: {
-        marginTop: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        width: number;
-        height: number;
-        alignSelf: "center";
-        justifyContent: "center";
-        marginRight: string;
-    };
-    negativeCarbsButton: {
-        marginTop: string;
+    button: {
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
-        width: number;
-        height: number;
         alignSelf: "center";
-        justifyContent: "center";
-        marginLeft: string;
+        minWidth: number;
     };
     okButton: {
-        marginTop: string;
+        backgroundColor: string;
+        justifyContent: "flex-start";
         borderRadius: number;
         borderWidth: number;
         borderColor: string;
-        width: number;
-        height: number;
         alignSelf: "center";
-        justifyContent: "center";
+        minWidth: number;
     };
 };