Skip to content

Normalize avatar appearance #8

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dbutenhof merged 1 commit into from
Jan 20, 2026
Merged

Normalize avatar appearance #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 28 additions & 17 deletions frontend/src/components/CommentCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { Spinner, Alert } from '@patternfly/react-core';
import { getDaysSince, formatDate } from '../utils/dateUtils';
import { fetchCommentReactions } from '../services/api';
import Reactions from './Reactions';
import UserAvatar from './UserAvatar';

const CommentCard = ({ comment }) => {
const daysSince = getDaysSince(comment.created_at);
Expand Down Expand Up @@ -56,30 +57,40 @@ const CommentCard = ({ comment }) => {
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
gap: '0.5rem',
marginBottom: '0.75rem',
}}
>
{comment.user?.avatar_url && (
<img
src={comment.user.avatar_url}
alt={comment.user.login}
{comment.user?.html_url ? (
<a
href={comment.user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{
width: '32px',
height: '32px',
borderRadius: '50%',
flexShrink: 0,
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
}}
/>
)}
<div style={{ flex: '1', minWidth: 0 }}>
<div style={{ fontWeight: '500' }}>
{comment.user?.login || 'Unknown'}
</div>
<div style={{ fontSize: '0.875rem', color: '#6a6e73' }}>
{formatDate(comment.created_at)} ({daysSince} days ago)
>
<UserAvatar user={comment.user} size={32} />
<div style={{ fontWeight: '500', color: '#0066cc' }}>
{comment.user.login || 'Unknown'}
</div>
</a>
) : (
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
<UserAvatar user={comment.user} size={32} />
<div style={{ fontWeight: '500' }}>
{comment.user?.login || 'Unknown'}
</div>
</div>
)}
<div
style={{ fontSize: '0.875rem', color: '#6a6e73', marginLeft: '40px' }}
>
{formatDate(comment.created_at)} ({daysSince} days ago)
</div>
</div>
<div dangerouslySetInnerHTML={{ __html: comment.body_html || '' }} />
Expand Down
100 changes: 46 additions & 54 deletions frontend/src/components/IssueCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
} from '../services/api';
import CommentCard from './CommentCard';
import Reactions from './Reactions';
import UserAvatar from './UserAvatar';
import labelsCache, { clearLabelsCache } from '../utils/labelsCache';
import milestonesCache from '../utils/milestonesCache';

Expand Down Expand Up @@ -566,52 +567,51 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
marginBottom: '0rem',
display: 'flex',
alignItems: 'flex-start',
justifyContent: 'space-between',
gap: '0.5rem',
padding: '0.75rem',
}}
>
{issue.user?.avatar_url && (
<a
href={issue.user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
>
<img
src={issue.user.avatar_url}
alt={issue.user.login}
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-start',
}}
>
{issue.user?.html_url ? (
<a
href={issue.user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{
width: '32px',
height: '32px',
borderRadius: '50%',
flexShrink: 0,
textDecoration: 'none',
display: 'flex',
alignItems: 'center',
gap: '0.5rem',
}}
/>
</a>
)}
<div style={{ flex: '1', minWidth: 0 }}>
<div style={{ fontWeight: '500' }}>
{issue.user?.html_url ? (
<a
href={issue.user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'none', color: '#0066cc' }}
>
>
<UserAvatar user={issue.user} size={32} />
<div style={{ fontWeight: '500', color: '#0066cc' }}>
{issue.user.login || 'Unknown'}
</a>
) : (
issue.user?.login || 'Unknown'
)}
</div>
<div style={{ fontSize: '0.875rem', color: '#6a6e73' }}>
{formatDate(issue.created_at)} ({daysSince} days ago)
</div>
</div>
</a>
) : (
<div
style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
>
<UserAvatar user={issue.user} size={32} />
<div style={{ fontWeight: '500' }}>
{issue.user?.login || 'Unknown'}
</div>
</div>
)}
{issue.assignees && issue.assignees.length > 0 && (
<div
style={{
fontSize: '0.875rem',
color: '#6a6e73',
marginLeft: '40px',
marginTop: '0.25rem',
display: 'flex',
alignItems: 'center',
Expand All @@ -629,25 +629,7 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
gap: '0.25rem',
}}
>
{assignee.avatar_url && (
<a
href={assignee.html_url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
>
<img
src={assignee.avatar_url}
alt={assignee.login}
style={{
width: '20px',
height: '20px',
borderRadius: '50%',
verticalAlign: 'middle',
}}
/>
</a>
)}
<UserAvatar user={assignee} size={20} />
<a
href={assignee.html_url}
target="_blank"
Expand All @@ -663,14 +645,24 @@ const IssueCard = ({ issue, onMilestoneChange }) => {
))}
</div>
)}
<div
style={{
fontSize: '0.875rem',
color: '#6a6e73',
marginLeft: '40px',
marginTop: '0.25rem',
}}
>
{formatDate(issue.created_at)} ({daysSince} days ago)
</div>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end',
gap: '0.5rem',
maxWidth: '50%',
flexShrink: 0,
}}
>
{/* Milestone control */}
Expand Down
61 changes: 61 additions & 0 deletions frontend/src/components/UserAvatar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
// ai-generated: Cursor
import React from 'react';

const UserAvatar = ({ user, size = 32, showName = false }) => {
if (!user?.avatar_url) {
return null;
}

const avatarImage = (
<img
src={user.avatar_url}
alt={user.login || 'User'}
style={{
width: `${size}px`,
height: `${size}px`,
borderRadius: '50%',
flexShrink: 0,
}}
/>
);

const username = user.login || 'Unknown';

// If showName is true, we need to return just the avatar
// The username will be handled separately in the parent to allow proper layout
// This maintains backward compatibility for cases where showName is false
if (showName) {
// Just return the linked avatar - username will be in parent
if (user.html_url) {
return (
<a
href={user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
>
{avatarImage}
</a>
);
}
return avatarImage;
}

// If showName is false, just return the avatar (for backward compatibility)
if (user.html_url) {
return (
<a
href={user.html_url}
target="_blank"
rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
>
{avatarImage}
</a>
);
}

return avatarImage;
};

export default UserAvatar;