@hedia/recommendation-screen 2.1.47 → 2.1.48-alpha.0

package/dist/src/RecommendationScreen.d.ts

@@ -29,6 +29,14 @@ 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,7 +1,8 @@
 import React from "react";
-import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
+import { AppState, BackHandler, Dimensions, LogBox, ScrollView, StatusBar, StyleSheet, View, } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
+import { colors } from "./utils/Constants";
+import ForecastInfoBar from "./components/ForecastInfoBar";
 import Header from "./components/Header";
 import InfoBars, { infoStyles } from "./components/InfoBars";
 import RecentInsulin from "./components/RecentInsulin";
@@ -12,7 +13,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 TransferToLogbook from "./components/TransferToLogbook";
+import SaveButton from "./components/SaveButton";
 import { t } from "@lingui/macro";
 import Activity from "./components/activity/Activity";
 import LimitationMessage from "./components/LimitationMessage";
@@ -284,7 +285,7 @@ export default class RecommendationScreen extends React.Component {
     handleNoRecentInsulin = () => {
         this.setState({ isRecommendationDisplayed: true }, () => {
             setTimeout(() => {
-                this.scrollView?.scrollToEnd(true);
+                this.scrollView?.scrollToEnd({ animated: true });
             }, 0);
         });
     };
@@ -453,56 +454,58 @@ export default class RecommendationScreen extends React.Component {
         if (this.hasError) {
             return <View style={containerStyles.container}/>;
         }
-        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 { 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 carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
         const recommendedCarbs = enteredCarbs ?? carbRecommendation;
-        const { calculatorParams, bloodGlucoseUnit, currentBKL, bloodKetoneUnit } = this.props;
-        const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
+        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 displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
         const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
-        return (<I18nProvider language={this.props.language} i18n={i18n}>
-				<KeyboardAwareScrollView testID={RecommendationScreenTestIds.RecommendationScrollView} enableResetScrollToCoords={false} style={containerStyles.container} ref={(view) => {
+        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) => {
                 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 }}/>
-					<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}/>
+						<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>
 							</View>
 						</View>
-					</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}/>
+						{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}/>)}
+						<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}/>))}
 				</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: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.darkBlue,
     },
     calcContainer: {
         flex: 1,
@@ -510,10 +513,10 @@ const containerStyles = StyleSheet.create({
     calcMargin: {
         flex: 1,
         marginBottom: 0,
-        margin: `3%`,
+        marginHorizontal: width / 17,
+        marginVertical: `3%`,
     },
     calcBorder: {
         ...infoStyles.border,
-        borderColor: BORDER_COLOUR_TEAL,
     },
 });

package/dist/src/assets/icons/Edit.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const EditIcon: (props: SvgProps) => JSX.Element;
+export default EditIcon;

package/dist/src/assets/icons/Edit.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const EditIcon = (props) => (<Svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
+		<Path fillRule="evenodd" clip-rule="evenodd" d="M5.66373 11.2399L5.97672 9.34945L10.659 4.66714L12.2365 6.2446L7.55418 10.9269L5.66373 11.2399Z" fill="#fff"/>
+		<Path opacity="0.6" fillRule="evenodd" clip-rule="evenodd" d="M8.521 16.125C12.8357 16.125 16.3335 12.6272 16.3335 8.3125C16.3335 3.99778 12.8357 0.5 8.521 0.5C4.20627 0.5 0.708496 3.99778 0.708496 8.3125C0.708496 12.6272 4.20627 16.125 8.521 16.125Z" stroke="#fff" strokeWidth="2"/>
+	</Svg>);
+export default EditIcon;

package/dist/src/assets/icons/Edit.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const EditIcon = (props: SvgProps) => (
+	<Svg width="17" height="17" viewBox="0 0 17 17" fill="none" {...props}>
+		<Path
+			fillRule="evenodd"
+			clip-rule="evenodd"
+			d="M5.66373 11.2399L5.97672 9.34945L10.659 4.66714L12.2365 6.2446L7.55418 10.9269L5.66373 11.2399Z"
+			fill="#fff"
+		/>
+		<Path
+			opacity="0.6"
+			fillRule="evenodd"
+			clip-rule="evenodd"
+			d="M8.521 16.125C12.8357 16.125 16.3335 12.6272 16.3335 8.3125C16.3335 3.99778 12.8357 0.5 8.521 0.5C4.20627 0.5 0.708496 3.99778 0.708496 8.3125C0.708496 12.6272 4.20627 16.125 8.521 16.125Z"
+			stroke="#fff"
+			strokeWidth="2"
+		/>
+	</Svg>
+);
+export default EditIcon;

package/dist/src/assets/icons/X.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SvgProps } from "react-native-svg";
+declare const XIcon: (props: SvgProps) => JSX.Element;
+export default XIcon;

