diff options
| -rw-r--r-- | src/components/friends/InviteFriendTile.tsx | 27 |
1 files changed, 22 insertions, 5 deletions
diff --git a/src/components/friends/InviteFriendTile.tsx b/src/components/friends/InviteFriendTile.tsx index 3fbf2e73..95ebf16a 100644 --- a/src/components/friends/InviteFriendTile.tsx +++ b/src/components/friends/InviteFriendTile.tsx @@ -58,10 +58,17 @@ const InviteFriendTile: React.FC<InviteFriendTileProps> = ({item}) => { </View> <TouchableOpacity disabled={invited} - style={styles.button} + style={[ + styles.button, + invited ? styles.pendingButton : styles.inviteButton, + ]} onPress={handleInviteFriend}> - <Text style={styles.buttonTitle}> - {invited ? 'Invited' : 'Invite'} + <Text + style={[ + styles.buttonTitle, + invited ? styles.pendingButtonTitle : styles.inviteButtonTitle, + ]}> + {invited ? 'Pending' : 'Invite'} </Text> </TouchableOpacity> </View> @@ -98,14 +105,18 @@ const styles = StyleSheet.create({ alignItems: 'center', width: 82, height: 25, - borderColor: TAGG_LIGHT_BLUE, borderWidth: 2, borderRadius: 2, padding: 0, + borderColor: TAGG_LIGHT_BLUE, + }, + pendingButton: { + backgroundColor: TAGG_LIGHT_BLUE, + }, + inviteButton: { backgroundColor: 'transparent', }, buttonTitle: { - color: TAGG_LIGHT_BLUE, padding: 0, fontSize: normalize(11), fontWeight: '700', @@ -113,6 +124,12 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.6), paddingHorizontal: '3.8%', }, + pendingButtonTitle: { + color: 'white', + }, + inviteButtonTitle: { + color: TAGG_LIGHT_BLUE, + }, }); export default InviteFriendTile; |