From 666f69985808ed876f7ea527d0ff935096321d9c Mon Sep 17 00:00:00 2001
From: devcodes9 <devdalia9@gmail.com>
Date: Thu, 10 Oct 2024 10:21:47 +0530
Subject: [PATCH] feat: match main nav with ui

---
 .../components/MainNavigation.tsx             | 25 ++++---------------
 packages/ui/components/DropdownMenu/index.tsx |  6 ++---
 2 files changed, 8 insertions(+), 23 deletions(-)

diff --git a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
index c97440fa9a..b74bb2cc4a 100644
--- a/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
+++ b/apps/web/app/(app)/environments/[environmentId]/components/MainNavigation.tsx
@@ -323,10 +323,7 @@ export const MainNavigation = ({
             )}
 
             <DropdownMenu>
-              <DropdownMenuTrigger
-                asChild
-                id="productDropdownTrigger"
-                className="w-full rounded-br-xl border-t py-4 transition-colors duration-200 hover:bg-slate-50 focus:outline-none">
+              <DropdownMenuTrigger asChild id="productDropdownTrigger">
                 <div
                   tabIndex={0}
                   className={cn(
@@ -376,7 +373,6 @@ export const MainNavigation = ({
                 </div>
               </DropdownMenuTrigger>
               <DropdownMenuContent
-                className="w-fit space-y-1 rounded-xl border border-slate-200 shadow-sm"
                 id="userDropdownInnerContentWrapper"
                 side="right"
                 sideOffset={10}
@@ -407,9 +403,7 @@ export const MainNavigation = ({
                 </DropdownMenuRadioGroup>
                 <DropdownMenuSeparator />
                 {isOwnerOrAdmin && (
-                  <DropdownMenuItem
-                    onClick={() => handleAddProduct(organization.id)}
-                    className="rounded-lg font-normal">
+                  <DropdownMenuItem onClick={() => handleAddProduct(organization.id)}>
                     <PlusIcon className="mr-2 h-4 w-4" />
                     <span>Add product</span>
                   </DropdownMenuItem>
@@ -454,7 +448,6 @@ export const MainNavigation = ({
                 </DropdownMenuTrigger>
 
                 <DropdownMenuContent
-                  className="w-56 rounded-xl border border-slate-200 shadow-sm"
                   id="userDropdownInnerContentWrapper"
                   side="right"
                   sideOffset={10}
@@ -470,9 +463,7 @@ export const MainNavigation = ({
                           target={link.target}
                           key={link.label}
                           className="flex items-center">
-                          <DropdownMenuItem
-                            className="w-full gap-x-2 rounded-lg font-normal"
-                            key={link.label}>
+                          <DropdownMenuItem key={link.label}>
                             <link.icon className="h-4 w-4" strokeWidth={1.5} />
                             {link.label}
                           </DropdownMenuItem>
@@ -483,7 +474,6 @@ export const MainNavigation = ({
                   {/* Logout */}
 
                   <DropdownMenuItem
-                    className="w-full gap-x-2 rounded-lg font-normal"
                     onClick={async () => {
                       await signOut({ callbackUrl: "/auth/login" });
                       await formbricksLogout();
@@ -503,10 +493,7 @@ export const MainNavigation = ({
                         </div>
                       </DropdownMenuSubTrigger>
                       <DropdownMenuPortal>
-                        <DropdownMenuSubContent
-                          className="rounded-xl border border-slate-200 shadow-sm"
-                          sideOffset={10}
-                          alignOffset={5}>
+                        <DropdownMenuSubContent sideOffset={10} alignOffset={5}>
                           <DropdownMenuRadioGroup
                             value={currentOrganizationId}
                             onValueChange={(organizationId) =>
@@ -523,9 +510,7 @@ export const MainNavigation = ({
                           </DropdownMenuRadioGroup>
                           <DropdownMenuSeparator />
                           {isMultiOrgEnabled && (
-                            <DropdownMenuItem
-                              onClick={() => setShowCreateOrganizationModal(true)}
-                              className="rounded-lg">
+                            <DropdownMenuItem onClick={() => setShowCreateOrganizationModal(true)}>
                               <PlusIcon className="mr-2 h-4 w-4" />
                               <span>Create new organization</span>
                             </DropdownMenuItem>
diff --git a/packages/ui/components/DropdownMenu/index.tsx b/packages/ui/components/DropdownMenu/index.tsx
index 76473fb6dd..0209c2c739 100644
--- a/packages/ui/components/DropdownMenu/index.tsx
+++ b/packages/ui/components/DropdownMenu/index.tsx
@@ -46,7 +46,7 @@ const DropdownMenuSubContent: React.ComponentType<DropdownMenuPrimitive.Dropdown
     <DropdownMenuPrimitive.SubContent
       ref={ref as any}
       className={cn(
-        "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
+        "animate-in slide-in-from-left-1 z-50 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
         className
       )}
       {...props}
@@ -67,7 +67,7 @@ const DropdownMenuContent: React.ComponentType<DropdownMenuPrimitive.DropdownMen
           ref={ref}
           sideOffset={sideOffset}
           className={cn(
-            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border border-slate-100 bg-white p-1 text-slate-700 shadow-md",
+            "animate-in data-[side=right]:slide-in-from-left-2 data-[side=left]:slide-in-from-right-2 data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-56 min-w-[8rem] overflow-hidden rounded-xl border border-slate-200 bg-white p-1 text-slate-700 shadow-sm",
             className
           )}
           {...props}
@@ -90,7 +90,7 @@ const DropdownMenuItem: React.ForwardRefExoticComponent<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm font-medium outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-pointer select-none items-center gap-x-2 rounded-lg px-2 py-1.5 text-sm font-normal outline-none focus:bg-slate-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
       className
     )}