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

package/dist/src/components/InfoBars.js

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
-import { BORDER_COLOUR_GREY } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -70,17 +70,19 @@ export default class InfoBars extends React.Component {
 			</View>);
     }
 }
+const { width } = Dimensions.get(`screen`);
 /** @internal */
 export const infoStyles = StyleSheet.create({
     container: { flex: 1 },
     margin: {
         flex: 1,
-        margin: `3%`,
+        marginVertical: width / 35,
+        marginHorizontal: width / 17,
         marginBottom: 0,
     },
     border: {
         borderWidth: 2,
-        borderColor: BORDER_COLOUR_GREY,
+        borderColor: colors.mistBlue,
         borderRadius: 5,
         paddingVertical: `1%`,
     },
@@ -96,7 +98,7 @@ export const infoStyles = StyleSheet.create({
     },
     label: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 22,
+        fontSize: width / 22,
     },
     valueUnitContainer: {
         flex: 6.5,
@@ -109,18 +111,18 @@ export const infoStyles = StyleSheet.create({
     },
     value: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 15,
+        fontSize: width / 16,
         textAlign: `right`,
     },
     unitContainer: {
         flex: 3,
         justifyContent: `flex-end`,
-        paddingBottom: `3%`,
     },
     units: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 30,
+        fontSize: width / 30,
         textAlign: `left`,
-        paddingLeft: `5%`,
+        paddingLeft: `15%`,
+        marginBottom: 4,
     },
 });

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

@@ -9,7 +9,7 @@ export interface IProps {
 export default class RecentInsulin extends React.Component<IProps> {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * @returns JSX element that displays a card with the question “Have you taken rapid-acting insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
      * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
      * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
      */

package/dist/src/components/RecentInsulin.js

@@ -1,93 +1,73 @@
 import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
+import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
 /** Display a card that prompts the user to recall if they injected insulin recently. */
 export default class RecentInsulin extends React.Component {
     /**
      *
-     * @returns JSX element that displays a card with the question “Have you taken insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
+     * @returns JSX element that displays a card with the question “Have you taken rapid-acting insulin within the last 4 hours? Along with two buttons labeled “Yes” and “No” respectively.
      * If the user taps the “Yes” button, the onRecentInsulinYes prop callback function should be called.
      * If the user taps the “No” button, the onRecentInsulinNo prop callback function should be called.
      */
     render = () => {
-        return (<View style={recentInsulinStyles.container}>
-				<View style={recentInsulinStyles.titleContainer}>
-					<TextBold style={recentInsulinStyles.recommended}>
-						{i18n._(t `Recommended amount of insulin`)}
-					</TextBold>
-				</View>
-				<View style={recentInsulinStyles.takenInsulinContainer}>
-					<TextBold style={recentInsulinStyles.takenInsulin}>
-						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
-					</TextBold>
-				</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}>{i18n._(t `Yes`)}</TextBold>
+        const { container, title, buttonContainer, yesNoContainer, yesNoText } = styles;
+        return (<LinearGradient style={container} colors={[`rgba(87, 138, 255, 0.3)`, `rgba(162, 0, 255, 0.3)`]} useAngle={true} angle={170}>
+				<TextBold style={title}>
+					{i18n._(t `Have you taken rapid-acting insulin within the last 4 hours?`)}
+				</TextBold>
+
+				<View style={buttonContainer}>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[yesNoContainer, { marginRight: `2%` }]}>
+						<TextBold style={yesNoText}>{i18n._(t `Yes`)}</TextBold>
 					</TouchableOpacity>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
-						<TextBold style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</TextBold>
+					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[yesNoContainer, { marginLeft: `2%` }]}>
+						<TextBold style={yesNoText}>{i18n._(t `No`)}</TextBold>
 					</TouchableOpacity>
-					<View style={recentInsulinStyles.filler}/>
 				</View>
-			</View>);
+			</LinearGradient>);
     };
 }
