From 036ef006ae58f34b6b6166e946c344b2e8608c1c Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 14 Sep 2020 11:47:46 -0500
Subject: [PATCH] Added isCard for alt layout to Account component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

• Added:
- isCard for alt layout to Account component
---
 .../gabsocial/components/account.js           | 44 +++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/app/javascript/gabsocial/components/account.js b/app/javascript/gabsocial/components/account.js
index ad9dbc0a..3a771d74 100644
--- a/app/javascript/gabsocial/components/account.js
+++ b/app/javascript/gabsocial/components/account.js
@@ -6,6 +6,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'
 import { defineMessages, injectIntl } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import { me } from '../initial_state'
+import { CX } from '../constants'
 import {
   followAccount,
   unfollowAccount,
@@ -46,6 +47,7 @@ class Account extends ImmutablePureComponent {
       dismissAction,
       showDismiss,
       withBio,
+      isCard,
     } = this.props
 
     if (!account) return null
@@ -93,9 +95,40 @@ class Account extends ImmutablePureComponent {
 
     const content = { __html: account.get('note_emojified') }
 
+    const buttonClasses = CX({
+      d: 1,
+      pt2: 1,
+      pr5: 1,
+      noUnderline: 1,
+      overflowHidden: 1,
+      flexNormal: 1,
+      aiStart: !isCard,
+      aiCenter: isCard,
+    })
+
+    const containerClasses = CX({
+      d: 1,
+      px15: 1,
+      py10: 1,
+      bgSubtle_onHover: 1,
+      borderBottom1PX: !isCard,
+      borderColorSecondary: !isCard,
+    })
+
+    const innerContainerClasses = CX({
+      d: 1,
+      flexRow: !isCard,
+      aiStart: !isCard,
+      aiCenter: isCard,
+    })
+
+    const displayNameWrapperClasses = CX({
+      py10: isCard,
+    })
+
     return (
-      <div className={[_s.d, _s.px15, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary, _s.bgSubtle_onHover].join(' ')}>
-        <div className={[_s.d, _s.flexRow, _s.aiStart].join(' ')}>
+      <div className={containerClasses}>
+        <div className={innerContainerClasses}>
 
           <NavLink
             className={[_s.d, _s.noUnderline].join(' ')}
@@ -110,9 +143,11 @@ class Account extends ImmutablePureComponent {
               <NavLink
                 title={account.get('acct')}
                 to={`/${account.get('acct')}`}
-                className={[_s.d, _s.aiStart, _s.pt2, _s.pr5, _s.noUnderline, _s.overflowHidden, _s.flexNormal].join(' ')}
+                className={buttonClasses}
               >
-                <DisplayName account={account} isMultiline={compact} />
+                <div className={displayNameWrapperClasses}>
+                  <DisplayName account={account} isMultiline={compact || isCard} />
+                </div>
                 {!compact && actionButton}
               </NavLink>
 
@@ -193,6 +228,7 @@ Account.propTypes = {
   showDismiss: PropTypes.bool,
   dismissAction: PropTypes.func,
   withBio: PropTypes.bool,
+  isCard: PropTypes.bool,
 }
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Account))
\ No newline at end of file