@hedia/recommendation-screen 2.1.42 → 2.1.43-alpha.0

package/dist/src/components/RecommendedInsulin.js

@@ -1,7 +1,7 @@
 import { BolusCalculator } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Alert, Dimensions, Platform, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Alert, Dimensions, Platform, StyleSheet, TouchableOpacity, View } from "react-native";
 import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
@@ -10,95 +10,114 @@ 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";
 const { RecommendedInsulinTestIds } = Testing.Id;
 const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
 /** Input field for displaying the entered amount of insulin (which defaults to HDA’s recommendation) and allowing the user to edit it. */
 export default class RecommendedInsulin extends React.Component {
-    constructor() {
-        super(...arguments);
-        /** Initialise the state partialInput variable with undefined */
-        this.state = {
-            partialInput: undefined,
-        };
-        /**
-         * Handle what should happen when the InsulinRecommendation component has been pressed.
-         * Uses the InvisibleNumberInput child component to enable the user to input the amount of insulin that hey are taking.
-         *
-         * Steps:
-         * 1. Call the callbackInput() member method.
-         */
-        this.handleOnPress = () => {
-            this.callbackInput?.();
-        };
-        /**
-         * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
-         *
-         * Steps:
-         * 1. Assign a new local variable, replacedZero, with the value of the insulin argument string
-         * except for the first character if insulin is longer than 1 character and starts with a '0' but doesn’t start with ‘0.’.
-         * Otherwise set it to insulin. This would be better handled by converting it to a number: replacedZero = Number(insulin);
-         * 2. Save replacedZero to the partialInput state variable.
-         * 3. Return replacedZero
-         * @param insulin  The contents of the input field.
-         * @returns The partially cleaned input.
-         */
-        this.updatePartially = (insulin) => {
-            const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
-            this.setState({
-                partialInput: replacedZero,
-            });
-            return replacedZero;
-        };
-        /**
-         * Handle what happens when input in the InvisibleNumberInput child component is completed.
-         *
-         * Steps:
-         * 1. Get the rounded insulin amount using the value argument and the injectionMethod prop as arguments for the Utils.roundValue() function.
-         * 2. Get the adjusted safety insulin limit (due to activity) by multiplying the activity reduction factor (which is 1 minus the activityReduction prop) with the SAFETY_INSULIN_LIMIT constant.
-         * 3. If the rounded value exceeds the adjusted safety threshold:
-         * 	- Call the updatePartially() method with the adjusted safety threshold to set the insulin amount to the capped value.
-         * 	- Return an Alert with a message about the insulin limit.
-         * 4. Call the updatePartially() method with the rounded value to set the entered insulin value.
-         * 5. Call the updateRecommendedInsulin callback function prop with rounded as the argument to report back the updated insulin amount to the parent RecommendationScreen component.
-         * @param value The numerical value of the input field at completion.
-         */
-        this.handleUpdatedInsulin = (value) => {
-            const rounded = Utils.roundValue(value, this.props.injectionMethod);
-            // https://hedia.atlassian.net/browse/HDA-795
-            const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
-            if (rounded > limited) {
-                this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
-                this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
-                return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
-                    {
-                        text: i18n._(t `OK`),
-                    },
-                ]);
-            }
-            this.updatePartially(`${rounded}`);
-            this.props.updateRecommendedInsulin(rounded);
-        };
-        /**
-         * Render a JSX element to display the insulin input field with the current insulin amount value
-         * and using an InvisibleNumberInput component to enable input when the insulin amount is tapped.
-         */
-        this.render = () => {
-            const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
-            const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
-            return (<React.Fragment>
+    /** Initialise the state partialInput variable with undefined */
+    state = {
+        partialInput: undefined,
+    };
+    /**
+     *  Function taking no arguments and returning no value.
+     *  Will be bound to the function that activates input for InvisibleNumberInput when that component has been mounted.
+     */
+    callbackInput;
+    /**
+     * Called immediately after updating occurs. Not called for the initial render.
+     * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
+     *
+     * Steps:
+     * 1. If the value of the enteredInsulin prop was changed, set the partialInput state variable to the new value.
+     * @param prevProps The previous component props
+     */
+    componentDidUpdate(prevProps) {
+        const { enteredInsulin } = this.props;
+        if (prevProps.enteredInsulin !== enteredInsulin) {
+            this.setState({ partialInput: enteredInsulin?.toString() });
+        }
+    }
+    /**
+     * Handle what should happen when the InsulinRecommendation component has been pressed.
+     * Uses the InvisibleNumberInput child component to enable the user to input the amount of insulin that hey are taking.
+     *
+     * Steps:
+     * 1. Call the callbackInput() member method.
+     */
+    handleOnPress = () => {
+        this.callbackInput?.();
+    };
+    /**
+     * Passed to the InvisibleNumberInput child component as a callback function to be called every time the content of the input field changes.
+     *
+     * Steps:
+     * 1. Assign a new local variable, replacedZero, with the value of the insulin argument string
+     * except for the first character if insulin is longer than 1 character and starts with a '0' but doesn’t start with ‘0.’.
+     * Otherwise set it to insulin. This would be better handled by converting it to a number: replacedZero = Number(insulin);
+     * 2. Save replacedZero to the partialInput state variable.
+     * 3. Return replacedZero
+     * @param insulin  The contents of the input field.
+     * @returns The partially cleaned input.
+     */
+    updatePartially = (insulin) => {
+        const replacedZero = insulin.length > 1 && insulin.startsWith(`0`) && !insulin.startsWith(`0.`) ? insulin.substring(1) : insulin;
+        this.setState({
+            partialInput: replacedZero,
+        });
+        return replacedZero;
+    };
+    /**
+     * Handle what happens when input in the InvisibleNumberInput child component is completed.
+     *
+     * Steps:
+     * 1. Get the rounded insulin amount using the value argument and the injectionMethod prop as arguments for the Utils.roundValue() function.
+     * 2. Get the adjusted safety insulin limit (due to activity) by multiplying the activity reduction factor (which is 1 minus the activityReduction prop) with the SAFETY_INSULIN_LIMIT constant.
+     * 3. If the rounded value exceeds the adjusted safety threshold:
+     * 	- Call the updatePartially() method with the adjusted safety threshold to set the insulin amount to the capped value.
+     * 	- Return an Alert with a message about the insulin limit.
+     * 4. Call the updatePartially() method with the rounded value to set the entered insulin value.
+     * 5. Call the updateRecommendedInsulin callback function prop with rounded as the argument to report back the updated insulin amount to the parent RecommendationScreen component.
+     * @param value The numerical value of the input field at completion.
+     */
+    handleUpdatedInsulin = (value) => {
+        const rounded = Utils.roundValue(value, this.props.injectionMethod);
+        // https://hedia.atlassian.net/browse/HDA-795
+        const limited = (1 - (this.props.activityReduction ?? 0)) * SAFETY_INSULIN_LIMIT;
+        if (rounded > limited) {
+            this.setState({ partialInput: this.props.insulinRecommendation?.toString() ?? null });
+            this.props.updateRecommendedInsulin(this.props.insulinRecommendation);
+            return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                {
+                    text: i18n._(t `OK`),
+                },
+            ]);
+        }
+        this.updatePartially(`${rounded}`);
+        this.props.updateRecommendedInsulin(rounded);
+    };
+    /**
+     * Render a JSX element to display the insulin input field with the current insulin amount value
+     * 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>
 				<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}>
-							<Text style={recommendedInsulinStyles.recommendedText}>
+							<TextRegular style={recommendedInsulinStyles.recommendedText}>
 								{i18n._(t `Recommended amount of insulin`)}
-							</Text>
+							</TextRegular>
 						</View>
 						<View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
 							<View style={recommendedInsulinStyles.valueContainer}>
-								<Text style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
+								<TextBold style={recommendedInsulinStyles.value} testID={RecommendedInsulinTestIds.ShownInsulinText}>
 									{shownInsulin}
-								</Text>
-								<Text style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</Text>
+								</TextBold>
+								<TextRegular style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</TextRegular>
 							</View>
 							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`} testID={RecommendedInsulinTestIds.EditRecommendedInsulinIcon}/>
 						</View>
@@ -106,22 +125,7 @@ export default class RecommendedInsulin extends React.Component {
 				</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>);
-        };
-    }
-    /**
-     * Called immediately after updating occurs. Not called for the initial render.
-     * The snapshot is only present if getSnapshotBeforeUpdate is present and returns non-null.
-     *
-     * Steps:
-     * 1. If the value of the enteredInsulin prop was changed, set the partialInput state variable to the new value.
-     * @param prevProps The previous component props
-     */
-    componentDidUpdate(prevProps) {
-        const { enteredInsulin } = this.props;
-        if (prevProps.enteredInsulin !== enteredInsulin) {
-            this.setState({ partialInput: enteredInsulin?.toString() });
-        }
-    }
+    };
 }
 const recommendedInsulinStyles = StyleSheet.create({
     container: {
@@ -151,7 +155,6 @@ const recommendedInsulinStyles = StyleSheet.create({
     },
     value: {
         color: `white`,
-        fontWeight: `bold`,
         fontSize: Dimensions.get(`screen`).width / 5,
     },
     units: {

package/dist/src/components/Remeasure.js

@@ -1,38 +1,20 @@
 import { t } from "@lingui/macro";
 import Slider from "@react-native-community/slider";
 import React from "react";
-import { Dimensions, Platform, StyleSheet, Text, View } from "react-native";
+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 { infoStyles } from "./InfoBars";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 /**
  * The Remeasure component has a slider child component that the user can drag to change
  * when they will get a reminder notification about measuring their BGL again.
  */
 export default class Remeasure extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Steps:
-         * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
-         * 2. Call the onSliderChange prop callback function with the limited value as argument.
-         * @param remeasureTime The value of the remeasurement slider.
-         */
-        this.handleSliderChange = (remeasureTime) => {
-            const limited = this.limitTime(remeasureTime);
-            this.props.onSliderChange(limited);
-        };
-        /**
-         * Steps:
-         * 1.Use Math.min() and Math.max() to clamp remeasureTime in the range 0 to 6 and return the result.
-         * @param remeasureTime The value of the remeasurement slider.
-         * @returns The limited remeasurement time in hours
-         */
-        this.limitTime = (remeasureTime) => {
-            return Math.min(Math.max(0, remeasureTime), 6);
-        };
-    }
+    /** For holding a reference to the slider component so its initial value can be set (only one time) when the Remeasure component has been mounted. */
+    slider;
     /**
      * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
      *
@@ -49,6 +31,25 @@ export default class Remeasure extends React.Component {
             value: this.props.remeasureTime,
         });
     }
+    /**
+     * Steps:
+     * 1. Use limitTime() to limit/clamp the value of remeasureTime in the range 0 to 6.
+     * 2. Call the onSliderChange prop callback function with the limited value as argument.
+     * @param remeasureTime The value of the remeasurement slider.
+     */
+    handleSliderChange = (remeasureTime) => {
+        const limited = this.limitTime(remeasureTime);
+        this.props.onSliderChange(limited);
+    };
+    /**
+     * Steps:
+     * 1.Use Math.min() and Math.max() to clamp remeasureTime in the range 0 to 6 and return the result.
+     * @param remeasureTime The value of the remeasurement slider.
+     * @returns The limited remeasurement time in hours
+     */
+    limitTime = (remeasureTime) => {
+        return Math.min(Math.max(0, remeasureTime), 6);
+    };
     /**
      * Compose a JSX element for displaying the currently selected remeasurement time along
      * with a horizontal slider for changing it in increments of 0.5 hours in the range 0 to 6.
@@ -61,24 +62,26 @@ export default class Remeasure extends React.Component {
         return (<View style={remeasureStyles.container}>
 				<View style={remeasureStyles.borderContainer}>
 					<View style={remeasureStyles.remeasureContainer}>
-						<Text style={remeasureStyles.remeasureLabel}>{i18n._(t `Remind me to remeasure in`)}</Text>
+						<TextBold style={remeasureStyles.remeasureLabel}>
+							{i18n._(t `Remind me to remeasure in`)}
+						</TextBold>
 					</View>
 					<View style={remeasureStyles.valueUnitContainer}>
 						<View style={valueContainer}>
-							<Text style={remeasureStyles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
+							<TextRegular style={remeasureStyles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
 								{measure ? limited : i18n._(t `OFF`)}
-							</Text>
+							</TextRegular>
 						</View>
 						{measure ? (<View style={remeasureStyles.unitContainer}>
-								<Text style={remeasureStyles.units}>{i18n._(t `hours`)}</Text>
+								<TextRegular style={remeasureStyles.units}>{i18n._(t `hours`)}</TextRegular>
 							</View>) : null}
 					</View>
 				</View>
 				<Slider ref={(slider) => {
-            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}/>
+                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}/>
 			</View>);
     }
 }
@@ -97,7 +100,6 @@ const remeasureStyles = StyleSheet.create({
     remeasureLabel: {
         color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
     },
     valueUnitContainer: {
         ...infoStyles.valueUnitContainer,

package/dist/src/components/TransferToLogbook.js

@@ -1,34 +1,32 @@
 import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { t } from "@lingui/macro";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import Icon from "./Icon";
+import TextBold from "./text/TextBold";
 /**
  * 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 {
-    constructor() {
-        super(...arguments);
-        /** Initialise the state pressed variable with false */
-        this.state = {
-            pressed: false,
-        };
-        /**
-         * Handle what happens when the button is pressed.
-         *
-         * Steps:
-         * 1. Toggle the pressed state to the opposite of its current value.
-         * 2. Call the transfer prop callback function.
-         */
-        this.handlePress = () => {
-            this.setState({
-                pressed: !this.state.pressed,
-            });
-            this.props.transfer();
-        };
-    }
+    /** Initialise the state pressed variable with false */
+    state = {
+        pressed: false,
+    };
+    /**
+     * Handle what happens when the button is pressed.
+     *
+     * Steps:
+     * 1. Toggle the pressed state to the opposite of its current value.
+     * 2. Call the transfer prop callback function.
+     */
+    handlePress = () => {
+        this.setState({
+            pressed: !this.state.pressed,
+        });
+        this.props.transfer();
+    };
     /**
      * Steps:
      * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
@@ -41,10 +39,12 @@ export default class TransferToLogbook extends React.Component {
         }
         return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container}>
 				{!this.state.pressed ? (<View style={addToLogbookStyles.textContainer}>
-						<Text style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</Text>
+						<TextBold style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</TextBold>
 					</View>) : (<View style={addToLogbookStyles.textContainerActive}>
 						<Icon style={addToLogbookStyles.icon} iconIdentifier={`Feather/check`}/>
-						<Text style={addToLogbookStyles.transferTextActive}>{i18n._(t `Transferred to logbook`)}</Text>
+						<TextBold style={addToLogbookStyles.transferTextActive}>
+							{i18n._(t `Transferred to logbook`)}
+						</TextBold>
 					</View>)}
 			</TouchableOpacity>);
     }
@@ -69,7 +69,6 @@ const addToLogbookStyles = StyleSheet.create({
     transferText: {
         color: `#01FFFC`,
         fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
     },
     textContainerActive: {
         flexDirection: `row`,
@@ -89,6 +88,5 @@ const addToLogbookStyles = StyleSheet.create({
     transferTextActive: {
         color: `#1B1F48`,
         fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
     },
 });

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

@@ -61,23 +61,18 @@ export declare const modalStyle: {
         alignSelf: "flex-start";
     };
     titleRowLayout: {
-        fontFamily: string;
         color: string;
         fontSize: number;
-        fontWeight: "bold";
         textAlign: "center";
         marginBottom: string;
     };
     titleColumnLayout: {
-        fontFamily: string;
         color: string;
         fontSize: number;
-        fontWeight: "bold";
         textAlign: "center";
         marginBottom: string;
     };
     message: {
-        fontFamily: string;
         color: string;
         fontSize: number;
         textAlign: "center";
@@ -122,24 +117,19 @@ export declare const modalStyle: {
         marginTop: string;
     };
     textButtonRow: {
-        fontFamily: string;
         textAlign: "center";
         fontSize: number;
         color: string;
     };
     textFirstButtonColumn: {
-        fontFamily: string;
         textAlign: "center";
         fontSize: number;
         paddingHorizontal: number;
         color: string;
-        fontWeight: "700";
     };
     textSecondButtonColumn: {
-        fontFamily: string;
         textAlign: "center";
         fontSize: number;
         color: string;
-        fontWeight: "bold";
     };
 };

package/dist/src/components/TwoOptionModal.js

@@ -1,9 +1,11 @@
 import * as React from "react";
-import { Dimensions, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { Dimensions, StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
 import { Testing } from "../types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
 import Icon from "./Icon";
 import { stylesModal } from "./RecommendationModal";
+import TextBold from "./text/TextBold";
+import TextRegular from "./text/TextRegular";
 const { TwoOptionModalTestIds } = Testing.Id;
 /** Display a modal with two buttons for the user to choose between. */
 export default class TwoOptionModal extends React.Component {
@@ -18,21 +20,21 @@ export default class TwoOptionModal extends React.Component {
 						</TouchableOpacity>) : null}
 
 					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
-						<Text style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
+						<TextBold style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
 							{this.props.title}
-						</Text>
-						<Text style={modalStyle.message}>{this.props.message}</Text>
+						</TextBold>
+						<TextRegular style={modalStyle.message}>{this.props.message}</TextRegular>
 					</View>
 					<View style={rowAsButtonLayout ? modalStyle.buttonContainerRow : modalStyle.buttonContainerColumn}>
 						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}>
-							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}>
+							<TextBold style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}>
 								{this.props.textFirstOption}
