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

package/src/components/InfoBars.d.ts

@@ -1,103 +0,0 @@
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
-import React from "react";
-import { Testing } from "../types/enum";
-export interface IProps {
-    /** The display label that describes the value to the user. */
-    label: string;
-    /** The value to display. */
-    value: string | null;
-    /** Unit label to print after the value. */
-    unit: string | BloodGlucoseUnit | BloodKetonesUnit | null;
-    /** If true then a dash character (“-”) will be printed in place of the value if the value is null. */
-    showNullAsDash: boolean;
-    /**  optional object that contains as properties a valueID and a unitID */
-    testID?: {
-        valueID: Testing.Id.InfoBarTestIds.Value;
-        unitID: Testing.Id.InfoBarTestIds.Unit;
-    };
-}
-/** A standard panel to display some data that the user entered. */
-export default class InfoBars extends React.Component<IProps> {
-    /**
-     * Determine the value to be displayed in the infobar.
-     *
-     * Steps:
-     * 1. Unpack showNullAsDash, unit, and value from props.
-     * 2. Set noDecimal to be true if unit is BloodGlucoseUnit.MG_DL or if unit is BloodKetonesUnit.MG_DL.
-     * 3. Set nullPlaceholder to be ‘-' if noDecimal is true and to '-.-’ otherwise.
-     * 4. Return value if it is not null or undefined. Otherwise, if showNullAsDash is true then return nullPlaceholder, otherwise return the string '0'.
-     * @returns The string to display as the value in the infobar.
-     */
-    displayValue: () => string;
-    /**
-     * Determine the unit string to be displayed in the infobar.
-     *
-     * Steps:
-     * 1. Unpack unit from props.
-     * 2. Return unit if unit is “units” or the result of calling formatUnit() with unit as argument otherwise.
-     * @returns The string to display as the unit in the infobar
-     */
-    displayUnit: () => string | null;
-    /**
-     * @returns JSX element to display a card with the entered value.
-     */
-    render(): JSX.Element;
-}
-/** @internal */
-export declare const infoStyles: {
-    container: {
-        flex: number;
-    };
-    margin: {
-        flex: number;
-        margin: string;
-        marginBottom: number;
-    };
-    border: {
-        borderWidth: number;
-        borderColor: string;
-        borderRadius: number;
-        paddingVertical: string;
-    };
-    borderContainer: {
-        flex: number;
-        flexDirection: "row";
-        justifyContent: "space-between";
-        paddingHorizontal: string;
-    };
-    labelContainer: {
-        flex: number;
-        justifyContent: "center";
-    };
-    label: {
-        color: string;
-        fontSize: number;
-        fontWeight: "bold";
-    };
-    valueUnitContainer: {
-        flex: number;
-        justifyContent: "flex-end";
-        flexDirection: "row";
-    };
-    valueContainer: {
-        flex: number;
-        justifyContent: "flex-end";
-    };
-    value: {
-        color: string;
-        fontSize: number;
-        fontWeight: "bold";
-        textAlign: "right";
-    };
-    unitContainer: {
-        flex: number;
-        justifyContent: "flex-end";
-        paddingBottom: string;
-    };
-    units: {
-        color: string;
-        fontSize: number;
-        textAlign: "left";
-        paddingLeft: string;
-    };
-};

package/src/components/InfoBars.js

