@hedia/recommendation-screen 1.0.5 → 1.0.7

package/src/RecommendationScreen.d.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { BGUnit, InjectionMethod, Languages, MoodEnum } from "./types/enum";
+import * as Calculator from "@hedia/recommendation-calculator";
+import { RecommendationError } from "./utils/RecommendationError";
+interface IResult {
+    suggested: number;
+    entered?: number;
+}
+export interface IRecommendationProps {
+    units: BGUnit;
+    language: Languages;
+    calculatorParams: Calculator.IRecommendationParams;
+    injectionMethod: InjectionMethod;
+    exitCallback(): void;
+    removeRecommendedCarbs(): void;
+    onRecentInsulinYes(): void;
+    transferToLogbook(carbs: IResult, insulin: IResult, reminder: number): void;
+    onError(error: RecommendationError): void;
+}
+interface IState {
+    remeasureTime: number;
+    showRecentInsulin: boolean;
+    insulinRecommendation: number;
+    activityReduction?: number;
+    carbRecommendation: number;
+    activeInsulin: number;
+    selectedMood: MoodEnum | 0;
+    enteredCarbs?: number;
+    enteredInsulin?: number;
+}
+export default class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
+    private readonly timer;
+    constructor(props: IRecommendationProps);
+    updateRemeasureTime: (remeasureTime: number) => void;
+    handleNoRecentInsulin: () => void;
+    removeCarbRecommendation: () => void;
+    handleMoodSelected: (selectedMood: IState["selectedMood"]) => void;
+    updateCarbRecommendation: (enteredCarbs: number) => void;
+    updateInsulinRecommendation: (enteredInsulin: number) => void;
+    handleTransfer: () => void;
+    render(): JSX.Element;
+}
+export {};

package/src/RecommendationScreen.jsx