-							</Text>
+							</TextBold>
 						</TouchableOpacity>
 						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}>
-							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}>
+							<TextBold style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}>
 								{this.props.textSecondOption}
-							</Text>
+							</TextBold>
 						</TouchableOpacity>
 					</View>
 				</View>
@@ -73,23 +75,18 @@ export const modalStyle = StyleSheet.create({
         alignSelf: `flex-start`,
     },
     titleRowLayout: {
-        fontFamily: `Roboto-Regular`,
         color: `rgba(139, 144, 196, 1)`,
         fontSize: width / 17,
-        fontWeight: `bold`,
         textAlign: `center`,
         marginBottom: `10%`,
     },
     titleColumnLayout: {
-        fontFamily: `Roboto-Regular`,
         color: `rgba(139, 144, 196, 1)`,
         fontSize: width / 17,
-        fontWeight: `bold`,
         textAlign: `center`,
         marginBottom: `5%`,
     },
     message: {
-        fontFamily: `Roboto-Regular`,
         color: `rgba(245, 242, 242, 1)`,
         fontSize: width / 22,
         textAlign: `center`,
@@ -125,24 +122,19 @@ export const modalStyle = StyleSheet.create({
         marginTop: `2%`,
     },
     textButtonRow: {
-        fontFamily: `Roboto-Regular`,
         textAlign: `center`,
         fontSize: width / 24,
         color: `white`,
     },
     textFirstButtonColumn: {
-        fontFamily: `Roboto-Regular`,
         textAlign: `center`,
         fontSize: width / 22,
         paddingHorizontal: 15,
         color: `#1B1F48`,
-        fontWeight: `700`,
     },
     textSecondButtonColumn: {
-        fontFamily: `Roboto-Regular`,
         textAlign: `center`,
         fontSize: width / 26,
         color: BORDER_COLOUR_TEAL,
-        fontWeight: `bold`,
     },
 });

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

@@ -1,9 +1,11 @@
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
 import { Testing } from "../../types/enum";
 import { infoStyles } from "../InfoBars";
+import TextBold from "../text/TextBold";
+import TextRegular from "../text/TextRegular";
 import ActivityIcon from "./ActivityIcon";
 import ActivityIntensity from "./ActivityIntensity";
 /**
@@ -29,36 +31,37 @@ export default class Activity extends React.Component {
 					<View style={infoStyles.border}>
 						<View style={infoStyles.borderContainer}>
 							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{i18n._(t `Activity`)}</Text>
+								<TextRegular style={infoStyles.label}>{i18n._(t `Activity`)}</TextRegular>
 							</View>
 							<View style={infoStyles.valueUnitContainer}>
 								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
+									<TextRegular style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
 										{activity.activityDuration}
-									</Text>
+									</TextRegular>
 								</View>
 								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units}>{i18n._(t `min`)}</Text>
+									<TextRegular style={infoStyles.units}>{i18n._(t `min`)}</TextRegular>
 								</View>
 							</View>
 						</View>
 						<ActivityIcon activityType={activityType} activityTitle={activityTitle}/>
 						<ActivityIntensity activityIntensity={activity.activityIntensity}/>
 						<View style={[infoStyles.borderContainer, activityStyles.topMargin]}>
-							<Text style={activityStyles.infoText}>
+							<TextRegular style={activityStyles.infoText}>
 								{i18n._(t `Based on the selected activity your insulin recommendation is reduced by:`)}
-							</Text>
+							</TextRegular>
 						</View>
 						<View style={[infoStyles.borderContainer, activityStyles.verticalMargin]}>
-							<Text style={activityStyles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
+							<TextBold style={activityStyles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
 								{reductionPercentage}%
-							</Text>
+							</TextBold>
 						</View>
 					</View>
 				</View>
 			</View>);
     }
 }
+const { width } = Dimensions.get(`screen`);
 const activityStyles = StyleSheet.create({
     topMargin: {
         marginTop: `2%`,
@@ -71,12 +74,11 @@ const activityStyles = StyleSheet.create({
     },
     infoText: {
         color: `rgba(160, 180, 240, 1)`,
-        fontSize: Dimensions.get(`screen`).width / 24,
+        fontSize: width / 24,
     },
     reductionPercentage: {
         color: `white`,
         marginTop: `2%`,
-        fontSize: Dimensions.get(`screen`).width / 18,
-        fontWeight: `bold`,
+        fontSize: width / 18,
     },
 });