@hedia/recommendation-screen 2.1.49 → 2.1.50-alpha.0

package/dist/src/RecommendationScreen.js

@@ -1,7 +1,6 @@
 import React from "react";
 import { AppState, BackHandler, LogBox, StyleSheet, View } from "react-native";
 import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "./utils/Constants";
 import Header from "./components/Header";
 import InfoBars, { infoStyles } from "./components/InfoBars";
 import RecentInsulin from "./components/RecentInsulin";
@@ -13,6 +12,7 @@ import { Milliseconds, } from "@hedia/types";
 import { I18nProvider } from "@lingui/react";
 import Emotion from "./components/mood/Emotion";
 import TransferToLogbook from "./components/TransferToLogbook";
+import { colors } from "./utils/Constants";
 import { t } from "@lingui/macro";
 import Activity from "./components/activity/Activity";
 import LimitationMessage from "./components/LimitationMessage";
@@ -477,7 +477,7 @@ export default class RecommendationScreen extends React.Component {
 							<View style={[
                 containerStyles.calcBorder,
                 {
-                    borderColor: recommendedCarbs ? BORDER_COLOUR_TEAL : BORDER_COLOUR_GREY,
+                    borderColor: recommendedCarbs ? colors.teal : colors.mistBlue,
                 },
             ]}>
 								<RecommendedCarbs enteredCarbs={`${providedCarbs}`} changedRecommendedCarbs={this.updateCarbRecommendation} recommendedCarbs={`${recommendedCarbs}`} removeRecommendedCarbs={this.removeCarbRecommendation}/>
@@ -502,7 +502,7 @@ export default class RecommendationScreen extends React.Component {
 const containerStyles = StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.darkBlue,
     },
     calcContainer: {
         flex: 1,
@@ -514,6 +514,6 @@ const containerStyles = StyleSheet.create({
     },
     calcBorder: {
         ...infoStyles.border,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
     },
 });

package/dist/src/components/Header.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Dimensions, SafeAreaView, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import Icon from "./Icon";
 import TextBold from "./text/TextBold";
 /** Component to display a header text along with a cancel-button that triggers a callback function. */
@@ -35,7 +35,7 @@ export default class Header extends React.Component {
 }
 const headerStyles = StyleSheet.create({
     backgroundColour: {
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.darkBlue,
     },
     margin: {
         margin: `1%`,
@@ -56,7 +56,7 @@ const headerStyles = StyleSheet.create({
     },
     iconStyle: {
         fontSize: Dimensions.get(`screen`).width / 12,
-        color: BORDER_COLOUR_GREY,
+        color: colors.mistBlue,
     },
     headerTextContainer: {
         flex: 6,
@@ -67,7 +67,7 @@ const headerStyles = StyleSheet.create({
     headerText: {
         fontSize: Dimensions.get(`screen`).width / 18,
         textAlign: `center`,
-        color: `white`,
+        color: colors.white,
     },
     headerFiller: {
         flex: 1,

package/dist/src/components/InfoBars.js

@@ -3,7 +3,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
-import { BORDER_COLOUR_GREY } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -80,7 +80,7 @@ export const infoStyles = StyleSheet.create({
     },
     border: {
         borderWidth: 2,
-        borderColor: BORDER_COLOUR_GREY,
+        borderColor: colors.mistBlue,
         borderRadius: 5,
         paddingVertical: `1%`,
     },
@@ -95,7 +95,7 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `center`,
     },
     label: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 22,
     },
     valueUnitContainer: {
@@ -108,7 +108,7 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `flex-end`,
     },
     value: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 15,
         textAlign: `right`,
     },
@@ -118,7 +118,7 @@ export const infoStyles = StyleSheet.create({
         paddingBottom: `3%`,
     },
     units: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 30,
         textAlign: `left`,
         paddingLeft: `5%`,

package/dist/src/components/RecentInsulin.js

@@ -3,6 +3,7 @@ import React from "react";
 import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
 /** Display a card that prompts the user to recall if they injected insulin recently. */
@@ -41,7 +42,7 @@ export default class RecentInsulin extends React.Component {
 const recentInsulinStyles = StyleSheet.create({
     container: {
         ...infoStyles.margin,
-        backgroundColor: `rgba(118, 82, 255, 0.5)`,
+        backgroundColor: colors.purple,
         borderRadius: 5,
     },
     titleContainer: {
@@ -74,7 +75,7 @@ const recentInsulinStyles = StyleSheet.create({
     },
     yesNoContainer: {
         flex: 1,
-        borderColor: `white`,
+        borderColor: colors.white,
         borderRadius: 100,
         borderWidth: 2,
         paddingHorizontal: `2%`,
@@ -84,7 +85,7 @@ const recentInsulinStyles = StyleSheet.create({
         textAlign: `center`,
         paddingTop: `1%`,
         paddingBottom: `1%`,
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
     filler: {

package/dist/src/components/RecommendationModal.js

@@ -4,7 +4,7 @@ import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import ReactNativeModal from "react-native-modal";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import LimitationMessage from "./LimitationMessage";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -153,20 +153,20 @@ export const stylesModal = StyleSheet.create({
     modalStyle: { margin: 0 },
     container: {
         flex: 4,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
+        backgroundColor: colors.semiDarkBlue,
         justifyContent: `center`,
         paddingHorizontal: `4%`,
     },
     containerAcceptButton: {
         flex: 1,
-        backgroundColor: `rgba(30, 35, 87, 0.9)`,
+        backgroundColor: colors.semiDarkBlue,
         justifyContent: `flex-start`,
     },
     titleContainer: { marginBottom: `5%` },
     recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
-    textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
-    textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
-    buttonText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    textTittleMessage: { color: colors.white, fontSize: titleFontSize, textAlign: `center` },
+    textMessage: { color: colors.white, fontSize: textFontSize, textAlign: `center` },
+    buttonText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
     addToCalculationContainer: { justifyContent: `flex-start`, marginVertical: `5%` },
     innerView: {
         alignContent: `center`,
@@ -175,22 +175,22 @@ export const stylesModal = StyleSheet.create({
         marginTop: `5%`,
         borderRadius: height / 80,
         borderWidth: height / 300,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
-    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
+    suggestedCarbs: { color: colors.white, fontSize: sugestionFontSize },
     textCenter: { textAlign: `center` },
-    recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
-    carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
-    addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
+    recommendEatingText: { color: colors.dustyBlue, fontSize: recommendEatingFontSize, textAlign: `center` },
+    carbohydrateText: { color: colors.white, fontSize: sugestionFontSize },
+    addToCalculation: { color: colors.white, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-    affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
-    negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    negativeCarbsText: { color: colors.white, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -201,7 +201,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: `white`,
+        borderColor: colors.white,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -212,7 +212,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: BORDER_COLOUR_TEAL,
+        borderColor: colors.teal,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,

package/dist/src/components/RecommendedCarbs.js

@@ -3,7 +3,7 @@ import React from "react";
 import { Alert, Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { CarbohydrateLimitError } from "../utils/RecommendationError";
 import Icon from "./Icon";
 import { infoStyles } from "./InfoBars";
@@ -90,7 +90,7 @@ export default class RecommendedCarbs extends React.Component {
         const shownCarbs = this.state.partialInput ?? Math.round(Number(this.props.recommendedCarbs));
         const totalCarbs = Math.round(parseFloat(this.props.enteredCarbs) + Number(shownCarbs));
         return (<React.Fragment>
-				<LineSeparator color={BORDER_COLOUR_GREY}/>
+				<LineSeparator color={colors.mistBlue}/>
 				<View style={calculationStyles.borderContainer}>
 					<View style={calculationStyles.recommendedContainer}>
 						<TouchableOpacity testID={RecommendedCarbsTestIds.RemoveRecommendation} style={calculationStyles.removeRecommended} onPress={this.props.removeRecommendedCarbs}>
@@ -106,7 +106,7 @@ export default class RecommendedCarbs extends React.Component {
 					<View style={calculationStyles.valueUnitContainer}>
 						<TouchableOpacity testID={RecommendedCarbsTestIds.EditRecommendedCarbs} onPress={this.showTextInput} style={[calculationStyles.valueUnitContainer]}>
 							<View style={calculationStyles.valueContainer}>
-								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: BORDER_COLOUR_TEAL }}>
+								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: colors.teal }}>
 									{shownCarbs}
 								</TextBold>
 							</View>
@@ -114,14 +114,14 @@ export default class RecommendedCarbs extends React.Component {
 								<View style={calculationStyles.editIconContainer}>
 									<Icon style={calculationStyles.editIcon} iconIdentifier={`Feather/edit`}/>
 								</View>
-								<TextRegular style={{ ...calculationStyles.units, color: BORDER_COLOUR_TEAL }}>
+								<TextRegular style={{ ...calculationStyles.units, color: colors.teal }}>
 									{i18n._(t `grams`)}
 								</TextRegular>
 							</View>
 						</TouchableOpacity>
 					</View>
 				</View>
-				<LineSeparator color={BORDER_COLOUR_TEAL}/>
+				<LineSeparator color={colors.teal}/>
 				{this.renderRow({
                 label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
@@ -191,14 +191,14 @@ const calculationStyles = StyleSheet.create({
     },
     foodUnitsLabel: {
         ...infoStyles.units,
-        color: `rgba(160, 180, 240, 1)`,
+        color: colors.lightBlue,
         paddingLeft: `1%`,
     },
     rowContainer: {
         flex: 7,
     },
     rowLabel: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
     enteredContainer: {
@@ -206,7 +206,7 @@ const calculationStyles = StyleSheet.create({
         alignItems: `flex-end`,
     },
     entered: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 23,
     },
     valueUnitContainer: {
@@ -230,7 +230,7 @@ const calculationStyles = StyleSheet.create({
         flexDirection: `row`,
     },
     editIcon: {
-        color: BORDER_COLOUR_TEAL,
+        color: colors.teal,
         fontSize: Dimensions.get(`screen`).width / 30,
     },
     recommendedContainer: {
@@ -238,7 +238,7 @@ const calculationStyles = StyleSheet.create({
         flexDirection: `row`,
     },
     recommendedLabel: {
-        color: BORDER_COLOUR_TEAL,
+        color: colors.teal,
         fontSize: Dimensions.get(`screen`).width / 25,
         alignSelf: `center`,
     },
@@ -248,7 +248,7 @@ const calculationStyles = StyleSheet.create({
         marginTop: `1%`,
     },
     removeRecommendedIcon: {
-        color: BORDER_COLOUR_TEAL,
+        color: colors.teal,
         fontSize: Dimensions.get(`screen`).width / 20,
         paddingBottom: `0.5%`,
     },

package/dist/src/components/RecommendedInsulin.js

@@ -6,6 +6,7 @@ import LinearGradient from "react-native-linear-gradient";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
 import { Messages } from "../utils/AttentionMessages";
+import { colors } from "../utils/Constants";
 import { Utils } from "../utils/Utils";
 import Icon from "./Icon";
 import { infoStyles } from "./InfoBars";
@@ -106,7 +107,7 @@ export default class RecommendedInsulin extends React.Component {
         const shownInsulin = this.state.partialInput ?? this.props.insulinRecommendation ?? `0`;
         return (<React.Fragment>
 				<TouchableOpacity testID={RecommendedInsulinTestIds.EditRecommendedInsulin} onPress={this.handleOnPress}>
-					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
+					<LinearGradient style={recommendedInsulinStyles.container} colors={[colors.purple, colors.blue]} useAngle={true} angle={135}>
 						<View style={recommendedInsulinStyles.recommendedTextContainer}>
 							<TextBold style={recommendedInsulinStyles.recommendedText}>
 								{i18n._(t `Recommended amount of insulin`)}
@@ -154,17 +155,17 @@ const recommendedInsulinStyles = StyleSheet.create({
         minHeight: Dimensions.get(`screen`).width / 4,
     },
     value: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 5,
     },
     units: {
         alignSelf: `flex-end`,
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 28,
         paddingBottom: `6%`,
     },
     editIcon: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 28,
         textAlignVertical: `center`,
         paddingBottom: `10%`,

package/dist/src/components/Remeasure.js

@@ -4,7 +4,7 @@ import React from "react";
 import { Dimensions, Platform, StyleSheet, View } from "react-native";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
-import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import { infoStyles } from "./InfoBars";
 import TextBold from "./text/TextBold";
 import TextRegular from "./text/TextRegular";
@@ -81,7 +81,7 @@ export default class Remeasure extends React.Component {
                 if (slider !== null) {
                     this.slider = slider;
                 }
-            }} testID={Testing.Id.RemeasureTestIds.RemeasureSlider} maximumTrackTintColor={BORDER_COLOUR_GREY} minimumTrackTintColor={BORDER_COLOUR_TEAL} thumbTintColor={BORDER_COLOUR_TEAL} maximumValue={6} minimumValue={0} step={0.5} style={[remeasureStyles.sliderStyle, { marginHorizontal }]} onValueChange={this.handleSliderChange}/>
+            }} 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}/>
 			</View>);
     }
 }
@@ -98,7 +98,7 @@ const remeasureStyles = StyleSheet.create({
         flex: 7,
     },
     remeasureLabel: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
     valueUnitContainer: {

package/dist/src/components/TransferToLogbook.js

@@ -3,6 +3,7 @@ import { Dimensions, StyleSheet, TouchableOpacity, View } from "react-native";
 import { t } from "@lingui/macro";
 import { i18n } from "../locale/i18nUtils";
 import { Testing } from "../types/enum";
+import { colors } from "../utils/Constants";
 import TextBold from "./text/TextBold";
 /**
  * Render a button for transferring the recommendation to a logbook entry.
@@ -58,10 +59,10 @@ const addToLogbookStyles = StyleSheet.create({
         borderRadius: 100,
         marginHorizontal: `4%`,
         paddingVertical: `4%`,
-        borderColor: `#01FFFC`,
+        borderColor: colors.teal,
     },
     transferText: {
-        color: `#01FFFC`,
+        color: colors.teal,
         fontSize: Dimensions.get(`screen`).width / 22,
     },
 });

package/dist/src/components/TwoOptionModal.js

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dimensions, StatusBar, StyleSheet, TouchableOpacity, View } from "react-native";
 import { Testing } from "../types/enum";
-import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } from "../utils/Constants";
+import { colors } from "../utils/Constants";
 import Icon from "./Icon";
 import { stylesModal } from "./RecommendationModal";
 import TextBold from "./text/TextBold";
@@ -13,11 +13,11 @@ export default class TwoOptionModal extends React.Component {
     render() {
         const { rowAsButtonLayout, isCancelable } = this.props;
         return (<View style={modalStyle.container}>
-				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
+				<StatusBar backgroundColor={colors.transparentLightBlue}/>
 				<View style={modalStyle.modalContainer}>
-					{isCancelable ? (<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={modalStyle.iconWrapper}>
+					{isCancelable && (<TouchableOpacity onPress={this.props.onClose} testID={TwoOptionModalTestIds.ExitButton} style={modalStyle.iconWrapper}>
 							<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={modalStyle.icon}/>
-						</TouchableOpacity>) : null}
+						</TouchableOpacity>)}
 
 					<View style={isCancelable ? modalStyle.textContainer : modalStyle.textContainerNotCancelable}>
 						<TextBold style={rowAsButtonLayout ? modalStyle.titleRowLayout : modalStyle.titleColumnLayout}>
@@ -47,11 +47,11 @@ export const modalStyle = StyleSheet.create({
     container: {
         ...StyleSheet.absoluteFillObject,
         justifyContent: `center`,
-        backgroundColor: `rgba(0, 0, 0, 0.9)`,
+        backgroundColor: colors.transparentBlack,
     },
     modalContainer: {
         margin: `4%`,
-        backgroundColor: BACKGROUND_COLOUR_PURPLE,
+        backgroundColor: colors.semiDarkBlue,
         borderRadius: width / 25,
     },
     iconWrapper: {
@@ -60,7 +60,7 @@ export const modalStyle = StyleSheet.create({
         marginTop: `3%`,
     },
     icon: {
-        color: BORDER_COLOUR_GREY,
+        color: colors.fadeBlue,
         fontSize: width / 12,
     },
     textContainer: {
@@ -75,19 +75,19 @@ export const modalStyle = StyleSheet.create({
         alignSelf: `flex-start`,
     },
     titleRowLayout: {
-        color: `rgba(139, 144, 196, 1)`,
+        color: colors.white,
         fontSize: width / 17,
         textAlign: `center`,
         marginBottom: `10%`,
     },
     titleColumnLayout: {
-        color: `rgba(139, 144, 196, 1)`,
+        color: colors.white,
         fontSize: width / 17,
         textAlign: `center`,
         marginBottom: `5%`,
     },
     message: {
-        color: `rgba(245, 242, 242, 1)`,
+        color: colors.lightBlue,
         fontSize: width / 22,
         textAlign: `center`,
     },
@@ -112,7 +112,7 @@ export const modalStyle = StyleSheet.create({
         height: height / 18,
         width: width / 1.5,
         marginTop: 0,
-        backgroundColor: BORDER_COLOUR_TEAL,
+        backgroundColor: colors.teal,
     },
     secondButtonColumn: {
         alignSelf: `center`,
@@ -124,17 +124,17 @@ export const modalStyle = StyleSheet.create({
     textButtonRow: {
         textAlign: `center`,
         fontSize: width / 24,
-        color: `white`,
+        color: colors.teal,
     },
     textFirstButtonColumn: {
         textAlign: `center`,
         fontSize: width / 22,
         paddingHorizontal: 15,
-        color: `#1B1F48`,
+        color: colors.darkBlue,
     },
     textSecondButtonColumn: {
         textAlign: `center`,
         fontSize: width / 26,
-        color: BORDER_COLOUR_TEAL,
+        color: colors.teal,
     },
 });

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

@@ -3,6 +3,7 @@ import React from "react";
 import { Dimensions, 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 TextBold from "../text/TextBold";
 import TextRegular from "../text/TextRegular";
@@ -73,11 +74,11 @@ const activityStyles = StyleSheet.create({
         marginBottom: `2%`,
     },
     infoText: {
-        color: `rgba(160, 180, 240, 1)`,
+        color: colors.lightBlue,
         fontSize: width / 24,
     },
     reductionPercentage: {
-        color: `white`,
+        color: colors.white,
         marginTop: `2%`,
         fontSize: width / 18,
     },

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

@@ -3,6 +3,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, Image, StyleSheet, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
+import { colors } from "../../utils/Constants";
 import TextRegular from "../text/TextRegular";
 const { Other } = Activity.Enums.ActivityEnum;
 /** Mapping from ActivityEnums to corresponding image resource. */
@@ -52,7 +53,7 @@ const activityIconStyles = StyleSheet.create({
         height: Dimensions.get(`screen`).width / 16,
     },
     activityTitle: {
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
 });

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

@@ -1,6 +1,7 @@
 import { Activity } from "@hedia/types";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
+import { colors } from "../../utils/Constants";
 import { ActivityIntensityTranslations } from "../../utils/Translations";
 import { infoStyles } from "../InfoBars";
 import TextBold from "../text/TextBold";
@@ -38,13 +39,13 @@ const activityIntensityStyles = StyleSheet.create({
         borderRadius: 5,
     },
     [Activity.Enums.ActivityIntensity.light]: {
-        backgroundColor: `#A5D871`,
+        backgroundColor: colors.activityGreen,
     },
     [Activity.Enums.ActivityIntensity.moderate]: {
-        backgroundColor: `#F9BD5A`,
+        backgroundColor: colors.activityOrange,
     },
     [Activity.Enums.ActivityIntensity.hard]: {
-        backgroundColor: `#EC5466`,
+        backgroundColor: colors.activityRed,
     },
     intensityContainer: {
         flex: 5,

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

@@ -3,6 +3,7 @@ import { t } from "@lingui/macro";
 import React from "react";
 import { Dimensions, StyleSheet, View } from "react-native";
 import { i18n } from "../../locale/i18nUtils";
+import { colors } from "../../utils/Constants";
 import TextBold from "../text/TextBold";
 import MoodIcon from "./MoodIcon";
 const MoodEnum = Logbook.Enums.MoodEnum;
@@ -55,7 +56,7 @@ const emotionStyles = StyleSheet.create({
     },
     feelingText: {
         textAlign: `center`,
-        color: `white`,
+        color: colors.white,
         fontSize: Dimensions.get(`screen`).width / 26,
     },
     moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },

package/dist/src/utils/Constants.d.ts

@@ -1,10 +1,28 @@
 import { IInterval } from "../types/types";
-/** Reusable color definition. */
-export declare const BACKGROUND_COLOUR_PURPLE = "rgba(27, 31, 72, 1)";
-/** Reusable color definition. */
-export declare const BORDER_COLOUR_GREY = "rgba(74, 91, 134, 1)";
-/** Reusable color definition. */
-export declare const BORDER_COLOUR_TEAL = "rgba(1, 255, 252, 0.8)";
+/** Reusable color definitions. */
+export declare const colors: {
+    blue: string;
+    darkBlue: string;
+    darkBlueX: string;
+    semiDarkBlue: string;
+    dustyBlue: string;
+    fadeBlue: string;
+    lightBlue: string;
+    mistBlue: string;
+    purple: string;
+    teal: string;
+    gradientMain: string[];
+    gradientPurple: string[];
+    white: string;
+    black: string;
+    transparentWhite: string;
+    transparentBlack: string;
+    transparentDarkBlue: string;
+    transparentLightBlue: string;
+    activityGreen: string;
+    activityOrange: string;
+    activityRed: string;
+};
 /** The threshold above which hyperglycemia is considered to be severe in mmol/L */
 export declare const SEVERE_HYPERGLYCEMIA_START_MMOL = 15;
 /** The number of seconds in four hours. */

package/dist/src/utils/Constants.js

@@ -1,10 +1,28 @@
 import { BolusCalculator } from "@hedia/types";
-/** Reusable color definition. */
-export const BACKGROUND_COLOUR_PURPLE = `rgba(27, 31, 72, 1)`;
-/** Reusable color definition. */
-export const BORDER_COLOUR_GREY = `rgba(74, 91, 134, 1)`;
-/** Reusable color definition. */
-export const BORDER_COLOUR_TEAL = `rgba(1, 255, 252, 0.8)`;
+/** Reusable color definitions. */
+export const colors = {
+    blue: `#578aff`,
+    darkBlue: `#0F1231`,
+    darkBlueX: `#1B1F48`,
+    semiDarkBlue: `#1B1F48`,
+    dustyBlue: `#C5D0E7`,
+    fadeBlue: `#8388C8`,
+    lightBlue: `#C8CCFA`,
+    mistBlue: `#4A5B86`,
+    purple: `#a200ff`,
+    teal: `#01FFFC`,
+    gradientMain: [`#8B38F5`, `#D593E5`],
+    gradientPurple: [`#a200ff`, `#578aff`],
+    white: `#FFFFFF`,
+    black: `#000000`,
+    transparentWhite: `#FFFFFF00`,
+    transparentBlack: `#000000E6`,
+    transparentDarkBlue: `#0F123120`,
+    transparentLightBlue: `#578AFF1A`,
+    activityGreen: `#A5D871`,
+    activityOrange: `#F9BD5A`,
+    activityRed: `#EC5466`,
+};
 /** The threshold above which hyperglycemia is considered to be severe in mmol/L */
 export const SEVERE_HYPERGLYCEMIA_START_MMOL = 15;
 /** The number of seconds in four hours. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hedia/recommendation-screen",
-  "version": "2.1.49",
+  "version": "2.1.50-alpha.0",
   "description": "Hedia Recommendation Screen for Bolus and Carbohydrates",
   "main": "dist/index.js",
   "files": [