@@ -1,129 +0,0 @@
-import { BloodGlucoseUnit, BloodKetonesUnit } from "@hedia/types";
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { BORDER_COLOUR_GREY } from "../utils/Constants";
-import { Utils } from "../utils/Utils";
-/** A standard panel to display some data that the user entered. */
-export default class InfoBars extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * Determine the value to be displayed in the infobar.
-         *
-         * Steps:
-         * 1. Unpack showNullAsDash, unit, and value from props.
-         * 2. Set noDecimal to be true if unit is BloodGlucoseUnit.MG_DL or if unit is BloodKetonesUnit.MG_DL.
-         * 3. Set nullPlaceholder to be ‘-' if noDecimal is true and to '-.-’ otherwise.
-         * 4. Return value if it is not null or undefined. Otherwise, if showNullAsDash is true then return nullPlaceholder, otherwise return the string '0'.
-         * @returns The string to display as the value in the infobar.
-         */
-        this.displayValue = () => {
-            const { showNullAsDash, unit, value } = this.props;
-            const noDecimal = unit === BloodGlucoseUnit.MG_DL || unit === BloodKetonesUnit.MG_DL;
-            const nullPlaceholder = noDecimal || !unit ? `-` : `-.-`;
-            return value ?? (showNullAsDash ? nullPlaceholder : `0`);
-        };
-        /**
-         * Determine the unit string to be displayed in the infobar.
-         *
-         * Steps:
-         * 1. Unpack unit from props.
-         * 2. Return unit if unit is “units” or the result of calling formatUnit() with unit as argument otherwise.
-         * @returns The string to display as the unit in the infobar
-         */
-        this.displayUnit = () => {
-            const { unit } = this.props;
-            if (!unit) {
-                return null;
-            }
-            return unit === i18n._(t `units`) ? unit : Utils.formatUnit(unit);
-        };
-    }
-    /**
-     * @returns JSX element to display a card with the entered value.
-     */
-    render() {
-        const { testID } = this.props;
-        return (<View style={infoStyles.container}>
-				<View style={infoStyles.margin}>
-					<View style={infoStyles.border}>
-						<View style={infoStyles.borderContainer}>
-							<View style={infoStyles.labelContainer}>
-								<Text style={infoStyles.label}>{this.props.label}</Text>
-							</View>
-							<View style={infoStyles.valueUnitContainer}>
-								<View style={infoStyles.valueContainer}>
-									<Text style={infoStyles.value} testID={testID?.valueID}>
-										{this.displayValue()}
-									</Text>
-								</View>
-								<View style={infoStyles.unitContainer}>
-									<Text style={infoStyles.units} testID={testID?.unitID}>
-										{this.displayUnit()}
-									</Text>
-								</View>
-							</View>
-						</View>
-					</View>
-				</View>
-			</View>);
-    }
-}
-/** @internal */
-export const infoStyles = StyleSheet.create({
-    container: { flex: 1 },
-    margin: {
-        flex: 1,
-        margin: `3%`,
-        marginBottom: 0,
-    },
-    border: {
-        borderWidth: 2,
-        borderColor: BORDER_COLOUR_GREY,
-        borderRadius: 5,
-        paddingVertical: `1%`,
-    },
-    borderContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        justifyContent: `space-between`,
-        paddingHorizontal: `3%`,
-    },
-    labelContainer: {
-        flex: 7,
-        justifyContent: `center`,
-    },
-    label: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 22,
-        fontWeight: `bold`,
-    },
-    valueUnitContainer: {
-        flex: 6.5,
-        justifyContent: `flex-end`,
-        flexDirection: `row`,
-    },
-    valueContainer: {
-        flex: 5,
-        justifyContent: `flex-end`,
-    },
-    value: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 15,
-        fontWeight: `bold`,
-        textAlign: `right`,
-    },
-    unitContainer: {
-        flex: 3,
-        justifyContent: `flex-end`,
-        paddingBottom: `3%`,
-    },
-    units: {
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 30,
-        textAlign: `left`,
-        paddingLeft: `5%`,
-    },
-});

package/src/components/InvisibleNumberInput.d.ts

@@ -1,89 +0,0 @@
-import React from "react";
-import { TextInput } from "react-native";
-export interface IProps {
-    /** The initial value to put in the input field. */
-    startValue?: string;
-    /** The precision with which the content of the input field may be displayed */
-    decimalPlaces: number;
-    /** Whether or not the clean method should be used on the content every time it is changed */
-    cleanPartialInput: boolean;
-    /** Whether or not negative values can be entered. */
-    negativeAllowed: boolean;
-    /** Max length of the content in the input field. */
-    maxLength?: number;
-    /** Test id used for component testing */
-    testID: string;
-    /** Callback function taking a function as argument - For passing a reference for the input field’s to the parent component. */
-    visible(toggle: () => void): void;
-    /** Callback function taking a number argument - To be called when the user finishes editing the invisible text field with the final numerical value as argument. */
-    onEnd?(value: number): void;
-    /** Callback function taking a string as input and not returning anything - To be called every time the content in the input field changes. */
-    partialInput?(value: string): void;
-}
-export interface IState {
-    /** For storing the value of the text input so it is available for handling in onEndEdit() when editing the text input ends. */
-    value: string;
-}
-/**
- * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
- * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
- * its focus() method from the parent component in order to activate the input field and show the keyboard.
- * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
- * This function is then passed to the parent by giving it as the argument for a callback function named visible.
- */
-export default class InvisibleNumberInput extends React.Component<IProps, IState> {
-    /** For holding a reference to the TextInput component so it can be focused when the InvisibleNumberInput component has been mounted. */
-    textInput?: TextInput;
-    /** Initialise the state value variable with `0` */
-    state: IState;
-    /**
-     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-     * Perform various initialisation steps:
-     * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
-     * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
-     * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
-     * 	- Return the value from calling the focus() method on the input field.
-     */
-    componentDidMount(): void;
-    /**
-     * Sanitise a user-entered value by removing invalid characters
-     *
-     * Steps:
-     * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
-     * 	- Replace any commas with periods
-     * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
-     * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
-     * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
-     * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
-
-     * @param text The string input to clean up
-     * @returns A string with the cleaned text.
-     */
-    cleanInput: (text: string) => string;
-    /**
-     * Handle what happens when the text in the input field is being changed.
-     * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
-     *
-     * Steps:
-     * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
-     *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
-     * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
-     * 3. Set the value state of the component to replacedSeparator.
-     * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
-     * @param text The updated text in the input field
-     */
-    handleOnChangeText: (text: string) => void;
-    /**
-     * Handle what should happen when the user finish editing the input field.
-     *
-     * Steps:
-     * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
-     * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
-     */
-    onEndEdit: () => void;
-    /**
-     * @returns JSX element to display a TextInput field with the component’s value state as its value
-     * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
-     */
-    render(): JSX.Element;
-}

