Updated GroupListItem to have text instead of button for adding

• Updated:
- GroupListItem to have text instead of button for adding

app/javascript/gabsocial/components/group_list_item.js

@@ -105,15 +105,14 @@ class GroupListItem extends ImmutablePureComponent {
       flexRow: 1,
       noUnderline: 1,
       width100PC: 1,
-      maxWidth100PC42PX: isAddable,
+      maxWidth100PC86PX: isAddable,
     })
 
     const coverSrc = group.get('cover_image_url') || ''
     const coverMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
     const isMember = !!relationships && relationships.get('member')
-    const addButtonIcon = isMember ? hovering ? 'subtract' : 'check' : 'add'
     const addButtonColor = isMember ? hovering ? 'danger' : 'tertiary' : 'brand'
-    const addButtonTitle = isMember ? hovering ? 'Leave Group' : 'You are a member' : 'Join Group'
+    const addButtonTitle = isMember ? hovering ? 'Leave' : 'Member' : 'Join'
 
     const Wrapper = !isStatic ? NavLink : Dummy
 
@@ -146,23 +145,25 @@ class GroupListItem extends ImmutablePureComponent {
 
           </div>
         </Wrapper>
-        <div className={[_s.default, _s.justifyContentCenter].join(' ')}>
+        {
-          {
+          isAddable &&
-            relationships &&
+          <div className={[_s.default, _s.justifyContentCenter, _s.flexGrow1].join(' ')}>
-            <Button
+            {
-              isNarrow
+              relationships &&
-              color='white'
+              <Button
-              backgroundColor={addButtonColor}
+                isNarrow
-              className={_s.px5}
+                color='white'
-              onClick={this.handleOnToggleMembership}
+                className={[_s.px10, _s.width72PX].join(' ')}
-              onMouseEnter={this.handleOnMouseEnter}
+                backgroundColor={addButtonColor}
-              onMouseLeave={this.handleOnMouseLeave}
+                onClick={this.handleOnToggleMembership}
-              icon={addButtonIcon}
+                onMouseEnter={this.handleOnMouseEnter}
-              title={addButtonTitle}
+                onMouseLeave={this.handleOnMouseLeave}
-              iconSize='10px'
+              >
-            />
+                <Text size='small' color='inherit' align='center'>{addButtonTitle}</Text>
-          }
+              </Button>
-        </div>
+            }
+          </div>
+        }
       </div>
     )
   }