refine stylig of AdminUserSettings component and merge in develop

LetsGetTechnical · Sep 20, 2024 · 989eb27 · 989eb27
1 parent bca6971
commit 989eb27
Showing 1 changed file with 15 additions and 22 deletions.
diff --git a/components/AdminUserSettings/AdminUserSettings.tsx b/components/AdminUserSettings/AdminUserSettings.tsx
@@ -14,6 +14,7 @@ import {
 import { LucideChevronsUpDown } from 'lucide-react';
 import { useAuthContext } from '@/context/AuthContextProvider';
 import { useRouter } from 'next/navigation';
+import LinkCustom from '../LinkCustom/LinkCustom';
 
 /**
  * Renders admin user settings.
@@ -37,39 +38,31 @@ export const AdminUserSettings = (): JSX.Element => {
     }
   };
 
-  /**
-   * Handles the route to edit profile
-   * @returns {void} No return value.
-   */
-  const handleRoute = (): void => {
-    router.push('/user/edit');
-  };
-
   return (
     <DropdownMenu>
       <DropdownMenuTrigger
-        className="w-full focus:outline-none"
+        className="w-56 focus:outline-none mx-auto"
         data-testid="admin-user-settings"
       >
-        <div className="admin-user-settings w-[230px] flex gap-2 px-2 py-2 items-center border-[1px] border-zinc-700 rounded-[6px] text-zinc-50 overflow-hidden">
+        <div className="admin-user-settings w-full flex space-between gap-2 px-2 py-2 items-center border border-border rounded-lg text-foreground overflow-hidden">
           <span className="bg-cyan-500 w-8 h-8 rounded-full" />
           <p className="truncate ... w-36 ">{user.email}</p>
-          <LucideChevronsUpDown className="ml-auto text-zinc-300" size={16} />
+          <LucideChevronsUpDown className="text-muted-foreground" size={16} />
         </div>
       </DropdownMenuTrigger>
-      <DropdownMenuContent className="border-[1px] border-zinc-700 rounded-[6px]  w-[230px] p-0">
-        <DropdownMenuItem className="cursor-pointer rounded-none">
-          <Button
-            className="flex justify-start p-0 text-base font-normal hover:text-black w-full"
-            variant="link"
-            label="Edit Profile"
-            onClick={handleRoute}
-            data-testid="edit-profile-button"
-          />
+      <DropdownMenuContent className="border border-border rounded-lg p-0 w-56 ">
+        <DropdownMenuItem className="cursor-pointer rounded-b-none flex focus:bg-muted">
+          <LinkCustom
+            className="text-base no-underline hover:text-foreground w-full py-2 px-0 text-muted-foreground hover:underline"
+            href="#"
+            data-testid="edit-profile-link"
+          >
+            Edit Profile
+          </LinkCustom>
         </DropdownMenuItem>
-        <DropdownMenuItem className="cursor-pointer rounded-none">
+        <DropdownMenuItem className="cursor-pointer rounded-none focus:bg-muted">
           <Button
-            className="flex justify-start p-0 text-base font-normal hover:text-black w-full"
+            className="w-full text-base no-underline py-2 px-0 h-auto text-muted-foreground hover:text-foreground font-normal justify-normal hover:underline"
             variant="link"
             label="Sign Out"
             onClick={handleLogout}