package/src/components/InvisibleNumberInput.js

@@ -1,122 +0,0 @@
-import React from "react";
-import { Platform, StyleSheet, TextInput } from "react-native";
-/**
- * InvisibleNumberInput is used to enable numerical input by the user without displaying a traditional input field on the screen.
- * Since the input field is made invisible and thus can’t be tapped directly by the user we need to be able to call
- * its focus() method from the parent component in order to activate the input field and show the keyboard.
- * We do this by defining a function that calls the input field’s focus() method inside the InvisibleNumberInput component when it has been mounted.
- * This function is then passed to the parent by giving it as the argument for a callback function named visible.
- */
-export default class InvisibleNumberInput extends React.Component {
-    constructor() {
-        super(...arguments);
-        /** Initialise the state value variable with `0` */
-        this.state = {
-            value: `0`,
-        };
-        /**
-         * Sanitise a user-entered value by removing invalid characters
-         *
-         * Steps:
-         * 1. Use regular expressions to make the following manipulations to the text argument in the defined order and save the result to a local string variable named replaced.
-         * 	- Replace any commas with periods
-         * 	- Remove any characters that comes after two groups of zero or more digits separated by a period.
-         * 2. Define a function named round that rounds a given string that contains a number to have the amount of decimals given by the decimalPlaces prop. Return the result as a string.
-         * 3. If the value of the replaced variable from step 1 is not a NaN (not a number) when converted to a Number type then use the round function defined in step 2 on replaced and return the result
-         * 4. (If the NaN-check from step 2 didn’t fail) return the string '0'.
-    
-         * @param text The string input to clean up
-         * @returns A string with the cleaned text.
-         */
-        this.cleanInput = (text) => {
-            const replaced = text.replace(/\,/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
-            const round = (value) => {
-                const temp = Number(value) * Math.pow(10, this.props.decimalPlaces);
-                const rounded = Math.round(temp) / Math.pow(10, this.props.decimalPlaces);
-                return rounded.toFixed(this.props.decimalPlaces);
-            };
-            if (!isNaN(Number(replaced))) {
-                return round(replaced);
-            }
-            return `0`;
-        };
-        /**
-         * Handle what happens when the text in the input field is being changed.
-         * That includes cleaning the text a little and then saving the value and potentially calling a callback function.
-         *
-         * Steps:
-         * 1. If the cleanPartialInput prop is true, use the cleanInput() method to to clean the content of the text argument and save it to a variable named cleaned.
-         *    Otherwise just replace any commas in the text argument with periods and save the result to the same variable.
-         * 2. Remove repeated periods from the text in the cleaned variable and save the the result in a new variable named replacedSeparator.
-         * 3. Set the value state of the component to replacedSeparator.
-         * 4. If the partialInput callback function prop is defined, call it with replacedSeparator as argument.
-         * @param text The updated text in the input field
-         */
-        this.handleOnChangeText = (text) => {
-            const cleaned = this.props.cleanPartialInput ? this.cleanInput(text) : text.replace(/\,/g, `.`);
-            let replacedSeparator = cleaned.replace(/\.+/g, `.`).replace(/(\d*\.\d*).*/, `$1`);
-            if (!this.props.negativeAllowed) {
-                replacedSeparator = replacedSeparator.replace(/[^0-9.]/g, ``);
-            }
-            this.setState({
-                value: `${replacedSeparator}`,
-            });
-            this.props.partialInput?.(`${replacedSeparator}`);
-        };
-        /**
-         * Handle what should happen when the user finish editing the input field.
-         *
-         * Steps:
-         * 1. Use the cleanInput() method on the value state and store the result in a variable named cleaned.
-         * 2. If the onEnd prop is not null, then convert the value of cleaned to a number and use it as an argument to call the onEnd prop function.
-         */
-        this.onEndEdit = () => {
-            const cleaned = this.cleanInput(this.state.value);
-            this.props.onEnd?.(Number(cleaned));
-        };
-    }
-    /**
-     * Called immediately after a component is mounted. Setting state here will trigger re-rendering.
-     * Perform various initialisation steps:
-     * 1. Set the value state of the component to the startValue prop (or to '0' if it is undefined)
-     * 2. Call the visible callback function using an anonymous function as argument. The anonymous function shall do the following:
-     * 	- Set the value state of the InvisibleNumberInput component to the startValue prop (or to '0' if it is undefined)
-     * 	- Return the value from calling the focus() method on the input field.
-     */
-    componentDidMount() {
-        this.setState({
-            value: this.props.startValue ?? `0`,
-        });
-        this.props.visible(() => {
-            this.setState({
-                value: this.props.startValue ?? `0`,
-            });
-            return this.textInput?.focus();
-        });
-    }
-    /**
-     * @returns JSX element to display a TextInput field with the component’s value state as its value
-     * and the handleOnChangeText() and onEndEdit() methods as the textInput’s onChangeText and onEndEditing respectively.
-     */
-    render() {
-        const { testID } = this.props;
-        return (<TextInput testID={testID} accessibilityLabel={`InvisibleNumberInput`} value={`${this.state.value}`} ref={(textInput) => {
-            if (textInput !== null) {
-                this.textInput = textInput;
-            }
-        }} style={inputStyles.input} keyboardType={`numeric`} returnKeyType={`done`} onChangeText={this.handleOnChangeText} onEndEditing={this.onEndEdit} maxLength={this.props.maxLength} selectTextOnFocus/>);
-    }
-}
-const inputStyles = StyleSheet.create({
-    input: {
-        ...Platform.select({
-            ios: {
-                width: 0,
-                height: 0,
-            },
-            android: {
-                opacity: 0,
-            },
-        }),
-    },
-});

package/src/components/LimitationMessage.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-export interface ILimitationMessageProps {
-    /** The message to display to the user. */
-    limitationMessage: string | null;
-    /** Callback function taking no arguments and giving no return value - To be called when the user presses the “OK” button. */
-    onPressNextButton(): void;
-}
-/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
-export default class LimitationMessage extends React.Component<ILimitationMessageProps> {
-    /**
-     * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
-     */
-    render: () => JSX.Element;
-}

package/src/components/LimitationMessage.js

@@ -1,31 +0,0 @@
-import { t } from "@lingui/macro";
-import * as React from "react";
-import { Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import { stylesModal } from "./RecommendationModal";
-/** Display a message on the screen to inform the user that their insulin recommendation was limited. */
-export default class LimitationMessage extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         * @returns JSX element for displaying a dialog with the limitationMessage and an “OK” button that calls the onPressNextButton prop callback when tapped.
-         */
-        this.render = () => {
-            const { limitationMessage } = this.props;
-            return (<React.Fragment>
-				<View style={stylesModal.container}>
-					<View style={stylesModal.titleContainer}>
-						<Text style={stylesModal.textTittleMessage}>{i18n._(t `Attention`)}</Text>
-					</View>
-					<Text style={stylesModal.textMessage}>{limitationMessage}</Text>
-				</View>
-				<View style={stylesModal.containerAcceptButton}>
-					<TouchableOpacity testID={Testing.Id.LimitationMessageTestIds.OkButton} accessibilityLabel="nextButtonModal" style={stylesModal.okButton} onPress={this.props.onPressNextButton}>
-						<Text style={stylesModal.buttonText}>{i18n._(t `OK`)}</Text>
-					</TouchableOpacity>
-				</View>
-			</React.Fragment>);
-        };
-    }
-}

