refactor: tooltips

src/renderer/components/Sidebar.tsx

@@ -85,7 +85,6 @@ export const Sidebar: FC = () => {
           onClick={() => navigate('/', { replace: true })}
           size="small"
           tooltipDirection="e"
-          unsafeDisableTooltip={false}
           variant="invisible"
         />
 
@@ -97,7 +96,6 @@ export const Sidebar: FC = () => {
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"
           tooltipDirection="e"
-          unsafeDisableTooltip={false}
           variant={hasUnreadNotifications ? 'primary' : 'invisible'}
         />
 
@@ -110,7 +108,6 @@ export const Sidebar: FC = () => {
             onClick={() => toggleFilters()}
             size="small"
             tooltipDirection="e"
-            unsafeDisableTooltip={false}
             variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
           />
         )}
@@ -122,7 +119,6 @@ export const Sidebar: FC = () => {
           onClick={() => openGitHubIssues(primaryAccountHostname)}
           size="small"
           tooltipDirection="e"
-          unsafeDisableTooltip={false}
           variant="invisible"
         />
 
@@ -133,7 +129,6 @@ export const Sidebar: FC = () => {
           onClick={() => openGitHubPulls(primaryAccountHostname)}
           size="small"
           tooltipDirection="e"
-          unsafeDisableTooltip={false}
           variant="invisible"
         />
       </Stack>
@@ -156,7 +151,6 @@ export const Sidebar: FC = () => {
               onClick={() => refreshNotifications()}
               size="small"
               tooltipDirection="e"
-              unsafeDisableTooltip={false}
               variant="invisible"
             />
 
@@ -167,7 +161,6 @@ export const Sidebar: FC = () => {
               onClick={() => toggleSettings()}
               size="small"
               tooltipDirection="e"
-              unsafeDisableTooltip={false}
               variant="invisible"
             />
           </>
@@ -181,7 +174,6 @@ export const Sidebar: FC = () => {
             onClick={() => quitApp()}
             size="small"
             tooltipDirection="e"
-            unsafeDisableTooltip={false}
             variant="invisible"
           />
         )}

src/renderer/components/fields/Tooltip.tsx

@@ -3,6 +3,8 @@ import { type FC, type ReactNode, useState } from 'react';
 import { QuestionIcon } from '@primer/octicons-react';
 import { AnchoredOverlay } from '@primer/react';
 
+import { cn } from '../../utils/cn';
+
 export interface ITooltip {
   name: string;
   tooltip: ReactNode | string;
@@ -31,9 +33,11 @@ export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
       side="outside-bottom"
     >
       <div
-        className={
-          'z-10 w-60 rounded-sm border border-gray-300 p-2 shadow-sm bg-gitify-tooltip-popout text-left text-xs text-gitify-font'
-        }
+        className={cn(
+          'z-10 w-60 p-2',
+          'text-left text-xs text-gitify-font',
+          'rounded-sm border border-gray-300 shadow-sm bg-gitify-tooltip-popout',
+        )}
       >
         {props.tooltip}
       </div>

src/renderer/components/settings/SettingsFooter.tsx

@@ -24,7 +24,7 @@ export const SettingsFooter: FC = () => {
   return (
     <Footer justify="space-between">
       <Stack direction="horizontal">
-        <Tooltip direction="n" text="View release notes">
+        <Tooltip direction="ne" text="View release notes">
           <Button
             data-testid="settings-release-notes"
             onClick={() => openGitifyReleaseNotes(appVersion)}