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 ? (
@@ -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 =