Skip to content

Commit e2b0892

Browse files
setchysetchy
authored
refactor: more pill css changes (#1183)
* refactor: more pill css changes * refactor: more pill css changes * refactor: more pill css changes
1 parent 40d3104 commit e2b0892

File tree

7 files changed

+2667
-2787
lines changed

7 files changed

+2667
-2787
lines changed

‎src/components/NotificationRow.tsx

Lines changed: 99 additions & 106 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,10 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
105105
return (
106106
<div
107107
id={notification.id}
108-
className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
108+
className="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
109109
>
110110
<div
111-
className={`flex justify-center items-center w-5 ${iconColor}`}
111+
className={`flex justify-center items-center mr-3 w-5 ${iconColor}`}
112112
title={notificationTitle}
113113
>
114114
<NotificationIcon size={18} aria-label={notification.subject.type} />
@@ -120,122 +120,115 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
120120
onKeyDown={() => openNotification()}
121121
>
122122
<div
123-
className="mb-1 text-sm whitespace-nowrap cursor-pointer"
123+
className="mb-1 text-sm truncate cursor-pointer"
124124
role="main"
125125
title={notification.subject.title}
126126
>
127127
{notification.subject.title}
128128
</div>
129129

130-
<div className="text-xs text-capitalize">
131-
<span title={updatedLabel} className="flex items-center gap-1">
132-
{notification.subject.user ? (
133-
<span
134-
title="View User Profile"
135-
onClick={openUserProfile}
136-
onKeyDown={openUserProfile}
137-
className="flex-shrink-0"
138-
>
139-
<img
140-
className="rounded-full w-4 h-4 object-cover cursor-pointer"
141-
src={notification.subject.user.avatar_url}
142-
title={notification.subject.user.login}
143-
alt={`${notification.subject.user.login}'s avatar`}
144-
/>
145-
</span>
146-
) : (
147-
<span>
148-
<FeedPersonIcon
149-
size={16}
150-
className="text-gray-500 dark:text-gray-300"
151-
/>
152-
</span>
153-
)}
154-
<span title={reason.description}>{reason.title}</span>
155-
<span>{updatedAt}</span>
156-
{settings.showPills && (
157-
<span className="hover:overflow-auto">
158-
{notification.subject?.linkedIssues?.length > 0 && (
159-
<span title={linkedIssuesPillDescription}>
160-
<button type="button" className={Constants.PILL_CLASS_NAME}>
161-
<IssueClosedIcon
162-
size={12}
163-
className={`mr-1 ${IconColor.GREEN}`}
164-
aria-label={linkedIssuesPillDescription}
165-
/>
166-
{notification.subject.linkedIssues.length}
167-
</button>
168-
</span>
169-
)}
170-
{notification.subject.reviews
171-
? notification.subject.reviews.map((review) => {
172-
const icon = getPullRequestReviewIcon(review);
173-
if (!icon) {
174-
return null;
175-
}
130+
<div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
131+
{notification.subject.user ? (
132+
<div
133+
title="View User Profile"
134+
onClick={openUserProfile}
135+
onKeyDown={openUserProfile}
136+
className="flex-shrink-0"
137+
>
138+
<img
139+
className="rounded-full w-4 h-4 object-cover cursor-pointer"
140+
src={notification.subject.user.avatar_url}
141+
title={notification.subject.user.login}
142+
alt={`${notification.subject.user.login}'s avatar`}
143+
/>
144+
</div>
145+
) : (
146+
<div>
147+
<FeedPersonIcon
148+
size={16}
149+
className="text-gray-500 dark:text-gray-300"
150+
/>
151+
</div>
152+
)}
153+
<div title={reason.description}>{reason.title}</div>
154+
<div title={updatedLabel}>{updatedAt}</div>
155+
{settings.showPills && (
156+
<div>
157+
{notification.subject?.linkedIssues?.length > 0 && (
158+
<span title={linkedIssuesPillDescription}>
159+
<button type="button" className={Constants.PILL_CLASS_NAME}>
160+
<IssueClosedIcon
161+
size={12}
162+
className={`mr-1 ${IconColor.GREEN}`}
163+
aria-label={linkedIssuesPillDescription}
164+
/>
165+
{notification.subject.linkedIssues.length}
166+
</button>
167+
</span>
168+
)}
169+
{notification.subject.reviews?.map((review) => {
170+
const icon = getPullRequestReviewIcon(review);
171+
if (!icon) {
172+
return null;
173+
}
176174

177-
return (
178-
<span key={review.state} title={icon.description}>
179-
<button
180-
type="button"
181-
className={Constants.PILL_CLASS_NAME}
182-
>
183-
<icon.type
184-
size={12}
185-
className={`mr-1 ${icon.color}`}
186-
aria-label={icon.description}
187-
/>
188-
{review.users.length}
189-
</button>
190-
</span>
191-
);
192-
})
193-
: null}
194-
{notification.subject?.comments > 0 && (
195-
<span title={commentsPillDescription}>
175+
return (
176+
<span key={review.state} title={icon.description}>
196177
<button type="button" className={Constants.PILL_CLASS_NAME}>
197-
<CommentIcon
178+
<icon.type
198179
size={12}
199-
className={`mr-1 ${IconColor.GRAY}`}
200-
aria-label={commentsPillDescription}
180+
className={`mr-1 ${icon.color}`}
181+
aria-label={icon.description}
201182
/>
202-
{notification.subject.comments}
183+
{review.users.length}
203184
</button>
204185
</span>
205-
)}
206-
{notification.subject?.labels?.length > 0 && (
207-
<span title={labelsPillDescription}>
208-
<button type="button" className={Constants.PILL_CLASS_NAME}>
209-
<TagIcon
210-
size={12}
211-
className={`mr-1 ${IconColor.GRAY}`}
212-
aria-label={labelsPillDescription}
213-
/>
214-
{notification.subject.labels.length}
215-
</button>
216-
</span>
217-
)}
218-
{notification.subject.milestone && (
219-
<span
220-
className="ml-1"
221-
title={notification.subject.milestone.title}
222-
>
223-
<button type="button" className={Constants.PILL_CLASS_NAME}>
224-
<MilestoneIcon
225-
size={12}
226-
className={
227-
notification.subject.milestone.state === 'open'
228-
? IconColor.GREEN
229-
: IconColor.RED
230-
}
231-
aria-label={notification.subject.milestone.title}
232-
/>
233-
</button>
234-
</span>
235-
)}
236-
</span>
237-
)}
238-
</span>
186+
);
187+
})}
188+
{notification.subject?.comments > 0 && (
189+
<span title={commentsPillDescription}>
190+
<button type="button" className={Constants.PILL_CLASS_NAME}>
191+
<CommentIcon
192+
size={12}
193+
className={`mr-1 ${IconColor.GRAY}`}
194+
aria-label={commentsPillDescription}
195+
/>
196+
{notification.subject.comments}
197+
</button>
198+
</span>
199+
)}
200+
{notification.subject?.labels?.length > 0 && (
201+
<span title={labelsPillDescription}>
202+
<button type="button" className={Constants.PILL_CLASS_NAME}>
203+
<TagIcon
204+
size={12}
205+
className={`mr-1 ${IconColor.GRAY}`}
206+
aria-label={labelsPillDescription}
207+
/>
208+
{notification.subject.labels.length}
209+
</button>
210+
</span>
211+
)}
212+
{notification.subject.milestone && (
213+
<span
214+
className="ml-1"
215+
title={notification.subject.milestone.title}
216+
>
217+
<button type="button" className={Constants.PILL_CLASS_NAME}>
218+
<MilestoneIcon
219+
size={12}
220+
className={
221+
notification.subject.milestone.state === 'open'
222+
? IconColor.GREEN
223+
: IconColor.RED
224+
}
225+
aria-label={notification.subject.milestone.title}
226+
/>
227+
</button>
228+
</span>
229+
)}
230+
</div>
231+
)}
239232
</div>
240233
</div>
241234

‎src/components/Repository.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ export const RepositoryNotifications: FC<IProps> = ({
5252
<MarkGithubIcon size={18} />
5353
)}
5454
<span
55-
className="cursor-pointer"
55+
className="cursor-pointer truncate"
5656
onClick={openBrowser}
5757
onKeyDown={openBrowser}
5858
>

0 commit comments

Comments
 (0)