refactor tailwind classes

Signed-off-by: Adam Setch <[email protected]>

Author: setchy

src/renderer/App.tsx

@@ -39,7 +39,7 @@ export const App = () => {
       <BaseStyles>
         <AppProvider>
           <Router>
-            <div className="flex h-full overflow-y-auto flex-col pl-12">
+            <div className="flex h-full overflow-y-auto flex-col pl-12 bg-gitify-background">
               <Loading />
               <Sidebar />
               <Routes>

src/renderer/components/buttons/PillButton.tsx

@@ -18,7 +18,7 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
     <button
       title={props.title}
       type="button"
-      className="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gray-100 hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
+      className="flex gap-1 items-center text-xxs px-1 m-0.5 rounded-full bg-gitify-pill-rest hover:bg-gitify-pill-hover"
     >
       <Stack direction="horizontal" align="center" gap="condensed">
         <Octicon icon={props.icon} size={Size.XSMALL} className={props.color} />

src/renderer/components/buttons/__snapshots__/PillButton.test.tsx.snap

@@ -44,13 +44,11 @@ export const FieldInput: FC<IFieldInput> = ({
           />
 
           {helpText && (
-            <div className="mt-3 text-xs text-gray-700 dark:text-gray-200">
-              {helpText}
-            </div>
+            <div className="mt-3 text-xs text-gitify-font">{helpText}</div>
           )}
 
           {touched && error && (
-            <div className="mt-2 text-xs italic text-red-500">{error}</div>
+            <div className="mt-2 text-xs italic text-gitify-error">{error}</div>
           )}
         </div>
       )}

src/renderer/components/fields/FieldInput.tsx

@@ -71,7 +71,9 @@ export const AccountNotifications: FC<IAccountNotifications> = (
         <div
           className={cn(
             'group flex items-center justify-between pr-1 py-0.5 text-sm font-semibold dark:text-white',
-            props.error ? 'bg-gitify-error' : 'bg-gitify-accounts',
+            props.error
+              ? 'bg-gitify-accounts-error'
+              : 'bg-gitify-accounts-rest',
           )}
           onClick={toggleAccountNotifications}
         >

src/renderer/components/fields/__snapshots__/FieldInput.test.tsx.snap

@@ -88,7 +88,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     <div
       id={notification.id}
       className={cn(
-        'group flex border-b border-gray-100 bg-white pl-3 pr-1 py-1.5 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
+        'group flex border-b pl-3 pr-1 py-1.5 text-gitify-font border-gitify-notifications-border bg-gitify-notifications-rest hover:bg-gitify-notifications-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,

src/renderer/components/notifications/AccountNotifications.tsx

@@ -43,7 +43,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
   return (
     <>
       <div
-        className="group flex justify-between pr-1 py-0.5 bg-gitify-notifications dark:text-white"
+        className="group flex justify-between pr-1 py-0.5 bg-gitify-repositories dark:text-white"
         onClick={toggleRepositoryNotifications}
       >
         <div