Updated GroupListItem add/remove membership button

• Updated:
- GroupListItem add/remove membership button

• Added:
- Attr titles
This commit is contained in:
mgabdev 2020-07-14 16:38:25 -05:00
parent 877e40d76f
commit c4ed9ad050

View File

@ -109,7 +109,8 @@ class GroupListItem extends ImmutablePureComponent {
const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
const isMember = !!relationships && relationships.get('member') const isMember = !!relationships && relationships.get('member')
const addButtonIcon = isMember ? hovering ? 'subtract' : 'check' : 'add' const addButtonIcon = isMember ? hovering ? 'subtract' : 'check' : 'add'
const addButtonColor = isMember ? 'tertiary' : 'brand' const addButtonColor = isMember ? hovering ? 'danger' : 'tertiary' : 'brand'
const addButtonTitle = isMember ? hovering ? 'Leave Group' : 'You are a member' : 'Join Group'
return ( return (
<div className={containerClasses}> <div className={containerClasses}>
@ -147,11 +148,12 @@ class GroupListItem extends ImmutablePureComponent {
isNarrow isNarrow
color='white' color='white'
backgroundColor={addButtonColor} backgroundColor={addButtonColor}
className={[_s.px5, _s.bgDangerDark_onHover].join(' ')} className={_s.px5}
onClick={this.handleOnToggleMembership} onClick={this.handleOnToggleMembership}
onMouseEnter={this.handleOnMouseEnter} onMouseEnter={this.handleOnMouseEnter}
onMouseLeave={this.handleOnMouseLeave} onMouseLeave={this.handleOnMouseLeave}
icon={addButtonIcon} icon={addButtonIcon}
title={addButtonTitle}
iconSize='10px' iconSize='10px'
/> />
} }