Skip to content

refactor: update notification footer styles #1177

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
merged 3 commits into from
Jun 5, 2024
Merged

refactor: update notification footer styles #1177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7f6b888
refactor: update notification footer styles
setchy Jun 4, 2024
9659723
refactor: update notification footer styles
setchy Jun 4, 2024
4372c1c
Merge remote-tracking branch 'origin/main' into refactor/notification…
setchy Jun 4, 2024
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
69 changes: 32 additions & 37 deletions src/components/NotificationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,48 +115,47 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
</div>

<div
className="flex-1 overflow-hidden"
className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
onClick={() => openNotification()}
onKeyDown={() => openNotification()}
>
<div
className="mb-1 text-sm whitespace-nowrap overflow-ellipsis overflow-hidden cursor-pointer"
className="mb-1 text-sm whitespace-nowrap cursor-pointer"
role="main"
title={notification.subject.title}
>
{notification.subject.title}
</div>

<div className="text-xs text-capitalize whitespace-nowrap overflow-ellipsis overflow-hidden">
<span className="flex items-center">
<span title={updatedLabel} className="flex">
{notification.subject.user ? (
<span
title="View User Profile"
onClick={openUserProfile}
onKeyDown={openUserProfile}
>
<img
className="rounded-full w-4 h-4 cursor-pointer"
src={notification.subject.user.avatar_url}
title={notification.subject.user.login}
alt={`${notification.subject.user.login}'s avatar`}
/>
</span>
) : (
<span>
<FeedPersonIcon
size={16}
className="text-gray-500 dark:text-gray-300"
/>
</span>
)}
<span className="ml-1" title={reason.description}>
{reason.title}
<div className="text-xs text-capitalize">
<span title={updatedLabel} className="flex items-center gap-1">
{notification.subject.user ? (
<span
title="View User Profile"
onClick={openUserProfile}
onKeyDown={openUserProfile}
className="flex-shrink-0"
>
<img
className="rounded-full w-4 h-4 object-cover cursor-pointer"
src={notification.subject.user.avatar_url}
title={notification.subject.user.login}
alt={`${notification.subject.user.login}'s avatar`}
/>
</span>
) : (
<span>
<FeedPersonIcon
size={16}
className="text-gray-500 dark:text-gray-300"
/>
</span>
<span className="ml-1">{updatedAt}</span>
)}
<span title={reason.description}>{reason.title}</span>
<span>{updatedAt}</span>
<span className="hover:overflow-auto">
{notification.subject?.linkedIssues?.length > 0 && (
<span className="ml-1" title={linkedIssuesPillDescription}>
<span title={linkedIssuesPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<IssueClosedIcon
size={12}
Expand All @@ -175,11 +174,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
}

return (
<span
key={review.state}
title={icon.description}
className="ml-1"
>
<span key={review.state} title={icon.description}>
<button
type="button"
className={Constants.PILL_CLASS_NAME}
Expand All @@ -196,7 +191,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
})
: null}
{notification.subject?.comments > 0 && (
<span className="ml-1" title={commentsPillDescription}>
<span title={commentsPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<CommentIcon
size={12}
Expand All @@ -208,7 +203,7 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
</span>
)}
{notification.subject?.labels?.length > 0 && (
<span className="ml-1" title={labelsPillDescription}>
<span title={labelsPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<TagIcon
size={12}
Expand Down
Loading