Repository: gitify-app/gitify
Pull request #955 (2024-04-03 02:02:17)

build: ensure homebrew-cask repo is in-sync with upstream
This has caused a few headaches in the last 2 releases.  Hopeful this may create a smoother ride


Patch:
diff --git a/.github/workflows/on-tag.yml b/.github/workflows/on-tag.yml
index 456a8972..37cb0604 100644
--- a/.github/workflows/on-tag.yml
+++ b/.github/workflows/on-tag.yml
@@ -9,6 +9,11 @@ jobs:
     name: Homebrew
     runs-on: macos-14
     steps:
+      # Ensure our Homebrew/homebrew-cask fork repository is in-sync with the upstream to avoid conflicts
+      # during automated commit and PR creation in the brew bump-cask-pr step below.
+      - run: gh repo sync setchy/homebrew-cask -b master 
+        env:
+          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
       - uses: Homebrew/actions/setup-homebrew@master
       - id: version
         run: echo "version=$(echo ${{ github.ref }} | sed 's/refs\/tags\/v//')" >> $GITHUB_OUTPUT
diff --git a/README.md b/README.md
index 515c1ea9..dd5c6f2c 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-# Gitify [![github][github-image]][github-url] [![coveralls][coveralls-image]][coveralls-url] [![downloads][downloads-image]][downloads-url]
+# Gitify [![github][build-workflow-image]][github-actions] [![github][release-workflow-image]][github-actions] [![coveralls][coveralls-image]][coveralls-url] [![downloads][downloads-image]][website]
 
