@hedia/recommendation-screen 2.1.3-beta.6 → 2.1.3

package/src/components/RecommendedInsulin.js

@@ -1,22 +1,17 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const types_1 = require("@hedia/types");
-const macro_1 = require("@lingui/macro");
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
-const i18nUtils_1 = require("../locale/i18nUtils");
-const enum_1 = require("../types/enum");
-const AttentionMessages_1 = require("../utils/AttentionMessages");
-const Utils_1 = require("../utils/Utils");
-const Icon_1 = __importDefault(require("./Icon"));
-const InfoBars_1 = require("./InfoBars");
-const InvisibleNumberInput_1 = __importDefault(require("./InvisibleNumberInput"));
-const SAFETY_INSULIN_LIMIT = types_1.BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
-class RecommendedInsulin extends react_1.default.Component {
+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 LinearGradient from "react-native-linear-gradient";
+import { i18n } from "../locale/i18nUtils";
+import { RecommendedInsulinTestIds } from "../types/enum";
+import { Messages } from "../utils/AttentionMessages";
+import { Utils } from "../utils/Utils";
+import Icon from "./Icon";
+import { infoStyles } from "./InfoBars";
+import InvisibleNumberInput from "./InvisibleNumberInput";
+const SAFETY_INSULIN_LIMIT = BolusCalculator.Constants.SAFETY_INSULIN_LIMIT;
+export default class RecommendedInsulin extends React.Component {
     constructor(props) {
         super(props);
         this.handleOnPress = () => {
@@ -30,15 +25,15 @@ class RecommendedInsulin extends react_1.default.Component {
             return replacedZero;
         };
         this.handleUpdatedInsulin = (value) => {
-            const rounded = Utils_1.Utils.roundValue(value, this.props.injectionMethod);
+            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 react_native_1.Alert.alert(i18nUtils_1.i18n._(macro_1.t `Attention`), AttentionMessages_1.Messages.InsulinInputWasLimited(this.props.activityReduction), [
+                return Alert.alert(i18n._(t `Attention`), Messages.InsulinInputWasLimited(this.props.activityReduction), [
                     {
-                        text: i18nUtils_1.i18n._(macro_1.t `OK`),
+                        text: i18n._(t `OK`),
                     },
                 ]);
             }
@@ -46,29 +41,29 @@ class RecommendedInsulin extends react_1.default.Component {
             this.props.updateRecommendedInsulin(rounded);
         };
         this.render = () => {
-            const paddingBottom = react_native_1.Platform.OS === `ios` ? `3%` : `1%`;
+            const paddingBottom = Platform.OS === `ios` ? `3%` : `1%`;
             const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
-            return (<react_1.default.Fragment>
-				<react_native_1.TouchableOpacity accessibilityLabel="editRecommendedInsulin" testID={enum_1.RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
-					<react_native_linear_gradient_1.default style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
-						<react_native_1.View style={recommendedInsulinStyles.recommendedTextContainer}>
-							<react_native_1.Text style={recommendedInsulinStyles.recommendedText}>
-								{i18nUtils_1.i18n._(macro_1.t `Recommended amount of insulin`)}
-							</react_native_1.Text>
-						</react_native_1.View>
-						<react_native_1.View style={[recommendedInsulinStyles.recommendedContainer, { paddingBottom }]}>
-							<react_native_1.View style={recommendedInsulinStyles.valueContainer}>
-								<react_native_1.Text style={recommendedInsulinStyles.value} testID={enum_1.RecommendedInsulinTestIds.ShownInsulinText}>
+            return (<React.Fragment>
+				<TouchableOpacity accessibilityLabel="editRecommendedInsulin" 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}>
+								{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}
-								</react_native_1.Text>
-								<react_native_1.Text style={recommendedInsulinStyles.units}>{i18nUtils_1.i18n._(macro_1.t `Units`)}</react_native_1.Text>
-							</react_native_1.View>
-							<Icon_1.default style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
-						</react_native_1.View>
-					</react_native_linear_gradient_1.default>
-				</react_native_1.TouchableOpacity>
-				<InvisibleNumberInput_1.default testID={enum_1.RecommendedInsulinTestIds.InvisibleInsulinInput} decimalPlaces={3} negativeAllowed={false} cleanPartialInput={false} partialInput={this.updatePartially} onEnd={this.handleUpdatedInsulin} visible={(visible) => (this.callbackInput = visible)} startValue={`${shownInsulin}`}/>
-			</react_1.default.Fragment>);
+								</Text>
+								<Text style={recommendedInsulinStyles.units}>{i18n._(t `Units`)}</Text>
+							</View>
+							<Icon style={recommendedInsulinStyles.editIcon} iconIdentifier={`Feather/edit`}/>
+						</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>);
         };
         this.state = {
             partialInput: undefined,
@@ -81,11 +76,10 @@ class RecommendedInsulin extends react_1.default.Component {
         }
     }
 }
-exports.default = RecommendedInsulin;
-const recommendedInsulinStyles = react_native_1.StyleSheet.create({
+const recommendedInsulinStyles = StyleSheet.create({
     container: {
-        marginHorizontal: InfoBars_1.infoStyles.margin.margin,
-        marginTop: InfoBars_1.infoStyles.margin.margin,
+        marginHorizontal: infoStyles.margin.margin,
+        marginTop: infoStyles.margin.margin,
         borderRadius: 5,
     },
     recommendedTextContainer: {
@@ -95,7 +89,7 @@ const recommendedInsulinStyles = react_native_1.StyleSheet.create({
     },
     recommendedText: {
         paddingTop: `1%`,
-        ...InfoBars_1.infoStyles.label,
+        ...infoStyles.label,
     },
     recommendedContainer: {
         flex: 1,
@@ -106,22 +100,22 @@ const recommendedInsulinStyles = react_native_1.StyleSheet.create({
         flex: 1,
         flexDirection: `row`,
         justifyContent: `center`,
-        minHeight: react_native_1.Dimensions.get(`screen`).width / 4,
+        minHeight: Dimensions.get(`screen`).width / 4,
     },
     value: {
         color: `white`,
         fontWeight: `bold`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 5,
+        fontSize: Dimensions.get(`screen`).width / 5,
     },
     units: {
         alignSelf: `flex-end`,
         color: `white`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 28,
+        fontSize: Dimensions.get(`screen`).width / 28,
         paddingBottom: `6%`,
     },
     editIcon: {
         color: `white`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 28,
+        fontSize: Dimensions.get(`screen`).width / 28,
         textAlignVertical: `center`,
         paddingBottom: `10%`,
         marginRight: `5%`,

package/src/components/Remeasure.js

@@ -1,17 +1,12 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const macro_1 = require("@lingui/macro");
-const slider_1 = __importDefault(require("@react-native-community/slider"));
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const i18nUtils_1 = require("../locale/i18nUtils");
-const enum_1 = require("../types/enum");
-const Constants_1 = require("../utils/Constants");
-const InfoBars_1 = require("./InfoBars");
-class Remeasure extends react_1.default.Component {
+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 { i18n } from "../locale/i18nUtils";
+import { RemeasureTestIds } from "../types/enum";
+import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { infoStyles } from "./InfoBars";
+export default class Remeasure extends React.Component {
     constructor() {
         super(...arguments);
         this.handleSliderChange = (remeasureTime) => {
@@ -30,38 +25,37 @@ class Remeasure extends react_1.default.Component {
     render() {
         const measure = this.props.remeasureTime > 0;
         const limited = this.limitTime(this.props.remeasureTime);
-        const marginHorizontal = react_native_1.Platform.OS === `ios` ? `3%` : `0%`;
+        const marginHorizontal = Platform.OS === `ios` ? `3%` : `0%`;
         const valueContainer = measure ? remeasureStyles.valueContainer : variantStyles.centeredValueContainer;
-        return (<react_native_1.View style={remeasureStyles.container}>
-				<react_native_1.View style={remeasureStyles.borderContainer}>
-					<react_native_1.View style={remeasureStyles.remeasureContainer}>
-						<react_native_1.Text style={remeasureStyles.remeasureLabel}>{i18nUtils_1.i18n._(macro_1.t `Remind me to remeasure in`)}</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={remeasureStyles.valueUnitContainer}>
-						<react_native_1.View style={valueContainer}>
-							<react_native_1.Text style={remeasureStyles.value}>{measure ? limited : i18nUtils_1.i18n._(macro_1.t `OFF`)}</react_native_1.Text>
-						</react_native_1.View>
-						{measure ? (<react_native_1.View style={remeasureStyles.unitContainer}>
-								<react_native_1.Text style={remeasureStyles.units}>{i18nUtils_1.i18n._(macro_1.t `hours`)}</react_native_1.Text>
-							</react_native_1.View>) : null}
-					</react_native_1.View>
-				</react_native_1.View>
-				<slider_1.default ref={(slider) => {
+        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>
+					</View>
+					<View style={remeasureStyles.valueUnitContainer}>
+						<View style={valueContainer}>
+							<Text style={remeasureStyles.value}>{measure ? limited : i18n._(t `OFF`)}</Text>
+						</View>
+						{measure ? (<View style={remeasureStyles.unitContainer}>
+								<Text style={remeasureStyles.units}>{i18n._(t `hours`)}</Text>
+							</View>) : null}
+					</View>
+				</View>
+				<Slider ref={(slider) => {
             if (slider !== null) {
                 this.slider = slider;
             }
-        }} testID={enum_1.RemeasureTestIds.RemeasureSlider} accessibilityLabel="remeasureSlider" maximumTrackTintColor={Constants_1.BORDER_COLOUR_GREY} minimumTrackTintColor={Constants_1.BORDER_COLOUR_TEAL} thumbTintColor={Constants_1.BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
-			</react_native_1.View>);
+        }} testID={RemeasureTestIds.RemeasureSlider} accessibilityLabel="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>);
     }
 }
-exports.default = Remeasure;
-const remeasureStyles = react_native_1.StyleSheet.create({
+const remeasureStyles = StyleSheet.create({
     container: {
         flexDirection: `column`,
         padding: `3%`,
     },
     borderContainer: {
-        ...InfoBars_1.infoStyles.borderContainer,
+        ...infoStyles.borderContainer,
         alignItems: `center`,
     },
     remeasureContainer: {
@@ -69,30 +63,30 @@ const remeasureStyles = react_native_1.StyleSheet.create({
     },
     remeasureLabel: {
         color: `white`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 25,
+        fontSize: Dimensions.get(`screen`).width / 25,
         fontWeight: `bold`,
     },
     valueUnitContainer: {
-        ...InfoBars_1.infoStyles.valueUnitContainer,
+        ...infoStyles.valueUnitContainer,
     },
     valueContainer: {
-        ...InfoBars_1.infoStyles.valueContainer,
+        ...infoStyles.valueContainer,
     },
     value: {
-        ...InfoBars_1.infoStyles.value,
+        ...infoStyles.value,
     },
     unitContainer: {
-        ...InfoBars_1.infoStyles.unitContainer,
+        ...infoStyles.unitContainer,
     },
     units: {
-        ...InfoBars_1.infoStyles.units,
+        ...infoStyles.units,
     },
     sliderStyle: {
         marginTop: `3%`,
         marginBottom: `2%`,
     },
 });
-const variantStyles = react_native_1.StyleSheet.create({
+const variantStyles = StyleSheet.create({
     centeredValueContainer: {
         ...remeasureStyles.valueContainer,
         alignItems: `center`,

package/src/components/TransferToLogbook.js

@@ -1,15 +1,10 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const macro_1 = require("@lingui/macro");
-const i18nUtils_1 = require("../locale/i18nUtils");
-const enum_1 = require("../types/enum");
-const Icon_1 = __importDefault(require("./Icon"));
-class TransferToLogbook extends react_1.default.Component {
+import React from "react";
+import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { t } from "@lingui/macro";
+import { i18n } from "../locale/i18nUtils";
+import { TransferToLogbookTestIds } from "../types/enum";
+import Icon from "./Icon";
+export default class TransferToLogbook extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
@@ -24,20 +19,19 @@ class TransferToLogbook extends react_1.default.Component {
     }
     render() {
         if (!this.props.visible) {
-            return <react_native_1.View style={addToLogbookStyles.marginContainer}/>;
+            return <View style={addToLogbookStyles.marginContainer}/>;
         }
-        return (<react_native_1.TouchableOpacity testID={enum_1.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container} accessibilityLabel="transferToLogbook">
-				{!this.state.pressed ? (<react_native_1.View style={addToLogbookStyles.textContainer}>
-						<react_native_1.Text style={addToLogbookStyles.transferText}>{i18nUtils_1.i18n._(macro_1.t `Transfer to logbook`)}</react_native_1.Text>
-					</react_native_1.View>) : (<react_native_1.View style={addToLogbookStyles.textContainerActive}>
-						<Icon_1.default style={addToLogbookStyles.icon} iconIdentifier={`Feather/check`}/>
-						<react_native_1.Text style={addToLogbookStyles.transferTextActive}>{i18nUtils_1.i18n._(macro_1.t `Transferred to logbook`)}</react_native_1.Text>
-					</react_native_1.View>)}
-			</react_native_1.TouchableOpacity>);
+        return (<TouchableOpacity testID={TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container} accessibilityLabel="transferToLogbook">
+				{!this.state.pressed ? (<View style={addToLogbookStyles.textContainer}>
+						<Text style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</Text>
+					</View>) : (<View style={addToLogbookStyles.textContainerActive}>
+						<Icon style={addToLogbookStyles.icon} iconIdentifier={`Feather/check`}/>
+						<Text style={addToLogbookStyles.transferTextActive}>{i18n._(t `Transferred to logbook`)}</Text>
+					</View>)}
+			</TouchableOpacity>);
     }
 }
-exports.default = TransferToLogbook;
-const addToLogbookStyles = react_native_1.StyleSheet.create({
+const addToLogbookStyles = StyleSheet.create({
     marginContainer: {
         marginVertical: `3%`,
     },
@@ -56,7 +50,7 @@ const addToLogbookStyles = react_native_1.StyleSheet.create({
     },
     transferText: {
         color: `#01FFFC`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontSize: Dimensions.get(`screen`).width / 22,
         fontWeight: `bold`,
     },
     textContainerActive: {
@@ -71,12 +65,12 @@ const addToLogbookStyles = react_native_1.StyleSheet.create({
     icon: {
         paddingTop: `1.3%`,
         color: `#1B1F48`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontSize: Dimensions.get(`screen`).width / 22,
         marginRight: `1%`,
     },
     transferTextActive: {
         color: `#1B1F48`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontSize: Dimensions.get(`screen`).width / 22,
         fontWeight: `bold`,
     },
 });

package/src/components/TwoOptionModal.js

@@ -1,80 +1,54 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.modalStyle = void 0;
-const React = __importStar(require("react"));
-const react_native_1 = require("react-native");
-const enum_1 = require("../types/enum");
-const Constants_1 = require("../utils/Constants");
-const Icon_1 = __importDefault(require("./Icon"));
-const RecommendationModal_1 = require("./RecommendationModal");
-class TwoOptionModal extends React.Component {
+import * as React from "react";
+import { Dimensions, StatusBar, StyleSheet, Text, TouchableOpacity, View } from "react-native";
+import { TwoOptionModalTestIds } from "../types/enum";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import Icon from "./Icon";
+import { stylesModal } from "./RecommendationModal";
+export default class TwoOptionModal extends React.Component {
     constructor(props) {
         super(props);
     }
     render() {
         const { rowAsButtonLayout, isCancelable } = this.props;
-        return (<react_native_1.View style={exports.modalStyle.container}>
-				<react_native_1.StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
-				<react_native_1.View style={exports.modalStyle.modalContainer}>
-					{isCancelable ? (<react_native_1.TouchableOpacity onPress={this.props.onClose} testID={enum_1.TwoOptionModalTestIds.ExitButton} style={exports.modalStyle.iconWrapper}>
-							<Icon_1.default accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.modalStyle.icon}/>
-						</react_native_1.TouchableOpacity>) : null}
+        return (<View style={modalStyle.container}>
+				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
+				<View style={modalStyle.modalContainer}>
+					{isCancelable ? (<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={modalStyle.iconWrapper}>
+							<Icon accessibilityLabel="ModalExitIcon" iconIdentifier={`Ionicons/ios-close-circle-outline`} style={modalStyle.icon}/>
+						</TouchableOpacity>) : null}
 
-					<react_native_1.View style={isCancelable ? exports.modalStyle.textContainer : exports.modalStyle.textContainerNotCancelable}>
-						<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.titleRowLayout : exports.modalStyle.titleColumnLayout}>
+					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
+						<Text style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
 							{this.props.title}
-						</react_native_1.Text>
-						<react_native_1.Text style={exports.modalStyle.message}>{this.props.message}</react_native_1.Text>
-					</react_native_1.View>
-					<react_native_1.View style={rowAsButtonLayout ? exports.modalStyle.buttonContainerRow : exports.modalStyle.buttonContainerColumn}>
-						<react_native_1.TouchableOpacity testID={enum_1.TwoOptionModalTestIds.FirstOption} accessibilityLabel="firstOptionButton" onPress={this.props.firstOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.firstButtonColumn}>
-							<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.textButtonRow : exports.modalStyle.textFirstButtonColumn}>
+						</Text>
+						<Text style={modalStyle.message}>{this.props.message}</Text>
+					</View>
+					<View style={rowAsButtonLayout ? modalStyle.buttonContainerRow : modalStyle.buttonContainerColumn}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} accessibilityLabel="firstOptionButton" onPress={this.props.firstOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.firstButtonColumn}>
+							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textFirstButtonColumn}>
 								{this.props.textFirstOption}
-							</react_native_1.Text>
-						</react_native_1.TouchableOpacity>
-						<react_native_1.TouchableOpacity testID={enum_1.TwoOptionModalTestIds.SecondOption} accessibilityLabel="secondOptionButton" onPress={this.props.secondOption} style={rowAsButtonLayout ? exports.modalStyle.buttonRow : exports.modalStyle.secondButtonColumn}>
-							<react_native_1.Text style={rowAsButtonLayout ? exports.modalStyle.textButtonRow : exports.modalStyle.textSecondButtonColumn}>
+							</Text>
+						</TouchableOpacity>
+						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} accessibilityLabel="secondOptionButton" onPress={this.props.secondOption} style={rowAsButtonLayout ? modalStyle.buttonRow : modalStyle.secondButtonColumn}>
+							<Text style={rowAsButtonLayout ? modalStyle.textButtonRow : modalStyle.textSecondButtonColumn}>
 								{this.props.textSecondOption}
-							</react_native_1.Text>
-						</react_native_1.TouchableOpacity>
-					</react_native_1.View>
-				</react_native_1.View>
-			</react_native_1.View>);
+							</Text>
+						</TouchableOpacity>
+					</View>
+				</View>
+			</View>);
     }
 }
-exports.default = TwoOptionModal;
-const { height, width } = react_native_1.Dimensions.get(`screen`);
-exports.modalStyle = react_native_1.StyleSheet.create({
+const { height, width } = Dimensions.get(`screen`);
+export const modalStyle = StyleSheet.create({
     container: {
-        ...react_native_1.StyleSheet.absoluteFillObject,
+        ...StyleSheet.absoluteFillObject,
         justifyContent: `center`,
         backgroundColor: `rgba(0, 0, 0, 0.9)`,
     },
     modalContainer: {
         margin: `4%`,
-        backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
         borderRadius: width / 25,
     },
     iconWrapper: {
@@ -83,7 +57,7 @@ exports.modalStyle = react_native_1.StyleSheet.create({
         marginTop: `3%`,
     },
     icon: {
-        color: Constants_1.BORDER_COLOUR_GREY,
+        color: BORDER_COLOUR_GREY,
         fontSize: width / 12,
     },
     textContainer: {
@@ -131,16 +105,16 @@ exports.modalStyle = react_native_1.StyleSheet.create({
         margin: `4%`,
     },
     buttonRow: {
-        ...RecommendationModal_1.stylesModal.okButton,
+        ...stylesModal.okButton,
         height: height / 16,
         marginTop: 0,
     },
     firstButtonColumn: {
-        ...RecommendationModal_1.stylesModal.okButton,
+        ...stylesModal.okButton,
         height: height / 18,
         width: width / 1.5,
         marginTop: 0,
-        backgroundColor: Constants_1.BORDER_COLOUR_TEAL,
+        backgroundColor: BORDER_COLOUR_TEAL,
     },
     secondButtonColumn: {
         alignSelf: `center`,
@@ -165,7 +139,7 @@ exports.modalStyle = react_native_1.StyleSheet.create({
         fontFamily: `Roboto-Regular`,
         textAlign: `center`,
         fontSize: width / 26,
-        color: Constants_1.BORDER_COLOUR_TEAL,
+        color: BORDER_COLOUR_TEAL,
         fontWeight: `bold`,
     },
 });

package/src/components/activity/Activity.js

@@ -1,55 +1,49 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const macro_1 = require("@lingui/macro");
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const i18nUtils_1 = require("../../locale/i18nUtils");
-const enum_1 = require("../../types/enum");
-const InfoBars_1 = require("../InfoBars");
-const ActivityIcon_1 = __importDefault(require("./ActivityIcon"));
-const ActivityIntensity_1 = __importDefault(require("./ActivityIntensity"));
-class Activity extends react_1.default.Component {
+import { t } from "@lingui/macro";
+import React from "react";
+import { Dimensions, StyleSheet, Text, View } from "react-native";
+import { i18n } from "../../locale/i18nUtils";
+import { ActivityTestIds } from "../../types/enum";
+import { infoStyles } from "../InfoBars";
+import ActivityIcon from "./ActivityIcon";
+import ActivityIntensity from "./ActivityIntensity";
+export default class Activity extends React.Component {
     render() {
         const { activity, activityType, activityReduction, activityTitle } = this.props;
         const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);
-        return (<react_native_1.View style={[InfoBars_1.infoStyles.container, activityStyles.botMargin]}>
-				<react_native_1.View style={InfoBars_1.infoStyles.margin}>
-					<react_native_1.View style={InfoBars_1.infoStyles.border}>
-						<react_native_1.View style={InfoBars_1.infoStyles.borderContainer}>
-							<react_native_1.View style={InfoBars_1.infoStyles.labelContainer}>
-								<react_native_1.Text style={InfoBars_1.infoStyles.label}>{i18nUtils_1.i18n._(macro_1.t `Activity`)}</react_native_1.Text>
-							</react_native_1.View>
-							<react_native_1.View style={InfoBars_1.infoStyles.valueUnitContainer}>
-								<react_native_1.View style={InfoBars_1.infoStyles.valueContainer}>
-									<react_native_1.Text style={InfoBars_1.infoStyles.value}>{activity.activityDuration}</react_native_1.Text>
-								</react_native_1.View>
-								<react_native_1.View style={InfoBars_1.infoStyles.unitContainer}>
-									<react_native_1.Text style={InfoBars_1.infoStyles.units}>{i18nUtils_1.i18n._(macro_1.t `min`)}</react_native_1.Text>
-								</react_native_1.View>
-							</react_native_1.View>
-						</react_native_1.View>
-						<ActivityIcon_1.default activityType={activityType} activityTitle={activityTitle}/>
-						<ActivityIntensity_1.default activityIntensity={activity.activityIntensity}/>
-						<react_native_1.View style={[InfoBars_1.infoStyles.borderContainer, activityStyles.topMargin]}>
-							<react_native_1.Text style={activityStyles.infoText}>
-								{i18nUtils_1.i18n._(macro_1.t `Based on the selected activity your insulin recommendation is reduced by:`)}
-							</react_native_1.Text>
-						</react_native_1.View>
-						<react_native_1.View style={[InfoBars_1.infoStyles.borderContainer, activityStyles.verticalMargin]}>
-							<react_native_1.Text style={activityStyles.reductionPercentage} testID={enum_1.ActivityTestIds.ActivityReduction}>
+        return (<View style={[infoStyles.container, activityStyles.botMargin]}>
+				<View style={infoStyles.margin}>
+					<View style={infoStyles.border}>
+						<View style={infoStyles.borderContainer}>
+							<View style={infoStyles.labelContainer}>
+								<Text style={infoStyles.label}>{i18n._(t `Activity`)}</Text>
+							</View>
+							<View style={infoStyles.valueUnitContainer}>
+								<View style={infoStyles.valueContainer}>
+									<Text style={infoStyles.value}>{activity.activityDuration}</Text>
+								</View>
+								<View style={infoStyles.unitContainer}>
+									<Text style={infoStyles.units}>{i18n._(t `min`)}</Text>
+								</View>
+							</View>
+						</View>
+						<ActivityIcon activityType={activityType} activityTitle={activityTitle}/>
+						<ActivityIntensity activityIntensity={activity.activityIntensity}/>
+						<View style={[infoStyles.borderContainer, activityStyles.topMargin]}>
+							<Text style={activityStyles.infoText}>
+								{i18n._(t `Based on the selected activity your insulin recommendation is reduced by:`)}
+							</Text>
+						</View>
+						<View style={[infoStyles.borderContainer, activityStyles.verticalMargin]}>
+							<Text style={activityStyles.reductionPercentage} testID={ActivityTestIds.ActivityReduction}>
 								{reductionPercentage}%
-							</react_native_1.Text>
-						</react_native_1.View>
-					</react_native_1.View>
-				</react_native_1.View>
-			</react_native_1.View>);
+							</Text>
+						</View>
+					</View>
+				</View>
+			</View>);
     }
 }
-exports.default = Activity;
-const activityStyles = react_native_1.StyleSheet.create({
+const activityStyles = StyleSheet.create({
     topMargin: {
         marginTop: `2%`,
     },
@@ -61,12 +55,12 @@ const activityStyles = react_native_1.StyleSheet.create({
     },
     infoText: {
         color: `rgba(160, 180, 240, 1)`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 24,
+        fontSize: Dimensions.get(`screen`).width / 24,
     },
     reductionPercentage: {
         color: `white`,
         marginTop: `2%`,
-        fontSize: react_native_1.Dimensions.get(`screen`).width / 18,
+        fontSize: Dimensions.get(`screen`).width / 18,
         fontWeight: `bold`,
     },
 });