@@ -0,0 +1,158 @@
+"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.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 });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const enum_1 = require("./types/enum");
+const Constants_1 = require("./utils/Constants");
+const Header_1 = __importStar(require("./components/Header"));
+const InfoBars_1 = __importStar(require("./components/InfoBars"));
+const RecentInsulin_1 = __importDefault(require("./components/RecentInsulin"));
+const RecommendedCarbs_1 = __importDefault(require("./components/RecommendedCarbs"));
+const RecommendedInsulin_1 = __importDefault(require("./components/RecommendedInsulin"));
+const Remeasure_1 = __importDefault(require("./components/Remeasure"));
+const Calculator = __importStar(require("@hedia/recommendation-calculator"));
+const react_2 = require("@lingui/react");
+const Emotion_1 = __importDefault(require("./components/Emotion"));
+const TransferToLogbook_1 = __importDefault(require("./components/TransferToLogbook"));
+const RecommendationError_1 = require("./utils/RecommendationError");
+const i18nUtils_1 = require("./locale/i18nUtils");
+const Utils_1 = require("./utils/Utils");
+// Ignoring long timer warnings
+// https://github.com/facebook/react-native/issues/12981#issuecomment-652745831
+react_native_1.YellowBox.ignoreWarnings([`Setting a timer`]);
+class RecommendationScreen extends react_1.default.Component {
+    constructor(props) {
+        super(props);
+        this.updateRemeasureTime = (remeasureTime) => {
+            this.setState({
+                remeasureTime,
+            });
+        };
+        this.handleNoRecentInsulin = () => {
+            this.setState({
+                showRecentInsulin: false,
+            });
+        };
+        this.removeCarbRecommendation = () => {
+            this.setState({
+                enteredCarbs: null,
+                carbRecommendation: null,
+            });
+            this.props.removeRecommendedCarbs();
+        };
+        this.handleMoodSelected = (selectedMood) => {
+            this.setState({
+                selectedMood,
+            });
+        };
+        this.updateCarbRecommendation = (enteredCarbs) => {
+            this.setState({
+                enteredCarbs,
+            });
+        };
+        this.updateInsulinRecommendation = (enteredInsulin) => {
+            this.setState({
+                enteredInsulin,
+            });
+        };
+        this.handleTransfer = () => {
+            // TODO: Handle Errors/Warnings
+            // 300 carbs.
+            // < 5 mmol && activity
+            // > 2, <= 3.5 mmol/L
+            this.props.transferToLogbook({
+                suggested: this.state.carbRecommendation,
+                entered: this.state.enteredCarbs,
+            }, {
+                suggested: this.state.insulinRecommendation,
+                entered: this.state.enteredInsulin,
+            }, this.state.remeasureTime);
+        };
+        i18nUtils_1.changeLanguage(props.language);
+        // Handle >= 1.1, <= 2 mmol/L (SevereHypoglycemia)
+        const { currentBGL, recentBoluses } = props?.calculatorParams;
+        if (currentBGL <= 2 && currentBGL >= 1.1) {
+            props.onError(RecommendationError_1.SevereHypoglycemiaError);
+        }
+        const { bolus, carbRecommendation, activityReduction } = Calculator.calculateRecommendation(props.calculatorParams);
+        this.state = {
+            remeasureTime: 1.5,
+            showRecentInsulin: recentBoluses?.length === 0,
+            insulinRecommendation: Utils_1.Utils.roundValue(bolus, props.injectionMethod),
+            activityReduction,
+            carbRecommendation,
+            activeInsulin: 0.0,
+            selectedMood: 0,
+        };
+        this.timer = setTimeout(() => {
+            props.onError(RecommendationError_1.TimeoutLimitError);
+        }, enum_1.Milliseconds.Minute * 15);
+    }
+    render() {
+        return (<react_2.I18nProvider language={this.props.language} i18n={i18nUtils_1.i18n}>
+				<react_native_1.ScrollView style={containerStyles.container}>
+					<Header_1.default exitCallback={this.props.exitCallback}/>
+					<InfoBars_1.default label={i18nUtils_1.i18n._("Active Insulin")} value={`${this.state.activeInsulin}`} units={i18nUtils_1.i18n._("units")} showZeroAsDash={false}/>
+					<InfoBars_1.default label={i18nUtils_1.i18n._("Blood Glucose Level")} value={`${this.props.calculatorParams.currentBGL}`} units={this.props.units} showZeroAsDash={true}/>
+					<react_native_1.View style={containerStyles.calcContainer}>
+						<react_native_1.View style={containerStyles.calcMargin}>
+							<react_native_1.View style={[
+            containerStyles.calcBorder,
+            {
+                borderColor: this.state.carbRecommendation
+                    ? Constants_1.BORDER_COLOUR_TEAL
+                    : Constants_1.BORDER_COLOUR_WHITE,
+            },
+        ]}>
+								<RecommendedCarbs_1.default enteredCarbs={`${this.props.calculatorParams.carbohydrates}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${this.state.enteredCarbs ?? this.state.carbRecommendation}`} removeRecommendedCarbs={this.removeCarbRecommendation} onError={this.props.onError}/>
+								<Remeasure_1.default onSliderChange={this.updateRemeasureTime} remeasureTime={this.state.remeasureTime}/>
+							</react_native_1.View>
+						</react_native_1.View>
+					</react_native_1.View>
+					{this.state.showRecentInsulin ? (<RecentInsulin_1.default onRecentInsulinYes={this.props.onRecentInsulinYes} onRecentInsulinNo={this.handleNoRecentInsulin}/>) : (<RecommendedInsulin_1.default injectionMethod={this.props.injectionMethod} insulinRecommendation={this.state.enteredInsulin ?? this.state.insulinRecommendation} activityReduction={this.state.activityReduction} updateRecommendedInsulin={this.updateInsulinRecommendation} onError={this.props.onError}/>)}
+					<Emotion_1.default moodSelected={this.handleMoodSelected}/>
+					<TransferToLogbook_1.default visible={!this.state.showRecentInsulin} transfer={this.handleTransfer}/>
+				</react_native_1.ScrollView>
+			</react_2.I18nProvider>);
+    }
+}
+exports.default = RecommendationScreen;
+const containerStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+        backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE,
+    },
+    calcContainer: {
+        flex: 1,
+    },
+    calcMargin: {
+        flex: 1,
+        margin: Header_1.headerStyles.margin.margin,
+    },
+    calcBorder: {
+        ...InfoBars_1.infoStyles.border,
+        borderColor: Constants_1.BORDER_COLOUR_TEAL,
+    },
+});