package/dist/src/assets/icons/X.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+const XIcon = (props) => (<Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<Path fill-rule="evenodd" clip-rule="evenodd" d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z" fill={"#8388C8"}/>
+	</Svg>);
+export default XIcon;

package/dist/src/assets/icons/X.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { Path, Svg, SvgProps } from "react-native-svg";
+
+const XIcon = (props: SvgProps) => (
+	<Svg width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+		<Path
+			fill-rule="evenodd"
+			clip-rule="evenodd"
+			d="M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z"
+			fill={"#8388C8"}
+		/>
+	</Svg>
+);
+export default XIcon;

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

@@ -0,0 +1,117 @@
+import { BloodGlucoseUnit } from "@hedia/types";
+import React from "react";
+import { Testing } from "../types/enum";
+export interface IProps {
+    /** The display label that describes the value to the user. */
+    label: string;
+    /** The value to display. */
+    value: number;
+    /** Unit label to print after the value. */
+    unit: BloodGlucoseUnit;
+    /** Forecast time value to display. */
+    forecastTime: string | null;
+    /** Latest CGM value to display. */
+    latestCGMReading: number | null;
+    /**  optional object that contains as properties a valueID and a unitID */
+    testID?: {
+        valueID: Testing.Id.InfoBarTestIds.Value;
+        unitID: Testing.Id.InfoBarTestIds.Unit;
+    };
+}
+/** A standard panel to display some data that the user entered. */
+export default class ForecastInfoBar extends React.Component<IProps> {
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * @returns The string to display as the unit in the infobar
+     */
+    displayUnit: () => string;
+    /**
+     * @returns JSX element to display a card with the entered value.
+     */
+    render(): JSX.Element;
+}
+/** @internal */
+export declare const infoStyles: {
+    container: {
+        flex: number;
+        marginVertical: number;
+        marginHorizontal: number;
+        marginBottom: number;
+    };
+    gradient: {
+        padding: number;
+        borderRadius: number;
+    };
+    border: {
+        borderRadius: number;
+        backgroundColor: string;
+        paddingTop: string;
+        paddingBottom: number;
+        paddingHorizontal: string;
+    };
+    row: {
+        flexDirection: "row";
+    };
+    labelContainer: {
+        flex: number;
+        justifyContent: "center";
+    };
+    label: {
+        color: string;
+        fontSize: number;
+    };
+    valueUnitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+        flexDirection: "row";
+    };
+    valueContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+    value: {
+        color: string;
+        fontSize: number;
+        textAlign: "right";
+    };
+    unitContainer: {
+        flex: number;
+        justifyContent: "flex-end";
+    };
+    units: {
+        color: string;
+        fontSize: number;
+        textAlign: "left";
+        paddingLeft: string;
+        marginBottom: number;
+    };
+    forecastDot: {
+        height: number;
+        width: number;
+        borderRadius: number;
+        borderWidth: number;
+        borderColor: string;
+    };
+    forecastSubtitle: {
+        flexDirection: "row";
+        alignItems: "center";
+        paddingTop: number;
+    };
+    forecastText: {
+        color: string;
+        marginLeft: number;
+    };
+    forecastTime: {
+        color: string;
+        fontSize: number;
+        lineHeight: number;
+        marginLeft: number;
+    };
+    currentCGM: {
+        fontSize: number;
+        lineHeight: number;
+        color: string;
+        marginBottom: number;
+    };
+};

package/dist/src/components/ForecastInfoBar.js

