refactor: fix event prop on click and subtle ui tweaks (#1291)

Author: setchy

src/components/AccountNotifications.tsx

@@ -3,7 +3,7 @@ import {
   ChevronLeftIcon,
   ChevronUpIcon,
 } from '@primer/octicons-react';
-import { type FC, useContext, useState } from 'react';
+import { type FC, type MouseEvent, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
 import { type Account, Size } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -72,7 +72,11 @@ export const AccountNotifications: FC<IAccountNotifications> = (
             <button
               type="button"
               title="Open Profile"
-              onClick={() => openAccountProfile(account)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openAccountProfile(account);
+              }}
               className="opacity-80"
             >
               @{account.user.login}

src/components/NotificationRow.tsx

@@ -149,8 +149,13 @@ export const NotificationRow: FC<INotificationRow> = ({
               />
             </span>
             <span
+              title={repoSlug}
               className="cursor-pointer truncate opacity-90"
-              onClick={() => openRepository(notification.repository)}
+              onClick={(event: MouseEvent<HTMLElement>) => {
+                // Don't trigger onClick of parent element.
+                event.stopPropagation();
+                openRepository(notification.repository);
+              }}
             >
               {repoSlug}
             </span>

src/components/RepositoryNotifications.tsx

@@ -5,7 +5,13 @@ import {
   MarkGithubIcon,
   ReadIcon,
 } from '@primer/octicons-react';
-import { type FC, useCallback, useContext, useState } from 'react';
+import {
+  type FC,
+  type MouseEvent,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
 import { AppContext } from '../context/App';
 import { Size } from '../types';
 import type { Notification } from '../typesGitHub';
@@ -65,7 +71,11 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           />
           <span
             className="cursor-pointer truncate opacity-90"
-            onClick={() => openRepository(repoNotifications[0].repository)}
+            onClick={(event: MouseEvent<HTMLElement>) => {
+              // Don't trigger onClick of parent element.
+              event.stopPropagation();
+              openRepository(repoNotifications[0].repository);
+            }}
           >
             {repoName}
           </span>