package/src/RecommendationScreen.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
-import { BGUnit, InjectionMethod, Languages, MoodEnum } from "./types/enum";
+import { ScrollView, StyleSheet, View, YellowBox } from "react-native";
+import { BGUnit, InjectionMethod, Languages, Milliseconds, MoodEnum } from "./types/enum";
 import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_TEAL, BORDER_COLOUR_WHITE } from "./utils/Constants";
 
 import Header, { headerStyles } from "./components/Header";
@@ -14,11 +14,15 @@ import * as Calculator from "@hedia/recommendation-calculator";
 import { I18nProvider } from "@lingui/react";
 import Emotion from "./components/Emotion";
 import TransferToLogbook from "./components/TransferToLogbook";
-import { RecommendationError } from "./utils/RecommendationError";
+import { RecommendationError, SevereHypoglycemiaError, TimeoutLimitError } from "./utils/RecommendationError";
 
 import { changeLanguage, i18n } from "./locale/i18nUtils";
 import { Utils } from "./utils/Utils";
 
+// Ignoring long timer warnings
+// https://github.com/facebook/react-native/issues/12981#issuecomment-652745831
+YellowBox.ignoreWarnings([`Setting a timer`]);
+
 interface IResult {
 	suggested: number;
 	entered?: number;
@@ -54,23 +58,36 @@ interface IState {
 }
 
 export default class RecommendationScreen extends React.Component<IRecommendationProps, IState> {
+	private readonly timer: NodeJS.Timeout;
+
 	constructor(props: IRecommendationProps) {
 		super(props);
 
 		changeLanguage(props.language);
 
+		// Handle >= 1.1, <= 2 mmol/L (SevereHypoglycemia)
+		const { currentBGL, recentBoluses } = props?.calculatorParams;
+		if (currentBGL <= 2 && currentBGL >= 1.1) {
+			props.onError(SevereHypoglycemiaError);
+		}
+
 		const { bolus, carbRecommendation, activityReduction } = Calculator.calculateRecommendation(
 			props.calculatorParams,
 		);
+
 		this.state = {
 			remeasureTime: 1.5,
-			showRecentInsulin: true,
+			showRecentInsulin: recentBoluses?.length === 0,
 			insulinRecommendation: Utils.roundValue(bolus, props.injectionMethod),
 			activityReduction,
 			carbRecommendation,
 			activeInsulin: 0.0,
 			selectedMood: 0,
 		};
+
+		this.timer = setTimeout(() => {
+			props.onError(TimeoutLimitError);
+		}, Milliseconds.Minute * 15);
 	}
 
 	public updateRemeasureTime = (remeasureTime: number) => {
@@ -112,6 +129,11 @@ export default class RecommendationScreen extends React.Component<IRecommendatio
 	};
 
 	public handleTransfer = () => {
+		// TODO: Handle Errors/Warnings
+		// 300 carbs.
+		// < 5 mmol && activity
+		// > 2, <= 3.5 mmol/L
+
 		this.props.transferToLogbook(
 			{
 				suggested: this.state.carbRecommendation,

package/src/components/Emotion.d.ts

@@ -0,0 +1,14 @@
+import React from "react";
+import { MoodEnum } from "../types/enum";
+interface IProps {
+    moodSelected(mood: MoodEnum | 0): void;
+}
+interface IState {
+    selected: MoodEnum | 0;
+}
+export default class Emotion extends React.Component<IProps, IState> {
+    state: IState;
+    handleIconPress: (selected: number, toggle: boolean) => void;
+    render(): JSX.Element;
+}
+export {};

package/src/components/Emotion.jsx

@@ -0,0 +1,54 @@
+"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 i18nUtils_1 = require("../locale/i18nUtils");
+const enum_1 = require("../types/enum");
+const MoodIcon_1 = __importDefault(require("./MoodIcon"));
+class Emotion extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            selected: 0,
+        };
+        this.handleIconPress = (selected, toggle) => {
+            const select = toggle ? selected : 0;
+            this.setState({
+                selected: select,
+            });
+            this.props.moodSelected(select);
+        };
+    }
+    render() {
+        const values = Object.values(enum_1.MoodEnum).filter((val) => isNaN(Number(val)));
+        const mapped = values.map((key) => {
+            const moodValue = enum_1.MoodEnum[key];
+            return (<MoodIcon_1.default onPress={(toggle) => this.handleIconPress(moodValue, toggle)} active={moodValue === this.state.selected} mood={moodValue} key={moodValue}/>);
+        });
+        return (<react_native_1.View style={emotionStyles.container}>
+				<react_native_1.View style={emotionStyles.feelingContainer}>
+					<react_native_1.Text style={emotionStyles.feelingText}>{i18nUtils_1.i18n._("How are you feeling?")}</react_native_1.Text>
+				</react_native_1.View>
+				<react_native_1.View style={emotionStyles.moodIconContainer}>{mapped}</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = Emotion;
+const emotionStyles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    feelingContainer: {
+        marginVertical: `3%`,
+    },
+    feelingText: {
+        textAlign: `center`,
+        color: `white`,
+        fontWeight: `bold`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 26,
+    },
+    moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },
+});

package/src/components/Header.d.ts

@@ -0,0 +1,52 @@
+import React from "react";
+import { IRecommendationProps } from "../RecommendationScreen";
+interface IProps {
+    exitCallback: IRecommendationProps["exitCallback"];
+}
+interface IState {
+    hello: string;
+}
+export default class Header extends React.Component<IProps, IState> {
+    state: IState;
+    render(): JSX.Element;
+}
+export declare const headerStyles: {
+    backgroundColour: {
+        backgroundColor: string;
+    };
+    margin: {
+        margin: string;
+        flexDirection: "row";
+        flex: number;
+    };
+    headerContainer: {
+        flexDirection: "row";
+        flex: number;
+    };
+    exitButtonContainer: {
+        flex: number;
+    };
+    exitButton: {
+        flex: number;
+    };
+    iconStyle: {
+        fontSize: number;
+        color: string;
+    };
+    headerTextContainer: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        marginTop: string;
+    };
+    headerText: {
+        fontSize: number;
+        fontWeight: "bold";
+        textAlign: "center";
+        color: string;
+    };
+    headerFiller: {
+        flex: number;
+    };
+};
+export {};

package/src/components/Header.jsx

@@ -0,0 +1,82 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.headerStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const i18nUtils_1 = require("../locale/i18nUtils");
+const Constants_1 = require("../utils/Constants");
+const Icon_1 = __importDefault(require("./Icon"));
+class Header extends react_1.default.Component {
+    constructor() {
+        super(...arguments);
+        this.state = {
+            hello: `World`,
+        };
+    }
+    render() {
+        return (<react_1.default.Fragment>
+				<react_native_1.SafeAreaView style={exports.headerStyles.backgroundColour}/>
+				<react_native_1.View style={exports.headerStyles.headerContainer}>
+					<react_native_1.View style={exports.headerStyles.margin}>
+						<react_native_1.View style={exports.headerStyles.exitButtonContainer}>
+							<react_native_1.View style={exports.headerStyles.exitButton}>
+								<react_native_1.TouchableOpacity accessibilityLabel="exitButton" style={exports.headerStyles.exitButton} onPress={this.props.exitCallback}>
+									<Icon_1.default iconIdentifier={`Ionicons/ios-close-circle-outline`} style={exports.headerStyles.iconStyle}/>
+								</react_native_1.TouchableOpacity>
+								<react_native_1.View style={exports.headerStyles.headerFiller}/>
+							</react_native_1.View>
+						</react_native_1.View>
+						<react_native_1.View style={exports.headerStyles.headerTextContainer}>
+							<react_native_1.Text style={exports.headerStyles.headerText} testID="headerText">
+								{i18nUtils_1.i18n._("INSULIN\nRECOMMENDATION")}
+							</react_native_1.Text>
+						</react_native_1.View>
+						<react_native_1.View style={exports.headerStyles.headerFiller}/>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_1.default.Fragment>);
+    }
+}
+exports.default = Header;
+exports.headerStyles = react_native_1.StyleSheet.create({
+    backgroundColour: {
+        backgroundColor: Constants_1.BACKGROUND_COLOUR_PURPLE,
+    },
+    margin: {
+        margin: `3%`,
+        flexDirection: `row`,
+        flex: 1,
+    },
+    headerContainer: {
+        flexDirection: `row`,
+        flex: 1,
+    },
+    exitButtonContainer: {
+        flex: 1,
+    },
+    exitButton: {
+        flex: 1,
+    },
+    iconStyle: {
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 10,
+        color: Constants_1.BORDER_COLOUR_WHITE,
+    },
+    headerTextContainer: {
+        flex: 5,
+        justifyContent: `center`,
+        alignItems: `center`,
+        marginTop: `5%`,
+    },
+    headerText: {
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 14,
+        fontWeight: `bold`,
+        textAlign: `center`,
+        color: `white`,
+    },
+    headerFiller: {
+        flex: 1,
+    },
+});

package/src/components/InfoBars.d.ts

@@ -0,0 +1,67 @@
+import React from "react";
+export interface IProps {
+    label: string;
+    value?: string;
+    units: string;
+    showZeroAsDash: boolean;
+}
+export default class InfoBars extends React.Component<IProps> {
+    render(): JSX.Element;
+}
+export declare const infoStyles: {
+    container: {
+        flex: number;
+    };
+    margin: {
+        flex: number;
+        margin: string;
+        marginBottom: number;
+    };
+    border: {
+        borderWidth: number;
+        borderColor: string;
+        borderRadius: number;
+    };
+    borderContainer: {
+        flex: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+        paddingLeft: string;
+        paddingRight: 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.jsx

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.infoStyles = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const Constants_1 = require("../utils/Constants");
+const Header_1 = require("./Header");
+class InfoBars extends react_1.default.Component {
+    render() {
+        const displayedValue = this.props.value ?? (this.props.showZeroAsDash ? `-.-` : `0`);
+        return (<react_native_1.View style={exports.infoStyles.container}>
+				<react_native_1.View style={exports.infoStyles.margin}>
+					<react_native_1.View style={exports.infoStyles.border}>
+						<react_native_1.View style={exports.infoStyles.borderContainer}>
+							<react_native_1.View style={exports.infoStyles.labelContainer}>
+								<react_native_1.Text style={exports.infoStyles.label}>{this.props.label}</react_native_1.Text>
+							</react_native_1.View>
+							<react_native_1.View style={exports.infoStyles.valueUnitContainer}>
+								<react_native_1.View style={exports.infoStyles.valueContainer}>
+									<react_native_1.Text style={exports.infoStyles.value}>{displayedValue}</react_native_1.Text>
+								</react_native_1.View>
+								<react_native_1.View style={exports.infoStyles.unitContainer}>
+									<react_native_1.Text style={exports.infoStyles.units}>{this.props.units}</react_native_1.Text>
+								</react_native_1.View>
+							</react_native_1.View>
+						</react_native_1.View>
+					</react_native_1.View>
+				</react_native_1.View>
+			</react_native_1.View>);
+    }
+}
+exports.default = InfoBars;
+exports.infoStyles = react_native_1.StyleSheet.create({
+    container: { flex: 1 },
+    margin: {
+        flex: 1,
+        margin: Header_1.headerStyles.margin.margin,
+        marginBottom: 0,
+    },
+    border: {
+        borderWidth: 2,
+        borderColor: Constants_1.BORDER_COLOUR_WHITE,
+        borderRadius: 5,
+    },
+    borderContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        justifyContent: `space-between`,
+        paddingLeft: `3%`,
+        paddingRight: `3%`,
+    },
+    labelContainer: {
+        flex: 7,
+        justifyContent: `center`,
+    },
+    label: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 22,
+        fontWeight: `bold`,
+    },
+    valueUnitContainer: {
+        flex: 4,
+        justifyContent: `flex-end`,
+        flexDirection: `row`,
+    },
+    valueContainer: {
+        flex: 1,
+        justifyContent: `flex-end`,
+    },
+    value: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 16,
+        fontWeight: `bold`,
+        textAlign: `right`,
+    },
+    unitContainer: {
+        flex: 1,
+        justifyContent: `flex-end`,
+        paddingBottom: `3%`,
+    },
+    units: {
+        color: `white`,
+        fontSize: react_native_1.Dimensions.get(`screen`).width / 30,
+        textAlign: `left`,
+        paddingLeft: `5%`,
+    },
+});