fix(react): changes styles to the menu component (#74)

close #61

README.md

@@ -47,7 +47,7 @@ _Data Input_
 
 _Layout_
 
-- [ ] Divider
+- [x] Divider
 
 _Display_
 

packages/react/src/components/menu.tsx

@@ -20,7 +20,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      'flex h-9 items-center space-x-1 rounded-md  bg-dark-800/60 p-1 shadow-sm',
+      'flex h-9 items-center space-x-1 rounded-md bg-dark-700/20  p-1 shadow-sm',
       className,
     )}
     {...props}
@@ -35,7 +35,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-dark-800/20  data-[state=open]:bg-dark-600/50 data-[state=open]:rounded data-[state=open]:text-accent-foreground ',
+      'flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-dark-800/20  data-[state=open]:bg-dark-600/50 data-[state=open]:rounded data-[state=open]:text-accent-foreground',
       className,
     )}
     {...props}
@@ -52,7 +52,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex justify-between cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-dark-800/20 focus:rounded-md data-[state=open]:bg-dark-800/20 data-[state=open]:rounded-md',
+      'flex justify-between cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-dark-600/80 focus:rounded-md data-[state=open]:bg-dark-600/80 data-[state=open]:rounded-md ',
       inset && 'pl-8',
       className,
     )}
@@ -72,7 +72,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md  bg-dark-800/80 p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-80 min-w-[8rem]  rounded-md  bg-dark-800/60 p-1  shadow-lg',
       className,
     )}
     {...props}
@@ -95,7 +95,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          'z-50 min-w-[12rem] overflow-hidden rounded-md  bg-dark-800/60 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-10 min-w-[12rem] rounded-md  bg-dark-800/60 p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 backdrop-blur-md',
           className,
         )}
         {...props}