@hedia/recommendation-screen 2.1.33 → 2.1.34-alpha.0

package/src/components/TransferToLogbook.d.ts

@@ -1,34 +0,0 @@
-import React from "react";
-export interface IProps {
-    /** Whether or not the transfer button shall be visible on the screen. */
-    visible: boolean;
-    /** To be called when the button is pressed. */
-    transfer(): void;
-}
-export interface IState {
-    /**  Keeps track of whether the button was already pressed and thus should be displayed in the inactive visually distinct pressed state. */
-    pressed: boolean;
-}
-/**
- * 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> {
-    /** Initialise the state pressed variable with false */
-    state: IState;
-    /**
-     * 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: () => void;
-    /**
-     * Steps:
-     * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
-     * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
-     * @returns JSX element for displaying the transfer button
-     */
-    render(): JSX.Element;
-}

package/src/components/TransferToLogbook.js

@@ -1,94 +0,0 @@
-import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { t } from "@lingui/macro";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import Icon from "./Icon";
-/**
- * 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();
-        };
-    }
-    /**
-     * Steps:
-     * 1. If the visible prop is false, display an empty space to keep the correct margins in the screen.
-     * 2. Return a JSX element to display a touchable button (that is disabled when the pressed state is true)
-     * @returns JSX element for displaying the transfer button
-     */
-    render() {
-        if (!this.props.visible) {
-            return <View style={addToLogbookStyles.marginContainer}/>;
-        }
-        return (<TouchableOpacity testID={Testing.Id.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>);
-    }
-}
-const addToLogbookStyles = StyleSheet.create({
-    marginContainer: {
-        marginVertical: `3%`,
-    },
-    container: {
-        flex: 1,
-        margin: `5%`,
-    },
-    textContainer: {
-        flexDirection: `row`,
-        justifyContent: `center`,
-        borderWidth: 1,
-        borderRadius: 100,
-        marginHorizontal: `4%`,
-        paddingVertical: `4%`,
-        borderColor: `#01FFFC`,
-    },
-    transferText: {
-        color: `#01FFFC`,
-        fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
-    },
-    textContainerActive: {
-        flexDirection: `row`,
-        backgroundColor: `#01FFFC`,
-        justifyContent: `center`,
-        borderWidth: 1,
-        borderRadius: 100,
-        marginHorizontal: `4%`,
-        paddingVertical: `4%`,
-    },
-    icon: {
-        paddingTop: `1.3%`,
-        color: `#1B1F48`,
-        fontSize: Dimensions.get(`screen`).width / 22,
-        marginRight: `1%`,
-    },
-    transferTextActive: {
-        color: `#1B1F48`,
-        fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
-    },
-});

package/src/components/TwoOptionModal.d.ts

