@plusscommunities/pluss-core-app 6.1.7 → 6.1.8-auth.0

package/src/components/Header.js

@@ -1,8 +1,17 @@
-import React, { Component } from 'react';
-import { Animated, View, StatusBar, Image, Dimensions, TouchableOpacity, Text, Platform } from 'react-native';
-import { Icon } from 'react-native-elements';
-import { LinearGradient } from 'expo-linear-gradient';
-import { connect } from 'react-redux';
+import React, { Component } from "react";
+import { Text } from "@plusscommunities/pluss-core-app/components";
+import {
+	Animated,
+	View,
+	StatusBar,
+	Image,
+	Dimensions,
+	TouchableOpacity,
+	Platform,
+} from "react-native";
+import { Icon } from "@rneui/themed";
+import { LinearGradient } from "expo-linear-gradient";
+import { connect } from "react-redux";
 // import {
 //   StatusBarHeight,
 //   COLOUR_TRANSPARENT,
@@ -14,493 +23,630 @@ import { connect } from 'react-redux';
 //   hexToRGBAstring,
 //   getSiteSettingFromState,
 // } from '../../js';
-import { StatusBarHeight, getSiteSettingFromState } from '../helper';
+import { StatusBarHeight, getSiteSettingFromState } from "../helper";
 import {
-  COLOUR_TRANSPARENT,
-  TEXT_DARK,
-  TEXT_LIGHT,
-  LINEGREY,
-  COLOUR_GREEN,
-  getMainBrandingColourFromState,
-  hexToRGBAstring,
-} from '../colours';
-import { Pl60Icon } from '../fonts';
-import Config from '../config';
+	COLOUR_TRANSPARENT,
+	TEXT_DARK,
+	TEXT_LIGHT,
+	LINEGREY,
+	COLOUR_GREEN,
+	getMainBrandingColourFromState,
+	hexToRGBAstring,
+} from "../colours";
+import { FontAwesome } from "./Icon";
+import Config from "../config";
 // import { HAS_GRADIENT_HEADER } from '../../config';
 
 class Header extends Component {
-  constructor(props) {
-    super(props);
+	constructor(props) {
+		super(props);
 
-    this.state = {};
-  }
+		this.state = {};
+	}
 
-  UNSAFE_componentWillMount() {
-    let barStyle = Platform.select({ ios: 'dark-content', android: 'default' });
-    if (this.props.barStyle) {
-      barStyle = this.props.barStyle;
-    } else if (this.props.headerType !== 'white' && !this.props.noGradient && !this.props.transparent) {
-      barStyle = 'light-content';
-    }
-    this.setState({ windowWidth: Dimensions.get('window').width, barStyle });
-  }
+	UNSAFE_componentWillMount() {
+		let barStyle = Platform.select({ ios: "dark-content", android: "default" });
+		if (this.props.barStyle) {
+			barStyle = this.props.barStyle;
+		} else if (
+			this.props.headerType !== "white" &&
+			!this.props.noGradient &&
+			!this.props.transparent
+		) {
+			barStyle = "light-content";
+		}
+		this.setState({ windowWidth: Dimensions.get("window").width, barStyle });
+	}
 
-  getTextColourStyle() {
-    if (this.props.textColour) {
-      return { color: this.props.textColour };
-    }
-    if (this.props.headerType !== 'white' && !this.props.noGradient && !this.props.transparent) {
-      return { color: '#fff' };
-    }
-    return null;
-  }
+	getTextColourStyle() {
+		if (this.props.textColour) {
+			return { color: this.props.textColour };
+		}
+		if (
+			this.props.headerType !== "white" &&
+			!this.props.noGradient &&
+			!this.props.transparent
+		) {
+			return { color: "#fff" };
+		}
+		return null;
+	}
 
-  renderBackground() {
-    if (this.props.headerBackground) return this.props.headerBackground;
-    if (this.props.headerImage) {
-      return <Image style={[styles.thumbnailStyle, { width: this.state.windowWidth }]} source={{ uri: this.props.headerImage }} />;
-    }
-    if (this.props.headerType === 'pattern' && !this.props.noGradient && !this.props.transparent) {
-      return (
-        <View
-          style={[
-            styles.thumbnailStyle,
-            this.props.contentContainerStyle,
-            { backgroundColor: this.props.colourBrandingMain, width: this.state.windowWidth },
-            this.props.popupHeader && styles.thumbnailPopupHeader,
-          ]}
-        >
-          <Image
-            style={[styles.headerPattern, this.props.patternColour && { tintColor: this.props.patternColour }]}
-            source={{ uri: this.props.headerPattern }}
-          />
-        </View>
-      );
-    }
-    if (this.props.headerType === 'block' && !this.props.noGradient && !this.props.transparent) {
-      return (
-        <View
-          style={[
-            styles.thumbnailStyle,
-            this.props.contentContainerStyle,
-            { backgroundColor: this.props.colourBrandingMain, width: this.state.windowWidth },
-            this.props.popupHeader && styles.thumbnailPopupHeader,
-          ]}
-        />
-      );
-    }
-    if (this.props.headerType === 'gradient' && !this.props.noGradient && !this.props.transparent) {
-      return (
-        <View
-          style={[
-            styles.thumbnailStyle,
-            this.props.contentContainerStyle,
-            { width: this.state.windowWidth },
-            this.props.popupHeader && styles.thumbnailPopupHeader,
-          ]}
-        >
-          <LinearGradient
-            style={{ flex: 1 }}
-            colors={[this.props.colourBrandingMain, hexToRGBAstring(this.props.colourBrandingMain, 0.7)]}
-            start={{ x: 0, y: 0 }}
-            end={{ x: 1, y: 1 }}
-            locations={[0.4, 1]}
-          />
-        </View>
-      );
-    }
-    return null;
-  }
+	renderBackground() {
+		if (this.props.headerBackground) return this.props.headerBackground;
+		if (this.props.headerImage) {
+			return (
+				<Image
+					style={[styles.thumbnailStyle, { width: this.state.windowWidth }]}
+					source={{ uri: this.props.headerImage }}
+				/>
+			);
+		}
+		if (
+			this.props.headerType === "pattern" &&
+			!this.props.noGradient &&
+			!this.props.transparent
+		) {
+			return (
+				<View
+					style={[
+						styles.thumbnailStyle,
+						this.props.contentContainerStyle,
+						{
+							backgroundColor: this.props.colourBrandingMain,
+							width: this.state.windowWidth,
+						},
+						this.props.popupHeader && styles.thumbnailPopupHeader,
+					]}
+				>
+					<Image
+						style={[
+							styles.headerPattern,
+							this.props.patternColour && {
+								tintColor: this.props.patternColour,
+							},
+						]}
+						source={{ uri: this.props.headerPattern }}
+					/>
+				</View>
+			);
+		}
+		if (
+			this.props.headerType === "block" &&
+			!this.props.noGradient &&
+			!this.props.transparent
+		) {
+			return (
+				<View
+					style={[
+						styles.thumbnailStyle,
+						this.props.contentContainerStyle,
+						{
+							backgroundColor: this.props.colourBrandingMain,
+							width: this.state.windowWidth,
+						},
+						this.props.popupHeader && styles.thumbnailPopupHeader,
+					]}
+				/>
+			);
+		}
+		if (
+			this.props.headerType === "gradient" &&
+			!this.props.noGradient &&
+			!this.props.transparent
+		) {
+			return (
+				<View
+					style={[
+						styles.thumbnailStyle,
+						this.props.contentContainerStyle,
+						{ width: this.state.windowWidth },
+						this.props.popupHeader && styles.thumbnailPopupHeader,
+					]}
+				>
+					<LinearGradient
+						style={{ flex: 1 }}
+						colors={[
+							this.props.colourBrandingMain,
+							hexToRGBAstring(this.props.colourBrandingMain, 0.7),
+						]}
+						start={{ x: 0, y: 0 }}
+						end={{ x: 1, y: 1 }}
+						locations={[0.4, 1]}
+					/>
+				</View>
+			);
+		}
+		return null;
+	}
 
-  renderLeftBubble() {
-    if (!this.props.hasLeftBubble) {
-      return null;
-    }
-    return <View style={[styles.counter, styles.smallCounter]} />;
-  }
+	renderLeftBubble() {
+		if (!this.props.hasLeftBubble) {
+			return null;
+		}
+		return <View style={[styles.counter, styles.smallCounter]} />;
+	}
 
-  renderLeftIcon() {
-    if ((!this.props.leftIcon && !this.props.leftText) || !this.props.onPressLeft) {
-      return null;
-    }
-    if (this.props.leftText) {
-      return (
-        <View style={[styles.headerContentIcon, { width: 'auto' }]}>
-          <TouchableOpacity onPress={this.props.onPressLeft} activeOpacity={0.6}>
-            <Text
-              style={[
-                styles.buttonText,
-                { paddingRight: 5, paddingLeft: 15, color: this.props.colourBrandingMain },
-                this.props.leftTextStyle,
-                this.props.headerType !== 'white' && !this.props.noGradient && !this.props.transparent && { color: '#fff' },
-              ]}
-            >
-              {this.props.leftText}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      );
-    }
-    if (this.props.leftIconType && this.props.leftIconType === 'pluss') {
-      return (
-        <View style={styles.headerContentIcon}>
-          <TouchableOpacity onPress={this.props.onPressLeft} activeOpacity={0.6}>
-            <View style={styles.headerContentIcon}>
-              <Pl60Icon name={this.props.leftIcon} style={[styles.leftIcon, this.props.leftIconStyle, this.getTextColourStyle()]} />
-              {this.renderLeftBubble()}
-            </View>
-          </TouchableOpacity>
-        </View>
-      );
-    }
-    return (
-      <View style={styles.headerContentIcon}>
-        <TouchableOpacity onPress={this.props.onPressLeft} activeOpacity={0.6}>
-          <Icon
-            name={this.props.leftIcon}
-            style={styles.headerContentIcon}
-            type="font-awesome"
-            iconStyle={[styles.leftIcon, this.props.leftIconStyle, this.getTextColourStyle()]}
-          />
-          {this.renderLeftBubble()}
-        </TouchableOpacity>
-      </View>
-    );
-  }
+	renderLeftIcon() {
+		if (
+			(!this.props.leftIcon && !this.props.leftText) ||
+			!this.props.onPressLeft
+		) {
+			return null;
+		}
+		if (this.props.leftText) {
+			return (
+				<View style={[styles.headerContentIcon, { width: "auto" }]}>
+					<TouchableOpacity
+						onPress={this.props.onPressLeft}
+						activeOpacity={0.6}
+					>
+						<Text
+							style={[
+								styles.buttonText,
+								{
+									paddingRight: 5,
+									paddingLeft: 15,
+									color: this.props.colourBrandingMain,
+								},
+								this.props.leftTextStyle,
+								this.props.headerType !== "white" &&
+									!this.props.noGradient &&
+									!this.props.transparent && { color: "#fff" },
+							]}
+						>
+							{this.props.leftText}
+						</Text>
+					</TouchableOpacity>
+				</View>
+			);
+		}
+		if (this.props.leftIconType && this.props.leftIconType === "pluss") {
+			return (
+				<View style={styles.headerContentIcon}>
+					<TouchableOpacity
+						onPress={this.props.onPressLeft}
+						activeOpacity={0.6}
+					>
+						<View style={styles.headerContentIcon}>
+							<FontAwesome
+								name={this.props.leftIcon}
+								style={[
+									styles.leftIcon,
+									this.props.leftIconStyle,
+									this.getTextColourStyle(),
+								]}
+							/>
+							{this.renderLeftBubble()}
+						</View>
+					</TouchableOpacity>
+				</View>
+			);
+		}
+		return (
+			<View style={styles.headerContentIcon}>
+				<TouchableOpacity onPress={this.props.onPressLeft} activeOpacity={0.6}>
+					<Icon
+						name={this.props.leftIcon}
+						style={styles.headerContentIcon}
+						type="font-awesome"
+						iconStyle={[
+							styles.leftIcon,
+							this.props.leftIconStyle,
+							this.getTextColourStyle(),
+						]}
+					/>
+					{this.renderLeftBubble()}
+				</TouchableOpacity>
+			</View>
+		);
+	}
 
-  renderHeaderText() {
-    if (!this.props.text) {
-      if (this.props.centerContent) {
-        return this.props.centerContent;
-      }
-      return null;
-    }
-    if (this.props.onTextPress) {
-      return (
-        <TouchableOpacity
-          onPress={this.props.onTextPress}
-          activeOpacity={0.6}
-          style={[
-            styles.headerTextContainer,
-            this.props.leftIcon && ((!this.props.rightIcon && !this.props.rightText) || this.props.absoluteRight) && { paddingRight: 55 },
-            this.props.textContainerStyle,
-          ]}
-        >
-          <Text style={[styles.headerText, this.props.textStyle, this.getTextColourStyle()]} numberOfLines={1} ellipsizeMode="tail">
-            {this.props.text}
-          </Text>
-        </TouchableOpacity>
-      );
-    }
-    return (
-      <View
-        style={[
-          styles.headerTextContainer,
-          this.props.leftIcon && ((!this.props.rightIcon && !this.props.rightText) || this.props.absoluteRight) && { paddingRight: 55 },
-          this.props.rightIcon && ((!this.props.leftIcon && !this.props.leftText) || this.props.absoluteLeft) && { paddingLeft: 55 },
-          this.props.textContainerStyle,
-        ]}
-      >
-        <Text style={[styles.headerText, this.props.textStyle, this.getTextColourStyle()]} numberOfLines={1} ellipsizeMode="tail">
-          {this.props.text}
-        </Text>
-      </View>
-    );
-  }
+	renderHeaderText() {
+		if (!this.props.text) {
+			if (this.props.centerContent) {
+				return this.props.centerContent;
+			}
+			return null;
+		}
+		if (this.props.onTextPress) {
+			return (
+				<TouchableOpacity
+					onPress={this.props.onTextPress}
+					activeOpacity={0.6}
+					style={[
+						styles.headerTextContainer,
+						this.props.leftIcon &&
+							((!this.props.rightIcon && !this.props.rightText) ||
+								this.props.absoluteRight) && { paddingRight: 55 },
+						this.props.textContainerStyle,
+					]}
+				>
+					<Text
+						style={[
+							styles.headerText,
+							this.props.textStyle,
+							this.getTextColourStyle(),
+						]}
+						numberOfLines={1}
+						ellipsizeMode="tail"
+					>
+						{this.props.text}
+					</Text>
+				</TouchableOpacity>
+			);
+		}
+		return (
+			<View
+				style={[
+					styles.headerTextContainer,
+					this.props.leftIcon &&
+						((!this.props.rightIcon && !this.props.rightText) ||
+							this.props.absoluteRight) && { paddingRight: 55 },
+					this.props.rightIcon &&
+						((!this.props.leftIcon && !this.props.leftText) ||
+							this.props.absoluteLeft) && { paddingLeft: 55 },
+					this.props.textContainerStyle,
+				]}
+			>
+				<Text
+					style={[
+						styles.headerText,
+						this.props.textStyle,
+						this.getTextColourStyle(),
+					]}
+					numberOfLines={1}
+					ellipsizeMode="tail"
+				>
+					{this.props.text}
+				</Text>
+			</View>
+		);
+	}
 
-  renderRightIcon() {
-    if (this.props.rightContent) {
-      return this.props.rightContent;
-    }
-    if (!this.props.onPressRight) {
-      return null;
-    }
-    if (this.props.rightText && this.props.onPressRight) {
-      return (
-        <View
-          style={[
-            styles.headerContentIcon,
-            { width: 'auto' },
-            this.props.absoluteRight && styles.absoluteRight,
-            this.props.rightContainerStyle,
-          ]}
-        >
-          <TouchableOpacity onPress={this.props.onPressRight} activeOpacity={0.6}>
-            <Text
-              style={[
-                styles.buttonText,
-                { paddingRight: 15, paddingLeft: 5, textAlign: 'right', fontFamily: 'sf-semibold', color: this.props.colourBrandingMain },
-                this.getTextColourStyle(),
-                this.props.optionalRightStyle,
-              ]}
-            >
-              {this.props.rightText}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      );
-    }
-    if (!this.props.rightIcon) {
-      if (this.props.rightImage) {
-        return (
-          <TouchableOpacity onPress={this.props.onPressRight} activeOpacity={0.6}>
-            <View style={styles.headerContentIcon}>
-              <Image source={{ uri: this.props.rightImage }} style={styles.rightImage} resizeMode="contain" />
-            </View>
-          </TouchableOpacity>
-        );
-      }
-      return null;
-    }
-    return (
-      <TouchableOpacity onPress={this.props.onPressRight} activeOpacity={0.6}>
-        {this.props.rightIconType && this.props.rightIconType === 'pluss' ? (
-          <View style={styles.headerContentIcon}>
-            <Pl60Icon name={this.props.rightIcon} style={[styles.rightIcon, this.getTextColourStyle(), this.props.rightIconStyle]} />
-          </View>
-        ) : (
-          <Icon
-            name={this.props.rightIcon}
-            style={styles.headerContentIcon}
-            type={this.props.rightIconType ? this.props.rightIconType : 'font-awesome'}
-            iconStyle={[styles.rightIcon, this.getTextColourStyle(), this.props.rightIconStyle]}
-          />
-        )}
-      </TouchableOpacity>
-    );
-  }
+	renderRightIcon() {
+		if (this.props.rightContent) {
+			return this.props.rightContent;
+		}
+		if (!this.props.onPressRight) {
+			return null;
+		}
+		if (this.props.rightText && this.props.onPressRight) {
+			return (
+				<View
+					style={[
+						styles.headerContentIcon,
+						{ width: "auto" },
+						this.props.absoluteRight && styles.absoluteRight,
+						this.props.rightContainerStyle,
+					]}
+				>
+					<TouchableOpacity
+						onPress={this.props.onPressRight}
+						activeOpacity={0.6}
+					>
+						<Text
+							style={[
+								styles.buttonText,
+								{
+									paddingRight: 15,
+									paddingLeft: 5,
+									textAlign: "right",
+									fontFamily: "sf-semibold",
+									color: this.props.colourBrandingMain,
+								},
+								this.getTextColourStyle(),
+								this.props.optionalRightStyle,
+							]}
+						>
+							{this.props.rightText}
+						</Text>
+					</TouchableOpacity>
+				</View>
+			);
+		}
+		if (!this.props.rightIcon) {
+			if (this.props.rightImage) {
+				return (
+					<TouchableOpacity
+						onPress={this.props.onPressRight}
+						activeOpacity={0.6}
+					>
+						<View style={styles.headerContentIcon}>
+							<Image
+								source={{ uri: this.props.rightImage }}
+								style={styles.rightImage}
+								resizeMode="contain"
+							/>
+						</View>
+					</TouchableOpacity>
+				);
+			}
+			return null;
+		}
+		return (
+			<TouchableOpacity onPress={this.props.onPressRight} activeOpacity={0.6}>
+				{this.props.rightIconType && this.props.rightIconType === "pluss" ? (
+					<View style={styles.headerContentIcon}>
+						<FontAwesome
+							name={this.props.rightIcon}
+							style={[
+								styles.rightIcon,
+								this.getTextColourStyle(),
+								this.props.rightIconStyle,
+							]}
+						/>
+					</View>
+				) : (
+					<Icon
+						name={this.props.rightIcon}
+						style={styles.headerContentIcon}
+						type={
+							this.props.rightIconType
+								? this.props.rightIconType
+								: "font-awesome"
+						}
+						iconStyle={[
+							styles.rightIcon,
+							this.getTextColourStyle(),
+							this.props.rightIconStyle,
+						]}
+					/>
+				)}
+			</TouchableOpacity>
+		);
+	}
 
-  render() {
-    if (this.props.animatedHeader) {
-      return (
-        <Animated.View
-          style={[
-            styles.container,
-            !this.props.noShadow && styles.containerShadow,
-            this.props.transparent && styles.transparentContainer,
-            this.props.style,
-            { backgroundColor: this.props.headerColourOffset, elevation: this.props.headerElev, shadowColor: this.props.headerShadow },
-          ]}
-        >
-          {this.renderBackground()}
-          <StatusBar barStyle={this.state.barStyle} translucent />
-          <View style={styles.headerContent}>
-            {this.renderLeftIcon()}
-            {this.renderHeaderText()}
-            {this.renderRightIcon()}
-            {this.props.children}
-          </View>
-          {this.props.extraHeaderContent}
-        </Animated.View>
-      );
-    }
-    return (
-      <View
-        style={[
-          styles.container,
-          !this.props.noShadow && styles.containerShadow,
-          this.props.transparent && styles.transparentContainer,
-          this.props.lineSeparated && styles.lineSeparated,
-          this.props.popupHeader && styles.popupHeader,
-          this.props.style,
-          this.props.colourBrandingHeader && { backgroundColor: this.props.colourBrandingHeader },
-        ]}
-      >
-        <View
-          style={[
-            styles.contentContainer,
-            this.props.popupHeader && styles.popupContentContainer,
-            this.props.contentContainerStyle,
-            this.props.colourBrandingHeader && { backgroundColor: this.props.colourBrandingHeader },
-          ]}
-        >
-          {this.renderBackground()}
-          <StatusBar barStyle={this.state.barStyle} translucent />
-          <View style={[styles.headerContent, this.props.popupHeader && styles.headerContentPopup]}>
-            {this.renderLeftIcon()}
-            {this.renderHeaderText()}
-            {this.renderRightIcon()}
-            {this.props.children}
-          </View>
-        </View>
-        {this.props.extraHeaderContent}
-      </View>
-    );
-  }
+	render() {
+		if (this.props.animatedHeader) {
+			return (
+				<Animated.View
+					style={[
+						styles.container,
+						!this.props.noShadow && styles.containerShadow,
+						this.props.transparent && styles.transparentContainer,
+						this.props.style,
+						{
+							backgroundColor: this.props.headerColourOffset,
+							elevation: this.props.headerElev,
+							shadowColor: this.props.headerShadow,
+						},
+					]}
+				>
+					{this.renderBackground()}
+					<StatusBar barStyle={this.state.barStyle} translucent />
+					<View style={styles.headerContent}>
+						{this.renderLeftIcon()}
+						{this.renderHeaderText()}
+						{this.renderRightIcon()}
+						{this.props.children}
+					</View>
+					{this.props.extraHeaderContent}
+				</Animated.View>
+			);
+		}
+		return (
+			<View
+				style={[
+					styles.container,
+					!this.props.noShadow && styles.containerShadow,
+					this.props.transparent && styles.transparentContainer,
+					this.props.lineSeparated && styles.lineSeparated,
+					this.props.popupHeader && styles.popupHeader,
+					this.props.style,
+					this.props.colourBrandingHeader && {
+						backgroundColor: this.props.colourBrandingHeader,
+					},
+				]}
+			>
+				<View
+					style={[
+						styles.contentContainer,
+						this.props.popupHeader && styles.popupContentContainer,
+						this.props.contentContainerStyle,
+						this.props.colourBrandingHeader && {
+							backgroundColor: this.props.colourBrandingHeader,
+						},
+					]}
+				>
+					{this.renderBackground()}
+					<StatusBar barStyle={this.state.barStyle} translucent />
+					<View
+						style={[
+							styles.headerContent,
+							this.props.popupHeader && styles.headerContentPopup,
+						]}
+					>
+						{this.renderLeftIcon()}
+						{this.renderHeaderText()}
+						{this.renderRightIcon()}
+						{this.props.children}
+					</View>
+				</View>
+				{this.props.extraHeaderContent}
+			</View>
+		);
+	}
 }
 
 const styles = {
-  container: {
-    alignSelf: 'stretch',
-    backgroundColor: '#fff',
-    zIndex: 10,
-  },
-  containerShadow: {
-    shadowColor: '#000',
-    shadowOffset: {
-      width: 0,
-      height: 1,
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6,
-    elevation: 3,
-  },
-  lineSeparated: {
-    borderBottomWidth: 1,
-    borderColor: LINEGREY,
-    shadowOpacity: 0,
-    elevation: 0,
-  },
-  popupHeader: {
-    borderBottomWidth: 1,
-    borderColor: LINEGREY,
-    shadowOpacity: 0,
-    elevation: 0,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
-  },
-  contentContainer: {
-    height: StatusBarHeight(70),
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-  },
-  popupContentContainer: {
-    height: 70,
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
-  },
-  transparentContainer: {
-    backgroundColor: COLOUR_TRANSPARENT,
-    shadowColor: COLOUR_TRANSPARENT,
-    elevation: 0,
-  },
-  thumbnailStyle: {
-    height: StatusBarHeight(70),
-    width: null,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    resizeMode: 'cover',
-  },
-  thumbnailPopupHeader: {
-    height: 70,
-    width: '100%',
-    borderTopLeftRadius: 12,
-    borderTopRightRadius: 12,
-    overflow: 'hidden',
-  },
-  headerContent: {
-    alignSelf: 'stretch',
-    flexDirection: 'row',
-    flex: 1,
-    paddingTop: StatusBarHeight(0),
-  },
-  headerContentPopup: {
-    paddingTop: 0,
-  },
-  headerContentIcon: {
-    height: 70,
-    width: 55,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  absoluteRight: {
-    height: 70,
-    justifyContent: 'center',
-    position: 'absolute',
-    right: 0,
-    top: StatusBarHeight(0),
-  },
-  leftIcon: {
-    fontSize: 25,
-    padding: 15,
-    width: 55,
-    textAlign: 'center',
-    color: TEXT_LIGHT,
-  },
-  headerTextContainer: {
-    height: 70,
-    flex: 1,
-    alignItems: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-  },
-  headerText: {
-    fontSize: 16,
-    flex: 1,
-    fontFamily: 'sf-semibold',
-    color: TEXT_DARK,
-    textAlign: 'center',
-    backgroundColor: 'rgba(255,255,255,0)',
-  },
-  buttonText: {
-    fontSize: 15,
-    fontFamily: 'sf-regular',
-    width: 80,
-    backgroundColor: 'rgba(255,255,255,0)',
-  },
-  rightIcon: {
-    fontSize: 25,
-    padding: 15,
-    width: 55,
-    textAlign: 'center',
-    color: TEXT_LIGHT,
-  },
-  rightImage: {
-    width: 24,
-    height: 24,
-    marginRight: 15,
-    marginLeft: 13,
-  },
-  counter: {
-    top: 15,
-    right: 5,
-    borderRadius: 10,
-    position: 'absolute',
-    height: 20,
-    minWidth: 20,
-    backgroundColor: COLOUR_GREEN,
-    justifyContent: 'center',
-  },
-  counterText: {
-    color: '#fff',
-    textAlign: 'center',
-    fontFamily: 'sf-bold',
-    fontSize: 10,
-    lineHeight: 12,
-    backgroundColor: 'transparent',
-  },
-  smallCounter: {
-    width: 5,
-    height: 5,
-    minWidth: 5,
-    top: 20,
-    right: 10,
-  },
-  headerPattern: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    width: '100%',
-    height: '100%',
-    resizeMode: 'cover',
-  },
+	container: {
+		alignSelf: "stretch",
+		backgroundColor: "#fff",
+		zIndex: 10,
+	},
+	containerShadow: {
+		shadowColor: "#000",
+		shadowOffset: {
+			width: 0,
+			height: 1,
+		},
+		shadowOpacity: 0.1,
+		shadowRadius: 6,
+		elevation: 3,
+	},
+	lineSeparated: {
+		borderBottomWidth: 1,
+		borderColor: LINEGREY,
+		shadowOpacity: 0,
+		elevation: 0,
+	},
+	popupHeader: {
+		borderBottomWidth: 1,
+		borderColor: LINEGREY,
+		shadowOpacity: 0,
+		elevation: 0,
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+	},
+	contentContainer: {
+		height: StatusBarHeight(70),
+		alignSelf: "stretch",
+		flexDirection: "row",
+	},
+	popupContentContainer: {
+		height: 70,
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+	},
+	transparentContainer: {
+		backgroundColor: COLOUR_TRANSPARENT,
+		shadowColor: COLOUR_TRANSPARENT,
+		elevation: 0,
+	},
+	thumbnailStyle: {
+		height: StatusBarHeight(70),
+		width: null,
+		position: "absolute",
+		top: 0,
+		left: 0,
+		resizeMode: "cover",
+	},
+	thumbnailPopupHeader: {
+		height: 70,
+		width: "100%",
+		borderTopLeftRadius: 12,
+		borderTopRightRadius: 12,
+		overflow: "hidden",
+	},
+	headerContent: {
+		alignSelf: "stretch",
+		flexDirection: "row",
+		flex: 1,
+		paddingTop: StatusBarHeight(0),
+	},
+	headerContentPopup: {
+		paddingTop: 0,
+	},
+	headerContentIcon: {
+		height: 70,
+		width: 55,
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "space-between",
+	},
+	absoluteRight: {
+		height: 70,
+		justifyContent: "center",
+		position: "absolute",
+		right: 0,
+		top: StatusBarHeight(0),
+	},
+	leftIcon: {
+		fontSize: 25,
+		padding: 15,
+		width: 55,
+		textAlign: "center",
+		color: TEXT_LIGHT,
+	},
+	headerTextContainer: {
+		height: 70,
+		flex: 1,
+		alignItems: "center",
+		flexDirection: "row",
+		justifyContent: "space-between",
+	},
+	headerText: {
+		fontSize: 16,
+		flex: 1,
+		fontFamily: "sf-semibold",
+		color: TEXT_DARK,
+		textAlign: "center",
+		backgroundColor: "rgba(255,255,255,0)",
+	},
+	buttonText: {
+		fontSize: 15,
+		fontFamily: "sf-regular",
+		width: 80,
+		backgroundColor: "rgba(255,255,255,0)",
+	},
+	rightIcon: {
+		fontSize: 25,
+		padding: 15,
+		width: 55,
+		textAlign: "center",
+		color: TEXT_LIGHT,
+	},
+	rightImage: {
+		width: 24,
+		height: 24,
+		marginRight: 15,
+		marginLeft: 13,
+	},
+	counter: {
+		top: 15,
+		right: 5,
+		borderRadius: 10,
+		position: "absolute",
+		height: 20,
+		minWidth: 20,
+		backgroundColor: COLOUR_GREEN,
+		justifyContent: "center",
+	},
+	counterText: {
+		color: "#fff",
+		textAlign: "center",
+		fontFamily: "sf-bold",
+		fontSize: 10,
+		lineHeight: 12,
+		backgroundColor: "transparent",
+	},
+	smallCounter: {
+		width: 5,
+		height: 5,
+		minWidth: 5,
+		top: 20,
+		right: 10,
+	},
+	headerPattern: {
+		position: "absolute",
+		top: 0,
+		left: 0,
+		right: 0,
+		bottom: 0,
+		width: "100%",
+		height: "100%",
+		resizeMode: "cover",
+	},
 };
 
-const mapStateToProps = state => {
-  return {
-    colourBrandingMain: getMainBrandingColourFromState(state),
-    headerType: getSiteSettingFromState(
-      state,
-      'HeaderType',
-      getSiteSettingFromState(state, 'UseGradientHeader', Config.env.hasGradientHeader) ? 'gradient' : 'white',
-    ),
-    headerPattern: getSiteSettingFromState(state, 'HeaderPattern'),
-    patternColour: getSiteSettingFromState(state, 'PatternColour'),
-  };
+const mapStateToProps = (state) => {
+	return {
+		colourBrandingMain: getMainBrandingColourFromState(state),
+		headerType: getSiteSettingFromState(
+			state,
+			"HeaderType",
+			getSiteSettingFromState(
+				state,
+				"UseGradientHeader",
+				Config.env.hasGradientHeader,
+			)
+				? "gradient"
+				: "white",
+		),
+		headerPattern: getSiteSettingFromState(state, "HeaderPattern"),
+		patternColour: getSiteSettingFromState(state, "PatternColour"),
+	};
 };
 
 export default connect(mapStateToProps, {})(Header);