Repository: gitify-app/gitify
Pull request #1238 (2024-06-14 17:14:25)

style: cleanup useless tw classnames
Cleanup a bunch of useless `flex-1`s and centralize the global `bg` and `text` colors into `index.html`.

Also fixed a bug in the login pages where the label was not being correctly set.
<img width="612" alt="image" src="https://github.com/gitify-app/gitify/assets/19473034/a93f18d7-e71e-4f44-8772-70f7f7dd1641">


afonsojramos: Wait, noticed a small regression! 😬 

Patch:
diff --git a/index.html b/index.html
index a3926896..12888be5 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,4 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
     <title>Gitify</title>
@@ -9,30 +9,30 @@
   </head>
 
   <body>
-    <div id="gitify"></div>
+    <div
+      id="gitify"
+      class="bg-white text-black dark:bg-gray-dark dark:text-white"
+    ></div>
   </body>
 
   <script src="./build/js/app.js"></script>
 
   <style>
     html,
-    body {
+    body,
+    #gitify {
       height: 100%;
       -webkit-user-select: none;
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
+        "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+        "Helvetica Neue", sans-serif;
       margin: 0;
       cursor: default;
     }
 
-    #gitify {
-      height: 100%;
-    }
-
     #nprogress {
       pointer-events: none;
     }
diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx
index b16823ba..1a830571 100644
--- a/src/components/AllRead.tsx
+++ b/src/components/AllRead.tsx
@@ -11,7 +11,7 @@ export const AllRead = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+    <div className="flex 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="mb-2 text-xl font-semibold">No new notifications.</h2>
diff --git a/src/components/Oops.tsx b/src/components/Oops.tsx
index 6222d201..5c2afc4d 100644
--- a/src/components/Oops.tsx
+++ b/src/components/Oops.tsx
@@ -12,7 +12,7 @@ export const Oops: FC<IProps> = ({ error }) => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+    <div className="flex flex-1 flex-col items-center justify-center p-4">
       <h1 className="mb-5 text-5xl">{emoji}</h1>
 
       <h2 className="mb-2 text-xl font-semibold">{error.title}</h2>
diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index edffd182..8437cea4 100644
--- a/src/components/fields/FieldInput.tsx
+++ b/src/components/fields/FieldInput.tsx
@@ -23,7 +23,7 @@ export const FieldInput: FC<IFieldInput> = ({
       {({ input, meta: { touched, error } }) => (
         <div className="mb-4">
           <label
-            className="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+            className="mb-2 block text-sm font-semibold tracking-wide"
             htmlFor={input.name}
           >
             {label}
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 9f23377a..ede6e594 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -46,10 +46,7 @@ export const AccountsRoute: FC = () => {
   }, []);
 
   return (
-    <div
-      className="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
-      data-testid="accounts"
-    >
+    <div className="flex h-screen flex-col" data-testid="accounts">
       <div className="mx-8 mt-2 flex items-center justify-between py-2">
         <button
           type="button"
@@ -72,7 +69,7 @@ export const AccountsRoute: FC = () => {
           {auth.accounts.map((account) => (
             <div
               key={getAccountUUID(account)}
-              className="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
+              className="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-sidebar"
             >
               <div className="ml-2 text-xs">
                 <div>
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 7ca17af8..99d963a7 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -27,7 +27,7 @@ export const LoginRoute: FC = () => {
   }, []); */
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white">
+    <div className="flex flex-col items-center justify-center p-4">
       <Logo className="h-16 w-16" isDark />
 
       <div className="my-4 px-2.5 py-1.5 text-center font-semibold">
diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index a7359c19..fa908312 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -129,7 +129,7 @@ export const LoginWithOAuthApp: FC = () => {
   );
 
   return (
-    <div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
+    <div>
       <div className="mx-8 mt-4 flex items-center justify-between py-2">
         <button
           type="button"
@@ -150,7 +150,7 @@ export const LoginWithOAuthApp: FC = () => {
         </h3>
       </div>
 
-      <div className="flex-1 px-8">
+      <div className="px-8">
         <Form
           initialValues={{
             hostname: '',
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index a2b01cd0..486788cc 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -137,7 +137,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
   );
 
   return (
-    <div className="flex-1 bg-white dark:bg-gray-dark dark:text-white">
+    <div>
       <div className="mx-8 mt-4 flex items-center justify-between py-2">
         <button
           type="button"
@@ -158,7 +158,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
         </h3>
       </div>
 
-      <div className="flex-1 px-8">
+      <div className="px-8">
         <Form
           initialValues={{
             hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
diff --git a/src/routes/Notifications.tsx b/src/routes/Notifications.tsx
index d99a5a57..6d8019c2 100644
--- a/src/routes/Notifications.tsx
+++ b/src/routes/Notifications.tsx
@@ -33,7 +33,7 @@ export const NotificationsRoute: FC = () => {
   }
 
   return (
-    <div className="flex flex-1 flex-col bg-white dark:bg-gray-dark">
+    <div className="flex flex-col">
       {notifications.map((accountNotifications) => (
         <AccountNotifications
           key={getAccountUUID(accountNotifications.account)}
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 4b8285f7..48c974fe 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -55,10 +55,7 @@ export const SettingsRoute: FC = () => {
   }, [settings.theme]);
 
   return (
-    <div
-      className="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
-      data-testid="settings"
-    >
+    <div className="flex h-screen flex-col" data-testid="settings">
       <div className="mx-8 mt-2 flex items-center justify-between py-2">
         <button
           type="button"


Test patch:
diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap
index e1a5816f..5700edc5 100644
--- a/src/components/__snapshots__/AllRead.test.tsx.snap
+++ b/src/components/__snapshots__/AllRead.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+        class="flex flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
       >
         <h1
           class="mb-5 text-5xl"
@@ -23,7 +23,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+      class="flex flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
     >
       <h1
         class="mb-5 text-5xl"
diff --git a/src/components/__snapshots__/Oops.test.tsx.snap b/src/components/__snapshots__/Oops.test.tsx.snap
index 72fcf0b4..3c3a7b93 100644
--- a/src/components/__snapshots__/Oops.test.tsx.snap
+++ b/src/components/__snapshots__/Oops.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center p-4"
       >
         <h1
           class="mb-5 text-5xl"
@@ -28,7 +28,7 @@ exports[`components/Oops.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+      class="flex flex-1 flex-col items-center justify-center p-4"
     >
       <h1
         class="mb-5 text-5xl"
diff --git a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
index 7914038d..0b224884 100644
--- a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
+++ b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
           class="mb-4"
         >
           <label
-            class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+            class="mb-2 block text-sm font-semibold tracking-wide"
             for="appearance"
           >
             Appearance
@@ -38,7 +38,7 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
         class="mb-4"
       >
         <label
-          class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+          class="mb-2 block text-sm font-semibold tracking-wide"
           for="appearance"
         >
           Appearance
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index a09b2d08..ed3bb523 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
 <div
-  class="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
+  class="flex h-screen flex-col"
   data-testid="accounts"
 >
   <div
@@ -42,7 +42,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
       class="mt-4 flex flex-col text-sm"
     >
       <div
-        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-sidebar"
       >
         <div
           class="ml-2 text-xs"
@@ -147,7 +147,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-sidebar"
       >
         <div
           class="ml-2 text-xs"
@@ -252,7 +252,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
         </div>
       </div>
       <div
-        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-1 dark:bg-gray-900"
+        class="mb-4 flex items-center justify-between rounded-md bg-gray-100 p-2 dark:bg-gray-sidebar"
       >
         <div
           class="ml-2 text-xs"
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 95ec0dc2..f9aef48b 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white"
+        class="flex flex-col items-center justify-center p-4"
       >
         <svg
           aria-label="Gitify Logo"
@@ -113,7 +113,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center bg-white p-4 dark:bg-gray-dark dark:text-white"
+      class="flex flex-col items-center justify-center p-4"
     >
       <svg
         aria-label="Gitify Logo"
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index 0cc9a182..6f640adc 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -5,9 +5,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
-      >
+      <div>
         <div
           class="mx-8 mt-4 flex items-center justify-between py-2"
         >
@@ -53,14 +51,14 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           </h3>
         </div>
         <div
-          class="flex-1 px-8"
+          class="px-8"
         >
           <form>
             <div
               class="mb-4"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+                class="mb-2 block text-sm font-semibold tracking-wide"
                 for="hostname"
               >
                 Hostname
@@ -120,7 +118,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+                class="mb-2 block text-sm font-semibold tracking-wide"
                 for="clientId"
               >
                 Client ID
@@ -138,7 +136,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+                class="mb-2 block text-sm font-semibold tracking-wide"
                 for="clientSecret"
               >
                 Client Secret
@@ -207,9 +205,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
     </div>
   </body>,
   "container": <div>
-    <div
-      class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
-    >
+    <div>
       <div
         class="mx-8 mt-4 flex items-center justify-between py-2"
       >
@@ -255,14 +251,14 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
         </h3>
       </div>
       <div
-        class="flex-1 px-8"
+        class="px-8"
       >
         <form>
           <div
             class="mb-4"
           >
             <label
-              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+              class="mb-2 block text-sm font-semibold tracking-wide"
               for="hostname"
             >
               Hostname
@@ -322,7 +318,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+              class="mb-2 block text-sm font-semibold tracking-wide"
               for="clientId"
             >
               Client ID
@@ -340,7 +336,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+              class="mb-2 block text-sm font-semibold tracking-wide"
               for="clientSecret"
             >
               Client Secret
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index 575eaffb..233f82e2 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -5,9 +5,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
   "asFragment": [Function],
   "baseElement": <body>
     <div>
-      <div
-        class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
-      >
+      <div>
         <div
           class="mx-8 mt-4 flex items-center justify-between py-2"
         >
@@ -53,14 +51,14 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
           </h3>
         </div>
         <div
-          class="flex-1 px-8"
+          class="px-8"
         >
           <form>
             <div
               class="mb-4"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+                class="mb-2 block text-sm font-semibold tracking-wide"
                 for="hostname"
               >
                 Hostname
@@ -87,7 +85,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               class="mb-4"
             >
               <label
-                class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+                class="mb-2 block text-sm font-semibold tracking-wide"
                 for="token"
               >
                 Token
@@ -196,9 +194,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
     </div>
   </body>,
   "container": <div>
-    <div
-      class="flex-1 bg-white dark:bg-gray-dark dark:text-white"
-    >
+    <div>
       <div
         class="mx-8 mt-4 flex items-center justify-between py-2"
       >
@@ -244,14 +240,14 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
         </h3>
       </div>
       <div
-        class="flex-1 px-8"
+        class="px-8"
       >
         <form>
           <div
             class="mb-4"
           >
             <label
-              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+              class="mb-2 block text-sm font-semibold tracking-wide"
               for="hostname"
             >
               Hostname
@@ -278,7 +274,7 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             class="mb-4"
           >
             <label
-              class="mb-2 block text-sm font-semibold tracking-wide text-gray-dark"
+              class="mb-2 block text-sm font-semibold tracking-wide"
               for="token"
             >
               Token
diff --git a/src/routes/__snapshots__/Notifications.test.tsx.snap b/src/routes/__snapshots__/Notifications.test.tsx.snap
index 63be48e5..8bb99d30 100644
--- a/src/routes/__snapshots__/Notifications.test.tsx.snap
+++ b/src/routes/__snapshots__/Notifications.test.tsx.snap
@@ -420,7 +420,7 @@ exports[`routes/Notifications.tsx should render itself & its children (show acco
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
+        class="flex flex-col"
       >
         <p>
           AccountNotifications
@@ -430,7 +430,7 @@ exports[`routes/Notifications.tsx should render itself & its children (show acco
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
+      class="flex flex-col"
     >
       <p>
         AccountNotifications
@@ -497,7 +497,7 @@ exports[`routes/Notifications.tsx should render itself & its children (with noti
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
+        class="flex flex-col"
       >
         <p>
           AccountNotifications
@@ -510,7 +510,7 @@ exports[`routes/Notifications.tsx should render itself & its children (with noti
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col bg-white dark:bg-gray-dark"
+      class="flex flex-col"
     >
       <p>
         AccountNotifications
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 4591281d..709e935c 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`routes/Settings.tsx Footer section app version should show production a
 
 exports[`routes/Settings.tsx General should render itself & its children 1`] = `
 <div
-  class="flex h-screen flex-1 flex-col dark:bg-gray-dark dark:text-white"
+  class="flex h-screen flex-col"
   data-testid="settings"
 >
   <div