@hedia/recommendation-screen 2.1.52 → 2.1.53-alpha.1

package/dist/src/components/Remeasure.js

@@ -1,11 +1,10 @@
 import { t } from "@lingui/macro";
 import Slider from "@react-native-community/slider";
 import React from "react";
-import { Platform, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { colors } from "../utils/Constants";
-import { infoStyles } from "./InfoBars";
 import { FONTS } from "./styles/fonts";
 import Text from "./Text";
 /**
@@ -57,71 +56,54 @@ export default class Remeasure extends React.Component {
     render() {
         const measure = this.props.remeasureTime > 0;
         const limited = this.limitTime(this.props.remeasureTime);
-        const marginHorizontal = Platform.OS === `ios` ? `3%` : `0%`;
-        const valueContainer = measure ? remeasureStyles.valueContainer : variantStyles.centeredValueContainer;
-        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} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
-								{measure ? limited : i18n._(t `OFF`)}
-							</Text>
-						</View>
-						{measure ? (<View style={remeasureStyles.unitContainer}>
-								<Text style={remeasureStyles.units}>{i18n._(t `hours`)}</Text>
-							</View>) : null}
+        return (<View style={styles.container}>
+				<View style={styles.textContainer}>
+					<Text style={styles.remeasureLabel}>{i18n._(t `Remind me to remeasure in`)}</Text>
+					<View style={styles.valueUnitContainer}>
+						<Text style={styles.value} testID={Testing.Id.RemeasureTestIds.RemeasureHours}>
+							{measure ? limited : i18n._(t `OFF`)}
+						</Text>
+						{measure && <Text style={styles.units}>{i18n._(t `hours`)}</Text>}
 					</View>
 				</View>
+
 				<Slider ref={(slider) => {
                 if (slider !== null) {
                     this.slider = slider;
                 }
-            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.teal} thumbTintColor={colors.teal} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={colors.mistBlue} minimumTrackTintColor={colors.blue} thumbTintColor={colors.white} maximumValue={6} minimumValue={0} step={0.5} onValueChange={this.handleSliderChange}/>
 			</View>);
     }
 }
-const remeasureStyles = StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flexDirection: `column`,
-        padding: `3%`,
-    },
-    borderContainer: {
-        ...infoStyles.borderContainer,
-        alignItems: `center`,
+        marginBottom: 32,
     },
-    remeasureContainer: {
-        flex: 7,
+    textContainer: {
+        flexDirection: `row`,
+        marginBottom: 18,
     },
     remeasureLabel: {
         ...FONTS.Poppins.regular_Base,
         color: colors.white,
+        flex: 7,
     },
     valueUnitContainer: {
-        ...infoStyles.valueUnitContainer,
-    },
-    valueContainer: {
-        ...infoStyles.valueContainer,
+        flex: 3,
+        justifyContent: `flex-end`,
+        alignItems: `center`,
+        flexDirection: `row`,
     },
     value: {
-        ...infoStyles.value,
-    },
-    unitContainer: {
-        ...infoStyles.unitContainer,
+        ...FONTS.Poppins.regular_LG,
+        textAlign: `right`,
+        color: colors.white,
     },
     units: {
-        ...infoStyles.units,
-    },
-    sliderStyle: {
-        marginTop: `3%`,
-        marginBottom: `2%`,
-    },
-});
-const variantStyles = StyleSheet.create({
-    centeredValueContainer: {
-        ...remeasureStyles.valueContainer,
-        alignItems: `center`,
+        ...FONTS.Poppins.regular_XS,
+        textAlign: `left`,
+        paddingLeft: 4,
+        color: colors.white,
     },
 });

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

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface ITimeoutModalProps {
+    /** 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;
+    /** 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;
+}
+/** Display a modal with two buttons for the user to choose between. */
+export default class TimeoutModal extends React.Component<ITimeoutModalProps> {
+    /** Compose a JSX element for displaying the modal. */
+    render(): JSX.Element;
+}

package/dist/src/components/TimeoutModal.js

@@ -0,0 +1,82 @@
+import * as React from "react";
+import { StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
+import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
+import { FONTS } from "./styles/fonts";
+import Text from "./Text";
+const { ExitModalTestIds: TwoOptionModalTestIds } = Testing.Id;
+/** Display a modal with two buttons for the user to choose between. */
+export default class TimeoutModal extends React.Component {
+    /** Compose a JSX element for displaying the modal. */
+    render() {
+        return (<View style={style.container}>
+				<StatusBar backgroundColor={colors.transparentLightBlue}/>
+				<View style={style.modalContainer}>
+					<View style={style.textContainer}>
+						<Text style={style.title}>{this.props.title}</Text>
+						<Text style={style.message}>{this.props.message}</Text>
+					</View>
+					<View style={style.buttonContainer}>
+						<TouchableOpacity testID={TwoOptionModalTestIds.FirstOption} onPress={this.props.firstOption} style={[style.button, { backgroundColor: colors.teal, marginBottom: 16 }]}>
+							<Text style={style.textFirstButton}>{this.props.textFirstOption}</Text>
+						</TouchableOpacity>
+						<TouchableOpacity testID={TwoOptionModalTestIds.SecondOption} onPress={this.props.secondOption} style={style.button}>
+							<Text style={style.textSecondButton}>{this.props.textSecondOption}</Text>
+						</TouchableOpacity>
+					</View>
+				</View>
+			</View>);
+    }
+}
+/** @internal */
+const style = StyleSheet.create({
+    container: {
+        ...StyleSheet.absoluteFillObject,
+        justifyContent: `center`,
+        backgroundColor: colors.transparentBlack,
+    },
+    modalContainer: {
+        margin: 16,
+        padding: 24,
+        backgroundColor: colors.semiDarkBlue,
+        borderRadius: 24,
+    },
+    textContainer: {
+        alignSelf: `flex-start`,
+        marginBottom: 24,
+    },
+    title: {
+        ...FONTS.Poppins.bold_XL,
+        color: colors.white,
+        textAlign: `center`,
+        marginBottom: 24,
+    },
+    message: {
+        ...FONTS.Poppins.regular_Base,
+        color: colors.lightBlue,
+        textAlign: `center`,
+    },
+    buttonContainer: {
+        flexDirection: `column`,
+        justifyContent: `space-around`,
+    },
+    button: {
+        borderRadius: 50,
+        borderWidth: 1,
+        borderColor: colors.teal,
+    },
+    textFirstButton: {
+        ...FONTS.Poppins.bold_LG,
+        textAlign: `center`,
+        color: colors.black,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+    textSecondButton: {
+        ...FONTS.Poppins.bold_LG,
+        textAlign: `center`,
+        color: colors.teal,
+        paddingHorizontal: 16,
+        paddingVertical: 12,
+    },
+});

package/dist/src/components/TransferToLogbook.js

@@ -36,7 +36,7 @@ export default class TransferToLogbook extends React.Component {
      */
     render() {
         if (!this.props.visible) {
-            return <View style={addToLogbookStyles.marginContainer}/>;
+            return <View style={addToLogbookStyles.emptyContainer}/>;
         }
         return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container}>
 				<View style={addToLogbookStyles.textContainer}>
@@ -46,24 +46,25 @@ export default class TransferToLogbook extends React.Component {
     }
 }
 const addToLogbookStyles = StyleSheet.create({
-    marginContainer: {
-        marginVertical: `3%`,
+    emptyContainer: {
+        marginBottom: 32,
     },
     container: {
-        flex: 1,
-        margin: `5%`,
+        borderRadius: 50,
+        backgroundColor: colors.teal,
+        marginBottom: 32,
+        justifyContent: `center`,
+        alignSelf: `center`,
     },
     textContainer: {
         flexDirection: `row`,
         justifyContent: `center`,
-        borderWidth: 1,
-        borderRadius: 100,
-        marginHorizontal: `4%`,
-        paddingVertical: `4%`,
-        borderColor: colors.teal,
     },
     transferText: {
-        ...FONTS.Poppins.bold_LG,
-        color: colors.teal,
+        ...FONTS.Poppins.bold_Base,
+        color: colors.black,
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+        textAlign: `center`,
     },
 });

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

@@ -27,58 +27,54 @@ export default class Activity extends React.Component {
     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} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
-										{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>
+        return (<View style={styles.container}>
+				<View style={styles.activityTextContainer}>
+					<View style={infoStyles.labelContainer}>
+						<Text style={styles.label}>{i18n._(t `Activity`)}</Text>
+					</View>
+					<View style={infoStyles.valueUnitContainer}>
+						<Text style={infoStyles.value} testID={Testing.Id.ActivityTestIds.ActivityDuration}>
+							{activity.activityDuration}
+						</Text>
+						<Text style={infoStyles.units}>{i18n._(t `min`)}</Text>
 					</View>
 				</View>
+				<ActivityIcon activityType={activityType} activityTitle={activityTitle}/>
+				<ActivityIntensity activityIntensity={activity.activityIntensity}/>
+				<Text style={styles.infoText}>
+					{i18n._(t `Based on the selected activity your insulin recommendation is reduced by:`)}
+				</Text>
+				<Text style={styles.reductionPercentage} testID={Testing.Id.ActivityTestIds.ActivityReduction}>
+					{reductionPercentage}%
+				</Text>
 			</View>);
     }
 }
-const activityStyles = StyleSheet.create({
-    topMargin: {
-        marginTop: `2%`,
-    },
-    botMargin: {
-        marginBottom: `2%`,
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        marginBottom: 32,
+        padding: 16,
+        borderWidth: 1,
+        borderColor: colors.dustyDarkBlue,
+        borderRadius: 5,
     },
-    verticalMargin: {
-        marginBottom: `2%`,
+    activityTextContainer: {
+        flex: 1,
+        flexDirection: `row`,
+        marginBottom: 6,
     },
     infoText: {
         ...FONTS.Poppins.regular_Base,
         color: colors.lightBlue,
+        marginBottom: 4,
     },
     reductionPercentage: {
-        ...FONTS.Poppins.bold_XL,
+        ...FONTS.Poppins.medium_Base,
+        color: colors.fadeBlue,
+    },
+    label: {
+        ...FONTS.Poppins.regular_Base,
         color: colors.white,
-        marginTop: `2%`,
     },
 });

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

@@ -1,21 +1,21 @@
-import { Activity } from "@hedia/types";
 import React from "react";
-import { ImageURISource } from "react-native";
+import { SvgProps } from "react-native-svg";
 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 */
+/**
+Component used to displat the user's physical activity type icon
+Mapping from ActivityEnums to corresponding image resource.
+*/
 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;
+    getActivityIcon: (props?: SvgProps | undefined) => JSX.Element;
     /**
      * Steps:
      * 1. Unpack activityType and activityTitle from props.
      * 2. Create a testID 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 testID displaying the icon from getActivityIcon().
+     * 1. An svg component with the generated testID displaying the icon from getActivityIcon().
      * 2. The activityTitle if it is truthy or the string “Untitled Activity” otherwise
      */
     render(): JSX.Element | null;

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

@@ -1,26 +1,33 @@
 import { Activity } from "@hedia/types";
 import { t } from "@lingui/macro";
 import React from "react";
-import { Dimensions, Image, StyleSheet, View } from "react-native";
+import { StyleSheet, View } from "react-native";
+import Cycling from "../../assets/IconsSVG/activity/Cycling";
+import Running from "../../assets/IconsSVG/activity/Running";
+import Stretching from "../../assets/IconsSVG/activity/Stretching";
+import Swimming from "../../assets/IconsSVG/activity/Swimming";
+import Walking from "../../assets/IconsSVG/activity/Walking";
 import { i18n } from "../../locale/i18nUtils";
 import { colors } from "../../utils/Constants";
 import { FONTS } from "../styles/fonts";
 import Text from "../Text";
 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 */
+/**
+Component used to displat the user's physical activity type icon
+Mapping from ActivityEnums to corresponding image resource.
+*/
 export default class ActivityIcon extends React.Component {
     /**
      * @returns The value from the ACTIVITY_ICONS constant that corresponds to the value of the activityType prop.
      */
-    getActivityIcon = () => {
+    getActivityIcon = (props) => {
+        const ACTIVITY_ICONS = {
+            Run: Running(props),
+            Walk: Walking(props),
+            Cycling: Cycling(props),
+            Swim: Swimming(props),
+            Other: Stretching(props),
+        };
         return ACTIVITY_ICONS[this.props.activityType ?? Other];
     };
     /**
@@ -28,31 +35,32 @@ export default class ActivityIcon extends React.Component {
      * 1. Unpack activityType and activityTitle from props.
      * 2. Create a testID 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 testID displaying the icon from getActivityIcon().
+     * 1. An svg component with the generated testID 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 testID = `${Activity.Enums.ActivityEnum[activityType ?? Other]}-icon`.toLowerCase();
-        return (<View style={activityIconStyles.container}>
-				<Image style={activityIconStyles.activityIcon} source={this.getActivityIcon()} testID={testID}/>
-				<Text style={activityIconStyles.activityTitle}>{activityTitle || i18n._(t `Untitled Activity`)}</Text>
+        return (<View style={styles.container}>
+				{this.getActivityIcon({ testID, style: styles.icon })}
+				<Text style={styles.activityTitle}>{activityTitle || i18n._(t `Untitled Activity`)}</Text>
 			</View>);
     }
 }
-const activityIconStyles = StyleSheet.create({
+const styles = StyleSheet.create({
     container: {
         flex: 1,
         flexDirection: `row`,
         alignItems: `center`,
-        marginTop: `1%`,
-    },
-    activityIcon: {
-        resizeMode: `contain`,
-        height: Dimensions.get(`screen`).width / 16,
+        marginBottom: 6,
     },
     activityTitle: {
-        ...FONTS.Poppins.regular_Base,
+        ...FONTS.Poppins.regular_SM,
         color: colors.white,
+        marginLeft: 4,
+    },
+    icon: {
+        width: 20,
+        height: 20,
     },
 });

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

@@ -3,7 +3,6 @@ import React from "react";
 import { StyleSheet, View } from "react-native";
 import { colors } from "../../utils/Constants";
 import { ActivityIntensityTranslations } from "../../utils/Translations";
-import { infoStyles } from "../InfoBars";
 import { FONTS } from "../styles/fonts";
 import Text from "../Text";
 /** Component used to display the users's physical activity intensity on its corresponding background color */
@@ -17,27 +16,27 @@ export default class ActivityIntensity extends React.Component {
     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.text} testID={`intensity-${intensity}`}>
-							{ActivityIntensityTranslations[intensity]()}
-						</Text>
-					</View>
+        return (<View style={activityIntensityStyles.row}>
+				<View style={[activityIntensityStyles.intensityTextContainer, style]}>
+					<Text style={activityIntensityStyles.text} testID={`intensity-${intensity}`}>
+						{ActivityIntensityTranslations[intensity]()}
+					</Text>
 				</View>
-				<View style={activityIntensityStyles.intensityContainerOffset}/>
 			</View>);
     };
 }
 const activityIntensityStyles = StyleSheet.create({
     row: {
         flexDirection: `row`,
+        marginBottom: 6,
+        minHeight: 24,
     },
     intensityTextContainer: {
         alignItems: `center`,
         justifyContent: `center`,
-        padding: `5%`,
         borderRadius: 5,
+        paddingVertical: 4,
+        paddingHorizontal: 17.5,
     },
     [Activity.Enums.ActivityIntensity.light]: {
         backgroundColor: colors.activityGreen,
@@ -48,14 +47,8 @@ const activityIntensityStyles = StyleSheet.create({
     [Activity.Enums.ActivityIntensity.hard]: {
         backgroundColor: colors.activityRed,
     },
-    intensityContainer: {
-        flex: 5,
-    },
-    intensityContainerOffset: {
-        flex: 16,
-    },
     text: {
-        ...FONTS.Poppins.bold_SM,
+        ...FONTS.Poppins.medium_XS,
         color: colors.black,
     },
 });

package/dist/src/components/mood/Emotion.js

@@ -41,9 +41,7 @@ export default class Emotion extends React.Component {
      */
     render() {
         return (<View style={emotionStyles.container}>
-				<View style={emotionStyles.feelingContainer}>
-					<Text style={emotionStyles.feelingText}>{i18n._(t `How are you feeling?`)}</Text>
-				</View>
+				<Text style={emotionStyles.feelingText}>{i18n._(t `How are you feeling?`)}</Text>
 				<View style={emotionStyles.moodIconContainer}>{this.mappedMoods()}</View>
 			</View>);
     }
@@ -51,14 +49,14 @@ export default class Emotion extends React.Component {
 const emotionStyles = StyleSheet.create({
     container: {
         flex: 1,
-    },
-    feelingContainer: {
-        marginVertical: `3%`,
+        paddingHorizontal: 40,
+        marginBottom: 28,
     },
     feelingText: {
-        ...FONTS.Poppins.bold_Base,
+        ...FONTS.Poppins.regular_Base,
         textAlign: `center`,
         color: colors.white,
+        marginBottom: 6,
     },
-    moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },
+    moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `space-between` },
 });

package/dist/src/components/mood/MoodIcon.js

@@ -1,6 +1,6 @@
 import { Logbook } from "@hedia/types";
 import React from "react";
-import { Dimensions, Image, StyleSheet, TouchableOpacity } from "react-native";
+import { Image, StyleSheet, TouchableOpacity } from "react-native";
 const MoodEnum = Logbook.Enums.MoodEnum;
 /** Mapping from {@link Logbook.Enums.MoodEnum} to corresponding image resources */
 export const MOODS_INACTIVE = {
@@ -47,17 +47,11 @@ export default class MoodIcon extends React.Component {
     render() {
         const { mood, active } = this.props;
         const testID = `${MoodEnum[mood]}-${active}`;
-        return (<TouchableOpacity style={moodIconStyles.container} onPress={this.handleOnPress} testID={testID}>
+        return (<TouchableOpacity onPress={this.handleOnPress} testID={testID}>
 				<Image style={moodIconStyles.icon} source={this.getMoodIcon()}/>
 			</TouchableOpacity>);
     }
 }
 const moodIconStyles = StyleSheet.create({
-    container: {
-        marginHorizontal: `1%`,
-    },
-    icon: {
-        width: Dimensions.get(`screen`).width / 8,
-        height: Dimensions.get(`screen`).width / 8,
-    },
+    icon: { flex: 1, width: 40, height: 40 },
 });

package/dist/src/components/styles/fonts.d.ts

@@ -1,9 +1,17 @@
 export declare enum FontFamily {
     PoppinsBold = "Poppins-Bold",
     PoppinsMedium = "Poppins-Medium",
-    PoppinsRegular = "Poppins-Regular"
+    PoppinsRegular = "Poppins-Regular",
+    OswaldMedium = "Oswald-Medium"
 }
 export declare const FONTS: {
+    Oswald: {
+        bold_7XL: {
+            fontFamily: FontFamily;
+            fontSize: number;
+            lineHeight: number;
+        };
+    };
     Poppins: {
         bold_4XL: {
             fontFamily: FontFamily;

package/dist/src/components/styles/fonts.js

@@ -3,8 +3,16 @@ export var FontFamily;
     FontFamily["PoppinsBold"] = "Poppins-Bold";
     FontFamily["PoppinsMedium"] = "Poppins-Medium";
     FontFamily["PoppinsRegular"] = "Poppins-Regular";
+    FontFamily["OswaldMedium"] = "Oswald-Medium";
 })(FontFamily || (FontFamily = {}));
 export const FONTS = {
+    Oswald: {
+        bold_7XL: {
+            fontFamily: FontFamily.OswaldMedium,
+            fontSize: 80,
+            lineHeight: 120,
+        },
+    },
     Poppins: {
         bold_4XL: {
             fontFamily: FontFamily.PoppinsBold,