chore: primer react 37

package.json

@@ -82,7 +82,7 @@
     "@electron/notarize": "3.0.1",
     "@primer/octicons-react": "19.15.2",
     "@primer/primitives": "10.7.0",
-    "@primer/react": "36.27.0",
+    "@primer/react": "37.25.0",
     "@tailwindcss/postcss": "4.1.8",
     "@testing-library/jest-dom": "6.6.3",
     "@testing-library/react": "16.3.0",

src/renderer/components/fields/Checkbox.tsx

@@ -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/RadioGroup.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/icons/LogoIcon.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/VolumeDownIcon.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/VolumeUpIcon.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/layout/Contents.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/notifications/NotificationRow.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/primitives/Header.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"

src/renderer/components/settings/SettingsReset.tsx

@@ -1,7 +1,7 @@
 import { type FC, useCallback, useContext, useState } from 'react';
 
 import { Button, Stack, Text } from '@primer/react';
-import { Dialog } from '@primer/react/experimental';
+import { Dialog } from '@primer/react';
 import { AppContext } from '../../context/App';
 
 export const SettingsReset: FC = () => {

src/renderer/utils/theme.ts

@@ -1,4 +1,4 @@
-import type { ColorModeWithAuto } from '@primer/react/lib/ThemeProvider';
+import type { ColorModeWithAuto } from '@primer/react/test-helpers';
 import { Theme } from '../types';
 
 export const DEFAULT_DAY_COLOR_SCHEME = 'light';

tsconfig.json

@@ -2,11 +2,11 @@
   "compilerOptions": {
     "incremental": true,
     "target": "es2022",
-    "module": "commonjs",
+    "module": "NodeNext",
     "lib": ["dom", "es2022"],
     "jsx": "react-jsx",
     "sourceMap": true,
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
     "allowJs": true,