Sponsors Page

src/components/CopyTextButton/index.js

@@ -0,0 +1,102 @@
+import React, { Component, PropTypes } from 'react';
+// dependencies
+import { View, Text, TouchableHighlight, StyleSheet, Clipboard , Animated, Easing } from 'react-native';
+import CustomText from '../CustomText/CustomText';
+
+import * as Colors from '../../style/vars/colors';
+
+class CopyTextButton extends Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      copied: new Animated.Value(0)
+    };
+  }
+
+  onCopyToClipboard(text) {
+    Clipboard.setString(text);
+    this.animateAlert();
+  }
+
+  animateAlert() {
+    const endVal = (this.state.copied._value === 0) ? 1 : 0; 
+    Animated.timing(
+      this.state.copied,
+      {
+        toValue: endVal,
+        duration: 200,
+        easing: Easing.inout
+      }
+    ).start(() => {
+      if (this.state.copied._value === 1) {
+        setTimeout(() => this.animateAlert(), 1000);
+      }
+    });
+  }
+
+  render() {
+    const {text, buttonStyle, textStyle} = this.props;
+
+    const transition = this.state.copied.interpolate({
+      inputRange: [0, 1],
+      outputRange: [60, 45]
+    });
+
+    return (
+      <View>
+        <TouchableHighlight
+          style={[Styles.initialButton, buttonStyle]}
+          onPress={() => this.onCopyToClipboard(text)}>
+          <View>
+            <CustomText textStyle={[Styles.initialText, textStyle]}>{text}</CustomText>
+          </View>
+        </TouchableHighlight>
+
+        <Animated.View 
+          style={[Styles.copyAlert, {opacity: this.state.copied, top: transition}]}>
+          <CustomText textStyle={[Styles.initialText, Styles.copyAlertText]}>Copied to Clipboard</CustomText>
+        </Animated.View>
+      </View>
+    );
+  }
+}
+
+const Styles = StyleSheet.create({
+  initialButton: {
+    padding: 10,
+    paddingLeft: 15,
+    paddingRight: 15,
+    backgroundColor: Colors.darkMaroon
+  },
+  initialText: {
+    fontWeight: '600',
+    textAlign: 'center'
+  },
+  copyAlert: {
+    position: 'absolute',
+    backgroundColor: "#000",
+    borderRadius: 15,
+    padding: 8,
+    paddingLeft: 30,
+    paddingRight: 30,
+    overflow: 'hidden',
+    alignSelf: 'center'
+  },
+  copyAlertText: {
+    fontWeight: '400',
+    fontSize: 12
+  }
+})
+
+CopyTextButton.propTypes = {
+  text: PropTypes.string,
+  /*
+    Styling props
+    =============
+    buttonStyle: Button container Styling
+    textStyle: title Styling
+  */
+};
+
+export default CopyTextButton;

src/components/Link/index.js

@@ -4,11 +4,12 @@ import { View, Text, ScrollView, Linking, StyleSheet } from 'react-native';
 import { yellow, redSecondary } from '../../style/vars/colors';
 
 // Link component
-const Link = ({url, name, textStyle}) => (
+const Link = ({url, name, textStyle, children}) => (
   <Text
     style={[Styles.link, textStyle]}
     onPress={()=> Linking.openURL(url)}>
     {name}
+    {children}
   </Text>
 );
 

src/components/NavigationBar/index.js

@@ -144,3 +144,14 @@ export const SupportNavHeader = (leftComponents = [], rightComponents = []) => {
     headerStyle: headerStyles.common
   };
 };
+
+export const SponsorsNavHeader = (leftComponents = [], rightComponents = []) => {
+  return {
+    drawerLabel: 'Sponsors / Deals',
+    title: "Sponsors / Deals",
+    headerTitle: renderTitle("Sponsors / Deals"),
+    headerLeft: renderSide(leftComponents, "left"),
+    headerRight: renderSide(rightComponents, "right"),
+    headerStyle: headerStyles.common
+  };
+};

src/components/SearchBar/SearchBar.js

