refactor: update routes and enhance component styles for better usability

- Changed the Dashboard route to '/dashboardv4' for versioning clarity.
- Improved styling in BlogCategoryListDesktop and BlogCategoryListMobile for better user interaction with cursor styles.
- Added cursor pointer to various components including SidebarUser, LocaleSelector, and ThemeSwitcher for enhanced usability.
- Updated global CSS variables for improved color consistency across the application.

src/components/blog/blog-category-list-desktop.tsx

@@ -24,19 +24,19 @@ export function BlogCategoryListDesktop({
         type="single"
         value={slug || 'All'}
         aria-label="Toggle blog category"
-        className="h-9 overflow-hidden rounded-full border bg-background p-1 *:h-7 *:text-muted-foreground"
+        className="h-9 overflow-hidden rounded-md space-x-1 border bg-background p-1 *:h-7 *:text-muted-foreground"
       >
         <ToggleGroupItem
           key="All"
           value="All"
           className={cn(
-            'rounded-full px-5',
+            'rounded-sm px-2 cursor-pointer',
             'data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-            'hover:bg-muted hover:text-muted-foreground'
+            'hover:bg-accent hover:text-accent-foreground'
           )}
           aria-label={'Toggle all blog categories'}
         >
-          <LocaleLink href={'/blog'}>
+          <LocaleLink href={'/blog'} className="px-4">
             <h2>{t('all')}</h2>
           </LocaleLink>
         </ToggleGroupItem>
@@ -46,13 +46,13 @@ export function BlogCategoryListDesktop({
             key={category.slug}
             value={category.slug}
             className={cn(
-              'rounded-full px-5',
+              'rounded-sm px-2 cursor-pointer',
               'data-[state=on]:bg-primary data-[state=on]:text-primary-foreground',
-              'hover:bg-muted hover:text-muted-foreground'
+              'hover:bg-accent hover:text-accent-foreground'
             )}
             aria-label={`Toggle blog category of ${category.name}`}
           >
-            <LocaleLink href={`/blog/category/${category.slug}`}>
+            <LocaleLink href={`/blog/category/${category.slug}`} className="px-4">
               <h2>{category.name}</h2>
             </LocaleLink>
           </ToggleGroupItem>

src/components/blog/blog-category-list-mobile.tsx

@@ -37,7 +37,7 @@ export function BlogCategoryListMobile({
     <Drawer open={open} onClose={closeDrawer}>
       <DrawerTrigger
         onClick={() => setOpen(true)}
-        className="flex items-center w-full p-4 border-y text-foreground/90"
+        className="flex items-center w-full p-4 border-y text-foreground/90 cursor-pointer"
       >
         <div className="flex items-center justify-between w-full gap-4">
           <div className="flex items-center gap-2">

src/components/dashboard/sidebar-user.tsx

@@ -89,7 +89,7 @@ export function SidebarUser() {
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent 
+              className="cursor-pointer data-[state=open]:bg-sidebar-accent 
               data-[state=open]:text-sidebar-accent-foreground"
             >
               <UserAvatar
@@ -133,7 +133,7 @@ export function SidebarUser() {
 
             <DropdownMenuGroup>
               <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
+                <DropdownMenuSubTrigger className="cursor-pointer">
                   <LaptopIcon className="mr-2 size-4" />
                   <span>{t('Common.theme')}</span>
                 </DropdownMenuSubTrigger>
@@ -165,7 +165,7 @@ export function SidebarUser() {
 
             <DropdownMenuGroup>
               <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
+                <DropdownMenuSubTrigger className="cursor-pointer">
                   <Languages className="mr-2 size-4" />
                   <span>{t('Common.language')}</span>
                 </DropdownMenuSubTrigger>

src/components/layout/locale-selector.tsx

@@ -56,7 +56,7 @@ export default function LocaleSelector() {
       value={currentLocale}
       onValueChange={onSelectChange}
     >
-      <SelectTrigger className="w-fit">
+      <SelectTrigger className="w-fit cursor-pointer">
         <SelectValue
           placeholder={
             <span className="text-lg">{LOCALE_LIST[DEFAULT_LOCALE].flag}</span>

src/components/layout/locale-switcher.tsx

@@ -56,7 +56,7 @@ export default function LocaleSwitcher() {
         <Button
           variant="ghost"
           size="sm"
-          className="size-8 p-0.5 border border-border rounded-full"
+          className="size-8 p-0.5 border border-border rounded-full cursor-pointer"
         >
           <Languages className="size-3" />
           <span className="sr-only">{t('language')}</span>

src/components/layout/navbar-mobile.tsx

@@ -91,8 +91,8 @@ export function NavbarMobile({
             aria-expanded={open}
             aria-label="Toggle Mobile Menu"
             onClick={handleToggleMobileMenu}
-            className="flex aspect-square h-fit select-none items-center 
-              justify-center rounded-md border"
+            className="size-8 flex aspect-square h-fit select-none items-center 
+              justify-center rounded-md border cursor-pointer"
           >
             {open ? (
               <XIcon className="size-4" />
@@ -198,7 +198,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                           variant="ghost"
                           className={cn(
                             'flex w-full items-center justify-between text-left',
-                            'bg-transparent text-muted-foreground',
+                            'bg-transparent text-muted-foreground cursor-pointer',
                             'hover:bg-transparent hover:text-foreground',
                             'focus:bg-transparent focus:text-foreground',
                             isActive &&
@@ -214,7 +214,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                         </Button>
                       </CollapsibleTrigger>
                       <CollapsibleContent>
-                        <ul className="mt-2 pl-4 space-y-2">
+                        <ul className="mt-2 space-y-2">
                           {item.items.map((subItem) => {
                             const isSubItemActive =
                               subItem.href &&
@@ -234,8 +234,8 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                                   }
                                   className={cn(
                                     buttonVariants({ variant: 'ghost' }),
-                                    'group h-auto w-full justify-start gap-4 p-1',
-                                    'bg-transparent text-muted-foreground',
+                                    'group h-auto w-full justify-start gap-4 p-1 px-3',
+                                    'bg-transparent text-muted-foreground cursor-pointer',
                                     'hover:bg-transparent hover:text-foreground',
                                     'focus:bg-transparent focus:text-foreground',
                                     isSubItemActive &&
@@ -284,7 +284,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                                   {subItem.external && (
                                     <ArrowUpRightIcon
                                       className={cn(
-                                        'size-4 shrink-0 text-muted-foreground',
+                                        'size-4 shrink-0 text-muted-foreground items-center',
                                         'group-hover:bg-transparent group-hover:text-foreground',
                                         'group-focus:bg-transparent group-focus:text-foreground',
                                         isSubItemActive &&
@@ -306,7 +306,7 @@ function MainMobileMenu({ userLoggedIn, onLinkClicked }: MainMobileMenuProps) {
                       rel={item.external ? 'noopener noreferrer' : undefined}
                       className={cn(
                         buttonVariants({ variant: 'ghost' }),
-                        'w-full justify-start',
+                        'w-full justify-start cursor-pointer',
                         'bg-transparent text-muted-foreground',
                         'hover:bg-transparent hover:text-foreground',
                         'focus:bg-transparent focus:text-foreground',

src/components/layout/theme-switcher-horizontal.tsx

@@ -36,7 +36,7 @@ export function ThemeSwitcherHorizontal() {
         variant="ghost"
         size="icon"
         className={cn(
-          'size-6 px-0 rounded-full',
+          'size-6 px-0 rounded-full cursor-pointer',
           theme === 'light' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('light')}
@@ -49,7 +49,7 @@ export function ThemeSwitcherHorizontal() {
         variant="ghost"
         size="icon"
         className={cn(
-          'size-6 px-0 rounded-full',
+          'size-6 px-0 rounded-full cursor-pointer',
           theme === 'dark' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('dark')}
@@ -62,7 +62,7 @@ export function ThemeSwitcherHorizontal() {
         variant="ghost"
         size="icon"
         className={cn(
-          'size-6 px-0 rounded-full',
+          'size-6 px-0 rounded-full cursor-pointer',
           theme === 'system' && 'bg-muted text-foreground'
         )}
         onClick={() => setTheme('system')}

src/components/layout/theme-switcher.tsx

@@ -24,7 +24,7 @@ export function ThemeSwitcher() {
         <Button
           variant="ghost"
           size="sm"
-          className="size-8 p-0.5 border border-border rounded-full"
+          className="size-8 p-0.5 border border-border rounded-full cursor-pointer"
         >
           <SunIcon className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />

src/components/layout/user-button.tsx

@@ -64,7 +64,7 @@ export function UserButton({ user }: UserButtonProps) {
           <UserAvatar
             name={user.name}
             image={user.image}
-            className="size-8 border"
+            className="size-8 border cursor-pointer"
           />
         </DrawerTrigger>
         <DrawerPortal>
@@ -80,7 +80,7 @@ export function UserButton({ user }: UserButtonProps) {
               <UserAvatar
                 name={user.name}
                 image={user.image}
-                className="size-8 border"
+                className="size-8 border cursor-pointer"
               />
               <div className="flex flex-col">
                 <p className="font-medium">
@@ -141,7 +141,7 @@ export function UserButton({ user }: UserButtonProps) {
         <UserAvatar
           name={user.name}
           image={user.image}
-          className="size-8 border"
+          className="size-8 border cursor-pointer"
         />
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">

src/routes.ts

@@ -27,7 +27,7 @@ export enum Routes {
   ForgotPassword = '/auth/forgot-password',
   ResetPassword = '/auth/reset-password',
 
-  Dashboard = '/dashboard',
+  Dashboard = '/dashboardv4',
   SettingsAccount = '/settings/account',
   SettingsBilling = '/settings/billing',
   SettingsNotifications = '/settings/notifications',

src/styles/globals.css

@@ -94,72 +94,73 @@
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
-  --foreground: oklch(0.147 0.004 49.25);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.147 0.004 49.25);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.147 0.004 49.25);
-  --primary: oklch(0.216 0.006 56.043);
-  --primary-foreground: oklch(0.985 0.001 106.423);
-  --secondary: oklch(0.97 0.001 106.424);
-  --secondary-foreground: oklch(0.216 0.006 56.043);
-  --muted: oklch(0.97 0.001 106.424);
-  --muted-foreground: oklch(0.553 0.013 58.071);
-  --accent: oklch(0.97 0.001 106.424);
-  --accent-foreground: oklch(0.216 0.006 56.043);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.21 0.006 285.885);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.923 0.003 48.717);
-  --input: oklch(0.923 0.003 48.717);
-  --ring: oklch(0.709 0.01 56.259);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
   --chart-1: oklch(0.646 0.222 41.116);
   --chart-2: oklch(0.6 0.118 184.704);
   --chart-3: oklch(0.398 0.07 227.392);
   --chart-4: oklch(0.828 0.189 84.429);
   --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0.001 106.423);
-  --sidebar-foreground: oklch(0.147 0.004 49.25);
-  --sidebar-primary: oklch(0.216 0.006 56.043);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.97 0.001 106.424);
-  --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
-  --sidebar-border: oklch(0.923 0.003 48.717);
-  --sidebar-ring: oklch(0.709 0.01 56.259);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.21 0.006 285.885);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: oklch(0.147 0.004 49.25);
-  --foreground: oklch(0.985 0.001 106.423);
-  --card: oklch(0.216 0.006 56.043);
-  --card-foreground: oklch(0.985 0.001 106.423);
-  --popover: oklch(0.216 0.006 56.043);
-  --popover-foreground: oklch(0.985 0.001 106.423);
-  --primary: oklch(0.923 0.003 48.717);
-  --primary-foreground: oklch(0.216 0.006 56.043);
-  --secondary: oklch(0.268 0.007 34.298);
-  --secondary-foreground: oklch(0.985 0.001 106.423);
-  --muted: oklch(0.268 0.007 34.298);
-  --muted-foreground: oklch(0.709 0.01 56.259);
-  --accent: oklch(0.268 0.007 34.298);
-  --accent-foreground: oklch(0.985 0.001 106.423);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.92 0.004 286.32);
+  --primary-foreground: oklch(0.21 0.006 285.885);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.553 0.013 58.071);
+  --ring: oklch(0.552 0.016 285.938);
   --chart-1: oklch(0.488 0.243 264.376);
   --chart-2: oklch(0.696 0.17 162.48);
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.216 0.006 56.043);
-  --sidebar-foreground: oklch(0.985 0.001 106.423);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.001 106.423);
-  --sidebar-accent: oklch(0.268 0.007 34.298);
-  --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.553 0.013 58.071);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
+
 /*
   The default border color has changed to `currentColor` in Tailwind CSS v4,
   so we've added these compatibility styles to make sure everything still