@hedia/recommendation-screen 2.1.57 → 2.1.58-alpha.0

package/dist/src/RecommendationScreen.js

@@ -462,6 +462,7 @@ export default class RecommendationScreen extends React.Component {
         const { ActiveInsulin: ActiveInsulinUnitTestID, BloodGlucose: BGUnitTestID, BloodKetone: BKUnitTestID, } = InfoBarTestIds.Unit;
         const carbRecommendation = carbRecommendationProp !== null ? Math.round(carbRecommendationProp) : null;
         const recommendedCarbs = enteredCarbs ?? carbRecommendation;
+        const borderColor = recommendedCarbs !== null ? colors.teal : colors.dustyDarkBlue;
         const { calculatorParams, bloodGlucoseUnit, currentBKL, bloodKetoneUnit } = this.props;
         const { currentBGL, carbohydrates: providedCarbs } = calculatorParams;
         const displayedBGL = currentBGL ? Utils.displayedBGLValue(currentBGL, bloodGlucoseUnit) : null;
@@ -476,7 +477,7 @@ export default class RecommendationScreen extends React.Component {
 					<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={styles.calcBorder}>
+					<View style={[styles.carbsBorder, { borderColor }]}>
 						<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
 					</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}/>)}
@@ -504,9 +505,8 @@ const styles = StyleSheet.create({
         justifyContent: `center`,
         backgroundColor: colors.transparentBlack,
     },
-    calcBorder: {
+    carbsBorder: {
         borderWidth: 1,
-        borderColor: colors.dustyDarkBlue,
         borderRadius: 5,
         padding: 16,
     },

package/dist/src/assets/IconsSVG/Close.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Path, Svg } from "react-native-svg";
-const Close = (props) => (<Svg viewBox="0 0 28 28" fill="none" {...props}>
+const Close = (props) => (<Svg viewBox="0 0 28 28" {...props}>
 		<Path d="M4.4753 23.4372C5.10827 24.0746 6.20854 24.0519 6.82281 23.4477L14.0546 16.2888L21.2957 23.4425C21.9208 24.0599 22.9955 24.072 23.6285 23.4346C24.2858 22.7973 24.2736 21.7355 23.6364 21.1181L16.4101 13.9618L23.6364 6.8228C24.2736 6.20277 24.2858 5.129 23.6285 4.50632C22.9955 3.86898 21.9208 3.88101 21.2957 4.49576L14.0546 11.6468L6.82281 4.49312C6.20854 3.88628 5.10827 3.86634 4.4753 4.50104C3.83282 5.12636 3.85301 6.21333 4.46728 6.82016L11.7139 13.9618L4.46728 21.1207C3.85301 21.7275 3.83282 22.7999 4.4753 23.4372Z" fill={props.color}/>
 	</Svg>);
 export default Close;

package/dist/src/assets/IconsSVG/CloseOutlined.d.ts

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

package/dist/src/assets/IconsSVG/CloseOutlined.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { Path, Svg } from "react-native-svg";
+import { colors } from "../../utils/Constants";
+const CloseOutlined = (props) => (<Svg viewBox="0 0 16 16" {...props}>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0ZM8.00003 14.9091C4.18425 14.9091 1.09094 11.8158 1.09094 8.00005C1.09094 4.18427 4.18425 1.09096 8.00003 1.09096C11.8158 1.09096 14.9091 4.18427 14.9091 8.00005C14.9091 9.83246 14.1812 11.5898 12.8855 12.8855C11.5898 14.1812 9.83244 14.9091 8.00003 14.9091Z" fill={colors.teal}/>
+		<Path fillRule="evenodd" clipRule="evenodd" d="M10.8261 4.99334C10.6131 4.78065 10.2681 4.78065 10.0552 4.99334L7.98608 7.14607L5.73517 4.96425C5.59618 4.82218 5.39091 4.76696 5.1994 4.82011C5.00789 4.87326 4.86045 5.02638 4.81456 5.21976C4.76867 5.41314 4.83159 5.61618 4.97881 5.74971L7.21517 7.90243L4.97881 10.0552C4.83159 10.1887 4.76867 10.3917 4.81456 10.5851C4.86045 10.7785 5.00789 10.9316 5.1994 10.9848C5.39091 11.0379 5.59618 10.9827 5.73517 10.8406L7.98608 8.6588L10.0552 10.8115C10.1887 10.9587 10.3917 11.0217 10.5851 10.9758C10.7785 10.9299 10.9316 10.7824 10.9848 10.5909C11.0379 10.3994 10.9827 10.1942 10.8406 10.0552L8.75699 7.87334L10.8406 5.69153C11.0049 5.48579 10.9988 5.19206 10.8261 4.99334Z" fill={colors.teal}/>
+	</Svg>);
+export default CloseOutlined;

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

@@ -66,7 +66,7 @@ export declare const infoStyles: {
     valueUnitContainer: {
         flex: number;
         justifyContent: "flex-end";
-        alignItems: "center";
+        alignItems: "baseline";
         flexDirection: "row";
     };
     value: {

package/dist/src/components/InfoBars.js

@@ -81,16 +81,16 @@ export const infoStyles = StyleSheet.create({
     valueUnitContainer: {
         flex: 6.5,
         justifyContent: `flex-end`,
-        alignItems: `center`,
+        alignItems: `baseline`,
         flexDirection: `row`,
     },
     value: {
-        ...FONTS.Poppins.regular_LG,
-        color: colors.lightBlue,
+        ...FONTS.Poppins.medium_2XL,
+        color: colors.white,
     },
     units: {
         ...FONTS.Poppins.regular_XS,
-        color: colors.lightBlue,
+        color: colors.white,
         paddingLeft: 4,
     },
 });

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

@@ -109,10 +109,6 @@ export declare const stylesModal: {
         marginTop: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        /**
-         * Callback function taking no arguments and returning no value.
-         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
-         */
         lineHeight: number;
     };
     buttonText: {
@@ -144,10 +140,6 @@ export declare const stylesModal: {
         paddingHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        /**
-         * Callback function taking no arguments and returning no value.
-         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
-         */
         lineHeight: number;
     };
     recommendEatingText: {
@@ -157,10 +149,6 @@ export declare const stylesModal: {
         marginBottom: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        /**
-         * Callback function taking no arguments and returning no value.
-         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
-         */
         lineHeight: number;
     };
     carbohydrateText: {
@@ -176,10 +164,6 @@ export declare const stylesModal: {
         marginHorizontal: number;
         fontFamily: import("./styles/fonts").FontFamily;
         fontSize: number;
-        /**
-         * Callback function taking no arguments and returning no value.
-         * Should be called if the user taps the “accept” button when they are recommended to eat additional carbohydrates.
-         */
         lineHeight: number;
     };
     recommendationButtonsContainer: {

package/dist/src/components/RecommendedCarbs.js

@@ -1,7 +1,7 @@
 import { t } from "@lingui/macro";
 import React from "react";
 import { Alert, StyleSheet, TouchableOpacity, View } from "react-native";
-import Close from "../assets/IconsSVG/Close";
+import CloseOutlined from "../assets/IconsSVG/CloseOutlined";
 import Edit from "../assets/IconsSVG/Edit";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
@@ -94,14 +94,14 @@ export default class RecommendedCarbs extends React.Component {
 				<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 })}
+							{CloseOutlined({ style: style.removeRecommendedIcon })}
 						</TouchableOpacity>
 						<Text style={style.recommendedLabel}>{i18n._(t `Recommended`)}</Text>
 					</View>
 				</View>
 				<View style={style.container}>
 					<View style={style.recommendedContainer}>
-						<Text style={{ ...style.recommendedLabel, color: colors.white }}>{i18n._(t `Additional`)}</Text>
+						<Text style={{ ...style.recommendedLabel, color: colors.teal }}>{i18n._(t `Additional`)}</Text>
 					</View>
 					<View style={style.valueUnitContainer}>
 						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[style.valueUnitContainer]}>
@@ -193,17 +193,17 @@ const style = StyleSheet.create({
     valueUnitContainer: {
         flex: 6.5,
         justifyContent: `flex-end`,
-        alignItems: `center`,
+        alignItems: `baseline`,
         flexDirection: `row`,
     },
     value: {
-        ...FONTS.Poppins.regular_LG,
-        color: colors.lightBlue,
+        ...FONTS.Poppins.medium_2XL,
+        color: colors.white,
         textAlign: `right`,
     },
     units: {
         ...FONTS.Poppins.regular_XS,
-        color: colors.lightBlue,
+        color: colors.white,
         textAlign: `left`,
         paddingLeft: 4,
     },

package/dist/src/components/RecommendedInsulin.js

@@ -146,6 +146,7 @@ const style = StyleSheet.create({
         textAlign: `center`,
         minHeight: 90,
         lineHeight: 90,
+        letterSpacing: 6,
         justifyContent: `center`,
     },
     titleText: {

package/dist/src/components/Remeasure.js

@@ -83,6 +83,7 @@ const styles = StyleSheet.create({
     textContainer: {
         flexDirection: `row`,
         marginBottom: 18,
+        alignItems: `baseline`,
     },
     remeasureLabel: {
         ...FONTS.Poppins.regular_Base,
@@ -92,11 +93,11 @@ const styles = StyleSheet.create({
     valueUnitContainer: {
         flex: 3,
         justifyContent: `flex-end`,
-        alignItems: `center`,
+        alignItems: `baseline`,
         flexDirection: `row`,
     },
     value: {
-        ...FONTS.Poppins.regular_LG,
+        ...FONTS.Poppins.medium_2XL,
         textAlign: `right`,
         color: colors.white,
     },

package/dist/src/components/activity/Activity.js

@@ -44,9 +44,12 @@ export default class Activity extends React.Component {
 				<Text style={styles.infoText}>
 					{i18n._(t `Based on the selected activity your insulin recommendation is reduced by:`)}
 				</Text>
-				<Text style={styles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
-					{reductionPercentage}%
-				</Text>
+				<View style={styles.reductionContainer}>
+					<Text style={styles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
+						{reductionPercentage}
+					</Text>
+					<Text style={styles.percentage}>{`%`}</Text>
+				</View>
 			</View>);
     }
 }
@@ -69,9 +72,18 @@ const styles = StyleSheet.create({
         color: colors.lightBlue,
         marginBottom: 4,
     },
+    reductionContainer: {
+        flexDirection: `row`,
+        alignItems: `baseline`,
+    },
     reductionPercentage: {
-        ...FONTS.Poppins.medium_Base,
-        color: colors.fadeBlue,
+        ...FONTS.Poppins.medium_2XL,
+        color: colors.white,
+    },
+    percentage: {
+        ...FONTS.Poppins.regular_XS,
+        color: colors.white,
+        marginLeft: 4,
     },
     label: {
         ...FONTS.Poppins.regular_Base,

package/dist/src/components/styles/fonts.d.ts

@@ -38,6 +38,11 @@ export declare const FONTS: {
             fontSize: number;
             lineHeight: number;
         };
+        medium_2XL: {
+            fontFamily: FontFamily;
+            fontSize: number;
+            lineHeight: number;
+        };
         bold_LG: {
             fontFamily: FontFamily;
             fontSize: number;

package/dist/src/components/styles/fonts.js

@@ -39,6 +39,11 @@ export const FONTS = {
             fontSize: 20,
             lineHeight: 28,
         },
+        medium_2XL: {
+            fontFamily: FontFamily.PoppinsMedium,
+            fontSize: 24,
+            lineHeight: 32,
+        },
         bold_LG: {
             fontFamily: FontFamily.PoppinsBold,
             fontSize: 18,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedia/recommendation-screen",
-  "version": "2.1.57",
+  "version": "2.1.58-alpha.0",
   "description": "Hedia Recommendation Screen for Bolus and Carbohydrates",
   "main": "dist/index.js",
   "files": [