@hedia/recommendation-screen 2.2.0-alpha.40 → 2.2.0-alpha.42

package/dist/index.js

@@ -3,4 +3,3 @@ import * as Errors from "./src/utils/RecommendationError";
 export default RecommendationScreen;
 export { Errors };
 export * from "./src/types/enum";
-//# sourceMappingURL=index.js.map

package/dist/src/RecommendationScreen.d.ts

@@ -1,8 +1,8 @@
 import React from "react";
 import { AppStateStatus } from "react-native";
 import { BloodGlucoseUnit, BloodKetonesUnit, BolusCalculator, Languages, Logbook, UserSettings } from "@hedia/types";
-import { IActivityDisplayProps } from "./types/types";
 import { RecommendationError } from "./utils/RecommendationError";
+import { IActivityDisplayProps } from "./types/types";
 /** Represents both a suggestion by HDA and an actual amount of either insulin or carbohydrates. */
 export interface IResult {
     /** The suggested amount (of insulin in units or carbohydrates in grams) */
@@ -14,7 +14,7 @@ export interface IRecommendationProps {
     /** The blood glucose measurement unit that the user prefers. */
     bloodGlucoseUnit: BloodGlucoseUnit;
     /** The user’s preferred language. */
-    language: keyof typeof Languages;
+    language: Languages;
     /** The user’s preferred default reminder time in hours when they enter carbohydrates or an activity. */
     userReminder: number;
     /** The values needed to make an insulin recommendation calculation. */
@@ -66,7 +66,7 @@ export interface IRecommendationProps {
      * To be called in case a serious issue with the validity of input data is detected.
      * @param error The detected error.
      */
-    onError(error: RecommendationError | Error): void;
+    onError(error: RecommendationError): void;
     /**
      * Callback function taking a single argument of type boolean.
      * To be called to hide the bottom navigation bar while displaying modal dialogs.

package/dist/src/RecommendationScreen.js

@@ -1,24 +1,26 @@
 import React from "react";
 import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import * as Calculator from "@hedia/recommendation-calculator";
-import { Milliseconds, } from "@hedia/types";
-import Activity from "./components/activity/Activity";
 import Header from "./components/Header";
 import InfoBars, { infoStyles } from "./components/InfoBars";
-import LimitationMessage from "./components/LimitationMessage";
-import Emotion from "./components/mood/Emotion";
 import RecentInsulin from "./components/RecentInsulin";
-import RecommendationModal from "./components/RecommendationModal";
 import RecommendedCarbs from "./components/RecommendedCarbs";
 import RecommendedInsulin from "./components/RecommendedInsulin";
 import Remeasure from "./components/Remeasure";
+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 { colors } from "./utils/Constants";
+import { t } from "@lingui/macro";
+import Activity from "./components/activity/Activity";
+import LimitationMessage from "./components/LimitationMessage";
+import RecommendationModal from "./components/RecommendationModal";
 import TwoOptionModal, { modalStyle } from "./components/TwoOptionModal";
-import { changeLocale, translate } from "./locales/translate";
+import { changeLanguage, i18n } from "./locale/i18nUtils";
 import { Testing } from "./types/enum";
 import { Messages } from "./utils/AttentionMessages";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 import { getAttentionMessage, getBGLevel, getLimitationMessage, getReminder } from "./utils/RecommendationUtils";
 import { Utils } from "./utils/Utils";
 import { validateParams } from "./utils/Validations";
@@ -91,8 +93,8 @@ export default class RecommendationScreen extends React.Component {
         super(props);
         try {
             validateParams(props);
-            changeLocale(props.language);
             this.recommendationDate = new Date(global.Date.now());
+            changeLanguage(props.language);
             const { recentBoluses } = props.calculatorParams;
             const { bolus, carbRecommendation, activityReduction, wasLimited, activeInsulin } = Calculator.calculateRecommendation(props.calculatorParams);
             this.suggestedCarbs = carbRecommendation;
@@ -460,22 +462,22 @@ export default class RecommendationScreen extends React.Component {
         const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
         const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
         const displayedBKL = currentBKL !== null && bloodKetoneUnit ? Utils.displayedBKLValue(currentBKL, bloodKetoneUnit) : null;
-        return (<>
+        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={translate(`Active Insulin`)} value={activeInsulin ? `${activeInsulin.toFixed(1)}` : null} unit={translate(`units`)} showNullAsDash={false} testID={{ unitID: ActiveInsulinUnitTestID, valueID: ActiveInsulinValueTestID }}/>
-					<InfoBars label={translate(`Blood Glucose Level`)} value={displayedBGL} unit={this.props.bloodGlucoseUnit} showNullAsDash={true} testID={{ unitID: BGUnitTestID, valueID: BGValueTestID }}/>
-					<InfoBars label={translate(`Blood Ketone Level`)} value={displayedBKL} unit={this.props.bloodKetoneUnit} showNullAsDash={true} testID={{ unitID: BKUnitTestID, valueID: BKValueTestID }}/>
+					<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,
+                    borderColor: recommendedCarbs ? colors.teal : colors.mistBlue,
                 },
             ]}>
 								<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
@@ -489,19 +491,18 @@ export default class RecommendationScreen extends React.Component {
 					<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={translate(`Save data before closing?`)} message={translate(`Your saved data will be used for future calculations.`)} textFirstOption={translate(`Save to logbook`)} textSecondOption={translate(`Close calculation`)} isCancelable={true} rowAsButtonLayout={true} firstOption={this.handleTransfer} secondOption={this.closeCalculation} onClose={this.hideExitModal}/>)}
-				{this.state.showLimitationMessage && (<View style={modalStyle.container}>
+				{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>)}
-				{this.state.showTimeoutModal &&
-                (this.state.isRecommendationDisplayed ? (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationVisible(this.recommendationDate)} textFirstOption={translate(`Yes, save to logbook`)} textSecondOption={translate(`No, return to dashboard`)} rowAsButtonLayout={false} firstOption={this.handleTransfer} secondOption={this.closeCalculation}/>) : (<TwoOptionModal title={Messages.TimeoutPrompTitle()} message={Messages.TimeoutRecommendationNotVisible()} textFirstOption={translate(`Start new calculation`)} textSecondOption={translate(`Return to dashboard`)} rowAsButtonLayout={false} firstOption={this.restartCalculation} secondOption={this.closeCalculation}/>))}
-			</>);
+					</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 containerStyles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.darkBlue,
     },
     calcContainer: {
         flex: 1,
@@ -513,7 +514,6 @@ const containerStyles = StyleSheet.create({
     },
     calcBorder: {
         ...infoStyles.border,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
     },
 });
-//# sourceMappingURL=RecommendationScreen.js.map

package/dist/src/components/Header.js

@@ -1,10 +1,12 @@
+import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import Icon from "./Icon";
-import TextBold from "./text/TextBold";
+import { FONTS, ICONS } from "./styles/fonts";
+import Text from "./Text";
 /** 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. */
@@ -22,9 +24,9 @@ export default class Header extends React.Component {
 							</View>
 						</View>
 						<View style={headerStyles.headerTextContainer}>
-							<TextBold style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
-								{translate(`INSULIN{0}RECOMMENDATION`, { 0: `\n` })}
-							</TextBold>
+							<Text style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
+								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
+							</Text>
 						</View>
 						<View style={headerStyles.headerFiller}/>
 					</View>
@@ -34,7 +36,7 @@ export default class Header extends React.Component {
 }
 const headerStyles = StyleSheet.create({
     backgroundColour: {
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.darkBlue,
     },
     margin: {
         margin: `1%`,
@@ -54,8 +56,8 @@ const headerStyles = StyleSheet.create({
         flex: 1,
     },
     iconStyle: {
-        fontSize: Dimensions.get(`screen`).width / 12,
-        color: BORDER_COLOUR_GREY,
+        ...ICONS.XXXL,
+        color: colors.mistBlue,
     },
     headerTextContainer: {
         flex: 6,
@@ -64,12 +66,11 @@ const headerStyles = StyleSheet.create({
         marginTop: `5%`,
     },
     headerText: {
-        fontSize: Dimensions.get(`screen`).width / 18,
+        ...FONTS.Poppins.bold_XL,
         textAlign: `center`,
-        color: `white`,
+        color: colors.white,
     },
     headerFiller: {
         flex: 1,
     },
 });
-//# sourceMappingURL=Header.js.map

package/dist/src/components/Icon.js

@@ -1,3 +1,5 @@
+// @ts-nocheck
+/* tslint:disable */
 import React from "react";
 /** Mapping from react-native-vector-icons identifier to corresponding icon resource. */
 export const IconSets = {
@@ -39,4 +41,3 @@ export default class Icon extends React.Component {
 Icon.defaultProps = {
     iconIdentifier: `FontAwesome/question`,
 };
-//# sourceMappingURL=Icon.js.map

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { BloodGlucoseUnit, BloodKetonesUnit } 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. */
@@ -72,6 +72,8 @@ export declare const infoStyles: {
     label: {
         color: string;
         fontSize: number;
+        fontFamily: import("./styles/fonts").FontFamily;
+        lineHeight: number;
     };
     valueUnitContainer: {
         flex: number;
@@ -84,8 +86,10 @@ export declare const infoStyles: {
     };
     value: {
         color: string;
-        fontSize: number;
         textAlign: "right";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     unitContainer: {
         flex: number;
@@ -94,8 +98,10 @@ export declare const infoStyles: {
     };
     units: {
         color: string;
-        fontSize: number;
         textAlign: "left";
         paddingLeft: string;
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
 };

package/dist/src/components/InfoBars.js

@@ -1,11 +1,12 @@
+import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
+import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
-import { translate } from "../locales/translate";
-import { BORDER_COLOUR_GREY } from "../utils/Constants";
+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";
+import { FONTS } from "./styles/fonts";
+import Text from "./Text";
 /** A standard panel to display some data that the user entered. */
 export default class InfoBars extends React.Component {
     /**
@@ -37,7 +38,7 @@ export default class InfoBars extends React.Component {
         if (!unit) {
             return null;
         }
-        return unit === translate(`units`) ? unit : Utils.formatUnit(unit);
+        return unit === i18n._(t `units`) ? unit : Utils.formatUnit(unit);
     };
     /**
      * @returns JSX element to display a card with the entered value.
@@ -49,18 +50,18 @@ export default class InfoBars extends React.Component {
 					<View style={infoStyles.border}>
 						<View style={infoStyles.borderContainer}>
 							<View style={infoStyles.labelContainer}>
-								<TextBold style={infoStyles.label}>{this.props.label}</TextBold>
+								<Text style={infoStyles.label}>{this.props.label}</Text>
 							</View>
 							<View style={infoStyles.valueUnitContainer}>
 								<View style={infoStyles.valueContainer}>
-									<TextBold style={infoStyles.value} testID={testID?.valueID}>
+									<Text style={infoStyles.value} testID={testID?.valueID}>
 										{this.displayValue()}
-									</TextBold>
+									</Text>
 								</View>
 								<View style={infoStyles.unitContainer}>
-									<TextRegular style={infoStyles.units} testID={testID?.unitID}>
+									<Text style={infoStyles.units} testID={testID?.unitID}>
 										{this.displayUnit()}
-									</TextRegular>
+									</Text>
 								</View>
 							</View>
 						</View>
@@ -79,7 +80,7 @@ export const infoStyles = StyleSheet.create({
     },
     border: {
         borderWidth: 2,
-        borderColor: BORDER_COLOUR_GREY,
+        borderColor: colors.mistBlue,
         borderRadius: 5,
         paddingVertical: `1%`,
     },
@@ -94,7 +95,8 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `center`,
     },
     label: {
-        color: `white`,
+        ...FONTS.Poppins.bold_LG,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 22,
     },
     valueUnitContainer: {
@@ -107,8 +109,8 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `flex-end`,
     },
     value: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 15,
+        ...FONTS.Poppins.bold_2XL,
+        color: colors.white,
         textAlign: `right`,
     },
     unitContainer: {
@@ -117,10 +119,9 @@ export const infoStyles = StyleSheet.create({
         paddingBottom: `3%`,
     },
     units: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 30,
+        ...FONTS.Poppins.regular_SM,
+        color: colors.white,
         textAlign: `left`,
         paddingLeft: `5%`,
     },
 });
-//# sourceMappingURL=InfoBars.js.map

package/dist/src/components/InvisibleNumberInput.js

@@ -48,7 +48,7 @@ export default class InvisibleNumberInput extends React.Component {
      * @returns A string with the cleaned text.
      */
     cleanInput = (text) => {
-        const replaced = text.replace(/,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
+        const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
         const round = (value) => {
             const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
             const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
@@ -72,7 +72,7 @@ export default class InvisibleNumberInput extends React.Component {
      * @param text The updated text in the input field
      */
     handleOnChangeText = (text) => {
-        const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/,/g, `.`);
+        const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
         let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
         if (!this.props.negativeAllowed) {
             replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
@@ -119,4 +119,3 @@ const inputStyles = StyleSheet.create({
         }),
     },
 });
-//# sourceMappingURL=InvisibleNumberInput.js.map

package/dist/src/components/LimitationMessage.js

@@ -1,10 +1,10 @@
+import { t } from "@lingui/macro";
 import * as React from "react";
 import { TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { stylesModal } from "./RecommendationModal";
-import TextBold from "./text/TextBold";
-import TextRegular from "./text/TextRegular";
+import Text from "./Text";
 /** Display a message on the screen to inform the user that their insulin recommendation was limited. */
 export default class LimitationMessage extends React.Component {
     /**
@@ -15,16 +15,15 @@ export default class LimitationMessage extends React.Component {
         return (<React.Fragment>
 				<View style={stylesModal.container}>
 					<View style={stylesModal.titleContainer}>
-						<TextBold style={stylesModal.textTittleMessage}>{translate(`Attention`)}</TextBold>
+						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
 					</View>
-					<TextRegular style={stylesModal.textMessage}>{limitationMessage}</TextRegular>
+					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
 				</View>
 				<View style={stylesModal.containerAcceptButton}>
 					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-						<TextRegular style={stylesModal.buttonText}>{translate(`OK`)}</TextRegular>
+						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
 					</TouchableOpacity>
 				</View>
 			</React.Fragment>);
     };
 }
-//# sourceMappingURL=LimitationMessage.js.map

package/dist/src/components/LineSeparator.js

@@ -16,4 +16,3 @@ const lineSeparatorStyles = StyleSheet.create({
         borderBottomWidth: 1,
     },
 });
-//# sourceMappingURL=LineSeparator.js.map

package/dist/src/components/RecentInsulin.js

@@ -1,9 +1,12 @@
+import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
-import { translate } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
-import TextBold from "./text/TextBold";
+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 {
     /**
@@ -15,22 +18,20 @@ export default class RecentInsulin extends React.Component {
     render = () => {
         return (<View style={recentInsulinStyles.container}>
 				<View style={recentInsulinStyles.titleContainer}>
-					<TextBold style={recentInsulinStyles.recommended}>
-						{translate(`Recommended amount of insulin`)}
-					</TextBold>
+					<Text style={recentInsulinStyles.recommended}>{i18n._(t `Recommended amount of insulin`)}</Text>
 				</View>
 				<View style={recentInsulinStyles.takenInsulinContainer}>
-					<TextBold style={recentInsulinStyles.takenInsulin}>
-						{translate(`Have you taken insulin within the last 4 hours?`)}
-					</TextBold>
+					<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%` }]}>
-						<TextBold style={recentInsulinStyles.yesNoText}>{translate(`Yes`)}</TextBold>
+						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</Text>
 					</TouchableOpacity>
 					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
-						<TextBold style={recentInsulinStyles.yesNoText}>{translate(`No`)}</TextBold>
+						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</Text>
 					</TouchableOpacity>
 					<View style={recentInsulinStyles.filler}/>
 				</View>
@@ -40,7 +41,7 @@ export default class RecentInsulin extends React.Component {
 const recentInsulinStyles = StyleSheet.create({
     container: {
         ...infoStyles.margin,
-        backgroundColor: `rgba(118, 82, 255, 0.5)`,
+        backgroundColor: colors.deepPurple,
         borderRadius: 5,
     },
     titleContainer: {
@@ -73,21 +74,20 @@ const recentInsulinStyles = StyleSheet.create({
     },
     yesNoContainer: {
         flex: 1,
-        borderColor: `white`,
+        borderColor: colors.white,
         borderRadius: 100,
         borderWidth: 2,
         paddingHorizontal: `2%`,
         paddingVertical: `1%`,
     },
     yesNoText: {
+        ...FONTS.Poppins.bold_Base,
         textAlign: `center`,
         paddingTop: `1%`,
         paddingBottom: `1%`,
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
+        color: colors.white,
     },
     filler: {
         flex: 1,
     },
 });
-//# sourceMappingURL=RecentInsulin.js.map

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

@@ -104,18 +104,24 @@ export declare const stylesModal: {
     };
     textTittleMessage: {
         color: string;
-        fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     textMessage: {
         color: string;
-        fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     buttonText: {
         color: string;
-        fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     addToCalculationContainer: {
         justifyContent: "flex-start";
@@ -137,24 +143,35 @@ export declare const stylesModal: {
     };
     suggestedCarbs: {
         color: string;
+        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        lineHeight: number;
     };
     textCenter: {
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     recommendEatingText: {
         color: string;
         fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        lineHeight: number;
     };
     carbohydrateText: {
         color: string;
+        fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
+        lineHeight: number;
     };
     addToCalculation: {
         color: string;
         fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        lineHeight: number;
     };
     recommendationButtonsContainer: {
         justifyContent: "center";
@@ -165,11 +182,15 @@ export declare const stylesModal: {
         color: string;
         fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        lineHeight: number;
     };
     negativeCarbsText: {
         color: string;
-        fontSize: number;
         textAlign: "center";
+        fontFamily: import("./styles/fonts").FontFamily;
+        fontSize: number;
+        lineHeight: number;
     };
     affirmativeCarbsButton: {
         marginTop: string;