Story 2304: User Profile UI

[jlchilders11]

Issue: #2304

Summary & Context

• Figma link:
• Filled: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=5387-36119&m=dev
• Empty: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1678-30882&m=dev
• Link to components/page:
• Filled: http://localhost:8000/users/me/?filled=True
• Empty: http://localhost:8000/users/me/

Changes

• Implements v3 version of User Profile Page
• Adds appropriate css file for this page
• Adds _user_profile_bio_card component, which is a variation of a markdown card with space of library contributions
• Adds _mailing_list_activity component, which lists mailing list activity on a card component.
• Adds summary to _post_card for use with the empty state
• Adds several new icons for the top buttons

‼️ Risks & Considerations ‼️

Please list any potential risks or areas that need extra attention during review/testing

Screenshots

Empty:

Desktop:

Dark Mode:

Mobile:

Filled:
Desktop:

Mobile:

Self-review Checklist

• Tag at least one team member from each team to review this PR
• Link this PR to the related GitHub Project ticket

Frontend

• UI implementation matches Figma design
• Tested in light and dark mode
• Responsive / mobile verified
• Accessibility checked (keyboard navigation, etc.)
• Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
• Test without JavaScript (if applicable)
• No console errors or warnings

[julioest]

Looks great and works well in both states! One small thought: we could drop that duplicate markup (achievements, badges, posts, connections) and let CSS grid do the layout work for us instead.

I tried collapsing it into a single grid with grid-template-areas first, but every row took the height of the taller card across columns and left big gaps under the shorter ones. Two flex columns with display: contents on mobile cleared both problems up: each card renders once, the columns flow independently, and the mobile cascade is just order:.

<div class="user-profile__profile-content-area">
  <div class="user-profile__col">
    {# bio, github, mailing-list #}
  </div>
  <div class="user-profile__col">
    {# achievements, badges, posts, connections #}
  </div>
</div>

.user-profile__profile-content-area {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-large);
  margin-bottom: var(--space-xl);
}

.user-profile__col {
  display: flex;
  flex-direction: column;
  gap: var(--space-large);
}

@media (max-width: 767px) {
  .user-profile__profile-content-area {
    grid-template-columns: 1fr;
  }
  /* Lift the column wrappers so the cards become direct grid children */
  .user-profile__col {
    display: contents;
  }
  .user-profile__bio          { order: 1; }
  .user-profile__achievements { order: 2; }
  .user-profile__badges       { order: 3; }
  .user-profile__github       { order: 4; }
  .user-profile__posts        { order: 5; }
  .user-profile__mailing-list { order: 6; }
  .user-profile__connections  { order: 7; }
}

Tried it locally and each card class shows up once, columns flow independently on desktop, and the mobile cascade orders bio → achievements → badges → github → posts → mailing-list → connections.

Here's a patch for this: pr-2400-dom-duplication-fix.patch

[jlchilders11]

  .user-profile__mailing-list { order: 6; }
  .user-profile__connections  { order: 7; }
}

This is slick as heck, implemented.

[herzog0]

Looking pretty good! Just a few fixes I think should be applied. Also, can you add some info to the description on how we can see other user's public profiles? I see me in the url, but I wouldn't know what to replace that with in order to see others' users pages.

[herzog0]

Thanks for the fixes!

[jlchilders11]

@julioest @herzog0 for the requested rereview, the primary elements to be reviewed are the refactor of tooltips, as well as the handling of the right aligning of buttons on the template view.

[herzog0]

Just some small nits and a color that must be fixed. Otherwise it looks good!
Thanks for the tooltip work too, that's pretty good to use now!!

[herzog0]

We should remove the fill color here as well, as its overriding the mapping for the dark theme

[herzog0]

I think this import is not being used anywhere

[herzog0]

I think this still didn't solve the reported padding issue. The inner padding is fine, but it's adding to the overall webpage padding, which looks like a higher size than expected.
Removing the padding altogether fixes it apparently. Not sure of the global implications of doing that though.

[jlchilders11]

I agree that this padding does not match the design, but I hope that we can spin this off into its own ticket as I think that this is something of a global problem?

[julioest]

Approved 👍

[kattyode]

QA Approved