-const recentInsulinStyles = StyleSheet.create({
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
     container: {
         ...infoStyles.margin,
-        backgroundColor: `rgba(118, 82, 255, 0.5)`,
         borderRadius: 5,
     },
-    titleContainer: {
-        flex: 1,
-        justifyContent: `center`,
-        alignItems: `center`,
-        marginTop: `4%`,
-        marginBottom: `4%`,
-    },
-    recommended: {
+    title: {
+        fontFamily: `Poppins-Bold`,
         ...infoStyles.label,
-    },
-    takenInsulinContainer: {
-        flex: 1,
-        justifyContent: `center`,
-        alignItems: `center`,
-        marginTop: `2%`,
-    },
-    takenInsulin: {
-        ...infoStyles.label,
-        fontSize: Dimensions.get(`screen`).width / 27,
+        fontSize: width / 24,
+        lineHeight: width / 16,
         textAlign: `center`,
+        paddingHorizontal: width / 13,
+        marginTop: width / 32,
     },
     buttonContainer: {
         flex: 1,
         flexDirection: `row`,
-        justifyContent: `space-evenly`,
-        marginTop: `4%`,
-        marginBottom: `5%`,
+        justifyContent: `center`,
+        marginVertical: width / 26,
     },
     yesNoContainer: {
         flex: 1,
-        borderColor: `white`,
-        borderRadius: 100,
+        maxWidth: width / 4,
+        backgroundColor: colors.teal,
+        borderColor: colors.teal,
+        borderRadius: 50,
         borderWidth: 2,
-        paddingHorizontal: `2%`,
-        paddingVertical: `1%`,
     },
     yesNoText: {
         textAlign: `center`,
-        paddingTop: `1%`,
-        paddingBottom: `1%`,
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
-    },
-    filler: {
-        flex: 1,
+        paddingVertical: width / 43,
+        color: colors.darkBlue,
+        fontSize: width / 25,
+        lineHeight: width / 16,
+        fontFamily: `Poppins-Bold`,
     },
 });

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

@@ -82,16 +82,15 @@ export default class RecommendationModal extends React.Component<IModalProps, IM
 export declare const stylesModal: {
     modalStyle: {
         margin: number;
+        backgroundColor: string;
     };
     container: {
         flex: number;
-        backgroundColor: string;
         justifyContent: "center";
         paddingHorizontal: string;
     };
     containerAcceptButton: {
         flex: number;
-        backgroundColor: string;
         justifyContent: "flex-start";
     };
     titleContainer: {

package/dist/src/components/RecommendationModal.js

@@ -4,7 +4,7 @@ import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -150,23 +150,24 @@ const textFontSize = width / 20;
 const titleFontSize = width / 13;
 /** @internal */
 export const stylesModal = StyleSheet.create({
-    modalStyle: { margin: 0 },
+    modalStyle: {
+        margin: 0,
+        backgroundColor: colors.darkBlue,
+    },
     container: {
         flex: 4,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         justifyContent: `center`,
         paddingHorizontal: `4%`,
     },
     containerAcceptButton: {
         flex: 1,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         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: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    buttonText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
     addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
@@ -175,22 +176,26 @@ export const stylesModal = StyleSheet.create({
         marginTop: `5%`,
         borderRadius: height / 80,
         borderWidth: height / 300,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
     suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
     textCenter: { textAlign: `center` },
-    recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
+    recommendEatingText: {
+        color: colors.dustyBlue,
+        fontSize: recommendEatingFontSize,
+        textAlign: `center`,
+    },
     carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
     addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-    affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
     negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -212,7 +217,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,

package/dist/src/components/RecommendedCarbs.js

@@ -1,9 +1,10 @@
 import { t } from "@lingui/macro";
 import React from "react";
 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 { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { CarbohydrateLimitError } from "../utils/RecommendationError";
 import Icon from "./Icon";
 import { infoStyles } from "./InfoBars";
@@ -89,8 +90,8 @@ 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 color={BORDER_COLOUR_GREY}/>
+        return (<>
+				<LineSeparator color={colors.fadeBlue}/>
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
 						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
@@ -106,29 +107,29 @@ export default class RecommendedCarbs extends React.Component {
 					<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: BORDER_COLOUR_TEAL }}>
+								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: colors.teal }}>
 									{shownCarbs}
 								</TextBold>
 							</View>
 							<View style={[calculationStyles.unitContainer]}>
 								<View style={calculationStyles.editIconContainer}>
-									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
+									<EditIcon />
 								</View>
-								<TextRegular style={{ ...calculationStyles.units, color: BORDER_COLOUR_TEAL }}>
+								<TextRegular style={{ ...calculationStyles.units, color: colors.teal }}>
 									{i18n._(t `grams`)}
 								</TextRegular>
 							</View>
 						</TouchableOpacity>
 					</View>
 				</View>
-				<LineSeparator color={BORDER_COLOUR_TEAL}/>
+				<LineSeparator color={colors.fadeBlue}/>
 				{this.renderRow({
                 label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
                 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.
@@ -137,7 +138,7 @@ 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%` }]}>
+        return (<View style={calculationStyles.borderContainer}>
 				<View style={calculationStyles.rowContainer}>
 					<TextBold style={calculationStyles.rowLabel}>{row.label}</TextBold>
 				</View>
@@ -161,7 +162,7 @@ export default class RecommendedCarbs extends React.Component {
      */
     render() {
         const carbs = Number(this.props.recommendedCarbs);
-        return (<React.Fragment>
+        return (<>
 				<View style={calculationStyles.foodTitleContainer}>
 					<TextBold style={infoStyles.label}>{i18n._(t `Food`)}</TextBold>
 					<TextRegular style={calculationStyles.foodUnitsLabel}>
@@ -174,9 +175,10 @@ export default class RecommendedCarbs extends React.Component {
                 units: i18n._(t `grams`),
             }, RecommendedCarbsTestIds.EnteredCarbs)}
 				{!isNaN(carbs) && carbs > 0 ? this.renderRecommendedCarbs() : null}
-			</React.Fragment>);
+			</>);
     }
 }
+const { width } = Dimensions.get(`screen`);
 const calculationStyles = StyleSheet.create({
     borderContainer: {
         ...infoStyles.borderContainer,
@@ -191,7 +193,7 @@ const calculationStyles = StyleSheet.create({
     },
     foodUnitsLabel: {
         ...infoStyles.units,
-        color: `rgba(160, 180, 240, 1)`,
+        color: colors.fadeBlue,
         paddingLeft: `1%`,
     },
     rowContainer: {
@@ -199,7 +201,7 @@ const calculationStyles = StyleSheet.create({
     },
     rowLabel: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
+        fontSize: width / 25,
     },
     enteredContainer: {
         flex: 3,
@@ -207,7 +209,7 @@ const calculationStyles = StyleSheet.create({
     },
     entered: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 23,
+        fontSize: width / 23,
     },
     valueUnitContainer: {
         ...infoStyles.valueUnitContainer,
@@ -225,21 +227,15 @@ const calculationStyles = StyleSheet.create({
         ...infoStyles.units,
     },
     editIconContainer: {
-        justifyContent: `flex-end`,
-        paddingRight: `20%`,
-        flexDirection: `row`,
-    },
-    editIcon: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 30,
+        paddingLeft: `20%`,
     },
     recommendedContainer: {
         flex: 7,
         flexDirection: `row`,
     },
     recommendedLabel: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 25,
+        color: colors.teal,
+        fontSize: width / 25,
         alignSelf: `center`,
     },
     removeRecommended: {
@@ -248,8 +244,8 @@ const calculationStyles = StyleSheet.create({
         marginTop: `1%`,
     },
     removeRecommendedIcon: {
-        color: BORDER_COLOUR_TEAL,
-        fontSize: Dimensions.get(`screen`).width / 20,
+        color: colors.teal,
+        fontSize: width / 20,
         paddingBottom: `0.5%`,
     },
 });

package/dist/src/components/RecommendedInsulin.js

@@ -1,14 +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 { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
+import EditIcon from "../assets/icons/Edit";
 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 TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -102,72 +102,81 @@ 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`;
-        return (<React.Fragment>
+        const { container, editText, title, recommendedContainer, valueContainer, value, units, editButton } = styles;
+        return (<>
 				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
-					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
-						<View style={recommendedInsulinStyles.recommendedTextContainer}>
-							<TextBold style={recommendedInsulinStyles.recommendedText}>
-								{i18n._(t `Recommended amount of insulin`)}
-							</TextBold>
-						</View>
-						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
-							<View style={recommendedInsulinStyles.valueContainer}>
-								<TextBold style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
+					<LinearGradient style={container} colors={[colors.purple, colors.blue]} useAngle={true} angle={315}>
+						<TextBold style={title}>
+							{i18n._(t `Recommended amount of rapid-acting insulin for immidiate injection based on forecasted glucose`)}
+						</TextBold>
+						<View style={recommendedContainer}>
+							<View style={valueContainer}>
+								<TextBold style={value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
 									{shownInsulin}
 								</TextBold>
-								<TextRegular style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</TextRegular>
+								<TextRegular style={units}>{i18n._(t `Units`)}</TextRegular>
+							</View>
+							<View testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon} style={editButton}>
+								<EditIcon />
+								<TextRegular style={editText}>{i18n._(t `Edit`)}</TextRegular>
 							</View>
-							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon}/>
 						</View>
 					</LinearGradient>
 				</TouchableOpacity>
+
 				<InvisibleNumberInput testID={RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
-			</React.Fragment>);
+			</>);
     };
 }
-const recommendedInsulinStyles = StyleSheet.create({
+const { width } = Dimensions.get(`screen`);
+const styles = StyleSheet.create({
     container: {
-        marginHorizontal: infoStyles.margin.margin,
-        marginTop: infoStyles.margin.margin,
+        marginHorizontal: width / 17,
+        marginTop: width / 35,
         borderRadius: 5,
+        paddingTop: width / 30,
     },
-    recommendedTextContainer: {
-        flex: 1,
-        alignItems: `center`,
-        marginTop: `3%`,
-    },
-    recommendedText: {
-        paddingTop: `1%`,
-        ...infoStyles.label,
+    title: {
+        fontFamily: `Poppins-Bold`,
+        fontSize: width / 28,
+        lineHeight: width / 19,
+        color: `white`,
+        textAlign: `center`,
+        paddingHorizontal: width / 12,
     },
     recommendedContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        marginLeft: `10%`,
+        marginHorizontal: width / 12,
+        alignContent: `center`,
     },
     valueContainer: {
-        flex: 1,
         flexDirection: `row`,
         justifyContent: `center`,
-        minHeight: Dimensions.get(`screen`).width / 4,
     },
     value: {
+        fontFamily: `Poppins-Bold`,
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 5,
+        fontSize: width / 6,
+        lineHeight: width / 4,
+        marginLeft: width / 15,
     },
     units: {
         alignSelf: `flex-end`,
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 28,
-        paddingBottom: `6%`,
+        fontSize: width / 28,
+        paddingBottom: `8%`,
+        marginLeft: width / 100,
+    },
+    editButton: {
+        position: `absolute`,
+        flexDirection: `row`,
+        right: width / 20,
+        top: width / 16,
     },
-    editIcon: {
+    editText: {
+        fontSize: width / 28,
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 28,
-        textAlignVertical: `center`,
-        paddingBottom: `10%`,
-        marginRight: `5%`,
+        opacity: 0.8,
+        marginLeft: width / 80,
     },
 });

package/dist/src/components/Remeasure.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Dimensions, Platform, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -81,7 +81,7 @@ export default class Remeasure extends React.Component {
                 if (slider !== null) {
                     this.slider = slider;
                 }
-            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={BORDER_COLOUR_GREY} minimumTrackTintColor={BORDER_COLOUR_TEAL} thumbTintColor={BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.teal} thumbTintColor={colors.teal} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
 			</View>);
     }
 }
@@ -99,7 +99,7 @@ const remeasureStyles = StyleSheet.create({
     },
     remeasureLabel: {
         color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
+        fontSize: Dimensions.get(`screen`).width / 28,
     },
     valueUnitContainer: {
         ...infoStyles.valueUnitContainer,
@@ -112,6 +112,7 @@ const remeasureStyles = StyleSheet.create({
     },
     unitContainer: {
         ...infoStyles.unitContainer,
+        marginRight: `7%`,
     },
     units: {
         ...infoStyles.units,

package/dist/src/components/{TransferToLogbook.d.ts → SaveButton.d.ts}

@@ -13,7 +13,7 @@ export interface IState {
  * Render a button for transferring the recommendation to a logbook entry.
  * The button has a visually distinct pressed state to signal to the user that the button was actually activated before returning to the dashboard screen.
  */
-export default class TransferToLogbook extends React.Component<IProps, IState> {
+export default class SaveButton extends React.Component<IProps, IState> {
     /** Initialise the state pressed variable with false */
     state: IState;
     /**