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

package/dist/src/components/RecommendationModal.js

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import * as React from "react";
-import { Dimensions, ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
+import { ScrollView, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
@@ -50,11 +50,11 @@ export default class RecommendationModal extends React.Component {
      */
     recommendationButtons = () => {
         return (<View style={stylesModal.recommendationButtonsContainer}>
-				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={stylesModal.affirmativeCarbsButton} onPress={this.props.onAcceptCarbohydrates}>
-					<Text style={stylesModal.affirmativeCarbsText}>{i18n._(t `OK`)}</Text>
+				<TouchableOpacity testID={RecommendationModalTestIds.AcceptCarbs} style={[stylesModal.button, { marginRight: 12 }]} onPress={this.props.onAcceptCarbohydrates}>
+					<Text style={stylesModal.carbsButtonText}>{i18n._(t `OK`)}</Text>
 				</TouchableOpacity>
-				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={stylesModal.negativeCarbsButton} onPress={this.props.onDeclineCarbohydrates}>
-					<Text style={stylesModal.negativeCarbsText}>{i18n._(t `NO`)}</Text>
+				<TouchableOpacity testID={RecommendationModalTestIds.DeclineCarbs} style={[stylesModal.button, { marginLeft: 12 }]} onPress={this.props.onDeclineCarbohydrates}>
+					<Text style={stylesModal.carbsButtonText}>{i18n._(t `NO`)}</Text>
 				</TouchableOpacity>
 			</View>);
     };
@@ -67,29 +67,19 @@ export default class RecommendationModal extends React.Component {
         const displayCarbs = Math.round(suggestedCarbohydrates);
         return (<React.Fragment>
 				<View style={stylesModal.innerView}>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>
-							{i18n._(t `We recommend eating an additional:`)}
+					<Text style={stylesModal.recommendEatingText}>{i18n._(t `We recommend eating an additional:`)}</Text>
+					<Text style={stylesModal.textCenter}>
+						<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
+							{`${displayCarbs} `}
 						</Text>
-					</View>
-					<View style={stylesModal.suggestedContainer}>
-						<Text style={stylesModal.textCenter}>
-							<Text style={stylesModal.suggestedCarbs} testID={RecommendationModalTestIds.SuggestedCarbs}>
-								{`${displayCarbs} `}
-							</Text>
-							<Text style={stylesModal.carbohydrateText}>{i18n._(t `grams of carbohydrates`)}</Text>
-						</Text>
-					</View>
-					<View style={stylesModal.recommendationRow}>
-						<Text style={stylesModal.recommendEatingText}>{i18n._(t `Instead of taking insulin`)}</Text>
-					</View>
-				</View>
-				<View style={stylesModal.addToCalculationContainer}>
-					<Text style={stylesModal.addToCalculation}>
-						{i18n._(t `Would you like to add this to your current calculation?`)}
+						<Text style={stylesModal.carbohydrateText}>{i18n._(t `grams of carbohydrates`)}</Text>
 					</Text>
-					{this.recommendationButtons()}
+					<Text style={stylesModal.recommendEatingText}>{i18n._(t `Instead of taking insulin`)}</Text>
 				</View>
+				<Text style={stylesModal.addToCalculation}>
+					{i18n._(t `Would you like to add this to your current calculation?`)}
+				</Text>
+				{this.recommendationButtons()}
 			</React.Fragment>);
     };
     /**
@@ -98,20 +88,16 @@ export default class RecommendationModal extends React.Component {
     secondPage = () => {
         const { attentionMessage, suggestedCarbohydrates } = this.props;
         const willRecommendCarbs = suggestedCarbohydrates !== null && suggestedCarbohydrates > 0;
-        return (<View style={{ flex: 1 }}>
+        return (<>
 				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{attentionMessage}</Text>
-					{willRecommendCarbs ? this.recommendCarbohydrates(suggestedCarbohydrates) : null}
+					<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
+					{attentionMessage && <Text style={stylesModal.textMessage}>{attentionMessage}</Text>}
+					{willRecommendCarbs && this.recommendCarbohydrates(suggestedCarbohydrates)}
 				</View>
-				{willRecommendCarbs ? null : (<View style={stylesModal.containerAcceptButton}>
-						<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
-							<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
-						</TouchableOpacity>
-					</View>)}
-			</View>);
+				{!willRecommendCarbs && (<TouchableOpacity testID={RecommendationModalTestIds.OkButton} style={stylesModal.okButton} onPress={this.props.onClickOkButton}>
+						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
+					</TouchableOpacity>)}
+			</>);
     };
     /**
      * @returns JSX element for displaying the “first” page of the recommendation modal.
@@ -136,30 +122,19 @@ export default class RecommendationModal extends React.Component {
 			</ReactNativeModal>);
     }
 }
-const { height, width } = Dimensions.get(`screen`);
-const buttonHeight = height / 20;
-const buttonWidth = width / 2.5;
-const buttonBorderRadius = height / 30;
-const buttonBorderWidth = height / 500;
 /** @internal */
 export const stylesModal = StyleSheet.create({
-    modalStyle: { margin: 0 },
+    modalStyle: {
+        margin: 0,
+    },
     scrollViewContainer: {
         flexGrow: 1,
+        justifyContent: `center`,
     },
     container: {
-        flex: 4,
         backgroundColor: colors.semiDarkBlue,
         justifyContent: `center`,
-        paddingHorizontal: `4%`,
     },
-    containerAcceptButton: {
-        flex: 1,
-        backgroundColor: colors.semiDarkBlue,
-        justifyContent: `flex-start`,
-    },
-    titleContainer: { marginBottom: `5%` },
-    recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
     textTittleMessage: {
         ...FONTS.Poppins.bold_3XL,
         color: colors.white,
@@ -169,23 +144,25 @@ export const stylesModal = StyleSheet.create({
         ...FONTS.Poppins.regular_Base,
         color: colors.white,
         textAlign: `center`,
+        marginHorizontal: 30,
+        marginTop: 8,
     },
     buttonText: {
         ...FONTS.Poppins.bold_Base,
-        color: colors.teal,
+        color: colors.white,
         textAlign: `center`,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
     },
-    addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
-        paddingVertical: `5%`,
-        paddingHorizontal: `3%`,
-        marginTop: `5%`,
-        borderRadius: height / 80,
-        borderWidth: height / 300,
-        borderColor: colors.teal,
+        borderRadius: 8,
+        backgroundColor: colors.purple,
+        paddingVertical: 24,
+        marginHorizontal: 30,
+        marginTop: 24,
+        marginBottom: 36,
     },
-    suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
     suggestedCarbs: {
         ...FONTS.Poppins.bold_XL,
         color: colors.white,
@@ -193,11 +170,14 @@ export const stylesModal = StyleSheet.create({
     textCenter: {
         ...FONTS.Poppins.regular_Base,
         textAlign: `center`,
+        paddingHorizontal: 26.5,
     },
     recommendEatingText: {
         ...FONTS.Poppins.regular_Base,
-        color: colors.dustyBlue,
+        color: colors.white,
         textAlign: `center`,
+        paddingHorizontal: 15,
+        marginBottom: 8,
     },
     carbohydrateText: {
         ...FONTS.Poppins.bold_Base,
@@ -207,52 +187,35 @@ export const stylesModal = StyleSheet.create({
         ...FONTS.Poppins.regular_Base,
         color: colors.white,
         textAlign: `center`,
+        marginBottom: 16,
+        marginHorizontal: 50,
     },
     recommendationButtonsContainer: {
         justifyContent: `center`,
         flexDirection: `row`,
-        margin: `3%`,
+        paddingHorizontal: 47,
     },
-    affirmativeCarbsText: {
-        ...FONTS.Poppins.bold_Base,
-        color: colors.teal,
-        textAlign: `center`,
-    },
-    negativeCarbsText: {
+    carbsButtonText: {
         ...FONTS.Poppins.bold_Base,
         color: colors.white,
         textAlign: `center`,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
     },
-    affirmativeCarbsButton: {
-        marginTop: `2%`,
-        borderRadius: buttonBorderRadius,
-        borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
-        width: buttonWidth,
-        height: buttonHeight,
-        alignSelf: `center`,
-        justifyContent: `center`,
-        marginRight: `2%`,
-    },
-    negativeCarbsButton: {
-        marginTop: `2%`,
-        borderRadius: buttonBorderRadius,
-        borderWidth: buttonBorderWidth,
+    button: {
+        borderRadius: 50,
+        borderWidth: 1,
         borderColor: colors.white,
-        width: buttonWidth,
-        height: buttonHeight,
         alignSelf: `center`,
-        justifyContent: `center`,
-        marginLeft: `2%`,
+        minWidth: 127,
     },
     okButton: {
-        marginTop: `6%`,
-        borderRadius: buttonBorderRadius,
-        borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
-        width: buttonWidth,
-        height: buttonHeight,
+        backgroundColor: colors.semiDarkBlue,
+        justifyContent: `flex-start`,
+        borderRadius: 50,
+        borderWidth: 1,
+        borderColor: colors.white,
         alignSelf: `center`,
-        justifyContent: `center`,
+        minWidth: 127,
     },
 });

package/dist/src/components/RecommendedCarbs.js

@@ -1,15 +1,15 @@
 import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
+import Close from "../assets/IconsSVG/Close";
+import Edit from "../assets/IconsSVG/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, ICONS } from "./styles/fonts";
+import { FONTS } from "./styles/fonts";
 import Text from "./Text";
 const { RecommendedCarbsTestIds } = Testing.Id;
 /**
@@ -90,38 +90,30 @@ export default class RecommendedCarbs extends React.Component {
         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 color={colors.mistBlue}/>
-				<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}/>
+				<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}>
+							{Close({ color: colors.teal, style: style.removeRecommendedIcon })}
 						</TouchableOpacity>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
+						<Text style={style.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
 					</View>
 				</View>
-				<View style={calculationStyles.borderContainer}>
-					<View style={calculationStyles.recommendedContainer}>
-						<Text style={calculationStyles.recommendedLabel}>{i18n._(t `Additional`)}</Text>
+				<View style={style.container}>
+					<View style={style.recommendedContainer}>
+						<Text style={{ ...style.recommendedLabel, color: colors.white }}>{i18n._(t `Additional`)}</Text>
 					</View>
-					<View style={calculationStyles.valueUnitContainer}>
-						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
-							<View style={calculationStyles.valueContainer}>
-								<Text testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: colors.teal }}>
-									{shownCarbs}
-								</Text>
-							</View>
-							<View style={[calculationStyles.unitContainer]}>
-								<View style={calculationStyles.editIconContainer}>
-									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
-								</View>
-								<Text style={{ ...calculationStyles.units, color: colors.teal }}>
-									{i18n._(t `grams`)}
-								</Text>
-							</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 }}>{i18n._(t `grams`)}</Text>
 						</TouchableOpacity>
 					</View>
 				</View>
-				<LineSeparator color={colors.teal}/>
+				<LineSeparator borderBottomColor={colors.dustyDarkBlue} marginBottom={16} marginTop={8}/>
 				{this.renderRow({
                 label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
@@ -137,19 +129,15 @@ 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={[calculationStyles.borderContainer, { paddingVertical: `1%` }]}>
-				<View style={calculationStyles.rowContainer}>
-					<Text style={calculationStyles.rowLabel}>{row.label}</Text>
+        return (<View style={style.container}>
+				<View style={style.rowContainer}>
+					<Text style={style.rowLabel}>{row.label}</Text>
 				</View>
-				<View style={calculationStyles.valueUnitContainer}>
-					<View style={calculationStyles.valueContainer}>
-						<Text testID={testID} style={calculationStyles.value}>
-							{row.value}
-						</Text>
-					</View>
-					<View style={calculationStyles.unitContainer}>
-						<Text style={calculationStyles.units}>{row.units}</Text>
-					</View>
+				<View style={style.valueUnitContainer}>
+					<Text testID={testID} style={style.value}>
+						{row.value}
+					</Text>
+					<Text style={style.units}>{row.units}</Text>
 				</View>
 			</View>);
     };
@@ -162,9 +150,9 @@ export default class RecommendedCarbs extends React.Component {
     render() {
         const carbs = Number(this.props.recommendedCarbs);
         return (<React.Fragment>
-				<View style={calculationStyles.foodTitleContainer}>
-					<Text style={infoStyles.label}>{i18n._(t `Food`)}</Text>
-					<Text style={calculationStyles.foodUnitsLabel}>{`(${i18n._(t `Carbohydrates`)})`}</Text>
+				<View style={style.foodTitleContainer}>
+					<Text style={style.label}>{i18n._(t `Food`)}</Text>
+					<Text style={style.foodUnitsLabel}>{`(${i18n._(t `Carbohydrates`)})`}</Text>
 				</View>
 				{this.renderRow({
                 label: i18n._(t `Entered`),
@@ -175,28 +163,27 @@ export default class RecommendedCarbs extends React.Component {
 			</React.Fragment>);
     }
 }
-const calculationStyles = StyleSheet.create({
-    borderContainer: {
-        ...infoStyles.borderContainer,
+const style = StyleSheet.create({
+    container: {
+        flexDirection: `row`,
         alignItems: `center`,
     },
     foodTitleContainer: {
-        flex: infoStyles.borderContainer.flex,
-        flexDirection: infoStyles.borderContainer.flexDirection,
-        paddingHorizontal: infoStyles.borderContainer.paddingHorizontal,
+        flexDirection: `row`,
         alignItems: `center`,
-        paddingVertical: `2%`,
+        marginBottom: 4,
     },
     foodUnitsLabel: {
-        ...infoStyles.units,
+        ...FONTS.Poppins.regular_XS,
+        textAlign: `left`,
+        paddingLeft: 4,
         color: colors.lightBlue,
-        paddingLeft: `1%`,
     },
     rowContainer: {
         flex: 7,
     },
     rowLabel: {
-        ...FONTS.Poppins.bold_Base,
+        ...FONTS.Poppins.regular_Base,
         color: colors.white,
     },
     enteredContainer: {
@@ -204,46 +191,48 @@ const calculationStyles = StyleSheet.create({
         alignItems: `flex-end`,
     },
     valueUnitContainer: {
-        ...infoStyles.valueUnitContainer,
-    },
-    valueContainer: {
-        ...infoStyles.valueContainer,
+        flex: 6.5,
+        justifyContent: `flex-end`,
+        alignItems: `center`,
+        flexDirection: `row`,
     },
     value: {
-        ...infoStyles.value,
-    },
-    unitContainer: {
-        ...infoStyles.unitContainer,
+        ...FONTS.Poppins.regular_LG,
+        color: colors.lightBlue,
+        textAlign: `right`,
     },
     units: {
-        ...infoStyles.units,
-    },
-    editIconContainer: {
-        justifyContent: `flex-end`,
-        paddingRight: `20%`,
-        flexDirection: `row`,
-    },
-    editIcon: {
-        color: colors.teal,
-        ...ICONS.XS,
+        ...FONTS.Poppins.regular_XS,
+        color: colors.lightBlue,
+        textAlign: `left`,
+        paddingLeft: 4,
     },
     recommendedContainer: {
         flex: 7,
         flexDirection: `row`,
     },
     recommendedLabel: {
-        ...FONTS.Poppins.bold_Base,
+        ...FONTS.Poppins.regular_Base,
         color: colors.teal,
-        alignSelf: `center`,
     },
     removeRecommended: {
         justifyContent: `center`,
-        marginRight: `1%`,
-        marginTop: `1%`,
+        alignItems: `center`,
     },
     removeRecommendedIcon: {
-        ...ICONS.XL,
-        color: colors.teal,
-        paddingBottom: `0.5%`,
+        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,
     },
 });

package/dist/src/components/RecommendedInsulin.js

@@ -1,17 +1,14 @@
 import { BolusCalculator } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Alert, Dimensions, Platform, StyleSheet, TouchableOpacity, View } from "react-native";
-import LinearGradient from "react-native-linear-gradient";
+import { Alert, StyleSheet, TouchableOpacity } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { Messages } from "../utils/AttentionMessages";
 import { colors } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
-import Icon from "./Icon";
-import { infoStyles } from "./InfoBars";
 import InvisibleNumberInput from "./InvisibleNumberInput";
-import { FONTS, ICONS } from "./styles/fonts";
+import { FONTS } from "./styles/fonts";
 import Text from "./Text";
 const { RecommendedInsulinTestIds } = Testing.Id;
 const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
@@ -103,74 +100,55 @@ export default class RecommendedInsulin extends React.Component {
      * and using an InvisibleNumberInput component to enable input when the insulin amount is tapped.
      */
     render = () => {
-        const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
         const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
+        const { EditRecommendedInsulin, ShownInsulinText, InvisibleInsulinInput } = RecommendedInsulinTestIds;
         return (<React.Fragment>
-				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
-					<LinearGradient style={recommendedInsulinStyles.container} colors={[colors.purple, colors.blue]} useAngle={true} angle={135}>
-						<View style={recommendedInsulinStyles.recommendedTextContainer}>
-							<Text style={recommendedInsulinStyles.recommendedText}>
-								{i18n._(t `Recommended amount of insulin`)}
-							</Text>
-						</View>
-						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
-							<View style={recommendedInsulinStyles.valueContainer}>
-								<Text style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
-									{shownInsulin}
-								</Text>
-								<Text style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</Text>
-							</View>
-							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon}/>
-						</View>
-					</LinearGradient>
+				<TouchableOpacity testID={EditRecommendedInsulin} onPress={this.handleOnPress} style={style.container}>
+					<Text style={style.titleText}>{i18n._(t `Recommended amount of insulin`)}</Text>
+					<Text style={style.insulinText} testID={ShownInsulinText}>
+						{shownInsulin}
+					</Text>
+					<Text style={style.unitsText}>{i18n._(t `Units`)}</Text>
+					<Text style={style.editText}>{i18n._(t `Enter Manually`)}</Text>
 				</TouchableOpacity>
-				<InvisibleNumberInput testID={RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
+
+				<InvisibleNumberInput testID={InvisibleInsulinInput} decimalPlaces={1} maxLength={4} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
 			</React.Fragment>);
     };
 }
-const recommendedInsulinStyles = StyleSheet.create({
+const style = StyleSheet.create({
     container: {
-        marginHorizontal: infoStyles.margin.margin,
-        marginTop: infoStyles.margin.margin,
         borderRadius: 5,
+        paddingVertical: 16,
+        paddingHorizontal: 24.5,
+        backgroundColor: colors.deepPurple,
+        marginBottom: 32,
+        minHeight: 200,
     },
-    recommendedTextContainer: {
-        flex: 1,
-        alignItems: `center`,
-        marginTop: `3%`,
-    },
-    recommendedText: {
-        paddingTop: `1%`,
-        ...infoStyles.label,
-    },
-    recommendedContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        marginLeft: `10%`,
-    },
-    valueContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        justifyContent: `center`,
-        minHeight: Dimensions.get(`screen`).width / 4,
+    editText: {
+        ...FONTS.Poppins.regular_SM,
+        color: colors.teal,
+        textAlign: `center`,
     },
-    value: {
-        ...FONTS.Poppins.bold_4XL,
-        fontSize: 78,
-        lineHeight: 92,
+    unitsText: {
+        ...FONTS.Poppins.medium_XS,
         color: colors.white,
+        textAlign: `center`,
+        marginTop: -16,
+        marginBottom: 16,
     },
-    units: {
-        ...FONTS.Poppins.regular_SM,
-        alignSelf: `flex-end`,
+    insulinText: {
+        ...FONTS.Oswald.bold_7XL,
         color: colors.white,
-        paddingBottom: `6%`,
+        textAlign: `center`,
+        minHeight: 90,
+        lineHeight: 90,
+        justifyContent: `center`,
     },
-    editIcon: {
+    titleText: {
+        ...FONTS.Poppins.medium_Base,
         color: colors.white,
-        ...ICONS.SM,
-        textAlignVertical: `center`,
-        paddingBottom: `10%`,
-        marginRight: `5%`,
+        textAlign: `center`,
+        marginBottom: 16,
     },
 });