@@ -0,0 +1,150 @@
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
+import { i18n } from "../locale/i18nUtils";
+import { colors } from "../utils/Constants";
+import { Utils } from "../utils/Utils";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
+/** A standard panel to display some data that the user entered. */
+export default class ForecastInfoBar extends React.Component {
+    /**
+     * Determine the unit string to be displayed in the infobar.
+     *
+     * @returns The string to display as the unit in the infobar
+     */
+    displayUnit = () => {
+        const { unit } = this.props;
+        return Utils.formatUnit(unit);
+    };
+    /**
+     * @returns JSX element to display a card with the entered value.
+     */
+    render() {
+        const { testID, label, latestCGMReading } = this.props;
+        const { border, container, forecastDot, forecastSubtitle, forecastText, forecastTime, gradient, labelContainer, row, unitContainer, units, value, valueContainer, valueUnitContainer, } = infoStyles;
+        return (<View style={container}>
+				<LinearGradient style={gradient} colors={[`#8B38F5`, `#D593E5`]} useAngle={true} angle={170}>
+					<View style={border}>
+						<View style={row}>
+							<View style={labelContainer}>
+								<TextBold style={infoStyles.label}>{label}</TextBold>
+							</View>
+							<View style={valueUnitContainer}>
+								<View style={valueContainer}>
+									<TextBold style={value} testID={testID?.valueID}>
+										{this.props.value}
+									</TextBold>
+								</View>
+								<View style={unitContainer}>
+									<TextRegular style={units} testID={testID?.unitID}>
+										{this.displayUnit()}
+									</TextRegular>
+								</View>
+							</View>
+						</View>
+
+						<View style={row}>
+							<View style={forecastSubtitle}>
+								<LinearGradient colors={[`#8B38F5`, `#D593E5`]} useAngle={true} angle={135} style={forecastDot}/>
+								<TextRegular style={forecastText}>{i18n._(t `Forecast time:`)}</TextRegular>
+								<TextRegular style={forecastTime}>{this.props.forecastTime}</TextRegular>
+							</View>
+						</View>
+
+						<View style={row}>
+							<TextRegular style={infoStyles.currentCGM}>
+								{i18n._(t `Current glucose: ${latestCGMReading} ${this.displayUnit()}`)}
+							</TextRegular>
+						</View>
+					</View>
+				</LinearGradient>
+			</View>);
+    }
+}
+const { width } = Dimensions.get(`screen`);
+/** @internal */
+export const infoStyles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginVertical: width / 35,
+        marginHorizontal: width / 17,
+        marginBottom: 0,
+    },
+    gradient: {
+        padding: 2,
+        borderRadius: 5,
+    },
+    border: {
+        borderRadius: 5,
+        backgroundColor: colors.darkBlue,
+        paddingTop: `2%`,
+        paddingBottom: 0,
+        paddingHorizontal: `3%`,
+    },
+    row: {
+        flexDirection: `row`,
+    },
+    labelContainer: {
+        flex: 7,
+        justifyContent: `center`,
+    },
+    label: {
+        color: `white`,
+        fontSize: width / 22,
+    },
+    valueUnitContainer: {
+        flex: 6.5,
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+    },
+    valueContainer: {
+        flex: 5,
+        justifyContent: `flex-end`,
+    },
+    value: {
+        color: `white`,
+        fontSize: width / 15,
+        textAlign: `right`,
+    },
+    unitContainer: {
+        flex: 3,
+        justifyContent: `flex-end`,
+    },
+    units: {
+        color: `white`,
+        fontSize: width / 30,
+        textAlign: `left`,
+        paddingLeft: `15%`,
+        marginBottom: 4,
+    },
+    forecastDot: {
+        height: (width / 100) * 3,
+        width: (width / 100) * 3,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: colors.lightBlue,
+    },
+    forecastSubtitle: {
+        flexDirection: `row`,
+        alignItems: `center`,
+        paddingTop: 5,
+    },
+    forecastText: {
+        color: colors.lightBlue,
+        marginLeft: width / 40,
+    },
+    forecastTime: {
+        color: `white`,
+        fontSize: width / 32,
+        lineHeight: width / 28,
+        marginLeft: width / 100,
+    },
+    currentCGM: {
+        fontSize: 13,
+        lineHeight: 34,
+        color: colors.lightBlue,
+        marginBottom: 5,
+    },
+});

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

@@ -1,10 +1,8 @@
-import React from "react";
+/// <reference types="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. */
-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;
-}
+declare const Header: ({ exitCallback }: IProps) => JSX.Element;
+export default Header;

package/dist/src/components/Header.js

@@ -1,75 +1,54 @@
 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. */
-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 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`);
 const headerStyles = StyleSheet.create({
-    backgroundColour: {
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
-    },
-    margin: {
-        margin: `1%`,
-        marginBottom: `3%`,
-        flexDirection: `row`,
-        flex: 1,
-    },
-    headerContainer: {
+    container: {
         flexDirection: `row`,
         flex: 1,
-    },
-    exitButtonContainer: {
+        paddingHorizontal: width / 17,
+        paddingVertical: width / 43,
         alignItems: `center`,
-        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,
+        justifyContent: `space-between`,
+    },
+    iconWrapper: {
+        padding: width / 60,
+        borderWidth: 1,
+        borderColor: `#C8CCFA33`,
+        borderRadius: 10,
+    },
+    text: {
+        fontFamily: `Poppins-SemiBold`,
+        fontSize: width / 22,
+        lineHeight: width / 14,
         textAlign: `center`,
         color: `white`,
     },
-    headerFiller: {
-        flex: 1,
+    emptyButton: {
+        width: width / 11,
+        height: width / 11,
     },
 });
+export default Header;

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

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