@hedia/recommendation-screen 2.1.49-alpha.3 → 2.1.49

package/dist/src/RecommendationScreen.js

@@ -1,6 +1,7 @@
 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";
@@ -12,7 +13,6 @@ 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 ? colors.teal : colors.mistBlue,
+                    borderColor: recommendedCarbs ? BORDER_COLOUR_TEAL : BORDER_COLOUR_GREY,
                 },
             ]}>
 								<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: colors.darkBlue,
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
     },
     calcContainer: {
         flex: 1,
@@ -514,6 +514,6 @@ const containerStyles = StyleSheet.create({
     },
     calcBorder: {
         ...infoStyles.border,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_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 { colors } from "../utils/Constants";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY } 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: colors.darkBlue,
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
     },
     margin: {
         margin: `1%`,
@@ -56,7 +56,7 @@ const headerStyles = StyleSheet.create({
     },
     iconStyle: {
         fontSize: Dimensions.get(`screen`).width / 12,
-        color: colors.mistBlue,
+        color: BORDER_COLOUR_GREY,
     },
     headerTextContainer: {
         flex: 6,
@@ -67,7 +67,7 @@ const headerStyles = StyleSheet.create({
     headerText: {
         fontSize: Dimensions.get(`screen`).width / 18,
         textAlign: `center`,
-        color: colors.white,
+        color: `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 { colors } from "../utils/Constants";
+import { BORDER_COLOUR_GREY } 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: colors.mistBlue,
+        borderColor: BORDER_COLOUR_GREY,
         borderRadius: 5,
         paddingVertical: `1%`,
     },
@@ -95,7 +95,7 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `center`,
     },
     label: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 22,
     },
     valueUnitContainer: {
@@ -108,7 +108,7 @@ export const infoStyles = StyleSheet.create({
         justifyContent: `flex-end`,
     },
     value: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 15,
         textAlign: `right`,
     },
@@ -118,7 +118,7 @@ export const infoStyles = StyleSheet.create({
         paddingBottom: `3%`,
     },
     units: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 30,
         textAlign: `left`,
         paddingLeft: `5%`,

package/dist/src/components/RecentInsulin.js

@@ -3,7 +3,6 @@ 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. */
@@ -42,7 +41,7 @@ export default class RecentInsulin extends React.Component {
 const recentInsulinStyles = StyleSheet.create({
     container: {
         ...infoStyles.margin,
-        backgroundColor: colors.purple,
+        backgroundColor: `rgba(118, 82, 255, 0.5)`,
         borderRadius: 5,
     },
     titleContainer: {
@@ -75,7 +74,7 @@ const recentInsulinStyles = StyleSheet.create({
     },
     yesNoContainer: {
         flex: 1,
-        borderColor: colors.white,
+        borderColor: `white`,
         borderRadius: 100,
         borderWidth: 2,
         paddingHorizontal: `2%`,
@@ -85,7 +84,7 @@ const recentInsulinStyles = StyleSheet.create({
         textAlign: `center`,
         paddingTop: `1%`,
         paddingBottom: `1%`,
-        color: colors.white,
+        color: `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 { colors } from "../utils/Constants";
+import { BORDER_COLOUR_TEAL } 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: colors.semiDarkBlue,
+        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         justifyContent: `center`,
         paddingHorizontal: `4%`,
     },
     containerAcceptButton: {
         flex: 1,
-        backgroundColor: colors.semiDarkBlue,
+        backgroundColor: `rgba(30, 35, 87, 0.9)`,
         justifyContent: `flex-start`,
     },
     titleContainer: { marginBottom: `5%` },
     recommendationRow: { justifyContent: `center`, alignContent: `center`, marginBottom: `3%` },
-    textTittleMessage: { color: colors.white, fontSize: titleFontSize, textAlign: `center` },
-    textMessage: { color: colors.white, fontSize: textFontSize, textAlign: `center` },
-    buttonText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
+    textTittleMessage: { color: `white`, fontSize: titleFontSize, textAlign: `center` },
+    textMessage: { color: `white`, fontSize: textFontSize, textAlign: `center` },
+    buttonText: { color: BORDER_COLOUR_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: colors.teal,
+        borderColor: BORDER_COLOUR_TEAL,
     },
     suggestedContainer: { justifyContent: `center`, flexDirection: `row`, marginBottom: `3%` },
-    suggestedCarbs: { color: colors.white, fontSize: sugestionFontSize },
+    suggestedCarbs: { color: `white`, fontSize: sugestionFontSize },
     textCenter: { textAlign: `center` },
-    recommendEatingText: { color: colors.dustyBlue, fontSize: recommendEatingFontSize, textAlign: `center` },
-    carbohydrateText: { color: colors.white, fontSize: sugestionFontSize },
-    addToCalculation: { color: colors.white, fontSize: textFontSize, textAlign: `center` },
+    recommendEatingText: { color: `#C5D0E7`, fontSize: recommendEatingFontSize, textAlign: `center` },
+    carbohydrateText: { color: `white`, fontSize: sugestionFontSize },
+    addToCalculation: { color: `white`, fontSize: textFontSize, textAlign: `center` },
     recommendationButtonsContainer: { justifyContent: `center`, flexDirection: `row`, margin: `3%` },
-    affirmativeCarbsText: { color: colors.teal, fontSize: buttonFontSize, textAlign: `center` },
-    negativeCarbsText: { color: colors.white, fontSize: buttonFontSize, textAlign: `center` },
+    affirmativeCarbsText: { color: BORDER_COLOUR_TEAL, fontSize: buttonFontSize, textAlign: `center` },
+    negativeCarbsText: { color: `white`, fontSize: buttonFontSize, textAlign: `center` },
     affirmativeCarbsButton: {
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_TEAL,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -201,7 +201,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `2%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: colors.white,
+        borderColor: `white`,
         width: buttonWidth,
         height: buttonHeight,
         alignSelf: `center`,
@@ -212,7 +212,7 @@ export const stylesModal = StyleSheet.create({
         marginTop: `6%`,
         borderRadius: buttonBorderRadius,
         borderWidth: buttonBorderWidth,
-        borderColor: colors.teal,
+        borderColor: BORDER_COLOUR_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 { colors } from "../utils/Constants";
+import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } 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={colors.mistBlue}/>
+				<LineSeparator color={BORDER_COLOUR_GREY}/>
 				<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: colors.teal }}>
+								<TextBold testID={RecommendedCarbsTestIds.RecommendedCarbs} style={{ ...calculationStyles.value, color: BORDER_COLOUR_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: colors.teal }}>
+								<TextRegular style={{ ...calculationStyles.units, color: BORDER_COLOUR_TEAL }}>
 									{i18n._(t `grams`)}
 								</TextRegular>
 							</View>
 						</TouchableOpacity>
 					</View>
 				</View>
-				<LineSeparator color={colors.teal}/>
+				<LineSeparator color={BORDER_COLOUR_TEAL}/>
 				{this.renderRow({
                 label: i18n._(t `Total`),
                 value: totalCarbs.toString(),
@@ -191,14 +191,14 @@ const calculationStyles = StyleSheet.create({
     },
     foodUnitsLabel: {
         ...infoStyles.units,
-        color: colors.lightBlue,
+        color: `rgba(160, 180, 240, 1)`,
         paddingLeft: `1%`,
     },
     rowContainer: {
         flex: 7,
     },
     rowLabel: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
     enteredContainer: {
@@ -206,7 +206,7 @@ const calculationStyles = StyleSheet.create({
         alignItems: `flex-end`,
     },
     entered: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 23,
     },
     valueUnitContainer: {
@@ -230,7 +230,7 @@ const calculationStyles = StyleSheet.create({
         flexDirection: `row`,
     },
     editIcon: {
-        color: colors.teal,
+        color: BORDER_COLOUR_TEAL,
         fontSize: Dimensions.get(`screen`).width / 30,
     },
     recommendedContainer: {
@@ -238,7 +238,7 @@ const calculationStyles = StyleSheet.create({
         flexDirection: `row`,
     },
     recommendedLabel: {
-        color: colors.teal,
+        color: BORDER_COLOUR_TEAL,
         fontSize: Dimensions.get(`screen`).width / 25,
         alignSelf: `center`,
     },
@@ -248,7 +248,7 @@ const calculationStyles = StyleSheet.create({
         marginTop: `1%`,
     },
     removeRecommendedIcon: {
-        color: colors.teal,
+        color: BORDER_COLOUR_TEAL,
         fontSize: Dimensions.get(`screen`).width / 20,
         paddingBottom: `0.5%`,
     },

package/dist/src/components/RecommendedInsulin.js

@@ -6,7 +6,6 @@ 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";
@@ -107,7 +106,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={[colors.purple, colors.blue]} useAngle={true} angle={135}>
+					<LinearGradient style={recommendedInsulinStyles.container} colors={[`#a200ff`, `#578aff`]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }}>
 						<View style={recommendedInsulinStyles.recommendedTextContainer}>
 							<TextBold style={recommendedInsulinStyles.recommendedText}>
 								{i18n._(t `Recommended amount of insulin`)}
@@ -155,17 +154,17 @@ const recommendedInsulinStyles = StyleSheet.create({
         minHeight: Dimensions.get(`screen`).width / 4,
     },
     value: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 5,
     },
     units: {
         alignSelf: `flex-end`,
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 28,
         paddingBottom: `6%`,
     },
     editIcon: {
-        color: colors.white,
+        color: `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 { colors } from "../utils/Constants";
+import { BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } 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={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={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}/>
 			</View>);
     }
 }
@@ -98,7 +98,7 @@ const remeasureStyles = StyleSheet.create({
         flex: 7,
     },
     remeasureLabel: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
     valueUnitContainer: {

package/dist/src/components/TransferToLogbook.js

@@ -3,8 +3,6 @@ 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 Icon from "./Icon";
 import TextBold from "./text/TextBold";
 /**
  * Render a button for transferring the recommendation to a logbook entry.
@@ -39,14 +37,9 @@ export default class TransferToLogbook extends React.Component {
             return <View style={addToLogbookStyles.marginContainer}/>;
         }
         return (<TouchableOpacity testID={Testing.Id.TransferToLogbookTestIds.TransferButton} onPress={this.handlePress} disabled={this.state.pressed} style={addToLogbookStyles.container}>
-				{!this.state.pressed ? (<View style={addToLogbookStyles.textContainer}>
-						<TextBold style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</TextBold>
-					</View>) : (<View style={addToLogbookStyles.textContainerActive}>
-						<Icon style={addToLogbookStyles.icon} iconIdentifier={`Feather/check`}/>
-						<TextBold style={addToLogbookStyles.transferTextActive}>
-							{i18n._(t `Transferred to logbook`)}
-						</TextBold>
-					</View>)}
+				<View style={addToLogbookStyles.textContainer}>
+					<TextBold style={addToLogbookStyles.transferText}>{i18n._(t `Transfer to logbook`)}</TextBold>
+				</View>
 			</TouchableOpacity>);
     }
 }
@@ -65,29 +58,10 @@ const addToLogbookStyles = StyleSheet.create({
         borderRadius: 100,
         marginHorizontal: `4%`,
         paddingVertical: `4%`,
-        borderColor: colors.teal,
+        borderColor: `#01FFFC`,
     },
     transferText: {
-        color: colors.teal,
-        fontSize: Dimensions.get(`screen`).width / 22,
-    },
-    textContainerActive: {
-        flexDirection: `row`,
-        backgroundColor: colors.teal,
-        justifyContent: `center`,
-        borderWidth: 1,
-        borderRadius: 100,
-        marginHorizontal: `4%`,
-        paddingVertical: `4%`,
-    },
-    icon: {
-        paddingTop: `1.3%`,
-        color: colors.darkBlue,
-        fontSize: Dimensions.get(`screen`).width / 22,
-        marginRight: `1%`,
-    },
-    transferTextActive: {
-        color: colors.darkBlue,
+        color: `#01FFFC`,
         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 { colors } from "../utils/Constants";
+import { BACKGROUND_COLOUR_PURPLE, BORDER_COLOUR_GREY, BORDER_COLOUR_TEAL } 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={colors.transparentLightBlue}/>
+				<StatusBar backgroundColor={`rgba(0, 0, 0, 1)`}/>
 				<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>)}
+						</TouchableOpacity>) : null}
 
 					<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: colors.transparentBlack,
+        backgroundColor: `rgba(0, 0, 0, 0.9)`,
     },
     modalContainer: {
         margin: `4%`,
-        backgroundColor: colors.semiDarkBlue,
+        backgroundColor: BACKGROUND_COLOUR_PURPLE,
         borderRadius: width / 25,
     },
     iconWrapper: {
@@ -60,7 +60,7 @@ export const modalStyle = StyleSheet.create({
         marginTop: `3%`,
     },
     icon: {
-        color: colors.fadeBlue,
+        color: BORDER_COLOUR_GREY,
         fontSize: width / 12,
     },
     textContainer: {
@@ -75,19 +75,19 @@ export const modalStyle = StyleSheet.create({
         alignSelf: `flex-start`,
     },
     titleRowLayout: {
-        color: colors.white,
+        color: `rgba(139, 144, 196, 1)`,
         fontSize: width / 17,
         textAlign: `center`,
         marginBottom: `10%`,
     },
     titleColumnLayout: {
-        color: colors.white,
+        color: `rgba(139, 144, 196, 1)`,
         fontSize: width / 17,
         textAlign: `center`,
         marginBottom: `5%`,
     },
     message: {
-        color: colors.lightBlue,
+        color: `rgba(245, 242, 242, 1)`,
         fontSize: width / 22,
         textAlign: `center`,
     },
@@ -112,7 +112,7 @@ export const modalStyle = StyleSheet.create({
         height: height / 18,
         width: width / 1.5,
         marginTop: 0,
-        backgroundColor: colors.teal,
+        backgroundColor: BORDER_COLOUR_TEAL,
     },
     secondButtonColumn: {
         alignSelf: `center`,
@@ -124,17 +124,17 @@ export const modalStyle = StyleSheet.create({
     textButtonRow: {
         textAlign: `center`,
         fontSize: width / 24,
-        color: colors.teal,
+        color: `white`,
     },
     textFirstButtonColumn: {
         textAlign: `center`,
         fontSize: width / 22,
         paddingHorizontal: 15,
-        color: colors.darkBlue,
+        color: `#1B1F48`,
     },
     textSecondButtonColumn: {
         textAlign: `center`,
         fontSize: width / 26,
-        color: colors.teal,
+        color: BORDER_COLOUR_TEAL,
     },
 });

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

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

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

@@ -3,7 +3,6 @@ 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. */
@@ -53,7 +52,7 @@ const activityIconStyles = StyleSheet.create({
         height: Dimensions.get(`screen`).width / 16,
     },
     activityTitle: {
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 25,
     },
 });

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

@@ -1,7 +1,6 @@
 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";
@@ -39,13 +38,13 @@ const activityIntensityStyles = StyleSheet.create({
         borderRadius: 5,
     },
     [Activity.Enums.ActivityIntensity.light]: {
-        backgroundColor: colors.activityGreen,
+        backgroundColor: `#A5D871`,
     },
     [Activity.Enums.ActivityIntensity.moderate]: {
-        backgroundColor: colors.activityOrange,
+        backgroundColor: `#F9BD5A`,
     },
     [Activity.Enums.ActivityIntensity.hard]: {
-        backgroundColor: colors.activityRed,
+        backgroundColor: `#EC5466`,
     },
     intensityContainer: {
         flex: 5,

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

@@ -3,7 +3,6 @@ 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;
@@ -56,7 +55,7 @@ const emotionStyles = StyleSheet.create({
     },
     feelingText: {
         textAlign: `center`,
-        color: colors.white,
+        color: `white`,
         fontSize: Dimensions.get(`screen`).width / 26,
     },
     moodIconContainer: { flex: 1, flexDirection: `row`, justifyContent: `center` },

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

@@ -1,28 +1,10 @@
 import { IInterval } from "../types/types";
-/** 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;
-};
+/** 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)";
 /** 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,28 +1,10 @@
 import { BolusCalculator } from "@hedia/types";
-/** 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`,
-};
+/** 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)`;
 /** 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-alpha.3",
+  "version": "2.1.49",
   "description": "Hedia Recommendation Screen for Bolus and Carbohydrates",
   "main": "dist/index.js",
   "files": [