diff --git a/src/components/icons/AuthMethodIcon.test.tsx b/src/components/icons/AuthMethodIcon.test.tsx
new file mode 100644
index 000000000..2a72efa94
--- /dev/null
+++ b/src/components/icons/AuthMethodIcon.test.tsx
@@ -0,0 +1,31 @@
+import { render } from '@testing-library/react';
+import { AuthMethodIcon, type IAuthMethodIcon } from './AuthMethodIcon';
+
+describe('components/icons/AuthMethodIcon.tsx', () => {
+ it('should render GitHub App icon', () => {
+ const props: IAuthMethodIcon = {
+ type: 'GitHub App',
+ size: 16,
+ };
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should render Personal Access Token icon', () => {
+ const props: IAuthMethodIcon = {
+ type: 'Personal Access Token',
+ size: 16,
+ };
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+ });
+
+ it('should render OAuth App icon', () => {
+ const props: IAuthMethodIcon = {
+ type: 'OAuth App',
+ size: 16,
+ };
+ const tree = render();
+ expect(tree).toMatchSnapshot();
+ });
+});
diff --git a/src/components/icons/AuthMethodIcon.tsx b/src/components/icons/AuthMethodIcon.tsx
new file mode 100644
index 000000000..d13956528
--- /dev/null
+++ b/src/components/icons/AuthMethodIcon.tsx
@@ -0,0 +1,20 @@
+import { AppsIcon, KeyIcon, PersonIcon } from '@primer/octicons-react';
+import type { FC } from 'react';
+import type { AuthMethod } from '../../utils/auth/types';
+
+export interface IAuthMethodIcon {
+ type: AuthMethod;
+ size: number;
+}
+
+export const AuthMethodIcon: FC = (props: IAuthMethodIcon) => {
+ return (
+
+ {props.type === 'GitHub App' ? : null}
+ {props.type === 'Personal Access Token' ? (
+
+ ) : null}
+ {props.type === 'OAuth App' ? : null}
+
+ );
+};
diff --git a/src/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap b/src/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap
new file mode 100644
index 000000000..fb8fc9c08
--- /dev/null
+++ b/src/components/icons/__snapshots__/AuthMethodIcon.test.tsx.snap
@@ -0,0 +1,304 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/icons/AuthMethodIcon.tsx should render GitHub App icon 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ ,
+ "container": ,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`components/icons/AuthMethodIcon.tsx should render OAuth App icon 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ ,
+ "container": ,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
+
+exports[`components/icons/AuthMethodIcon.tsx should render Personal Access Token icon 1`] = `
+{
+ "asFragment": [Function],
+ "baseElement":
+
+ ,
+ "container": ,
+ "debug": [Function],
+ "findAllByAltText": [Function],
+ "findAllByDisplayValue": [Function],
+ "findAllByLabelText": [Function],
+ "findAllByPlaceholderText": [Function],
+ "findAllByRole": [Function],
+ "findAllByTestId": [Function],
+ "findAllByText": [Function],
+ "findAllByTitle": [Function],
+ "findByAltText": [Function],
+ "findByDisplayValue": [Function],
+ "findByLabelText": [Function],
+ "findByPlaceholderText": [Function],
+ "findByRole": [Function],
+ "findByTestId": [Function],
+ "findByText": [Function],
+ "findByTitle": [Function],
+ "getAllByAltText": [Function],
+ "getAllByDisplayValue": [Function],
+ "getAllByLabelText": [Function],
+ "getAllByPlaceholderText": [Function],
+ "getAllByRole": [Function],
+ "getAllByTestId": [Function],
+ "getAllByText": [Function],
+ "getAllByTitle": [Function],
+ "getByAltText": [Function],
+ "getByDisplayValue": [Function],
+ "getByLabelText": [Function],
+ "getByPlaceholderText": [Function],
+ "getByRole": [Function],
+ "getByTestId": [Function],
+ "getByText": [Function],
+ "getByTitle": [Function],
+ "queryAllByAltText": [Function],
+ "queryAllByDisplayValue": [Function],
+ "queryAllByLabelText": [Function],
+ "queryAllByPlaceholderText": [Function],
+ "queryAllByRole": [Function],
+ "queryAllByTestId": [Function],
+ "queryAllByText": [Function],
+ "queryAllByTitle": [Function],
+ "queryByAltText": [Function],
+ "queryByDisplayValue": [Function],
+ "queryByLabelText": [Function],
+ "queryByPlaceholderText": [Function],
+ "queryByRole": [Function],
+ "queryByTestId": [Function],
+ "queryByText": [Function],
+ "queryByTitle": [Function],
+ "rerender": [Function],
+ "unmount": [Function],
+}
+`;
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 5042f9d8d..69c597cc9 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -1,5 +1,4 @@
import {
- AppsIcon,
ArrowLeftIcon,
KeyIcon,
PersonIcon,
@@ -12,6 +11,7 @@ import { useNavigate } from 'react-router-dom';
import { AppContext } from '../context/App';
+import { AuthMethodIcon } from '../components/icons/AuthMethodIcon';
import { PlatformIcon } from '../components/icons/PlatformIcon';
import type { Account } from '../types';
import { getAccountUUID, getDeveloperSettingsURL } from '../utils/auth/utils';
@@ -122,27 +122,7 @@ export const AccountsRoute: FC = () => {
title="Open Developer Settings"
onClick={() => openDeveloperSettings(account)}
>
- {account.method === 'GitHub App' ? (
-
- ) : null}
- {account.method === 'Personal Access Token' ? (
-
- ) : null}
- {account.method === 'OAuth App' ? (
-
- ) : null}
+
{account.method}
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index 98bbf73f1..352796a66 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -94,21 +94,25 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
title="Open Developer Settings"
type="button"
>
-
+
+
Personal Access Token
@@ -189,21 +193,25 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
title="Open Developer Settings"
type="button"
>
-
+
+
OAuth App
@@ -284,21 +292,25 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
title="Open Developer Settings"
type="button"
>
-
+
+
GitHub App