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 } });