package/src/components/LineSeparator.d.ts

@@ -1,10 +0,0 @@
-import React from "react";
-export interface IProps {
-    /** The color that the line should have. */
-    color: string;
-}
-/** Display a horizontal line for visually separating elements in the user interface. */
-export default class LineSeparator extends React.Component<IProps> {
-    /** @return JSX element for displaying a thin horizontal line in the given color. */
-    render(): JSX.Element;
-}

package/src/components/LineSeparator.js

@@ -1,18 +0,0 @@
-import React from "react";
-import { StyleSheet, View } from "react-native";
-/** Display a horizontal line for visually separating elements in the user interface. */
-export default class LineSeparator extends React.Component {
-    /** @return JSX element for displaying a thin horizontal line in the given color. */
-    render() {
-        return (<React.Fragment>
-				<View style={[lineSeparatorStyles.lineStyle, { borderBottomColor: this.props.color }]}/>
-			</React.Fragment>);
-    }
-}
-const lineSeparatorStyles = StyleSheet.create({
-    lineStyle: {
-        marginHorizontal: `3%`,
-        marginVertical: `2%`,
-        borderBottomWidth: 1,
-    },
-});

package/src/components/RecentInsulin.d.ts

@@ -1,17 +0,0 @@
-import React from "react";
-export interface IProps {
-    /** Callback function taking no arguments and returning no value - To be called if the user presses the “Yes” button. */
-    onRecentInsulinYes(): void;
-    /**  Callback function taking no arguments and returning no value - To be called if the user presses the “No” button. */
-    onRecentInsulinNo(): void;
-}
-/** Display a card that prompts the user to recall if they injected insulin recently. */
-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.
-     * 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: () => JSX.Element;
-}

