From 0d83d3132c10ad946938e3836f449614931ce962 Mon Sep 17 00:00:00 2001 From: Adam Setch <adam.setch@outlook.com> Date: Thu, 4 Jul 2024 11:03:13 -0800 Subject: [PATCH 1/3] feat(sidebar): highlight selected route --- src/app.tsx | 2 +- src/components/Sidebar.tsx | 2 ++ src/components/buttons/SidebarButton.test.tsx | 19 ++++++++++++++++--- src/components/buttons/SidebarButton.tsx | 14 +++++++++++--- .../settings/SettingsFooter.test.tsx | 2 +- src/components/settings/SettingsFooter.tsx | 2 +- src/types.ts | 1 + 7 files changed, 33 insertions(+), 9 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 843b5ccc2..0654a9c39 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/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..574f06e68 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,22 @@ 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', - hasMetric - ? `${IconColor.GREEN} hover:text-green-700` - : `${IconColor.WHITE} hover:text-gray-500`, + isRoute + ? `${IconColor.ORANGE} hover:text-orange-700` + : hasMetric + ? `${IconColor.GREEN} hover:text-green-700` + : `${IconColor.WHITE} hover:text-gray-500`, props.loading ? 'animate-spin' : undefined, props.size ? 'py-2' : 'py-1', )} diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx index 546c75997..f95664525 100644 --- a/src/components/settings/SettingsFooter.test.tsx +++ b/src/components/settings/SettingsFooter.test.tsx @@ -121,7 +121,7 @@ describe('routes/components/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 6fe2d25c3..a21f4ab6d 100644 --- a/src/types.ts +++ b/src/types.ts @@ -138,6 +138,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', From 11cdb00fdcc7d0bf54035bc8cb817254781ecf36 Mon Sep 17 00:00:00 2001 From: Adam Setch <adam.setch@outlook.com> Date: Tue, 9 Jul 2024 09:26:51 -0700 Subject: [PATCH 2/3] update to use a ring style --- src/components/buttons/SidebarButton.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx index 574f06e68..4f8d87692 100644 --- a/src/components/buttons/SidebarButton.tsx +++ b/src/components/buttons/SidebarButton.tsx @@ -27,11 +27,10 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => { 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', - isRoute - ? `${IconColor.ORANGE} hover:text-orange-700` - : hasMetric - ? `${IconColor.GREEN} hover:text-green-700` - : `${IconColor.WHITE} hover:text-gray-500`, + hasMetric + ? `${IconColor.GREEN} hover:text-green-700` + : `${IconColor.WHITE} hover:text-gray-500`, + isRoute && 'rounded-md ring-1 ring-current', props.loading ? 'animate-spin' : undefined, props.size ? 'py-2' : 'py-1', )} From 1358aef8826a4b4de24469b47bea9cec23767236 Mon Sep 17 00:00:00 2001 From: Adam Setch <adam.setch@outlook.com> Date: Sun, 14 Jul 2024 08:35:16 -0400 Subject: [PATCH 3/3] use shadow instead --- .../__snapshots__/Sidebar.test.tsx.snap | 32 +++++++++---------- src/components/buttons/SidebarButton.tsx | 8 ++--- .../__snapshots__/SidebarButton.test.tsx.snap | 12 +++---- 3 files changed, 26 insertions(+), 26 deletions(-) diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap index e16d94651..cdd8f6be6 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.tsx b/src/components/buttons/SidebarButton.tsx index 4f8d87692..9dd2621c0 100644 --- a/src/components/buttons/SidebarButton.tsx +++ b/src/components/buttons/SidebarButton.tsx @@ -26,11 +26,11 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => { <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`, - isRoute && 'rounded-md ring-1 ring-current', + ? `${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 8275f94cb..34d0a4f8b 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" >