fix: label color fixes

Author: tugcekucukoglu

apps/showcase/demo/styled/drawer/basic-demo.tsx

@@ -77,21 +77,20 @@ export default function BasicDemo() {
                                     <Menu.List className="gap-0">
                                         {navSections.map((section, sectionIndex) => (
                                             <React.Fragment key={section.label}>
-                                                <Menu.Label className={`text-primary font-semibold text-xs tracking-wider px-0 py-1${sectionIndex > 0 ? ' mt-4' : ''}`}>
+                                                <Menu.Label
+                                                    className={`text-surface-500 dark:text-surface-500 font-semibold text-xs tracking-wider  py-1${sectionIndex > 0 ? ' mt-4' : ''}`}
+                                                >
                                                     {section.label}
                                                 </Menu.Label>
                                                 {section.items.map((item) => (
                                                     <Menu.Item
                                                         key={item.label}
-                                                        className={`text-sm hover:bg-transparent px-0 py-2.5${item.active ? ' text-primary font-semibold' : ''}`}
+                                                        className={`text-sm  py-2.5${item.active ? ' text-primary font-semibold' : ''}`}
                                                     >
                                                         <i className={`${item.icon} text-base${item.active ? ' text-primary' : ''}`} />
                                                         {item.label}
                                                         {item.badge && (
-                                                            <Badge
-                                                                shape="circle"
-                                                                className="ml-auto"
-                                                            >
+                                                            <Badge shape="circle" className="ml-auto">
                                                                 {item.badge}
                                                             </Badge>
                                                         )}
@@ -100,9 +99,11 @@ export default function BasicDemo() {
                                             </React.Fragment>
                                         ))}
 
-                                        <Menu.Label className="text-primary font-semibold text-xs tracking-wider px-0 py-1 mt-4">RECENT</Menu.Label>
+                                        <Menu.Label className="text-surface-500 dark:text-surface-500 font-semibold text-xs tracking-wider  py-1 mt-4">
+                                            RECENT
+                                        </Menu.Label>
                                         {recentItems.map((item) => (
-                                            <Menu.Item key={item.label} className="text-sm hover:bg-transparent px-0 py-2.5">
+                                            <Menu.Item key={item.label} className="text-sm  py-2.5">
                                                 <span className={`${item.color} w-2 h-2 rounded-full shrink-0`} />
                                                 <span className="truncate">{item.label}</span>
                                                 <span className="text-xs text-surface-400 ml-auto shrink-0">{item.time}</span>