diff --git a/src/app.tsx b/src/app.tsx
index ba4c4e721..c7d7ba8fd 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -61,7 +61,7 @@ export const App = () => {
}
/>
<Route
- path="/accounts"
+ path="/settings/accounts"
element={
<RequireAuth>
<AccountsRoute />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e5c007f45..7656a5b92 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -110,6 +110,7 @@ export const Sidebar: FC = () => {
icon={FilterIcon}
size={Size.MEDIUM}
metric={filterCount}
+ route={'/filters'}
onClick={() => toggleFilters()}
/>
@@ -117,6 +118,7 @@ export const Sidebar: FC = () => {
title="Settings"
icon={GearIcon}
size={Size.MEDIUM}
+ route={'/settings'}
onClick={() => toggleSettings()}
/>
</>
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 0af5dada7..8031f87f7 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="4 Unread Notifications"
type="button"
>
@@ -85,7 +85,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
4
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Issues"
type="button"
>
@@ -109,7 +109,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Pull Requests"
type="button"
>
@@ -134,7 +134,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
class="px-3 py-4"
>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Quit Gitify"
type="button"
>
@@ -217,7 +217,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="4 Unread Notifications"
type="button"
>
@@ -239,7 +239,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
4
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Issues"
type="button"
>
@@ -263,7 +263,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Pull Requests"
type="button"
>
@@ -288,7 +288,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
class="px-3 py-4"
>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Quit Gitify"
type="button"
>
@@ -428,7 +428,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="4 Unread Notifications"
type="button"
>
@@ -450,7 +450,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
4
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Issues"
type="button"
>
@@ -474,7 +474,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Pull Requests"
type="button"
>
@@ -499,7 +499,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
class="px-3 py-4"
>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Quit Gitify"
type="button"
>
@@ -582,7 +582,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="4 Unread Notifications"
type="button"
>
@@ -604,7 +604,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
4
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Issues"
type="button"
>
@@ -628,7 +628,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
</svg>
</button>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="My Pull Requests"
type="button"
>
@@ -653,7 +653,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
class="px-3 py-4"
>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Quit Gitify"
type="button"
>
diff --git a/src/components/buttons/SidebarButton.test.tsx b/src/components/buttons/SidebarButton.test.tsx
index 7fb2f3172..f5166be54 100644
--- a/src/components/buttons/SidebarButton.test.tsx
+++ b/src/components/buttons/SidebarButton.test.tsx
@@ -1,5 +1,6 @@
import { MarkGithubIcon } from '@primer/octicons-react';
import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
import { Size } from '../../types';
import { type ISidebarButton, SidebarButton } from './SidebarButton';
@@ -10,7 +11,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
metric: 1,
icon: MarkGithubIcon,
};
- const tree = render(<SidebarButton {...props} />);
+ const tree = render(
+ <MemoryRouter>
+ <SidebarButton {...props} />
+ </MemoryRouter>,
+ );
expect(tree).toMatchSnapshot();
});
@@ -20,7 +25,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
metric: 0,
icon: MarkGithubIcon,
};
- const tree = render(<SidebarButton {...props} />);
+ const tree = render(
+ <MemoryRouter>
+ <SidebarButton {...props} />
+ </MemoryRouter>,
+ );
expect(tree).toMatchSnapshot();
});
@@ -31,7 +40,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
icon: MarkGithubIcon,
size: Size.MEDIUM,
};
- const tree = render(<SidebarButton {...props} />);
+ const tree = render(
+ <MemoryRouter>
+ <SidebarButton {...props} />
+ </MemoryRouter>,
+ );
expect(tree).toMatchSnapshot();
});
});
diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx
index ea9c11398..9dd2621c0 100644
--- a/src/components/buttons/SidebarButton.tsx
+++ b/src/components/buttons/SidebarButton.tsx
@@ -1,5 +1,6 @@
import type { Icon } from '@primer/octicons-react';
import type { FC } from 'react';
+import { useLocation } from 'react-router-dom';
import { IconColor, Size } from '../../types';
import { cn } from '../../utils/cn';
@@ -7,6 +8,7 @@ export interface ISidebarButton {
title: string;
metric?: number;
icon: Icon;
+ route?: string;
onClick?: () => void;
size?: Size;
loading?: boolean;
@@ -14,16 +16,21 @@ export interface ISidebarButton {
}
export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
+ const location = useLocation();
+
const hasMetric = props?.metric > 0;
+ const isRoute = location.pathname.startsWith(props.route);
+
return (
<button
type="button"
className={cn(
- 'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default',
+ 'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default',
hasMetric
- ? `${IconColor.GREEN} hover:text-green-700`
- : `${IconColor.WHITE} hover:text-gray-500`,
+ ? `${IconColor.GREEN} hover:text-green-700 shadow-green-500`
+ : `${IconColor.WHITE} hover:text-gray-500 shadow-white`,
+ isRoute && 'shadow',
props.loading ? 'animate-spin' : undefined,
props.size ? 'py-2' : 'py-1',
)}
diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
index c4c6cf409..257988a0e 100644
--- a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/buttons/SidebarButton.tsx should render - with specific size
"baseElement": <body>
<div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Mock Sidebar Button"
type="button"
>
@@ -30,7 +30,7 @@ exports[`components/buttons/SidebarButton.tsx should render - with specific size
</body>,
"container": <div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
title="Mock Sidebar Button"
type="button"
>
@@ -111,7 +111,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
"baseElement": <body>
<div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="Mock Sidebar Button"
type="button"
>
@@ -136,7 +136,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
</body>,
"container": <div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
title="Mock Sidebar Button"
type="button"
>
@@ -218,7 +218,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
"baseElement": <body>
<div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="Mock Sidebar Button"
type="button"
>
@@ -242,7 +242,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
</body>,
"container": <div>
<button
- class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+ class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
title="Mock Sidebar Button"
type="button"
>
diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
index ddd6bf31a..3cdf9ee24 100644
--- a/src/components/settings/SettingsFooter.test.tsx
+++ b/src/components/settings/SettingsFooter.test.tsx
@@ -123,7 +123,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
});
fireEvent.click(screen.getByTitle('Accounts'));
- expect(mockNavigate).toHaveBeenCalledWith('/accounts');
+ expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts');
});
it('should quit the app', async () => {
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index 54d4c4708..f81888ae6 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -37,7 +37,7 @@ export const SettingsFooter: FC = () => {
className={BUTTON_CLASS_NAME}
title="Accounts"
onClick={() => {
- navigate('/accounts');
+ navigate('/settings/accounts');
}}
>
<PersonIcon size={Size.LARGE} aria-label="Accounts" />
diff --git a/src/types.ts b/src/types.ts
index fd6f0822b..c53273b82 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -140,6 +140,7 @@ export interface FormattedReason {
export enum IconColor {
GRAY = 'text-gray-500 dark:text-gray-300',
GREEN = 'text-green-500',
+ ORANGE = 'text-orange-500',
PURPLE = 'text-purple-500',
RED = 'text-red-500',
YELLOW = 'text-yellow-500 dark:text-yellow-300',