Add edit profile link to UserCard

src/components/UserCard/UserCard.css

@@ -53,6 +53,7 @@
   display: none;
 
   @media (--viewportMedium) {
+    margin-top: 16px;
     display: block;
   }
 }
@@ -64,12 +65,17 @@
 
 .links {
   @apply --marketplaceH4FontStyles;
+  margin-top: 13px;
+
+  @media (--viewportMedium) {
+    margin: 16px 0 0 0;
+  }
 }
 
 .withBioMissingAbove {
   @media (--viewportMedium) {
     /* Fix baseline alignment if bio is missing from above */
-    margin-top: 18px;
+    margin-top: 16px;
   }
 }
 
@@ -77,3 +83,37 @@
   margin: 0 10px;
   color: var(--marketplaceColor);
 }
+
+.headingRow {
+  display: flex;
+  flex-direction: column;
+
+  @media (--viewportMedium) {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: baseline;
+  }
+}
+
+.editProfileDesktop {
+  @apply --marketplaceH4FontStyles;
+  display: none;
+  margin-bottom: 0;
+
+  /* Align to same baseline as the "Your host" heading */
+
+  @media (--viewportMedium) {
+    display: inline;
+  }
+}
+
+.editProfileMobile {
+  @apply --marketplaceH4FontStyles;
+  display: inline;
+
+  /* Align to same baseline as the "Your host" heading */
+
+  @media (--viewportMedium) {
+    display: none;
+  }
+}

src/components/UserCard/UserCard.example.js

@@ -31,6 +31,48 @@ export const WithoutBioCurrentUser = {
   group: 'users',
 };
 
+export const WithProfileImageAndBioCurrentUser = {
+  component: UserCard,
+  props: {
+    user: {
+      id: new UUID('full-user'),
+      type: 'user',
+      attributes: {
+        banned: false,
+        profile: {
+          displayName: 'Has P',
+          abbreviatedName: 'HP',
+          bio:
+            'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\n\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
+        },
+      },
+      profileImage: {
+        id: new UUID('profile-image'),
+        type: 'image',
+        attributes: {
+          variants: {
+            'square-small': {
+              name: 'square-small',
+              width: 240,
+              height: 240,
+              url: 'https://lorempixel.com/240/240/people/',
+            },
+            'square-small2x': {
+              name: 'square-small2x',
+              width: 480,
+              height: 480,
+              url: 'https://lorempixel.com/480/480/people/',
+            },
+          },
+        },
+      },
+    },
+    currentUser: createCurrentUser('full-user'),
+    onContactUser: user => console.log('concact user:', user),
+  },
+  group: 'users',
+};
+
 export const WithProfileImageAndBio = {
   component: UserCard,
   props: {

src/components/UserCard/UserCard.js

@@ -83,13 +83,29 @@ const UserCard = props => {
     [css.withBioMissingAbove]: !hasBio,
   });
 
-  const hideContact = currentUser && isCurrentUser;
-  const separator = hideContact ? null : <span className={css.linkSeparator}>•</span>;
-  const contact = hideContact ? null : (
+  const separator = isCurrentUser ? null : <span className={css.linkSeparator}>•</span>;
+
+  const contact = isCurrentUser ? null : (
     <InlineTextButton onClick={handleContactUserClick}>
       <FormattedMessage id="UserCard.contactUser" />
     </InlineTextButton>
   );
+
+  const editProfileMobile = isCurrentUser ? (
+    <span className={css.editProfileMobile}>
+      <span className={css.linkSeparator}>•</span>
+      <NamedLink name="ProfileSettingsPage">
+        <FormattedMessage id="ListingPage.editProfileLink" />
+      </NamedLink>
+    </span>
+  ) : null;
+
+  const editProfileDesktop = isCurrentUser ? (
+    <NamedLink className={css.editProfileDesktop} name="ProfileSettingsPage">
+      <FormattedMessage id="ListingPage.editProfileLink" />
+    </NamedLink>
+  ) : null;
+
   const links = ensuredUser.id ? (
     <p className={linkClasses}>
       <NamedLink className={css.link} name="ProfilePage" params={{ id: ensuredUser.id.uuid }}>
@@ -97,6 +113,7 @@ const UserCard = props => {
       </NamedLink>
       {separator}
       {contact}
+      {editProfileMobile}
     </p>
   ) : null;
 
@@ -105,9 +122,12 @@ const UserCard = props => {
       <div className={css.content}>
         <AvatarLarge className={css.avatar} user={user} />
         <div className={css.info}>
-          <h3 className={css.heading}>
-            <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
-          </h3>
+          <div className={css.headingRow}>
+            <h3 className={css.heading}>
+              <FormattedMessage id="UserCard.heading" values={{ name: displayName }} />
+            </h3>
+            {editProfileDesktop}
+          </div>
           {hasBio ? <ExpandableBio className={css.desktopBio} bio={bio} /> : null}
           {links}
         </div>