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>
gitify-app · Jun 13, 2024 · be44194 · be44194
1 parent aabc76b
commit be44194
Show file tree

Hide file tree

Showing 36 changed files with 633 additions and 637 deletions.
diff --git a/src/app.tsx b/src/app.tsx
@@ -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>

diff --git a/src/components/AccountNotifications.tsx b/src/components/AccountNotifications.tsx
@@ -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

diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx
@@ -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>
   );
 };
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
@@ -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"
@@ -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`}
@@ -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);
@@ -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}
         >
@@ -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);

diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx
@@ -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>
         );

diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
@@ -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`}
             />
@@ -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}
           >
@@ -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}
           >

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
@@ -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"
@@ -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()}
@@ -63,7 +63,7 @@ export const Sidebar: FC = () => {
         </button>
       </div>
 
-      <div className="py-4 px-3">
+      <div className="px-3 py-4">
         {isLoggedIn && (
           <>
             <button

diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap