@hedia/recommendation-screen 2.1.48-alpha.1 → 2.1.48-alpha.2

package/dist/src/RecommendationScreen.d.ts

@@ -29,14 +29,6 @@ export interface IRecommendationProps {
     latestLogbookFrom6Hours: Logbook.Types.ILogbookEntry | null;
     /** The properties of the entered activity that are not used for making the calculation itself, but will be used on the recommendation screen. */
     activityDisplayProps: IActivityDisplayProps | null;
-    /** The forecasted glucose value to display. */
-    forecastedGlucose: number | null;
-    /** Forecasted time value to display. */
-    forecastTime: string | null;
-    /** Latest CGM value to display. */
-    latestCGMReading: number | null;
-    /** Check if the forecasted glucose value is in very low range.  */
-    isForecastedGlucoseVeryLow: boolean;
     /**
      * Callback function taking a single boolean argument and returning nothing.
      * To be called when the user decides on a presented carbohydrate recommendation.

package/dist/src/RecommendationScreen.js

@@ -1,8 +1,7 @@
 import React from "react";
-import { AppState, BackHandler, Dimensions, LogBox, ScrollView, StatusBar, StyleSheet, View, } from "react-native";
+import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { colors } from "./utils/Constants";
-import ForecastInfoBar from "./components/ForecastInfoBar";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 import Header from "./components/Header";
 import InfoBars, { infoStyles } from "./components/InfoBars";
 import RecentInsulin from "./components/RecentInsulin";
@@ -13,7 +12,7 @@ import * as Calculator from "@hedia/recommendation-calculator";
 import { Milliseconds, } from "@hedia/types";
 import { I18nProvider } from "@lingui/react";
 import Emotion from "./components/mood/Emotion";
-import SaveButton from "./components/SaveButton";
+import TransferToLogbook from "./components/TransferToLogbook";
 import { t } from "@lingui/macro";
 import Activity from "./components/activity/Activity";
 import LimitationMessage from "./components/LimitationMessage";
@@ -285,7 +284,7 @@ export default class RecommendationScreen extends React.Component {
     handleNoRecentInsulin = () => {
         this.setState({ isRecommendationDisplayed: true }, () => {
             setTimeout(() => {
-                this.scrollView?.scrollToEnd({ animated: true });
+                this.scrollView?.scrollToEnd(true);
             }, 0);
         });
     };
@@ -454,58 +453,56 @@ export default class RecommendationScreen extends React.Component {
         if (this.hasError) {
             return <View style={containerStyles.container}/>;
         }
-        const { activeInsulin, activityReduction, carbRecommendation: carbRecommendationProp, enteredCarbs, enteredInsulin, insulinRecommendation, isRecommendationDisplayed, recommendationModal, remeasureTime, selectedMood, showExitModal, showLimitationMessage, showTimeoutModal, } = this.state;
-        const { BloodGlucose: BGValueTestID, BloodKetone: BKValueTestID, ActiveInsulin: ActiveInsulinValueTestID, ForecastedGlucose: FGValueTestID, } = InfoBarTestIds.Value;
-        const { ActiveInsulin: ActiveInsulinUnitTestID, BloodGlucose: BGUnitTestID, BloodKetone: BKUnitTestID, ForecastedGlucose: FGUnitTestID, } = InfoBarTestIds.Unit;
+        const { activeInsulin, recommendationModal, carbRecommendation: carbRecommendationProp, enteredCarbs, enteredInsulin, insulinRecommendation, activityReduction, isRecommendationDisplayed, } = this.state;
+        const { BloodGlucose: BGValueTestID, BloodKetone: BKValueTestID, ActiveInsulin: ActiveInsulinValueTestID, } = InfoBarTestIds.Value;
+        const { ActiveInsulin: ActiveInsulinUnitTestID, BloodGlucose: BGUnitTestID, BloodKetone: BKUnitTestID, } = InfoBarTestIds.Unit;
         const carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
         const recommendedCarbs = enteredCarbs ?? carbRecommendation;
-        const isModalOpen = showExitModal || showLimitationMessage || showTimeoutModal;
-        const { activityDisplayProps, bloodGlucoseUnit, bloodKetoneUnit, calculatorParams, currentBKL, injectionMethod, language, onRecentInsulinYes, forecastedGlucose, forecastTime, latestCGMReading, isForecastedGlucoseVeryLow, } = this.props;
-        const { activity, currentBGL, carbohydrates: providedCarbs } = calculatorParams;
+        const { calculatorParams, bloodGlucoseUnit, currentBKL, bloodKetoneUnit } = this.props;
+        const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
         const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
         const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
-        return (<I18nProvider language={language} i18n={i18n}>
-				<KeyboardAwareScrollView scrollEnabled={!isModalOpen} style={containerStyles.container}>
-					<StatusBar backgroundColor={colors.darkBlue}/>
-					<ScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} style={containerStyles.container} ref={(view) => {
+        return (<I18nProvider language={this.props.language} i18n={i18n}>
+				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} enableResetScrollToCoords={false} style={containerStyles.container} ref={(view) => {
                 if (view !== null) {
                     this.scrollView = view;
                 }
             }}>
-						<Header exitCallback={this.onExit}/>
-						<InfoBars label={i18n._(t `Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={i18n._(t `units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
-						{forecastedGlucose && !isForecastedGlucoseVeryLow ? (<ForecastInfoBar label={i18n._(t `Forecasted Glucose`)} value={forecastedGlucose} unit={bloodGlucoseUnit} forecastTime={forecastTime} latestCGMReading={latestCGMReading} testID={{ unitID: FGUnitTestID, valueID: FGValueTestID }}/>) : (<InfoBars label={i18n._(t `Blood Glucose Level`)} value={displayedBGL} unit={bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>)}
-						<InfoBars label={i18n._(t `Blood Ketone Level`)} value={displayedBKL} unit={bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
-						<View style={containerStyles.calcContainer}>
-							<View style={containerStyles.calcMargin}>
-								<View style={containerStyles.calcBorder}>
-									<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
-								</View>
+					<Header exitCallback={this.onExit}/>
+					<InfoBars label={i18n._(t `Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={i18n._(t `units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
+					<InfoBars label={i18n._(t `Blood Glucose Level`)} value={displayedBGL} unit={this.props.bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>
+					<InfoBars label={i18n._(t `Blood Ketone Level`)} value={displayedBKL} unit={this.props.bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
+					<View style={containerStyles.calcContainer}>
+						<View style={containerStyles.calcMargin}>
+							<View style={[
+                containerStyles.calcBorder,
+                {
+                    borderColor: recommendedCarbs ? BORDER_COLOUR_TEAL : BORDER_COLOUR_GREY,
+                },
+            ]}>
+								<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
 							</View>
 						</View>
-						{activity && activityDisplayProps && (<Activity activity={activity} activityType={activityDisplayProps.activityType} activityTitle={activityDisplayProps.activityTitle} activityReduction={activityReduction}/>)}
-						<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={remeasureTime}/>
-						{!isRecommendationDisplayed ? (<RecentInsulin onRecentInsulinYes={onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin injectionMethod={injectionMethod} insulinRecommendation={insulinRecommendation} enteredInsulin={enteredInsulin} activityReduction={activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation} isForecastedGlucoseVeryLow={isForecastedGlucoseVeryLow}/>)}
-						<Emotion moodSelected={this.handleMoodSelected} currentMood={selectedMood}/>
-						<SaveButton visible={isRecommendationDisplayed} transfer={this.handleTransfer}/>
-						<RecommendationModal isVisible={recommendationModal} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
-					</ScrollView>
-					{/* Modals */}
-					{showExitModal && (<TwoOptionModal title={i18n._(t `Save data before closing?`)} message={i18n._(t `Your saved data will be used for future calculations.`)} textFirstOption={i18n._(t `Save to logbook`)} textSecondOption={i18n._(t `Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>)}
-					{showLimitationMessage && (<View style={modalStyle.container}>
-							<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
-						</View>)}
-					{showTimeoutModal &&
-                (isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>))}
+					</View>
+					{this.props.calculatorParams.activity && this.props.activityDisplayProps ? (<Activity activity={this.props.calculatorParams.activity} activityType={this.props.activityDisplayProps.activityType} activityTitle={this.props.activityDisplayProps.activityTitle} activityReduction={this.state.activityReduction}/>) : null}
+					<Remeasure onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime}/>
+					{!this.state.isRecommendationDisplayed ? (<RecentInsulin onRecentInsulinYes={this.props.onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin injectionMethod={this.props.injectionMethod} insulinRecommendation={insulinRecommendation} enteredInsulin={enteredInsulin} activityReduction={activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation}/>)}
+					<Emotion moodSelected={this.handleMoodSelected} currentMood={this.state.selectedMood}/>
+					<TransferToLogbook visible={isRecommendationDisplayed} transfer={this.handleTransfer}/>
+					<RecommendationModal isVisible={recommendationModal} suggestedCarbohydrates={carbRecommendationProp} attentionMessage={this.getBGLevelAttentionMessage()} limitationMessage={this.getLimitationAttentionMessage()} onClickOkButton={this.hideAttentionModal} onAcceptCarbohydrates={this.acceptCarbRecommendation} onDeclineCarbohydrates={this.declineCarbRecommendation}/>
 				</KeyboardAwareScrollView>
+				{this.state.showExitModal ? (<TwoOptionModal title={i18n._(t `Save data before closing?`)} message={i18n._(t `Your saved data will be used for future calculations.`)} textFirstOption={i18n._(t `Save to logbook`)} textSecondOption={i18n._(t `Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>) : null}
+				{this.state.showLimitationMessage ? (<View style={modalStyle.container}>
+						<LimitationMessage limitationMessage={this.getLimitationAttentionMessage()} onPressNextButton={this.hideLimitationMessage}/>
+					</View>) : null}
+				{this.state.showTimeoutModal ? (this.state.isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={i18n._(t `Yes, save to logbook`)} textSecondOption={i18n._(t `No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={i18n._(t `Start new calculation`)} textSecondOption={i18n._(t `Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>)) : null}
 			</I18nProvider>);
     }
 }