@@ -1,145 +0,0 @@
-import * as React from "react";
-export interface ITwoOptionModalProps {
-    /** The title of the modal. */
-    title: string;
-    /** The message to show in the modal. */
-    message: string;
-    /** The label of the first option. */
-    textFirstOption: string;
-    /**  The label of the second option. */
-    textSecondOption: string;
-    /** Whether or not the modal shall have a cancel button in the corner to close the modal. */
-    isCancelable?: boolean;
-    /**  If true the buttons will be displayed side-by-side. If false the buttons will be displayed on top of each other. */
-    rowAsButtonLayout: boolean;
-    /** To be called if the user taps the first option button. */
-    firstOption(): void;
-    /** To be called if the user taps the second option button. */
-    secondOption(): void;
-    /** To be called if the user taps the optionally shown close button. */
-    onClose?(): void;
-}
-/** Display a modal with two buttons for the user to choose between. */
-export default class TwoOptionModal extends React.Component<ITwoOptionModalProps> {
-    /** Compose a JSX element for displaying the modal. */
-    render(): JSX.Element;
-}
-/** @internal */
-export declare const modalStyle: {
-    container: {
-        justifyContent: "center";
-        backgroundColor: string;
-        position: "absolute";
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-    };
-    modalContainer: {
-        margin: string;
-        backgroundColor: string;
-        borderRadius: number;
-    };
-    iconWrapper: {
-        alignSelf: "flex-end";
-        marginRight: string;
-        marginTop: string;
-    };
-    icon: {
-        color: string;
-        fontSize: number;
-    };
-    textContainer: {
-        marginHorizontal: string;
-        marginBottom: string;
-        marginTop: string;
-        alignSelf: "flex-start";
-    };
-    textContainerNotCancelable: {
-        marginHorizontal: string;
-        marginVertical: string;
-        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";
-    };
-    buttonContainerRow: {
-        flexDirection: "row";
-        justifyContent: "space-around";
-        marginHorizontal: string;
-        marginVertical: string;
-    };
-    buttonContainerColumn: {
-        flexDirection: "column";
-        justifyContent: "space-around";
-        margin: string;
-    };
-    buttonRow: {
-        height: number;
-        marginTop: number;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        width: number;
-        alignSelf: "center";
-        justifyContent: "center";
-    };
-    firstButtonColumn: {
-        height: number;
-        width: number;
-        marginTop: number;
-        backgroundColor: string;
-        borderRadius: number;
-        borderWidth: number;
-        borderColor: string;
-        alignSelf: "center";
-        justifyContent: "center";
-    };
-    secondButtonColumn: {
-        alignSelf: "center";
-        justifyContent: "center";
-        height: number;
-        width: number;
-        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/src/components/TwoOptionModal.js

@@ -1,148 +0,0 @@
-import * as React from "react";
-import { Dimensions, StatusBar, StyleSheet, Text, 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";
-const { TwoOptionModalTestIds } = Testing.Id;
-/** Display a modal with two buttons for the user to choose between. */
-export default class TwoOptionModal extends React.Component {
-    /** Compose a JSX element for displaying the modal. */
-    render() {
-        const { rowAsButtonLayout, isCancelable } = this.props;
-        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}
-
-					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
-						<Text style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
-							{this.props.title}
-						</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}
-							</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}
-							</Text>
-						</TouchableOpacity>
-					</View>
-				</View>
-			</View>);
-    }
-}
-const { height, width } = Dimensions.get(`screen`);
-/** @internal */
-export const modalStyle = StyleSheet.create({
-    container: {
-        ...StyleSheet.absoluteFillObject,
-        justifyContent: `center`,
-        backgroundColor: `rgba(0, 0, 0, 0.9)`,
-    },
-    modalContainer: {
-        margin: `4%`,
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
-        borderRadius: width / 25,
-    },
-    iconWrapper: {
-        alignSelf: `flex-end`,
-        marginRight: `4%`,
-        marginTop: `3%`,
-    },
-    icon: {
-        color: BORDER_COLOUR_GREY,
-        fontSize: width / 12,
-    },
-    textContainer: {
-        marginHorizontal: `4%`,
-        marginBottom: `5%`,
-        marginTop: `2%`,
-        alignSelf: `flex-start`,
-    },
-    textContainerNotCancelable: {
-        marginHorizontal: `4%`,
-        marginVertical: `5%`,
-        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`,
-    },
-    buttonContainerRow: {
-        flexDirection: `row`,
-        justifyContent: `space-around`,
-        marginHorizontal: `4%`,
-        marginVertical: `6%`,
-    },
-    buttonContainerColumn: {
-        flexDirection: `column`,
-        justifyContent: `space-around`,
-        margin: `4%`,
-    },
-    buttonRow: {
-        ...stylesModal.okButton,
-        height: height / 16,
-        marginTop: 0,
-    },
-    firstButtonColumn: {
-        ...stylesModal.okButton,
-        height: height / 18,
-        width: width / 1.5,
-        marginTop: 0,
-        backgroundColor: BORDER_COLOUR_TEAL,
-    },
-    secondButtonColumn: {
-        alignSelf: `center`,
-        justifyContent: `center`,
-        height: height / 18,
-        width: width / 1.5,
-        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/src/components/activity/Activity.d.ts

@@ -1,26 +0,0 @@
-import { Activity as ActivityTypes, BolusCalculator } from "@hedia/types";
-import React from "react";
-import { IActivityDisplayProps } from "../../types/types";
-export interface IProps extends IActivityDisplayProps {
-    /** Details about the activity that affect the calculation */
-    activity: BolusCalculator.Types.IActivityParams;
-    /** The fraction (in the interval [0; 1]) by which the insulin recommendation is being reduced due to physical activity */
-    activityReduction: ActivityTypes.Types.ReductionType;
-}
-/**
- * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
- */
-export default class Activity extends React.Component<IProps> {
-    /**
-     * Steps:
-     * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
-     * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
-     * 3. Generate and return the JSX element to display the following on the screen:
-     * 	- Print the activity duration.
-     * 	- Display the ActivityIcon that corresponds to the type of activity.
-     * 	- Display the ActivityIntensity for the activity.
-     * 	- Print the reductionPercentage.
-     * @returns JSX Element containing all the user's physical activity details
-     */
-    render(): JSX.Element;
-}

package/src/components/activity/Activity.js

@@ -1,80 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../../locale/i18nUtils";
-import { Testing } from "../../types/enum";
-import { infoStyles } from "../InfoBars";
-import ActivityIcon from "./ActivityIcon";
-import ActivityIntensity from "./ActivityIntensity";
-/**
- * Component for displaying a summary of the entered physical activity along with the effect it has on the insulin recommendation.
- */
-export default class Activity extends React.Component {
-    /**
-     * Steps:
-     * 1. Unpack activity, activityType, activityReduction, and activityTitle from props.
-     * 2. Compute the reductionPercentage by multiplying the activityReduction prop by 100 and rounding to the nearest integer.
-     * 3. Generate and return the JSX element to display the following on the screen:
-     * 	- Print the activity duration.
-     * 	- Display the ActivityIcon that corresponds to the type of activity.
-     * 	- Display the ActivityIntensity for the activity.
-     * 	- Print the reductionPercentage.
-     * @returns JSX Element containing all the user's physical activity details
-     */
-    render() {
-        const { activity, activityType, activityReduction, activityTitle } = this.props;
-        const reductionPercentage = ((activityReduction ?? 0) * 100).toFixed(0);
-        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={Testing.Id.ActivityTestIds.ActivityReduction}>
-								{reductionPercentage}%
-							</Text>
-						</View>
-					</View>
-				</View>
-			</View>);
-    }
-}
-const activityStyles = StyleSheet.create({
-    topMargin: {
-        marginTop: `2%`,
-    },
-    botMargin: {
-        marginBottom: `2%`,
-    },
-    verticalMargin: {
-        marginBottom: `2%`,
-    },
-    infoText: {
-        color: `rgba(160, 180, 240, 1)`,
-        fontSize: Dimensions.get(`screen`).width / 24,
-    },
-    reductionPercentage: {
-        color: `white`,
-        marginTop: `2%`,
-        fontSize: Dimensions.get(`screen`).width / 18,
-        fontWeight: `bold`,
-    },
-});

package/src/components/activity/ActivityIcon.d.ts

@@ -1,22 +0,0 @@
-import { Activity } from "@hedia/types";
-import React from "react";
-import { ImageURISource } from "react-native";
-import { IActivityDisplayProps } from "../../types/types";
-/** Mapping from ActivityEnums to corresponding image resource. */
-export declare const ACTIVITY_ICONS: Record<Activity.Enums.ActivityEnum, ImageURISource>;
-/** Component used to displat the user's physical activity type icon */
-export default class ActivityIcon extends React.Component<IActivityDisplayProps> {
-    /**
-     * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
-     */
-    getActivityIcon: () => ImageURISource;
-    /**
-     * Steps:
-     * 1. Unpack activityType and activityTitle from props.
-     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
-     * @returns A JSX element including the following:
-     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
-     * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
-     */
-    render(): JSX.Element | null;
-}

package/src/components/activity/ActivityIcon.js

@@ -1,58 +0,0 @@
-import { Activity } from "@hedia/types";
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, Image, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../../locale/i18nUtils";
-const { Other } = Activity.Enums.ActivityEnum;
-/** Mapping from ActivityEnums to corresponding image resource. */
-export const ACTIVITY_ICONS = {
-    Run: require(`../../assets/activity/Runner.png`),
-    Walk: require(`../../assets/activity/Walk.png`),
-    Cycling: require(`../../assets/activity/Cyclist.png`),
-    Swim: require(`../../assets/activity/Swimmer.png`),
-    Other: require(`../../assets/activity/Other.png`),
-};
-/** Component used to displat the user's physical activity type icon */
-export default class ActivityIcon extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
-         */
-        this.getActivityIcon = () => {
-            return ACTIVITY_ICONS[this.props.activityType ?? Other];
-        };
-    }
-    /**
-     * Steps:
-     * 1. Unpack activityType and activityTitle from props.
-     * 2. Create an accessibility label string by appending ‘_activity’ to the enum label corresponding to the activityType prop.
-     * @returns A JSX element including the following:
-     * 1. An image component with the generated accessibility label displaying the icon from getActivityIcon().
-     * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
-     */
-    render() {
-        const { activityType, activityTitle } = this.props;
-        const label = `${Activity.Enums.ActivityEnum[activityType ?? Other]}_activity`;
-        return (<View style={activityIconStyles.container}>
-				<Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} accessibilityLabel={label}/>
-				<Text style={activityIconStyles.activityTitle}>{activityTitle || i18n._(t `Untitled Activity`)}</Text>
-			</View>);
-    }
-}
-const activityIconStyles = StyleSheet.create({
-    container: {
-        flex: 1,
-        flexDirection: `row`,
-        alignItems: `center`,
-        marginTop: `1%`,
-    },
-    activityIcon: {
-        resizeMode: `contain`,
-        height: Dimensions.get(`screen`).width / 16,
-    },
-    activityTitle: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
-    },
-});

package/src/components/activity/ActivityIntensity.d.ts

@@ -1,16 +0,0 @@
-import { BolusCalculator } from "@hedia/types";
-import React from "react";
-export interface IProps {
-    /** - Indicates the intensity of the activity. */
-    activityIntensity: BolusCalculator.Types.IActivityParams["activityIntensity"];
-}
-/** Component used to display the users's physical activity intensity on its corresponding background color */
-export default class ActivityIntensity extends React.Component<IProps> {
-    /**
-     * Steps:
-     * 1. Set intensity to the activityIntensity prop.
-     * 2. Set the style variable to the style that correspond to the intensity.
-     * @returns JSX element that displays the intensity of the user’s activity along with the associated color coding
-     */
-    render: () => JSX.Element;
-}

package/src/components/activity/ActivityIntensity.js

@@ -1,59 +0,0 @@
-import { Activity } from "@hedia/types";
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { ActivityIntensityTranslations } from "../../utils/Translations";
-import { infoStyles } from "../InfoBars";
-/** Component used to display the users's physical activity intensity on its corresponding background color */
-export default class ActivityIntensity extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Steps:
-         * 1. Set intensity to the activityIntensity prop.
-         * 2. Set the style variable to the style that correspond to the intensity.
-         * @returns JSX element that displays the intensity of the user’s activity along with the associated color coding
-         */
-        this.render = () => {
-            const intensity = this.props.activityIntensity;
-            const style = activityIntensityStyles[intensity];
-            return (<View style={[infoStyles.margin, activityIntensityStyles.row]}>
-				<View style={activityIntensityStyles.intensityContainer}>
-					<View style={[activityIntensityStyles.intensityTextContainer, style]}>
-						<Text style={activityIntensityStyles.bold}>{ActivityIntensityTranslations[intensity]()}</Text>
-					</View>
-				</View>
-				<View style={activityIntensityStyles.intensityContainerOffset}/>
-			</View>);
-        };
-    }
-}
-const activityIntensityStyles = StyleSheet.create({
-    row: {
-        flexDirection: `row`,
-    },
-    intensityTextContainer: {
-        alignItems: `center`,
-        justifyContent: `center`,
-        padding: `5%`,
-        borderRadius: 5,
-    },
-    [Activity.Enums.ActivityIntensity.light]: {
-        backgroundColor: `#A5D871`,
-    },
-    [Activity.Enums.ActivityIntensity.moderate]: {
-        backgroundColor: `#F9BD5A`,
-    },
-    [Activity.Enums.ActivityIntensity.hard]: {
-        backgroundColor: `#EC5466`,
-    },
-    intensityContainer: {
-        flex: 5,
-    },
-    intensityContainerOffset: {
-        flex: 16,
-    },
-    bold: {
-        fontWeight: `bold`,
-        fontSize: Dimensions.get(`screen`).width / 30,
-    },
-});