diff --git a/src/components/Avatar/Avatar.css b/src/components/Avatar/Avatar.css index cb3ffc6d..cd35be7c 100644 --- a/src/components/Avatar/Avatar.css +++ b/src/components/Avatar/Avatar.css @@ -18,6 +18,10 @@ /* Colors */ background-image: linear-gradient(-180deg, #e16b56 0%, #c0392b 100%); color: var(--matterColorLight); + + &:hover { + text-decoration: none; + } } } diff --git a/src/components/Avatar/Avatar.example.js b/src/components/Avatar/Avatar.example.js index a172b683..cbd9a3b2 100644 --- a/src/components/Avatar/Avatar.example.js +++ b/src/components/Avatar/Avatar.example.js @@ -171,3 +171,13 @@ export const WithProfileImageUserLarge = { }, group: 'avatar', }; + +export const WithoutProfileLink = { + component: AvatarLarge, + props: { + user: userWithProfileImage, + disableProfileLink: true, + intl: fakeIntl, + }, + group: 'avatar', +}; diff --git a/src/components/Avatar/Avatar.js b/src/components/Avatar/Avatar.js index 2aec0918..6fddab39 100644 --- a/src/components/Avatar/Avatar.js +++ b/src/components/Avatar/Avatar.js @@ -4,12 +4,12 @@ import { injectIntl, intlShape } from 'react-intl'; import classNames from 'classnames'; import * as propTypes from '../../util/propTypes'; import { ensureUser, userDisplayName, userAbbreviatedName } from '../../util/data'; -import { ResponsiveImage, IconBannedUser } from '../../components/'; +import { ResponsiveImage, IconBannedUser, NamedLink } from '../../components/'; import css from './Avatar.css'; export const AvatarComponent = props => { - const { rootClassName, className, user, intl } = props; + const { rootClassName, className, user, disableProfileLink, intl } = props; const classes = classNames(rootClassName || css.root, className); const avatarUser = ensureUser(user); const isBannedUser = avatarUser.attributes.banned; @@ -21,10 +21,35 @@ export const AvatarComponent = props => { const displayName = userDisplayName(avatarUser, bannedUserDisplayName); const abbreviatedName = userAbbreviatedName(avatarUser, bannedUserAbbreviatedName); + const rootProps = { className: classes, title: displayName }; + const linkProps = avatarUser.id + ? { name: 'ProfilePage', params: { id: avatarUser.id.uuid } } + : { name: 'ProfileBasePage' }; + const hasProfileImage = avatarUser.profileImage && avatarUser.profileImage.id; - if (avatarUser.profileImage && avatarUser.profileImage.id) { + if (isBannedUser) { return ( -
+
+ +
+ ); + } else if (hasProfileImage && !disableProfileLink) { + return ( + + + + ); + } else if (hasProfileImage) { + return ( +
{ />
); - } else if (isBannedUser) { + } else if (!disableProfileLink) { + // Placeholder avatar (initials) return ( -
- -
+ + {abbreviatedName} + ); } else { // Placeholder avatar (initials) return ( -
+
{abbreviatedName}
); } }; -const { string, oneOfType } = PropTypes; - AvatarComponent.defaultProps = { className: null, rootClassName: null, user: null, + disableProfileLink: false, }; +const { string, oneOfType, bool } = PropTypes; + AvatarComponent.propTypes = { rootClassName: string, className: string, user: oneOfType([propTypes.user, propTypes.currentUser]), + disableProfileLink: bool, + // from injectIntl intl: intlShape.isRequired, }; diff --git a/src/components/TopbarDesktop/TopbarDesktop.js b/src/components/TopbarDesktop/TopbarDesktop.js index 74d657e7..242204d4 100644 --- a/src/components/TopbarDesktop/TopbarDesktop.js +++ b/src/components/TopbarDesktop/TopbarDesktop.js @@ -69,7 +69,7 @@ const TopbarDesktop = props => { const profileMenu = isAuthenticated ? ( - + diff --git a/src/containers/CheckoutPage/CheckoutPage.js b/src/containers/CheckoutPage/CheckoutPage.js index 18a3f2ee..d48488c0 100644 --- a/src/containers/CheckoutPage/CheckoutPage.js +++ b/src/containers/CheckoutPage/CheckoutPage.js @@ -293,7 +293,7 @@ export class CheckoutPageComponent extends Component { />
- +
@@ -348,7 +348,7 @@ export class CheckoutPageComponent extends Component { />
- +

{listingTitle}

diff --git a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap index e89f4b03..b8f03cd7 100644 --- a/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap +++ b/src/containers/CheckoutPage/__snapshots__/CheckoutPage.test.js.snap @@ -49,6 +49,7 @@ exports[`CheckoutPage matches snapshot 1`] = ` className="" >
{ params={{ id: tx.id.uuid }} >
- +
{rowNotificationDot}
diff --git a/src/containers/ProfilePage/ProfilePage.js b/src/containers/ProfilePage/ProfilePage.js index a96c8416..e33200ea 100644 --- a/src/containers/ProfilePage/ProfilePage.js +++ b/src/containers/ProfilePage/ProfilePage.js @@ -61,7 +61,7 @@ export const ProfilePageComponent = props => { const asideContent = (
- +

{displayName ? ( diff --git a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap index 82950eab..cd45f3c2 100644 --- a/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap +++ b/src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap @@ -32,6 +32,7 @@ exports[`ProfilePage matches snapshot 1`] = ` >
+ ) : null; const chooseAvatarLabel =