@hedia/recommendation-screen 2.2.0-alpha.44 → 2.2.0-alpha.5

package/dist/src/components/RecommendationModal.js

@@ -1,11 +1,13 @@
+import { t } from "@lingui/macro";
 import * as React from "react";
-import { SafeAreaView, ScrollView, StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
-import { t } from "../locales/translate";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
+import LimitationMessage from "./LimitationMessage";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 const { RecommendationModalTestIds } = Testing.Id;
 /**
  * Popup modal for displaying information messages or warnings to the user if necessary.
@@ -28,15 +30,6 @@ export default class RecommendationModal extends React.Component {
             firstPageVisible: !!this.props.limitationMessage,
         };
     }
-    /*
-     * Steps:
-     * 1. Set the firstPageVisible state variable true if the limitationMessage prop was updated.
-     */
-    componentDidUpdate(prevProps) {
-        if (prevProps.limitationMessage !== this.props.limitationMessage) {
-            this.setState({ firstPageVisible: !!this.props.limitationMessage });
-        }
-    }
     /**
      * Handle what happens when the “next” button is pressed.
      *
@@ -47,8 +40,8 @@ export default class RecommendationModal extends React.Component {
      */
     onPressNextButton = () => {
         const { attentionMessage, suggestedCarbohydrates } = this.props;
-        const isSecondPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
-        return isSecondPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
+        const isPageVisible = !!attentionMessage || !!suggestedCarbohydrates;
+        return isPageVisible ? this.setState({ firstPageVisible: false }) : this.props.onClickOkButton();
     };
     /**
      * @returns Return an JSX element for composing two buttons: one for accepting a suggestion and one for rejecting it.
@@ -57,11 +50,11 @@ export default class RecommendationModal extends React.Component {
      */
     recommendationButtons = () => {
         return (<View style={stylesModal.recommendationButtonsContainer}>
-				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={[stylesModal.button, { marginRight: 12 }]} onPress={this.props.onAcceptCarbohydrates}>
-					<Text style={stylesModal.carbsButtonText}>{t(`OK`)}</Text>
+				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
+					<TextRegular style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</TextRegular>
 				</TouchableOpacity>
-				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={[stylesModal.button, { marginLeft: 12 }]} onPress={this.props.onDeclineCarbohydrates}>
-					<Text style={stylesModal.carbsButtonText}>{t(`NO`)}</Text>
+				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
+					<TextRegular style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</TextRegular>
 				</TouchableOpacity>
 			</View>);
     };
@@ -74,19 +67,33 @@ export default class RecommendationModal extends React.Component {
         const displayCarbs = Math.round(suggestedCarbohydrates);
         return (<React.Fragment>
 				<View style={stylesModal.innerView}>
-					<Text style={stylesModal.recommendEatingText}>{t(`We recommend eating an additional:`)}</Text>
-					<Text style={stylesModal.textCenter}>
-						<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
-							{`${displayCarbs} `}
-						</Text>
-						<Text style={stylesModal.carbohydrateText}>{t(`grams of carbohydrates`)}</Text>
-					</Text>
-					<Text style={stylesModal.recommendEatingText}>{t(`Instead of taking insulin`)}</Text>
+					<View style={stylesModal.recommendationRow}>
+						<TextRegular style={stylesModal.recommendEatingText}>
+							{i18n._(t `We recommend eating an additional:`)}
+						</TextRegular>
+					</View>
+					<View style={stylesModal.suggestedContainer}>
+						<TextRegular style={stylesModal.textCenter}>
+							<TextBold style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
+								{`${displayCarbs} `}
+							</TextBold>
+							<TextRegular style={stylesModal.carbohydrateText}>
+								{i18n._(t `grams of carbohydrates`)}
+							</TextRegular>
+						</TextRegular>
+					</View>
+					<View style={stylesModal.recommendationRow}>
+						<TextRegular style={stylesModal.recommendEatingText}>
+							{i18n._(t `Instead of taking insulin`)}
+						</TextRegular>
+					</View>
+				</View>
+				<View style={stylesModal.addToCalculationContainer}>
+					<TextRegular style={stylesModal.addToCalculation}>
+						{i18n._(t `Would you like to add this to your current calculation?`)}
+					</TextRegular>
+					{this.recommendationButtons()}
 				</View>
-				<Text style={stylesModal.addToCalculation}>
-					{t(`Would you like to add this to your current calculation?`)}
-				</Text>
-				{this.recommendationButtons()}
 			</React.Fragment>);
     };
     /**
@@ -95,16 +102,20 @@ export default class RecommendationModal extends React.Component {
     secondPage = () => {
         const { attentionMessage, suggestedCarbohydrates } = this.props;
         const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
-        return (<>
+        return (<React.Fragment>
 				<View style={stylesModal.container}>
-					<Text style={stylesModal.textTittleMessage}>{t(`Attention`)}</Text>
-					{attentionMessage && <Text style={stylesModal.textMessage}>{attentionMessage}</Text>}
-					{willRecommendCarbs && this.recommendCarbohydrates(suggestedCarbohydrates)}
+					<View style={stylesModal.titleContainer}>
+						<TextBold style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</TextBold>
+					</View>
+					<TextRegular style={stylesModal.textMessage}>{attentionMessage}</TextRegular>
+					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
 				</View>
-				{!willRecommendCarbs && (<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
-						<Text style={stylesModal.buttonText}>{t(`OK`)}</Text>
-					</TouchableOpacity>)}
-			</>);
+				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
+						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
+							<TextRegular style={stylesModal.buttonText}>{i18n._(t `OK`)}</TextRegular>
+						</TouchableOpacity>
+					</View>)}
+			</React.Fragment>);
     };
     /**
      * @returns JSX element for displaying the “first” page of the recommendation modal.
@@ -112,13 +123,7 @@ export default class RecommendationModal extends React.Component {
      */
     firstPage = () => {
         const { limitationMessage } = this.props;
-        return (<React.Fragment>
-				<Text style={stylesModal.textTittleMessage}>{t(`Attention`)}</Text>
-				<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
-				<TouchableOpacity testID={Testing.Id.RecommendationModalTestIds.LimitationOkButton} style={stylesModal.okButton} onPress={this.props.onlyShowLimitationMessage ? this.props.onClickOkButton : this.onPressNextButton}>
-					<Text style={stylesModal.buttonText}>{t(`OK`)}</Text>
-				</TouchableOpacity>
-			</React.Fragment>);
+        return <LimitationMessage limitationMessage={limitationMessage} onPressNextButton={this.onPressNextButton}/>;
     };
     /**
      * @returns JSX element for rendering a modal that is visible if the isVisible prop is true.
@@ -128,114 +133,94 @@ export default class RecommendationModal extends React.Component {
     render() {
         const { isVisible } = this.props;
         const { firstPageVisible } = this.state;
-        return (<ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle} backdropColor={colors.darkBlue} backdropOpacity={1} animationIn={`fadeIn`} animationOut={`fadeOut`}>
-				<StatusBar backgroundColor={colors.transparentLightBlue}/>
-				<SafeAreaView style={stylesModal.safe}>
-					<ScrollView contentContainerStyle={stylesModal.scrollViewContainer}>
-						{firstPageVisible ? this.firstPage() : this.secondPage()}
-					</ScrollView>
-				</SafeAreaView>
+        return (<ReactNativeModal isVisible={isVisible} style={stylesModal.modalStyle}>
+				{firstPageVisible ? this.firstPage() : this.secondPage()}
 			</ReactNativeModal>);
     }
 }
+const { height, width } = Dimensions.get(`screen`);
+const buttonHeight = height / 20;
+const buttonWidth = width / 2.5;
+const buttonFontSize = width / 22;
+const buttonBorderRadius = height / 30;
+const buttonBorderWidth = height / 500;
+const sugestionFontSize = width / 19;
+const recommendEatingFontSize = height / 45;
+const textFontSize = width / 20;
+const titleFontSize = width / 13;
 /** @internal */
 export const stylesModal = StyleSheet.create({
-    safe: {
-        backgroundColor: colors.darkBlue,
-    },
     modalStyle: {
         margin: 0,
-    },
-    scrollViewContainer: {
-        flexGrow: 1,
-        justifyContent: `center`,
+        backgroundColor: colors.darkBlue,
     },
     container: {
+        flex: 4,
         justifyContent: `center`,
+        paddingHorizontal: `4%`,
     },
-    textTittleMessage: {
-        ...FONTS.Poppins.bold_3XL,
-        color: colors.white,
-        textAlign: `center`,
-    },
-    textMessage: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
-        textAlign: `center`,
-        marginHorizontal: 30,
-        marginTop: 8,
-    },
-    buttonText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.white,
-        textAlign: `center`,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
+    containerAcceptButton: {
+        flex: 1,
+        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` },
+    addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
-        borderRadius: 8,
-        backgroundColor: colors.purple,
-        paddingVertical: 24,
-        marginHorizontal: 30,
-        marginTop: 24,
-        marginBottom: 36,
-    },
-    suggestedCarbs: {
-        ...FONTS.Poppins.bold_XL,
-        color: colors.white,
-    },
-    textCenter: {
-        ...FONTS.Poppins.regular_Base,
-        textAlign: `center`,
-        paddingHorizontal: 26.5,
-    },
+        paddingVertical: `5%`,
+        paddingHorizontal: `3%`,
+        marginTop: `5%`,
+        borderRadius: height / 80,
+        borderWidth: height / 300,
+        borderColor: colors.teal,
+    },
+    suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
+    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
+    textCenter: { textAlign: `center` },
     recommendEatingText: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
-        textAlign: `center`,
-        paddingHorizontal: 15,
-        marginBottom: 8,
-    },
-    carbohydrateText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.white,
-    },
-    addToCalculation: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
+        color: colors.dustyBlue,
+        fontSize: recommendEatingFontSize,
         textAlign: `center`,
-        marginBottom: 16,
-        marginHorizontal: 50,
     },
-    recommendationButtonsContainer: {
+    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` },
+    negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsButton: {
+        marginTop: `2%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: colors.teal,
+        width: buttonWidth,
+        height: buttonHeight,
+        alignSelf: `center`,
         justifyContent: `center`,
-        flexDirection: `row`,
-        paddingHorizontal: 47,
-    },
-    carbsButtonText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.white,
-        textAlign: `center`,
-        paddingHorizontal: 16,
-        paddingVertical: 12,
-    },
-    button: {
-        borderRadius: 50,
-        borderWidth: 1,
-        borderColor: colors.white,
+        marginRight: `2%`,
+    },
+    negativeCarbsButton: {
+        marginTop: `2%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: `white`,
+        width: buttonWidth,
+        height: buttonHeight,
         alignSelf: `center`,
-        minWidth: 127,
+        justifyContent: `center`,
+        marginLeft: `2%`,
     },
     okButton: {
-        backgroundColor: colors.darkBlue,
-        justifyContent: `flex-start`,
-        marginTop: 24,
-        borderRadius: 50,
-        borderWidth: 1,
-        borderColor: colors.white,
+        marginTop: `6%`,
+        borderRadius: buttonBorderRadius,
+        borderWidth: buttonBorderWidth,
+        borderColor: colors.teal,
+        width: buttonWidth,
+        height: buttonHeight,
         alignSelf: `center`,
-        minWidth: 127,
+        justifyContent: `center`,
     },
 });
