From 975c59a1148a7419b6d85408b48875b3862bed01 Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 24 Sep 2018 14:59:00 +0100
Subject: [PATCH] dismiss button added to reward summary, and some style
 tweaks.

---
 app/src/component/rewardSummary/index.js |  2 +
 app/src/component/rewardSummary/view.js  | 47 ++++++++++++++++++------
 app/src/styles/discover.js               |  4 +-
 app/src/styles/fileItemMedia.js          |  5 ++-
 app/src/styles/fileList.js               |  3 +-
 app/src/styles/reward.js                 | 15 +++++++-
 6 files changed, 58 insertions(+), 18 deletions(-)

diff --git a/app/src/component/rewardSummary/index.js b/app/src/component/rewardSummary/index.js
index 54dd41ef..5c2a7077 100644
--- a/app/src/component/rewardSummary/index.js
+++ b/app/src/component/rewardSummary/index.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux';
+import { doNotify } from 'lbry-redux';
 import { doRewardList, selectUnclaimedRewardValue, selectFetchingRewards, selectUser } from 'lbryinc';
 import RewardSummary from './view';
 
@@ -10,6 +11,7 @@ const select = state => ({
 
 const perform = dispatch => ({
   fetchRewards: () => dispatch(doRewardList()),
+  notify: data => dispatch(doNotify(data))
 });
 
 export default connect(select, perform)(RewardSummary);
diff --git a/app/src/component/rewardSummary/view.js b/app/src/component/rewardSummary/view.js
index 17c156a7..cbdf50d2 100644
--- a/app/src/component/rewardSummary/view.js
+++ b/app/src/component/rewardSummary/view.js
@@ -1,32 +1,54 @@
 import React from 'react';
-import { NativeModules, Text, TouchableOpacity } from 'react-native';
+import { AsyncStorage, NativeModules, Text, TouchableOpacity } from 'react-native';
+import Button from '../../component/button';
 import rewardStyle from '../../styles/reward';
 
 class RewardSummary extends React.Component {
+  static itemKey = 'rewardSummaryDismissed';
+
   state = {
-    actionsLeft: 0
+    actionsLeft: 0,
+    dismissed: false
   };
 
   componentDidMount() {
     this.props.fetchRewards();
 
-    const { user } = this.props;
-    let actionsLeft = 0;
-    if (!user || !user.has_verified_email) {
-      actionsLeft++;
-    }
+    AsyncStorage.getItem(RewardSummary.itemKey).then(isDismissed => {
+      if ('true' === isDismissed) {
+        this.setState({ dismissed: true });
+      }
 
-    if (!user || !user.is_identity_verified) {
-      actionsLeft++;
-    }
+      const { user } = this.props;
+      let actionsLeft = 0;
+      if (!user || !user.has_verified_email) {
+        actionsLeft++;
+      }
 
-    this.setState({ actionsLeft });
+      if (!user || !user.is_identity_verified) {
+        actionsLeft++;
+      }
+
+      this.setState({ actionsLeft });
+    });
+  }
+
+  onDismissPressed = () => {
+    AsyncStorage.setItem(RewardSummary.itemKey, 'true');
+    this.setState({ dismissed: true });
+    this.props.notify({
+      message: 'You can always claim your rewards from the Rewards page.',
+      displayType: ['toast']
+    });
   }
 
   render() {
     const { fetching, navigation, unclaimedRewardAmount, user } = this.props;
 
-    if ((user && user.is_reward_approved) || this.state.actionsLeft === 0 || unclaimedRewardAmount === 0) {
+    if (this.state.dismissed ||
+        (user && user.is_reward_approved) ||
+        this.state.actionsLeft === 0 ||
+        unclaimedRewardAmount === 0) {
       return null;
     }
 
@@ -37,6 +59,7 @@ class RewardSummary extends React.Component {
         <Text style={rewardStyle.summaryText}>
           You have {unclaimedRewardAmount} LBC in unclaimed rewards. You have {this.state.actionsLeft} action{this.state.actionsLeft === 1 ? '' : 's'} left to claim your first reward. Tap here to continue.
         </Text>
+        <Button style={rewardStyle.dismissButton} theme={"light"} text={"Dismiss"} onPress={this.onDismissPressed} />
       </TouchableOpacity>
     );
   }
diff --git a/app/src/styles/discover.js b/app/src/styles/discover.js
index a7316f56..ba977195 100644
--- a/app/src/styles/discover.js
+++ b/app/src/styles/discover.js
@@ -53,7 +53,9 @@ const discoverStyle = StyleSheet.create({
   },
   fileItemMedia: {
     width: mediaWidth,
-    height: mediaHeight
+    height: mediaHeight,
+    alignItems: 'center',
+    justifyContent: 'center'
   },
   fileItemName: {
     fontFamily: 'Metropolis-Bold',
diff --git a/app/src/styles/fileItemMedia.js b/app/src/styles/fileItemMedia.js
index c379f3b3..9cd35d9a 100644
--- a/app/src/styles/fileItemMedia.js
+++ b/app/src/styles/fileItemMedia.js
@@ -1,4 +1,5 @@
-import { StyleSheet, Dimensions } from 'react-native';
+import { StyleSheet } from 'react-native';
+import Colors from './colors';
 
 const fileItemMediaStyle = StyleSheet.create({
   autothumb: {
@@ -11,7 +12,7 @@ const fileItemMediaStyle = StyleSheet.create({
   autothumbText: {
     fontFamily: 'Metropolis-SemiBold',
     textAlign: 'center',
-    color: '#ffffff',
+    color: Colors.White,
     fontSize: 40
   },
   autothumbPurple: {
diff --git a/app/src/styles/fileList.js b/app/src/styles/fileList.js
index bc684a03..6eda3b23 100644
--- a/app/src/styles/fileList.js
+++ b/app/src/styles/fileList.js
@@ -24,7 +24,8 @@ const fileListStyle = StyleSheet.create({
     width: thumbnailWidth,
     height: thumbnailHeight,
     marginRight: (screenWidthPixels <= 720) ? 10 : 12,
-    justifyContent: 'center'
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   title: {
     fontFamily: 'Metropolis-SemiBold',
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index 66443fcf..51ec5206 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -155,13 +155,17 @@ const rewardStyle = StyleSheet.create({
   },
   summaryContainer: {
     backgroundColor: Colors.LbryGreen,
-    padding: 12
+    padding: 12,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center'
   },
   summaryText: {
     color: Colors.White,
     fontFamily: 'Metropolis-Regular',
     fontSize: 14,
-    lineHeight: 22
+    lineHeight: 20,
+    flex: 0.7
   },
   phoneVerificationContainer: {
     paddingLeft: 4,
@@ -191,6 +195,13 @@ const rewardStyle = StyleSheet.create({
   },
   smsPermissionContainer: {
     marginBottom: 32
+  },
+  dismissButton: {
+    alignSelf: 'center',
+    backgroundColor: Colors.White,
+    paddingLeft: 4,
+    paddingRight: 4,
+    flex: 0.2
   }
 });