@quintype/native-components 2.29.9-beta.0 → 2.30.0--center-align-logo-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quintype/native-components",
-  "version": "2.29.9-beta.0",
+  "version": "2.30.0--center-align-logo-beta.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/Header/index.js

@@ -12,12 +12,35 @@ import { headerStyles } from "./styles";
 
 export const Header = (props) => {
   const { theme } = useContext(AppTheme);
-  const styles = headerStyles(theme, props.noBorder);
+  const { noBorder, centerAlignLogo } = props || {};
+  const styles = headerStyles(theme, noBorder, centerAlignLogo);
   const headerStyle = StyleSheet.flatten([styles.header, props.style]);
   const logoComponentStyle = StyleSheet.flatten([
     styles.logoComponentStyle,
     props.logoComponentStyle,
   ]);
+  if (centerAlignLogo) {
+    return (
+      <View style={styles.header}>
+        <View style={styles.leftContainer}>
+          {props.leftComponent && props.leftComponent}
+        </View>
+          {props.logoComponent && (
+            <TouchableOpacity
+              style={logoComponentStyle}
+              onPress={props.onPress}
+              testID={COMP_GENERAL_CONSTANTS.headerLogoTouch}
+            >
+              {props.logoComponent}
+            </TouchableOpacity>
+          )}
+        <View style={styles.rightContainer}>
+          {props.rightComponent && props.rightComponent}
+        </View>
+      </View>
+    )
+  }
+
   return (
     <View style={headerStyle}>
       <View>

package/src/components/Header/styles.js

@@ -1,19 +1,35 @@
 import { StyleSheet } from 'react-native';
 
-export const headerStyles = (appThemeContext, noBorder) => {
+export const headerStyles = (appThemeContext, noBorder, centerAlignLogo) => {
   const { COLORS, DARK_MODE } = appThemeContext;
-  return StyleSheet.create({
+  const headerContainerStyles = {
     header: {
       height: 48,
       backgroundColor: DARK_MODE ? COLORS.MONO6 : COLORS.BRAND_WHITE,
       flexDirection: 'row',
       alignItems: 'center',
-      justifyContent: 'space-between',
+      justifyContent: centerAlignLogo ? 'center' : 'space-between',
       paddingHorizontal: 10,
       borderBottomColor: noBorder
         ? (DARK_MODE ? COLORS.BRAND_WHITE : COLORS.BRAND_BLACK)
         : (DARK_MODE ? COLORS.MONO6 : COLORS.BRAND5),
       borderBottomWidth: StyleSheet.hairlineWidth,
-    },
-  });
+    }
+  }
+
+  if (centerAlignLogo) {
+    return StyleSheet.create({
+      ...headerContainerStyles,
+      leftContainer: {
+        flex: 1, // Takes up all left space
+        alignItems: 'flex-start', // Aligns leftView to the left
+      },
+      rightContainer: {
+        flex: 1, // Takes up all right space
+        alignItems: 'flex-end', // Aligns rightView to the right
+      }
+    });
+  }
+
+  return StyleSheet.create(headerContainerStyles);
 };

package/src/components/References/index.js

@@ -5,7 +5,7 @@ import { Linking, View, TouchableOpacity } from 'react-native';
 import { AppTheme } from '../../utils';
 import { Text } from '../Text';
 import { styles } from './styles';
-import Icon from "react-native-vector-icons/FontAwesome5";
+import Icon from "react-native-vector-icons/FontAwesome";
 
 export const References = ({
   card, referenceNameTestId, referenceDescTestID, referenceContainerTestID,
@@ -22,7 +22,7 @@ export const References = ({
       <View style={referenceStyles.container} testID={referenceContainerTestID}>
         <View>
         <View style={referenceStyles.topSubContainer}>
-          <Icon name={'external-link-alt'} size={FONT_SIZE.h2} style={referenceStyles.iconStyle} testID="referenceStoryIcon" />
+          <Icon name={'external-link'} size={FONT_SIZE.h2} style={referenceStyles.iconStyle} testID="referenceStoryIcon" />
           <Text style={referenceStyles.referenceText}>{'REFERENCE'}</Text>
         </View>
         <Text style={referenceStyles.name} testID={referenceNameTestId}>

package/src/components/References/styles.js

@@ -16,7 +16,6 @@ export const styles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
   },
   name: {
     fontSize: FONT_SIZE.h1,
-    fontWeight: 'bold',
     marginTop:15,
     textDecorationLine:'underline',
     lineHeight:24,
@@ -31,8 +30,8 @@ export const styles = (COLORS, FONT_SIZE, FONT_FAMILY) => StyleSheet.create({
   },
   referenceText: {
     marginLeft:5,
-    fontWeight:'700',
-    fontSize: FONT_SIZE.h3
+    fontSize: FONT_SIZE.h3,
+    color:COLORS.BRAND_1,
   },
   topSubContainer:{
     display: 'flex',