-//# sourceMappingURL=RecommendationModal.js.map

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

@@ -1,6 +1,5 @@
 import React from "react";
 import { Testing } from "../types/enum";
-declare const RecommendedCarbsTestIds: typeof Testing.Id.RecommendedCarbsTestIds;
 export interface ICalculationRow {
     label: string;
     value: string;
@@ -93,4 +92,3 @@ export default class RecommendedCarbs extends React.Component<IProps, IState> {
      */
     render(): JSX.Element;
 }
-export {};

package/dist/src/components/RecommendedCarbs.js

@@ -1,15 +1,17 @@
+import { t } from "@lingui/macro";
 import React from "react";
-import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
-import CloseOutlined from "../assets/IconsSVG/CloseOutlined";
-import Edit from "../assets/IconsSVG/Edit";
-import { t } from "../locales/translate";
+import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import EditIcon from "../assets/icons/Edit";
+import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
 import { CarbohydrateLimitError } from "../utils/RecommendationError";
+import Icon from "./Icon";
+import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
 import LineSeparator from "./LineSeparator";
-import { FONTS } from "./styles/fonts";
-import Text from "./Text";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 const { RecommendedCarbsTestIds } = Testing.Id;
 /**
  * The contents of the RecommendedCarbs component may vary quite a bit depending on data that was entered by the user
@@ -63,7 +65,11 @@ export default class RecommendedCarbs extends React.Component {
         if (carbs >= 0) {
             if (carbs > 300) {
                 this.setState({ partialInput: this.props.recommendedCarbs });
-                return Alert.alert(t(`Attention`), CarbohydrateLimitError().message, [{ text: t(`OK`) }]);
+                return Alert.alert(i18n._(t `Attention`), CarbohydrateLimitError().message, [
+                    {
+                        text: i18n._(t `OK`),
+                    },
+                ]);
             }
             this.props.changedRecommendedCarbs(carbs);
         }
@@ -84,38 +90,46 @@ export default class RecommendedCarbs extends React.Component {
     renderRecommendedCarbs = () => {
         const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
         const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
-        return (<React.Fragment>
-				<LineSeparator borderBottomColor={colors.dustyDarkBlue} marginBottom={8} marginTop={16}/>
-				<View style={[style.container, { marginBottom: 4 }]}>
-					<View style={style.recommendedContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={style.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
-							{CloseOutlined({ style: style.removeRecommendedIcon })}
+        return (<>
+				<LineSeparator color={colors.fadeBlue}/>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
+							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={calculationStyles.removeRecommendedIcon}/>
 						</TouchableOpacity>
-						<Text style={style.recommendedLabel}>{t(`Recommended`)}</Text>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</TextBold>
 					</View>
 				</View>
-				<View style={style.container}>
-					<View style={style.recommendedContainer}>
-						<Text style={{ ...style.recommendedLabel, color: colors.teal }}>{t(`Additional`)}</Text>
+				<View style={calculationStyles.borderContainer}>
+					<View style={calculationStyles.recommendedContainer}>
+						<TextBold style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</TextBold>
 					</View>
-					<View style={style.valueUnitContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[style.valueUnitContainer]}>
-							<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...style.value, color: colors.teal }}>
-								{shownCarbs}
-							</Text>
-							{Edit({ color: colors.teal, style: style.editIcon })}
-							<Text style={{ ...style.units, color: colors.teal }}>{t(`grams`)}</Text>
+					<View style={calculationStyles.valueUnitContainer}>
+						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
+							<View style={calculationStyles.valueContainer}>
+								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: colors.teal }}>
+									{shownCarbs}
+								</TextBold>
+							</View>
+							<View style={[calculationStyles.unitContainer]}>
+								<View style={calculationStyles.editIconContainer}>
+									<EditIcon />
+								</View>
+								<TextRegular style={{ ...calculationStyles.units, color: colors.teal }}>
+									{i18n._(t `grams`)}
+								</TextRegular>
+							</View>
 						</TouchableOpacity>
 					</View>
 				</View>
-				<LineSeparator borderBottomColor={colors.dustyDarkBlue} marginBottom={16} marginTop={8}/>
+				<LineSeparator color={colors.fadeBlue}/>
 				{this.renderRow({
-                label: t(`Total`),
+                label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
-                units: t(`grams`),
+                units: i18n._(t `grams`),
             }, RecommendedCarbsTestIds.TotalCarbs)}
 				<InvisibleNumberInput testID={RecommendedCarbsTestIds.InvisibleCarbInput} negativeAllowed={false} cleanPartialInput={true} decimalPlaces={0} visible={(callback) => (this.callbackInput = callback)} partialInput={this.handlePartialInput} onEnd={this.handleChangedCarbs} startValue={this.props.recommendedCarbs} maxLength={3}/>
-			</React.Fragment>);
+			</>);
     };
     /**
      * Display a row of information for the user. Specifically used to display the amount of carbohydrates that the user has entered.
@@ -124,15 +138,19 @@ export default class RecommendedCarbs extends React.Component {
      * @returns A JSX element to display 3 strings on the screen: label, value, and a unit.
      */
     renderRow = (row, testID) => {
-        return (<View style={style.container}>
-				<View style={style.rowContainer}>
-					<Text style={style.rowLabel}>{row.label}</Text>
+        return (<View style={calculationStyles.borderContainer}>
+				<View style={calculationStyles.rowContainer}>
+					<TextBold style={calculationStyles.rowLabel}>{row.label}</TextBold>
 				</View>
-				<View style={style.valueUnitContainer}>
-					<Text testID={testID} style={style.value}>
-						{row.value}
-					</Text>
-					<Text style={style.units}>{row.units}</Text>
+				<View style={calculationStyles.valueUnitContainer}>
+					<View style={calculationStyles.valueContainer}>
+						<TextBold testID={testID} style={calculationStyles.value}>
+							{row.value}
+						</TextBold>
+					</View>
+					<View style={calculationStyles.unitContainer}>
+						<TextRegular style={calculationStyles.units}>{row.units}</TextRegular>
+					</View>
 				</View>
 			</View>);
     };
@@ -144,91 +162,90 @@ export default class RecommendedCarbs extends React.Component {
      */
     render() {
         const carbs = Number(this.props.recommendedCarbs);
-        return (<React.Fragment>
-				<View style={style.foodTitleContainer}>
-					<Text style={style.label}>{t(`Food`)}</Text>
-					<Text style={style.foodUnitsLabel}>{`(${t(`Carbohydrates`)})`}</Text>
+        return (<>
+				<View style={calculationStyles.foodTitleContainer}>
+					<TextBold style={infoStyles.label}>{i18n._(t `Food`)}</TextBold>
+					<TextRegular style={calculationStyles.foodUnitsLabel}>
+						{`(${i18n._(t `Carbohydrates`)})`}
+					</TextRegular>
 				</View>
 				{this.renderRow({
-                label: t(`Entered`),
+                label: i18n._(t `Entered`),
                 value: this.props.enteredCarbs,
-                units: t(`grams`),
+                units: i18n._(t `grams`),
             }, RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
-			</React.Fragment>);
+			</>);
     }
 }
-const style = StyleSheet.create({
-    container: {
-        flexDirection: `row`,
+const { width } = Dimensions.get(`screen`);
+const calculationStyles = StyleSheet.create({
+    borderContainer: {
+        ...infoStyles.borderContainer,
         alignItems: `center`,
     },
     foodTitleContainer: {
-        flexDirection: `row`,
+        flex: infoStyles.borderContainer.flex,
+        flexDirection: infoStyles.borderContainer.flexDirection,
+        paddingHorizontal: infoStyles.borderContainer.paddingHorizontal,
         alignItems: `center`,
-        marginBottom: 4,
+        paddingVertical: `2%`,
     },
     foodUnitsLabel: {
-        ...FONTS.Poppins.regular_XS,
-        textAlign: `left`,
-        paddingLeft: 4,
-        color: colors.lightBlue,
+        ...infoStyles.units,
+        color: colors.fadeBlue,
+        paddingLeft: `1%`,
     },
     rowContainer: {
         flex: 7,
     },
     rowLabel: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
+        color: `white`,
+        fontSize: width / 25,
     },
     enteredContainer: {
         flex: 3,
         alignItems: `flex-end`,
     },
+    entered: {
+        color: `white`,
+        fontSize: width / 23,
+    },
     valueUnitContainer: {
-        flex: 6.5,
-        justifyContent: `flex-end`,
-        alignItems: `baseline`,
-        flexDirection: `row`,
+        ...infoStyles.valueUnitContainer,
+    },
+    valueContainer: {
+        ...infoStyles.valueContainer,
     },
     value: {
-        ...FONTS.Poppins.medium_2XL,
-        color: colors.white,
-        textAlign: `right`,
+        ...infoStyles.value,
+    },
+    unitContainer: {
+        ...infoStyles.unitContainer,
     },
     units: {
-        ...FONTS.Poppins.regular_XS,
-        color: colors.white,
-        textAlign: `left`,
-        paddingLeft: 4,
+        ...infoStyles.units,
+    },
+    editIconContainer: {
+        paddingLeft: `20%`,
     },
     recommendedContainer: {
         flex: 7,
         flexDirection: `row`,
     },
     recommendedLabel: {
-        ...FONTS.Poppins.regular_Base,
         color: colors.teal,
+        fontSize: width / 25,
+        alignSelf: `center`,
     },
     removeRecommended: {
         justifyContent: `center`,
-        alignItems: `center`,
+        marginRight: `1%`,
+        marginTop: `1%`,
     },
     removeRecommendedIcon: {
-        height: 20,
-        width: 20,
-        marginRight: 4,
-    },
-    editIcon: {
-        height: 16,
-        width: 16,
-        right: 0,
-        top: -8,
-        position: `absolute`,
-    },
-    label: {
-        ...FONTS.Poppins.regular_Base,
-        color: colors.white,
+        color: colors.teal,
+        fontSize: width / 20,
+        paddingBottom: `0.5%`,
     },
 });
-//# sourceMappingURL=RecommendedCarbs.js.map

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

@@ -1,5 +1,5 @@
-import React from "react";
 import { UserSettings } from "@hedia/types";
+import React from "react";
 export interface IProps {
     /** The amount of insulin in units to display to the user as a recommendation. */
     insulinRecommendation: number;