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"
     >