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

package/dist/src/components/Header.js

@@ -11,65 +11,59 @@ export default class Header extends React.Component {
     /** JSX element to display the cancel button and header. When the cancel button in the header is tabbed, the exitCallback prop callback function should be called. */
     render() {
         return (<React.Fragment>
-				<SafeAreaView style={headerStyles.backgroundColour}/>
-				<View style={headerStyles.headerContainer}>
+				<SafeAreaView style={headerStyles.headerContainer}>
 					<View style={headerStyles.margin}>
 						<View style={headerStyles.exitButtonContainer}>
-							<View style={headerStyles.exitButton}>
-								<TouchableOpacity testID={Testing.Id.HeaderTestIds.ExitCalculation} style={headerStyles.exitButton} onPress={this.props.exitCallback}>
-									<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={headerStyles.iconStyle}/>
-								</TouchableOpacity>
-								<View style={headerStyles.headerFiller}/>
-							</View>
+							<TouchableOpacity onPress={this.props.exitCallback} testID={Testing.Id.HeaderTestIds.ExitCalculation}>
+								<Icon iconIdentifier={`Ionicons/ios-close-circle-outline`} style={headerStyles.icon}/>
+							</TouchableOpacity>
 						</View>
 						<View style={headerStyles.headerTextContainer}>
-							<TextBold style={headerStyles.headerText} testID={Testing.Id.HeaderTestIds.HeaderText}>
+							<TextBold style={headerStyles.headerText}>
 								{i18n._(t `INSULIN${`\n`}RECOMMENDATION`)}
 							</TextBold>
 						</View>
-						<View style={headerStyles.headerFiller}/>
+						<View style={headerStyles.headerSettingsFiller}/>
 					</View>
-				</View>
+				</SafeAreaView>
 			</React.Fragment>);
     }
 }
+const { width } = Dimensions.get(`window`);
 const headerStyles = StyleSheet.create({
-    backgroundColour: {
-        backgroundColor: colors.darkBlue,
-    },
     margin: {
-        margin: `1%`,
-        marginBottom: `3%`,
+        marginHorizontal: `2%`,
+        marginTop: `3%`,
         flexDirection: `row`,
         flex: 1,
     },
     headerContainer: {
         flexDirection: `row`,
-        flex: 1,
+        marginVertical: `2%`,
     },
     exitButtonContainer: {
-        alignItems: `center`,
-        flex: 1,
+        maxWidth: `11.5%`,
+        minWidth: `11.5%`,
     },
-    exitButton: {
-        flex: 1,
-    },
-    iconStyle: {
-        fontSize: Dimensions.get(`screen`).width / 12,
-        color: colors.mistBlue,
+    icon: {
+        fontSize: width / 12,
+        color: colors.fadeBlue,
+        alignSelf: `center`,
     },
     headerTextContainer: {
         flex: 6,
-        justifyContent: `center`,
+        justifyContent: `flex-start`,
         alignItems: `center`,
-        marginTop: `5%`,
+        maxWidth: `77%`,
     },
     headerText: {
-        fontSize: Dimensions.get(`screen`).width / 18,
+        fontSize: width / 20,
         textAlign: `center`,
         color: colors.white,
     },
-    headerFiller: {
-        flex: 1,
+    headerSettingsFiller: {
+        flexDirection: `column`,
+        maxWidth: `11.5%`,
+        minWidth: `11.5%`,
     },
 });

package/package.json

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