@@ -115,7 +115,7 @@ const Styles = StyleSheet.create({
     paddingRight: styleVar.sidePadding,
     shadowColor: '#000',
     shadowOffset: {width: 1, height: 1},
-    shadowOpacity: 0.8,
+    shadowOpacity: 0.5,
     shadowRadius: 2,
     zIndex: 50
   },

src/containers/About/content.json

@@ -10,7 +10,7 @@
       "Nick 'OffInBed' DeJesus - Frontend Developer and Creator",
       "Ray Mills - Sexy User Experience Designer",
       "Stephen 'Speed Kicks' Stafford - Divine Backend Developer",
-      "Danny Nguyen - Frontend Developer Genius that likes shoes",
+      "Danny Nguyen - Frontend Developer with an affinity towards hype shoes",
       "Quentin Ross - Graphic Artist, Creator of the new logo!",
       "Ron Maurice 'Scrub Zilla' Johnson - Enlightened Artist (Character Portraits)",
       "Brad Dickason - Backend Support and also the guy that tells everyone to get it together",

src/containers/AttackDetails/index.js

@@ -17,8 +17,6 @@ import LinearGradient from 'react-native-linear-gradient';
 import Styles from './styles';
 import * as Colors from '../../style/vars/colors';
 
-import icons from '../../img/icons/';
-
 import { showAttackDetails } from '../../redux/actions/attackDetails';
 
 class AttackDetails extends Component {

src/containers/CharacterProfile/styles.js

@@ -8,9 +8,10 @@ export default Styles = StyleSheet.create({
 		textAlign: 'center',
 		fontFamily: 'Exo2-Light',
 		color: '#f0aeb1',
-		fontSize: 12,
+		fontSize: 11,
 		backgroundColor: Colors.redSecondary,
-		paddingBottom: 10
+		paddingBottom: 5,
+		paddingTop: 5
 	},
   mainContainer: {
 		flex: 1

src/containers/Navigator.js

@@ -15,6 +15,7 @@ const AboutNavigator = StackNavigator(Router.AboutRoute, { initialRouteName: "ab
 const HelpNavigator = StackNavigator(Router.HelpRoute, { initialRouteName: 'help', headerMode: 'screen' });
 const FrameDataFAQNavigator = StackNavigator(Router.FrameDataFAQRoute, { initialRouteName: 'faq', headerMode: 'screen' });
 const SupportNavigator = StackNavigator(Router.SupportRoute, { initialRouteName: 'support', headerMode: 'screen'});
+const SponsorsNavigator = StackNavigator(Router.SponsorsRoute, { initialRouteName: 'sponsors', headerMode: 'screen'});
 
 const DrawerRoutes = {
 	Characters: {
@@ -33,6 +34,10 @@ const DrawerRoutes = {
 		name: 'About',
 		screen: AboutNavigator
 	},
+	Sponsors: {
+		name: 'Sponsors / Deals',
+		screen: SponsorsNavigator
+	},
 	Support: {
 		name: 'Support',
 		screen: SupportNavigator

src/containers/Router.js

@@ -7,6 +7,7 @@ import CharacterProfile from './CharacterProfile/';
 import AttackDetails from './AttackDetails/';
 import FrameDataFAQ from './FrameDataFAQ/';
 import Support from './Support/';
+import Sponsors from './Sponsors/';
 
 const MainRoutes = {
   characterSelect: { screen: CharacterSelect },
@@ -25,10 +26,14 @@ const HelpRoute = {
 
 const FrameDataFAQRoute = {
   faq: { screen: FrameDataFAQ }
-}
+};
 
 const SupportRoute = {
   support: { screen: Support}
-}
+};
+
+const SponsorsRoute = {
+	sponsors: { screen: Sponsors }
+};
 
-export default { MainRoutes, AboutRoute, HelpRoute, FrameDataFAQRoute, SupportRoute };
+export default { MainRoutes, AboutRoute, HelpRoute, FrameDataFAQRoute, SupportRoute, SponsorsRoute };

src/containers/Sponsors/content.json

@@ -0,0 +1,28 @@
+{
+	"page": {
+		"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas."
+	},
+	"sponsors": [
+		{
+			"name": "Controller Chaos",
+			"description": "Get some badass skins for your gaming peripherals. Pick something from their wide selection or have something made specifically for you.",
+			"url": "",
+			"discountCode": "ABC1234",
+			"image_id": "controller_chaos"
+		},
+		{
+			"name": "Focus Attack",
+			"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh.",
+			"url": "",
+			"discountCode": "ABC1234",
+			"image_id": "focus_attack"
+		},
+		{
+			"name": "Qanba",
+			"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ante velit, semper quis ante quis, iaculis sollicitudin nibh.",
+			"url": "",
+			"discountCode": "ABC1234",
+			"image_id": "qanba"
+		}
+	]
+}

src/containers/Sponsors/index.js

@@ -0,0 +1,57 @@
+import React from 'react';
+import { View, Text, ScrollView } from 'react-native';
+import { Styles } from './styles';
+import { SponsorsNavHeader } from '../../components/NavigationBar';
+import CustomText from '../../components/CustomText/CustomText';
+import LinearGradient from 'react-native-linear-gradient';
+import SponsorItem from './sponsorItem';
+
+import * as Colors from '../../style/vars/colors';
+
+// Page and Sponsor Content
+import content from './content.json';
+
+class Sponsors extends React.Component {
+  static navigationOptions = ({navigation}) => {
+    const headerLeft = [
+      {
+        key: "MenuButton",
+        onPress: () => navigation.navigate('DrawerOpen')
+      }
+    ];
+    return SponsorsNavHeader(headerLeft);
+  };
+
+  /**
+   * @method renderSponsors
+   * @param {array} sponsors
+   * @return {<SponsorItems/>}
+   * Takes in sponsors array and renders out sponsor-item components
+   */
+  renderSponsors(sponsors) {
+    return (<View>
+      {
+        sponsors.map((sponsor, i) => <SponsorItem key={i} {...sponsor} />)
+      }
+    </View>)
+  }
+
+	render() {
+    const {page, sponsors} = content;
+
+		return (
+			<LinearGradient
+        colors={[Colors.redPrimary, Colors.redSecondary]}
+        start={{x: 0.5, y: 0.1}} end={{x: 1.0, y: 0.9}}
+        style={Styles.container}>
+        <ScrollView style={Styles.scrollContainer}>
+          <CustomText textStyle={Styles.commonText}>{page.description}</CustomText>
+          {this.renderSponsors(sponsors)}
+          <CustomText textStyle={[Styles.commonText, {textAlign: 'center'}]}>___</CustomText>
+        </ScrollView>
+			</LinearGradient>
+		)
+	}
+}
+
+export default Sponsors;