Skip to content

chore: sort tw classes #1233

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 6 commits into from
Jun 13, 2024
Merged

chore: sort tw classes #1233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c012556
feat: use `clsx` to merge classNames
afonsojramos Jun 13, 2024
c0f4b6c
feat: use `clsx` to merge classNames
afonsojramos Jun 13, 2024
4053f86
refactor: deprecate `react-transition-group` over tailwind animations
afonsojramos Jun 13, 2024
3105e5f
chore: sort `tw` classes
afonsojramos Jun 13, 2024
eff464e
Merge branch 'main' into chore/sort-tailwind-classes
afonsojramos Jun 13, 2024
08e9b4e
Merge branch 'main' into chore/sort-tailwind-classes
setchy Jun 13, 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
2 changes: 1 addition & 1 deletion src/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const App = () => {
return (
<AppProvider>
<Router>
<div className="flex flex-col pl-14 h-full">
<div className="flex h-full flex-col pl-14">
<Loading />
<Sidebar />
<Routes>
Expand Down
2 changes: 1 addition & 1 deletion src/components/AccountNotifications.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const AccountNotifications = (props: IProps) => {
return (
<>
{showAccountHostname && (
<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">
<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">
<div>
<PlatformIcon type={account.platform} size={16} />
<button
Expand Down
8 changes: 3 additions & 5 deletions src/components/AllRead.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,10 @@ export const AllRead = () => {
);

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

<h2 className="font-semibold text-xl mb-2 text-semibold">
No new notifications.
</h2>
<h2 className="mb-2 text-xl font-semibold">No new notifications.</h2>
</div>
);
};
18 changes: 9 additions & 9 deletions src/components/NotificationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,26 +104,26 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
)}
>
<div
className={cn('flex justify-center items-center mr-3 w-5', iconColor)}
className={cn('mr-3 flex w-5 items-center justify-center', iconColor)}
title={notificationTitle}
>
<NotificationIcon size={18} aria-label={notification.subject.type} />
</div>

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

<div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
<div className="flex flex-wrap items-center gap-1 text-xs capitalize">
{notification.subject.user ? (
<button
type="button"
Expand All @@ -136,7 +136,7 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
className="flex-shrink-0"
>
<img
className="rounded-full w-4 h-4 object-cover cursor-pointer"
className="size-4 cursor-pointer rounded-full object-cover"
src={notification.subject.user.avatar_url}
title={notification.subject.user.login}
alt={`${notification.subject.user.login}'s avatar`}
Expand Down Expand Up @@ -211,10 +211,10 @@ export const NotificationRow: FC<IProps> = ({ notification, account }) => {
</div>
</div>

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

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

<button
type="button"
className="focus:outline-none h-full hover:text-green-500"
className="h-full hover:text-green-500 focus:outline-none"
title="Mark as Read"
onClick={() => {
setAnimateExit(true);
Expand Down
10 changes: 4 additions & 6 deletions src/components/Oops.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,14 @@ export const Oops: FC<IProps> = ({ error }) => {
);

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

<h2 className="font-semibold text-xl mb-2 text-semibold">
{error.title}
</h2>
<h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
{error.descriptions.map((description, i) => {
return (
// biome-ignore lint/suspicious/noArrayIndexKey: using index for key to keep the error constants clean
<div className="text-center mb-2" key={`error_description_${i}`}>
<div className="mb-2 text-center" key={`error_description_${i}`}>
{description}
</div>
);
Expand Down
12 changes: 6 additions & 6 deletions src/components/Repository.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,11 @@ export const RepositoryNotifications: FC<IProps> = ({

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

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

<button
type="button"
className="focus:outline-none h-full hover:text-green-500"
className="h-full hover:text-green-500 focus:outline-none"
title="Mark Repository as Read"
onClick={markRepoAsRead}
>
Expand Down
10 changes: 5 additions & 5 deletions src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,11 @@ export const Sidebar: FC = () => {
}, [notifications]);

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

<div className="py-4 px-3">
<div className="px-3 py-4">
{isLoggedIn && (
<>
<button
Expand Down
14 changes: 7 additions & 7 deletions src/components/__snapshots__/AccountNotifications.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

12 changes: 6 additions & 6 deletions src/components/__snapshots__/AllRead.test.tsx.snap
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Loading