-> GitHub Notifications on your menu bar. Available on macOS, Windows and Linux. Gitify Mobile has been deprecated in favour of the official [GitHub mobile app](https://github.com/mobile).
+> GitHub Notifications on your menu bar. Available on macOS, Windows and Linux.
 
 ![Gitify](assets/images/press.png)
 
 ### Download
 
-You can download Gitify for **free** from the website [www.gitify.io](https://www.gitify.io/) or install it via [Homebrew Cask](http://brew.sh/).
+You can download Gitify for **free** from the website [www.gitify.io][website] or install it via [Homebrew Cask][brew].
 
 ```shell
 brew install --cask gitify
@@ -37,12 +37,12 @@ To run the **electron app**:
 The release process is automated. Follow the steps below.
 
 1. Verify that all features you want targeted in the release have been merged to `main`.
-2. Create a [new **draft** release](https://github.com/gitify-app/gitify/releases/new). Set the tag version to something with the format of `v1.2.3`. Save as a **draft** before moving to the next step
+2. Create a [new **draft** release][new-release]. Set the tag version to something with the format of `v1.2.3`. Save as a **draft** before moving to the next step
 3. Create a branch that starts with `release/vX.X.X` (ie. `release/v1.2.3`).
 4. In the same branch, **bump the version** of the app by running `pnpm version <new-version-number`. Commit these changes and open a PR. A GitHub Actions workflow will build, sign and upload the release assets for each commit to that branch as long as a branch is named like `release/vX.X.X` and there is a draft release with the same version number(`package.json`).
 5. Merge your release branch into `main`.
 6. Publish the release once you've finalized the release notes and confirmed all assets are there.
-7. Raise and merge a pull request in [gitify-app/website](https://github.com/gitify-app/website) using the automatically created branch (ie: `bump/v1.2.3`)
+7. Raise and merge a pull request in [gitify-app/website][github-website] using the automatically created branch (ie: `bump/v1.2.3`)
 
 ### Tests
 
@@ -62,15 +62,7 @@ There are 2 checks - one for prettier and one for the unit tests with `jest`.
 
 ### FAQ
 
-#### My notifications aren't showing?
-
-Some organisations require applications to request access before allowing access to any data (including notifications) about their repositories.
-
-To check if Gitify is approved by your organisation you can go to https://github.com/settings/applications, then click on **Gitify** and scroll to _Organization access_.
-
-#### Something looks wrong - How can I debug?
-
-You can debug Gitify by pressing <kbd>alt</kbd> + <kbd>command</kbd> + <kbd>I</kbd>. This will open the dev tools and then you can see any logs, network requests etc.
+Please visit our [Gitify FAQs][faqs] for all commonly asked questions.
 
 ### Contributing
 
@@ -83,11 +75,16 @@ You can debug Gitify by pressing <kbd>alt</kbd> + <kbd>command</kbd> + <kbd>I</k
 
 ### License
 
-Gitify is licensed under the MIT Open Source license. For more information, see the LICENSE file in this repository.
+Gitify is licensed under the MIT Open Source license. For more information, see [LICENSE](LICENSE).
 
-[github-image]: https://github.com/gitify-app/gitify/actions/workflows/build-app.yml/badge.svg
-[github-url]: https://github.com/gitify-app/gitify/actions
+[website]: https://www.gitify.io
+[github-website]: https://github.com/gitify-app/website
+[new-release]: https://github.com/gitify-app/gitify/releases/new
+[build-workflow-image]: https://github.com/gitify-app/gitify/actions/workflows/build-app.yml/badge.svg
+[release-workflow-image]: https://github.com/gitify-app/gitify/actions/workflows/release.yml/badge.svg
+[github-actions]: https://github.com/gitify-app/gitify/actions
 [coveralls-image]: https://coveralls.io/repos/github/gitify-app/gitify/badge.svg
 [coveralls-url]: https://coveralls.io/github/gitify-app/gitify
 [downloads-image]: https://img.shields.io/github/downloads/gitify-app/gitify/total.svg
-[downloads-url]: https://www.gitify.io
+[brew]: http://brew.sh/
+[faqs]: https://www.gitify.io/faqs
diff --git a/package.json b/package.json
index 74cb2c8b..6c480721 100644
--- a/package.json
+++ b/package.json
@@ -94,7 +94,9 @@
     "linux": {
       "target": [
         "AppImage",
-        "deb"
+        "deb",
+        "rpm",
+        "snap"
       ],
       "category": "Development",
       "maintainer": "Emmanouil Konstantinidis"
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index d26a31d3..b72faac6 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -25,7 +25,7 @@ export const NotificationRow: React.FC<IProps> = ({
     settings,
     accounts,
     removeNotificationFromState,
-    markNotification,
+    markNotificationRead,
     markNotificationDone,
     unsubscribeNotification,
   } = useContext(AppContext);
@@ -133,7 +133,7 @@ export const NotificationRow: React.FC<IProps> = ({
         <button
           className="focus:outline-none h-full hover:text-green-500"
           title="Mark as Read"
-          onClick={() => markNotification(notification.id, hostname)}
+          onClick={() => markNotificationRead(notification.id, hostname)}
         >
           <ReadIcon size={14} aria-label="Mark as Read" />
         </button>
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 8d7907a0..b600889d 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -56,7 +56,7 @@ interface AppContextState {
   requestFailed: boolean;
   removeNotificationFromState: (id: string, hostname: string) => void;
   fetchNotifications: () => Promise<void>;
-  markNotification: (id: string, hostname: string) => Promise<void>;
+  markNotificationRead: (id: string, hostname: string) => Promise<void>;
   markNotificationDone: (id: string, hostname: string) => Promise<void>;
   unsubscribeNotification: (id: string, hostname: string) => Promise<void>;
   markRepoNotifications: (id: string, hostname: string) => Promise<void>;
@@ -77,7 +77,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     requestFailed,
     isFetching,
     removeNotificationFromState,
-    markNotification,
+    markNotificationRead,
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
@@ -190,9 +190,9 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
     [accounts, settings, notifications],
   );
 
-  const markNotificationWithAccounts = useCallback(
+  const markNotificationReadWithAccounts = useCallback(
     async (id: string, hostname: string) =>
-      await markNotification(accounts, id, hostname),
+      await markNotificationRead(accounts, id, hostname),
     [accounts, notifications],
   );
 
@@ -235,7 +235,7 @@ export const AppProvider = ({ children }: { children: React.ReactNode }) => {
         requestFailed,
         removeNotificationFromState,
         fetchNotifications: fetchNotificationsWithAccounts,
-        markNotification: markNotificationWithAccounts,
+        markNotificationRead: markNotificationReadWithAccounts,
         markNotificationDone: markNotificationDoneWithAccounts,
         unsubscribeNotification: unsubscribeNotificationWithAccounts,
         markRepoNotifications: markRepoNotificationsWithAccounts,
diff --git a/src/hooks/useNotifications.ts b/src/hooks/useNotifications.ts
index d5360968..d90bb769 100644
--- a/src/hooks/useNotifications.ts
+++ b/src/hooks/useNotifications.ts
@@ -26,7 +26,7 @@ interface NotificationsState {
     accounts: AuthState,
     settings: SettingsState,
   ) => Promise<void>;
-  markNotification: (
+  markNotificationRead: (
     accounts: AuthState,
     id: string,
     hostname: string,
@@ -99,7 +99,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
                 return {
                   hostname,
                   notifications: accountNotifications.data.map(
-                    (notification) => {
+                    (notification: Notification) => {
                       return {
                         ...notification,
                         hostname: hostname,
@@ -115,7 +115,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
                   {
                     hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
                     notifications: gitHubNotifications.data.map(
-                      (notification) => {
+                      (notification: Notification) => {
                         return {
                           ...notification,
                           hostname: Constants.DEFAULT_AUTH_OPTIONS.hostname,
@@ -202,8 +202,8 @@ export const useNotifications = (colors: boolean): NotificationsState => {
     [notifications],
   );
 
-  const markNotification = useCallback(
-    async (accounts, id, hostname) => {
+  const markNotificationRead = useCallback(
+    async (accounts: AuthState, id: string, hostname: string) => {
       setIsFetching(true);
 
       const isEnterprise = isEnterpriseHost(hostname);
@@ -236,7 +236,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const markNotificationDone = useCallback(
-    async (accounts, id, hostname) => {
+    async (accounts: AuthState, id: string, hostname: string) => {
       setIsFetching(true);
 
       const isEnterprise = isEnterpriseHost(hostname);
@@ -269,7 +269,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const unsubscribeNotification = useCallback(
-    async (accounts, id, hostname) => {
+    async (accounts: AuthState, id: string, hostname: string) => {
       setIsFetching(true);
 
       const isEnterprise = isEnterpriseHost(hostname);
@@ -286,7 +286,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
           token,
           { ignored: true },
         );
-        await markNotification(accounts, id, hostname);
+        await markNotificationRead(accounts, id, hostname);
       } catch (err) {
         setIsFetching(false);
       }
@@ -295,7 +295,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const markRepoNotifications = useCallback(
-    async (accounts, repoSlug, hostname) => {
+    async (accounts: AuthState, repoSlug: string, hostname: string) => {
       setIsFetching(true);
 
       const isEnterprise = isEnterpriseHost(hostname);
@@ -328,7 +328,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const markRepoNotificationsDone = useCallback(
-    async (accounts, repoSlug, hostname) => {
+    async (accounts: AuthState, repoSlug: string, hostname: string) => {
       setIsFetching(true);
 
       try {
@@ -371,7 +371,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
   );
 
   const removeNotificationFromState = useCallback(
-    (id, hostname) => {
+    (id: string, hostname: string) => {
       const updatedNotifications = removeNotification(
         id,
         notifications,
@@ -391,7 +391,7 @@ export const useNotifications = (colors: boolean): NotificationsState => {
 
     removeNotificationFromState,
     fetchNotifications,
-    markNotification,
+    markNotificationRead,
     markNotificationDone,
     unsubscribeNotification,
     markRepoNotifications,
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 1a027f8d..0c8d2742 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -1,6 +1,6 @@
 const { ipcRenderer } = require('electron');
 
-import React, { useCallback, useContext, useEffect } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { AppContext } from '../context/App';
@@ -8,7 +8,7 @@ import { Logo } from '../components/Logo';
 
 export const LoginRoute: React.FC = () => {
   const navigate = useNavigate();
-  const { isLoggedIn, login } = useContext(AppContext);
+  const { isLoggedIn } = useContext(AppContext);
 
   useEffect(() => {
     if (isLoggedIn) {
@@ -17,16 +17,17 @@ export const LoginRoute: React.FC = () => {
     }
   }, [isLoggedIn]);
 
-  const loginUser = useCallback(async () => {
+  // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
+  /* const loginUser = useCallback(async () => {
     try {
       await login();
     } catch (err) {
       // Skip
     }
-  }, []);
+  }, []); */
 
   const loginButtonClass =
-    'w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none';
+    'w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none';
 
   return (
     <div className="flex flex-1 flex-col justify-center items-center p-4 bg-white dark:bg-gray-dark dark:text-white">
@@ -36,6 +37,9 @@ export const LoginRoute: React.FC = () => {
         GitHub Notifications <br /> on your menu bar.
       </div>
 
+      {
+        // FIXME: Temporarily disable Login with GitHub (OAuth) as it's currently broken and requires a rewrite - see #485 #561 #747
+        /*      
       <button
         className={loginButtonClass}
         title="Login with GitHub"
@@ -43,6 +47,16 @@ export const LoginRoute: React.FC = () => {
         onClick={loginUser}
       >
         Login to GitHub
+      </button> */
+      }
+
+      <button
+        className={loginButtonClass}
+        title="Login with Personal Token"
+        aria-label="Login with Personal Token"
+        onClick={() => navigate('/login-token')}
+      >
+        Login with Personal Access Token
       </button>
 
       <button
@@ -53,15 +67,6 @@ export const LoginRoute: React.FC = () => {
       >
         Login to GitHub Enterprise
       </button>
-
-      <button
-        className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-        title="Login with Personal Token"
-        aria-label="Login with Personal Token"
-        onClick={() => navigate('/login-token')}
-      >
-        <small>or login with a personal token</small>
-      </button>
     </div>
   );
 };
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index a90609cf..6103b963 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/src/routes/LoginWithToken.tsx
@@ -71,11 +71,11 @@ export const LoginWithToken: React.FC = () => {
               >
                 personal access tokens
               </a>{' '}
-              and create one with the{' '}
+              and create one with the {Constants.AUTH_SCOPE.length} scopes{' '}
               <span className="underline font-extrabold text-yellow-500">
                 {Constants.AUTH_SCOPE.join(', ')}{' '}
               </span>
-              scopes.
+              .
             </>
           }
         />
@@ -130,7 +130,9 @@ export const LoginWithToken: React.FC = () => {
           />
         </button>
 
-        <h3 className="text-lg font-semibold">Login with an access token</h3>
+        <h3 className="text-lg font-semibold">
+          Login with personal access token
+        </h3>
       </div>
 
       <div className="flex-1 px-8">
diff --git a/src/typesGithub.ts b/src/typesGithub.ts
index 46b5a496..cdef6ddf 100644
--- a/src/typesGithub.ts
+++ b/src/typesGithub.ts
@@ -116,7 +116,6 @@ export interface Plan {
 
 export interface User {
   login: string;
-  name: string;
   id: number;
   node_id: string;
   avatar_url: string;


Test patch:
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index b9262362..22909b1c 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -82,7 +82,7 @@ describe('components/NotificationRow.tsx', () => {
   });
 
   it('should mark a notification as read', () => {
-    const markNotification = jest.fn();
+    const markNotificationRead = jest.fn();
 
     const props = {
       notification: mockedSingleNotification,
@@ -96,14 +96,14 @@ describe('components/NotificationRow.tsx', () => {
           accounts: mockAccounts,
         }}
       >
-        <AppContext.Provider value={{ markNotification }}>
+        <AppContext.Provider value={{ markNotificationRead }}>
           <NotificationRow {...props} />
         </AppContext.Provider>
       </AppContext.Provider>,
     );
 
     fireEvent.click(getByTitle('Mark as Read'));
-    expect(markNotification).toHaveBeenCalledTimes(1);
+    expect(markNotificationRead).toHaveBeenCalledTimes(1);
   });
 
   it('should mark a notification as done', () => {
@@ -179,5 +179,8 @@ describe('components/NotificationRow.tsx', () => {
 
     fireEvent.click(getByTitle('View User Profile'));
     expect(shell.openExternal).toHaveBeenCalledTimes(1);
+    expect(shell.openExternal).toHaveBeenCalledWith(
+      props.notification.subject.user.html_url,
+    );
   });
 });
diff --git a/src/context/App.test.tsx b/src/context/App.test.tsx
index 00a5acdc..24ca1f09 100644
--- a/src/context/App.test.tsx
+++ b/src/context/App.test.tsx
@@ -43,7 +43,7 @@ describe('context/App.tsx', () => {
     getNotificationCountMock.mockReturnValue(1);
 
     const fetchNotificationsMock = jest.fn();
-    const markNotificationMock = jest.fn();
+    const markNotificationReadMock = jest.fn();
     const markNotificationDoneMock = jest.fn();
     const unsubscribeNotificationMock = jest.fn();
     const markRepoNotificationsMock = jest.fn();
@@ -51,7 +51,7 @@ describe('context/App.tsx', () => {
     beforeEach(() => {
       (useNotifications as jest.Mock).mockReturnValue({
         fetchNotifications: fetchNotificationsMock,
-        markNotification: markNotificationMock,
+        markNotificationRead: markNotificationReadMock,
         markNotificationDone: markNotificationDoneMock,
         unsubscribeNotification: unsubscribeNotificationMock,
         markRepoNotifications: markRepoNotificationsMock,
@@ -104,12 +104,12 @@ describe('context/App.tsx', () => {
       expect(fetchNotificationsMock).toHaveBeenCalledTimes(1);
     });
 
-    it('should call markNotification', async () => {
+    it('should call markNotificationRead', async () => {
       const TestComponent = () => {
-        const { markNotification } = useContext(AppContext);
+        const { markNotificationRead } = useContext(AppContext);
 
         return (
-          <button onClick={() => markNotification('123-456', 'github.com')}>
+          <button onClick={() => markNotificationRead('123-456', 'github.com')}>
             Test Case
           </button>
         );
@@ -117,12 +117,12 @@ describe('context/App.tsx', () => {
 
       const { getByText } = customRender(<TestComponent />);
 
-      markNotificationMock.mockReset();
+      markNotificationReadMock.mockReset();
 
       fireEvent.click(getByText('Test Case'));
 
-      expect(markNotificationMock).toHaveBeenCalledTimes(1);
-      expect(markNotificationMock).toHaveBeenCalledWith(
+      expect(markNotificationReadMock).toHaveBeenCalledTimes(1);
+      expect(markNotificationReadMock).toHaveBeenCalledWith(
         { enterpriseAccounts: [], token: null, user: null },
         '123-456',
         'github.com',
diff --git a/src/hooks/useNotifications.test.ts b/src/hooks/useNotifications.test.ts
index 4b19d4cc..b5ca27b1 100644
--- a/src/hooks/useNotifications.test.ts
+++ b/src/hooks/useNotifications.test.ts
@@ -288,6 +288,7 @@ describe('hooks/useNotifications.ts', () => {
                           createdAt: '2022-03-04T20:39:44Z',
                           author: {
                             login: 'comment-user',
+                            url: 'https://github.com/comment-user',
                           },
                           replies: {
                             nodes: [],
@@ -476,7 +477,7 @@ describe('hooks/useNotifications.ts', () => {
     });
   });
 
-  describe('markNotification', () => {
+  describe('markNotificationRead', () => {
     const id = 'notification-123';
 
     describe('github.com', () => {
@@ -491,7 +492,7 @@ describe('hooks/useNotifications.ts', () => {
         const { result } = renderHook(() => useNotifications(false));
 
         act(() => {
-          result.current.markNotification(accounts, id, hostname);
+          result.current.markNotificationRead(accounts, id, hostname);
         });
 
         await waitFor(() => {
@@ -509,7 +510,7 @@ describe('hooks/useNotifications.ts', () => {
         const { result } = renderHook(() => useNotifications(false));
 
         act(() => {
-          result.current.markNotification(accounts, id, hostname);
+          result.current.markNotificationRead(accounts, id, hostname);
         });
 
         await waitFor(() => {
@@ -532,7 +533,7 @@ describe('hooks/useNotifications.ts', () => {
         const { result } = renderHook(() => useNotifications(false));
 
         act(() => {
-          result.current.markNotification(accounts, id, hostname);
+          result.current.markNotificationRead(accounts, id, hostname);
         });
 
         await waitFor(() => {
@@ -550,7 +551,7 @@ describe('hooks/useNotifications.ts', () => {
         const { result } = renderHook(() => useNotifications(false));
 
         act(() => {
-          result.current.markNotification(accounts, id, hostname);
+          result.current.markNotificationRead(accounts, id, hostname);
         });
 
         await waitFor(() => {
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 50030a86..4cabaaee 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -56,30 +56,20 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
      on your menu bar.
   </div>
   <button
-    aria-label="Login with GitHub"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
+    aria-label="Login with Personal Token"
+    className="w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
-    title="Login with GitHub"
+    title="Login with Personal Token"
   >
-    Login to GitHub
+    Login with Personal Access Token
   </button>
   <button
     aria-label="Login with GitHub Enterprise"
-    className="w-48 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
+    className="w-50 px-2 py-2 my-2 bg-gray-300 font-semibold rounded text-xs text-center dark:text-black hover:bg-gray-500 hover:text-white focus:outline-none"
     onClick={[Function]}
     title="Login with GitHub Enterprise"
   >
     Login to GitHub Enterprise
   </button>
-  <button
-    aria-label="Login with Personal Token"
-    className="bg-none hover:text-gray-800 dark:text-gray-100 dark:hover:text-gray-300 mt-4 focus:outline-none"
-    onClick={[Function]}
-    title="Login with Personal Token"
-  >
-    <small>
-      or login with a personal token
-    </small>
-  </button>
 </div>
 `;
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
index 8be1db86..2bc67339 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
@@ -38,7 +38,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
     <h3
       className="text-lg font-semibold"
     >
-      Login with an access token
+      Login with personal access token
     </h3>
   </div>
   <div
@@ -80,7 +80,9 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
             personal access tokens
           </a>
            
-          and create one with the
+          and create one with the 
+          3
+           scopes
            
           <span
             className="underline font-extrabold text-yellow-500"
@@ -88,7 +90,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
             read:user, notifications, repo
              
           </span>
-          scopes.
+          .
         </div>
       </div>
       <div