-const { width } = Dimensions.get(`screen`);
 const containerStyles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: colors.darkBlue,
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
     },
     calcContainer: {
         flex: 1,
@@ -513,10 +510,10 @@ const containerStyles = StyleSheet.create({
     calcMargin: {
         flex: 1,
         marginBottom: 0,
-        marginHorizontal: width / 17,
-        marginVertical: `3%`,
+        margin: `3%`,
     },
     calcBorder: {
         ...infoStyles.border,
+        borderColor: BORDER_COLOUR_TEAL,
     },
 });

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

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import React from "react";
 export interface IProps {
     /** A callback that doesn’t take any arguments and doesn’t return a value to be called when the cancel-button is pressed. */
     exitCallback(): void;
 }
 /** Component to display a header text along with a cancel-button that triggers a callback function. */
-declare const Header: ({ exitCallback }: IProps) => JSX.Element;
-export default Header;
+export default class Header extends React.Component<IProps> {
+    /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
+    render(): JSX.Element;
+}

package/dist/src/components/Header.js

@@ -1,54 +1,75 @@
 import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
-import XIcon from "../assets/icons/X";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
+import Icon from "./Icon";
 import TextBold from "./text/TextBold";
 /** Component to display a header text along with a cancel-button that triggers a callback function. */
-const Header = ({ exitCallback }) => {
-    const { iconWrapper, container, emptyButton, text } = headerStyles;
-    return (<>
-			<SafeAreaView />
-			<View style={container}>
-				<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} style={iconWrapper} onPress={exitCallback}>
-					<XIcon />
-				</TouchableOpacity>
-
-				<TextBold style={text} testID={Testing.Id.HeaderTestIds.HeaderText}>
-					{i18n._(t `Insulin recommendation`)}
-				</TextBold>
-
-				<View style={emptyButton}/>
-			</View>
-		</>);
-};
-const { width } = Dimensions.get(`screen`);
+export default class Header extends React.Component {
+    /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
+    render() {
+        return (<React.Fragment>
+				<SafeAreaView style={headerStyles.backgroundColour}/>
+				<View style={headerStyles.headerContainer}>
+					<View style={headerStyles.margin}>
+						<View style={headerStyles.exitButtonContainer}>
+							<View style={headerStyles.exitButton}>
+								<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} style={headerStyles.exitButton} onPress={this.props.exitCallback}>
+									<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={headerStyles.iconStyle}/>
+								</TouchableOpacity>
+								<View style={headerStyles.headerFiller}/>
+							</View>
+						</View>
+						<View style={headerStyles.headerTextContainer}>
+							<TextBold style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
+								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
+							</TextBold>
+						</View>
+						<View style={headerStyles.headerFiller}/>
+					</View>
+				</View>
+			</React.Fragment>);
+    }
+}
 const headerStyles = StyleSheet.create({
-    container: {
+    backgroundColour: {
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+    },
+    margin: {
+        margin: `1%`,
+        marginBottom: `3%`,
+        flexDirection: `row`,
+        flex: 1,
+    },
+    headerContainer: {
         flexDirection: `row`,
         flex: 1,
-        paddingHorizontal: width / 17,
-        paddingVertical: width / 43,
+    },
+    exitButtonContainer: {
         alignItems: `center`,
-        justifyContent: `space-between`,
-    },
-    iconWrapper: {
-        padding: width / 60,
-        borderWidth: 1,
-        borderColor: `#C8CCFA33`,
-        borderRadius: 10,
-    },
-    text: {
-        fontFamily: `Poppins-SemiBold`,
-        fontSize: width / 22,
-        lineHeight: width / 14,
+        flex: 1,
+    },
+    exitButton: {
+        flex: 1,
+    },
+    iconStyle: {
+        fontSize: Dimensions.get(`screen`).width / 12,
+        color: BORDER_COLOUR_GREY,
+    },
+    headerTextContainer: {
+        flex: 6,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `5%`,
+    },
+    headerText: {
+        fontSize: Dimensions.get(`screen`).width / 18,
         textAlign: `center`,
         color: `white`,
     },
-    emptyButton: {
-        width: width / 11,
-        height: width / 11,
+    headerFiller: {
+        flex: 1,
     },
 });
-export default Header;

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

@@ -50,8 +50,7 @@ export declare const infoStyles: {
     };
     margin: {
         flex: number;
-        marginVertical: number;
-        marginHorizontal: number;
+        margin: string;
         marginBottom: number;
     };
     border: {
@@ -91,12 +90,12 @@ export declare const infoStyles: {
     unitContainer: {
         flex: number;
         justifyContent: "flex-end";
+        paddingBottom: string;
     };
     units: {
         color: string;
         fontSize: number;
         textAlign: "left";
         paddingLeft: string;
-        marginBottom: number;
     };
 };

package/dist/src/components/InfoBars.js

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
-import { colors } from "../utils/Constants";
+import { BORDER_COLOUR_GREY } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -70,19 +70,17 @@ export default class InfoBars extends React.Component {
 			</View>);
     }
 }
-const { width } = Dimensions.get(`screen`);
 /** @internal */
 export const infoStyles = StyleSheet.create({
     container: { flex: 1 },
     margin: {
         flex: 1,
-        marginVertical: width / 35,
-        marginHorizontal: width / 17,
+        margin: `3%`,
         marginBottom: 0,
     },
     border: {
         borderWidth: 2,
-        borderColor: colors.mistBlue,
+        borderColor: BORDER_COLOUR_GREY,
         borderRadius: 5,
         paddingVertical: `1%`,
     },
@@ -98,7 +96,7 @@ export const infoStyles = StyleSheet.create({
     },
     label: {
         color: `white`,
-        fontSize: width / 22,
+        fontSize: Dimensions.get(`screen`).width / 22,
     },
     valueUnitContainer: {
         flex: 6.5,
@@ -111,18 +109,18 @@ export const infoStyles = StyleSheet.create({
     },
     value: {
         color: `white`,
-        fontSize: width / 16,
+        fontSize: Dimensions.get(`screen`).width / 15,
         textAlign: `right`,
     },
     unitContainer: {
         flex: 3,
         justifyContent: `flex-end`,
+        paddingBottom: `3%`,
     },
     units: {
         color: `white`,
-        fontSize: width / 30,
+        fontSize: Dimensions.get(`screen`).width / 30,
         textAlign: `left`,
-        paddingLeft: `15%`,
-        marginBottom: 4,
+        paddingLeft: `5%`,
     },
 });

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

@@ -9,7 +9,7 @@ export interface IProps {
 export default class RecentInsulin extends React.Component<IProps> {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken rapid-acting 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

@@ -1,73 +1,93 @@
 import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
 /** 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 rapid-acting 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 = () => {
-        const { container, title, buttonContainer, yesNoContainer, yesNoText } = styles;
-        return (<LinearGradient style={container} colors={[`rgba(87, 138, 255, 0.3)`, `rgba(162, 0, 255, 0.3)`]} useAngle={true} angle={170}>
-				<TextBold style={title}>
-					{i18n._(t `Have you taken rapid-acting insulin within the last 4 hours?`)}
-				</TextBold>
-
-				<View style={buttonContainer}>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[yesNoContainer, { marginRight: `2%` }]}>
-						<TextBold style={yesNoText}>{i18n._(t `Yes`)}</TextBold>
+        return (<View style={recentInsulinStyles.container}>
+				<View style={recentInsulinStyles.titleContainer}>
+					<TextBold style={recentInsulinStyles.recommended}>
+						{i18n._(t `Recommended amount of insulin`)}
+					</TextBold>
+				</View>
+				<View style={recentInsulinStyles.takenInsulinContainer}>
+					<TextBold style={recentInsulinStyles.takenInsulin}>
+						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
+					</TextBold>
+				</View>
+				<View style={recentInsulinStyles.buttonContainer}>
+					<View style={recentInsulinStyles.filler}/>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</TextBold>
 					</TouchableOpacity>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[yesNoContainer, { marginLeft: `2%` }]}>
-						<TextBold style={yesNoText}>{i18n._(t `No`)}</TextBold>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
+						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</TextBold>
 					</TouchableOpacity>
+					<View style={recentInsulinStyles.filler}/>
 				</View>
-			</LinearGradient>);
+			</View>);
     };
 }
-const { width } = Dimensions.get(`screen`);
-const styles = StyleSheet.create({
+const recentInsulinStyles = StyleSheet.create({
     container: {
         ...infoStyles.margin,
+        backgroundColor: `rgba(118, 82, 255, 0.5)`,
         borderRadius: 5,
     },
-    title: {
-        fontFamily: `Poppins-Bold`,
+    titleContainer: {
+        flex: 1,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `4%`,
+        marginBottom: `4%`,
+    },
+    recommended: {
         ...infoStyles.label,
-        fontSize: width / 24,
-        lineHeight: width / 16,
+    },
+    takenInsulinContainer: {
+        flex: 1,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `2%`,
+    },
+    takenInsulin: {
+        ...infoStyles.label,
+        fontSize: Dimensions.get(`screen`).width / 27,
         textAlign: `center`,
-        paddingHorizontal: width / 13,
-        marginTop: width / 32,
     },
     buttonContainer: {
         flex: 1,
         flexDirection: `row`,
-        justifyContent: `center`,
-        marginVertical: width / 26,
+        justifyContent: `space-evenly`,
+        marginTop: `4%`,
+        marginBottom: `5%`,
     },
     yesNoContainer: {
         flex: 1,
-        maxWidth: width / 4,
-        backgroundColor: colors.teal,
-        borderColor: colors.teal,
-        borderRadius: 50,
+        borderColor: `white`,
+        borderRadius: 100,
         borderWidth: 2,
+        paddingHorizontal: `2%`,
+        paddingVertical: `1%`,
     },
     yesNoText: {
         textAlign: `center`,
-        paddingVertical: width / 43,
-        color: colors.darkBlue,
-        fontSize: width / 25,
-        lineHeight: width / 16,
-        fontFamily: `Poppins-Bold`,
+        paddingTop: `1%`,
+        paddingBottom: `1%`,
+        color: `white`,
+        fontSize: Dimensions.get(`screen`).width / 25,
+    },
+    filler: {
+        flex: 1,
     },
 });

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

@@ -82,15 +82,16 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 export declare const stylesModal: {
     modalStyle: {
         margin: number;
-        backgroundColor: string;
     };
     container: {
         flex: number;
+        backgroundColor: string;
         justifyContent: "center";
         paddingHorizontal: string;
     };
     containerAcceptButton: {
         flex: number;
+        backgroundColor: string;
         justifyContent: "flex-start";
     };
     titleContainer: {

package/dist/src/components/RecommendationModal.js

@@ -4,7 +4,7 @@ import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { colors } from "../utils/Constants";
+import { BORDER_COLOUR_TEAL } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -150,24 +150,23 @@ const textFontSize = width / 20;
 const titleFontSize = width / 13;
 /** @internal */
 export const stylesModal = StyleSheet.create({
-    modalStyle: {
-        margin: 0,
-        backgroundColor: colors.darkBlue,
-    },
+    modalStyle: { margin: 0 },
     container: {
         flex: 4,
+        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         justifyContent: `center`,
         paddingHorizontal: `4%`,
     },
     containerAcceptButton: {
         flex: 1,
+        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         justifyContent: `flex-start`,
     },
     titleContainer: { marginBottom: `5%` },
     recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
     textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
     textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-    buttonText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    buttonText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
@@ -176,26 +175,22 @@ export const stylesModal = StyleSheet.create({
         marginTop: `5%`,
         borderRadius: height / 80,
         borderWidth: height / 300,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_TEAL,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
     suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
     textCenter: { textAlign: `center` },
-    recommendEatingText: {
-        color: colors.dustyBlue,
-        fontSize: recommendEatingFontSize,
-        textAlign: `center`,
-    },
+    recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
     carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
     addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-    affirmativeCarbsText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
     negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -217,7 +212,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,