Skip to content

Commit be44194

Browse files
afonsojramossetchy
afonsojramos
and
setchy
authored
chore: sort tw classes (#1233)
* feat: use `clsx` to merge classNames * feat: use `clsx` to merge classNames * refactor: deprecate `react-transition-group` over tailwind animations * chore: sort `tw` classes --------- Co-authored-by: Adam Setch <adam.setch@outlook.com>
1 parent aabc76b commit be44194

36 files changed

+633
-637
lines changed

‎src/app.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export const App = () => {
3131
return (
3232
<AppProvider>
3333
<Router>
34-
<div className="flex flex-col pl-14 h-full">
34+
<div className="flex h-full flex-col pl-14">
3535
<Loading />
3636
<Sidebar />
3737
<Routes>

‎src/components/AccountNotifications.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const AccountNotifications = (props: IProps) => {
5454
return (
5555
<>
5656
{showAccountHostname && (
57-
<div className="flex items-center justify-between py-2 px-3 bg-gray-300 dark:bg-gray-darkest dark:text-white text-sm text-semibold">
57+
<div className="flex items-center justify-between bg-gray-300 px-3 py-2 text-sm font-semibold dark:bg-gray-darkest dark:text-white">
5858
<div>
5959
<PlatformIcon type={account.platform} size={16} />
6060
<button

‎src/components/AllRead.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,10 @@ export const AllRead = () => {
1111
);
1212

1313
return (
14-
<div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
15-
<h1 className="text-5xl mb-5">{emoji}</h1>
14+
<div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
15+
<h1 className="mb-5 text-5xl">{emoji}</h1>
1616

17-
<h2 className="font-semibold text-xl mb-2 text-semibold">
18-
No new notifications.
19-
</h2>
17+
<h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
2018
</div>
2119
);
2220
};

‎src/components/NotificationRow.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -104,26 +104,26 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
104104
)}
105105
>
106106
<div
107-
className={cn('flex justify-center items-center mr-3 w-5', iconColor)}
107+
className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
108108
title={notificationTitle}
109109
>
110110
<NotificationIcon size={18} aria-label={notification.subject.type} />
111111
</div>
112112

113113
<div
114-
className="flex-1 whitespace-nowrap overflow-hidden overflow-ellipsis"
114+
className="flex-1 overflow-hidden overflow-ellipsis whitespace-nowrap"
115115
onClick={() => handleNotification()}
116116
onKeyDown={() => handleNotification()}
117117
>
118118
<div
119-
className="mb-1 text-sm truncate cursor-pointer"
119+
className="mb-1 cursor-pointer truncate text-sm"
120120
role="main"
121121
title={notification.subject.title}
122122
>
123123
{notification.subject.title}
124124
</div>
125125

126-
<div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
126+
<div className="flex flex-wrap items-center gap-1 text-xs capitalize">
127127
{notification.subject.user ? (
128128
<button
129129
type="button"
@@ -136,7 +136,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
136136
className="flex-shrink-0"
137137
>
138138
<img
139-
className="rounded-full w-4 h-4 object-cover cursor-pointer"
139+
className="size-4 cursor-pointer rounded-full object-cover"
140140
src={notification.subject.user.avatar_url}
141141
title={notification.subject.user.login}
142142
alt={`${notification.subject.user.login}'s avatar`}
@@ -211,10 +211,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
211211
</div>
212212
</div>
213213

214-
<div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
214+
<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
215215
<button
216216
type="button"
217-
className="focus:outline-none h-full hover:text-green-500"
217+
className="h-full hover:text-green-500 focus:outline-none"
218218
title="Mark as Done"
219219
onClick={() => {
220220
setAnimateExit(true);
@@ -226,7 +226,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
226226

227227
<button
228228
type="button"
229-
className="focus:outline-none h-full hover:text-red-500"
229+
className="h-full hover:text-red-500 focus:outline-none"
230230
title="Unsubscribe from Thread"
231231
onClick={unsubscribeFromThread}
232232
>
@@ -235,7 +235,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
235235

236236
<button
237237
type="button"
238-
className="focus:outline-none h-full hover:text-green-500"
238+
className="h-full hover:text-green-500 focus:outline-none"
239239
title="Mark as Read"
240240
onClick={() => {
241241
setAnimateExit(true);

‎src/components/Oops.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,14 @@ export const Oops: FC<IProps> = ({ error }) => {
1212
);
1313

1414
return (
15-
<div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark text-black dark:text-white">
16-
<h1 className="text-5xl mb-5">{emoji}</h1>
15+
<div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
16+
<h1 className="mb-5 text-5xl">{emoji}</h1>
1717

18-
<h2 className="font-semibold text-xl mb-2 text-semibold">
19-
{error.title}
20-
</h2>
18+
<h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
2119
{error.descriptions.map((description, i) => {
2220
return (
2321
// biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
24-
<div className="text-center mb-2" key={`error_description_${i}`}>
22+
<div className="mb-2 text-center" key={`error_description_${i}`}>
2523
{description}
2624
</div>
2725
);

‎src/components/Repository.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -33,11 +33,11 @@ export const RepositoryNotifications: FC<IProps> = ({
3333

3434
return (
3535
<>
36-
<div className="flex py-2 px-3 bg-gray-100 dark:bg-gray-darker dark:text-white group">
37-
<div className="flex flex-1 space-x-3 items-center mt-0 text-sm font-medium overflow-hidden overflow-ellipsis whitespace-nowrap">
36+
<div className="group flex bg-gray-100 px-3 py-2 dark:bg-gray-darker dark:text-white">
37+
<div className="mt-0 flex flex-1 items-center space-x-3 overflow-hidden overflow-ellipsis whitespace-nowrap text-sm font-medium">
3838
{avatarUrl ? (
3939
<img
40-
className="rounded w-5 h-5"
40+
className="size-5 rounded"
4141
src={avatarUrl}
4242
alt={`${repoSlug}'s avatar`}
4343
/>
@@ -53,10 +53,10 @@ export const RepositoryNotifications: FC<IProps> = ({
5353
</span>
5454
</div>
5555

56-
<div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
56+
<div className="flex items-center justify-center gap-2 opacity-0 transition-opacity group-hover:opacity-80">
5757
<button
5858
type="button"
59-
className="focus:outline-none h-full hover:text-green-500"
59+
className="h-full hover:text-green-500 focus:outline-none"
6060
title="Mark Repository as Done"
6161
onClick={markRepoAsDone}
6262
>
@@ -67,7 +67,7 @@ export const RepositoryNotifications: FC<IProps> = ({
6767

6868
<button
6969
type="button"
70-
className="focus:outline-none h-full hover:text-green-500"
70+
className="h-full hover:text-green-500 focus:outline-none"
7171
title="Mark Repository as Read"
7272
onClick={markRepoAsRead}
7373
>

‎src/components/Sidebar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ export const Sidebar: FC = () => {
3434
}, [notifications]);
3535

3636
return (
37-
<div className="flex flex-col fixed left-14 w-14 -ml-14 h-full bg-gray-sidebar overflow-y-auto">
38-
<div className="flex flex-col flex-1 items-center py-4">
37+
<div className="fixed left-14 -ml-14 flex h-full w-14 flex-col overflow-y-auto bg-gray-sidebar">
38+
<div className="flex flex-1 flex-col items-center py-4">
3939
<button
4040
type="button"
41-
className="w-5 my-3 mx-auto cursor-pointer outline-none"
41+
className="mx-auto my-3 w-5 cursor-pointer outline-none"
4242
title="Open Gitify on GitHub"
4343
onClick={() => openGitifyRepository()}
4444
data-testid="gitify-logo"
@@ -49,7 +49,7 @@ export const Sidebar: FC = () => {
4949
<button
5050
type="button"
5151
className={cn(
52-
'flex justify-around self-stretch items-center my-1 py-1 px-2 text-xs font-extrabold cursor-pointer',
52+
'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
5353
notificationsCount > 0 ? 'text-green-500' : 'text-white',
5454
)}
5555
onClick={() => openGitHubNotifications()}
@@ -63,7 +63,7 @@ export const Sidebar: FC = () => {
6363
</button>
6464
</div>
6565

66-
<div className="py-4 px-3">
66+
<div className="px-3 py-4">
6767
{isLoggedIn && (
6868
<>
6969
<button

‎src/components/__snapshots__/AccountNotifications.test.tsx.snap‎

Lines changed: 7 additions & 7 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/__snapshots__/AllRead.test.tsx.snap‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)