chore: upgrade to @primer/react@37

Author: SiriusCrain

package.json

@@ -83,7 +83,7 @@
     "@primer/octicons-react": "19.15.2",
     "@primer/primitives": "10.7.0",
     "@primer/react": "37.25.0",
-    "@tailwindcss/postcss": "4.1.7",
+    "@tailwindcss/postcss": "4.1.8",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -116,7 +116,7 @@
     "semver": "7.7.2",
     "styled-components": "6.1.18",
     "tailwind-merge": "3.3.0",
-    "tailwindcss": "4.1.7",
+    "tailwindcss": "4.1.8",
     "terser-webpack-plugin": "5.3.14",
     "ts-jest": "29.3.4",
     "ts-loader": "9.5.2",

pnpm-lock.yaml

@@ -33,7 +33,7 @@ export const Checkbox: FC<ICheckbox> = ({
         <input
           type="checkbox"
           id={props.name}
-          className="size-4 rounded-sm cursor-pointer"
+          className="size-2 rounded-sm cursor-pointer"
           checked={props.checked}
           onChange={props.onChange}
           disabled={props.disabled}

src/renderer/components/fields/Checkbox.tsx

@@ -35,7 +35,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           >
             <input
               type="radio"
-              className="size-4 cursor-pointer"
+              className="size-2 cursor-pointer"
               id={name}
               name={props.name}
               value={item.value}

src/renderer/components/fields/RadioGroup.tsx

@@ -24,9 +24,9 @@ export const LogoIcon: FC<ILogoIcon> = ({
 }: ILogoIcon) => (
   <svg
     className={cn(
-      size === Size.SMALL && 'size-5',
-      size === Size.MEDIUM && 'size-10',
-      size === Size.LARGE && 'size-16',
+      size === Size.SMALL && 'size-2.5',
+      size === Size.MEDIUM && 'size-5',
+      size === Size.LARGE && 'size-8',
     )}
     onClick={() => onClick?.()}
     xmlns="https://www.w3.org/2000/svg"

src/renderer/components/icons/LogoIcon.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 
 export const VolumeDownIcon: FC = () => (
   <svg
-    className="size-4"
+    className="size-2"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     width="24"

src/renderer/components/icons/VolumeDownIcon.tsx

@@ -2,7 +2,7 @@ import type { FC } from 'react';
 
 export const VolumeUpIcon: FC = () => (
   <svg
-    className="size-4"
+    className="size-2"
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 24 24"
     width="24"

src/renderer/components/icons/VolumeUpIcon.tsx

@@ -22,8 +22,8 @@ export const Contents: FC<IContents> = ({
     <Box
       className={cn(
         'grow overflow-x-hidden overflow-y-auto',
-        paddingHorizontal && 'px-8',
-        paddingBottom && 'pb-4',
+        paddingHorizontal && 'px-4',
+        paddingBottom && 'pb-2',
       )}
     >
       {children}

src/renderer/components/layout/Contents.tsx

@@ -96,7 +96,7 @@ export const NotificationRow: FC<INotificationRow> = ({
       id={notification.id}
       className={cn(
         'group border-b',
-        'pl-3 pr-1 py-1.5',
+        'pl-1.5 pr-1 py-0.75',
         'text-gitify-font border-gitify-notification-border hover:bg-gitify-notification-hover',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
@@ -110,7 +110,10 @@ export const NotificationRow: FC<INotificationRow> = ({
         className="relative"
       >
         <Tooltip text={notificationType} direction="e">
-          <NotificationIcon size={Size.LARGE} className={iconColor} />
+          {/* Using a fragment here because Tooltip require button inside it for some reason :cringe */}
+          <>
+            <NotificationIcon size={Size.LARGE} className={iconColor} />
+          </>
         </Tooltip>
 
         <Stack

src/renderer/components/notifications/NotificationRow.tsx

@@ -19,7 +19,7 @@ export const Header: FC<IHeader> = (props: IHeader) => {
   const { fetchNotifications } = useContext(AppContext);
 
   return (
-    <Box className="px-6 py-4">
+    <Box className="px-3 py-2">
       <Stack direction="horizontal" justify="space-between">
         <IconButton
           aria-labelledby="Go Back"