package/src/components/RecentInsulin.js

@@ -1,94 +0,0 @@
-import { t } from "@lingui/macro";
-import React from "react";
-import { Dimensions, StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { i18n } from "../locale/i18nUtils";
-import { Testing } from "../types/enum";
-import { infoStyles } from "./InfoBars";
-/** Display a card that prompts the user to recall if they injected insulin recently. */
-export default class RecentInsulin extends React.Component {
-    constructor() {
-        super(...arguments);
-        /**
-         *
-         * @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.
-         * 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.
-         */
-        this.render = () => {
-            return (<View style={recentInsulinStyles.container}>
-				<View style={recentInsulinStyles.titleContainer}>
-					<Text style={recentInsulinStyles.recommended}>{i18n._(t `Recommended amount of insulin`)}</Text>
-				</View>
-				<View style={recentInsulinStyles.takenInsulinContainer}>
-					<Text style={recentInsulinStyles.takenInsulin}>
-						{i18n._(t `Have you taken insulin within the last 4 hours?`)}
-					</Text>
-				</View>
-				<View style={recentInsulinStyles.buttonContainer}>
-					<View style={recentInsulinStyles.filler}/>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.Yes} onPress={this.props.onRecentInsulinYes} style={[recentInsulinStyles.yesNoContainer, { marginRight: `2%` }]}>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `Yes`)}</Text>
-					</TouchableOpacity>
-					<TouchableOpacity testID={Testing.Id.RecentInsulinTestIds.No} onPress={this.props.onRecentInsulinNo} style={[recentInsulinStyles.yesNoContainer, { marginLeft: `2%` }]}>
-						<Text style={recentInsulinStyles.yesNoText}>{i18n._(t `No`)}</Text>
-					</TouchableOpacity>
-					<View style={recentInsulinStyles.filler}/>
-				</View>
-			</View>);
-        };
-    }
-}
-const recentInsulinStyles = 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: {
-        ...infoStyles.label,
-    },
-    takenInsulinContainer: {
-        flex: 1,
-        justifyContent: `center`,
-        alignItems: `center`,
-        marginTop: `2%`,
-    },
-    takenInsulin: {
-        ...infoStyles.label,
-        fontSize: Dimensions.get(`screen`).width / 27,
-        textAlign: `center`,
-    },
-    buttonContainer: {
-        flex: 1,
-        flexDirection: `row`,
-        justifyContent: `space-evenly`,
-        marginTop: `4%`,
-        marginBottom: `5%`,
-    },
-    yesNoContainer: {
-        flex: 1,
-        borderColor: `white`,
-        borderRadius: 100,
-        borderWidth: 2,
-        paddingHorizontal: `2%`,
-        paddingVertical: `1%`,
-    },
-    yesNoText: {
-        textAlign: `center`,
-        paddingTop: `1%`,
-        paddingBottom: `1%`,
-        color: `white`,
-        fontSize: Dimensions.get(`screen`).width / 25,
-        fontWeight: `bold`,
-    },
-    filler: {
-        flex: 1,
-    },
-});