chore: Add Username to Profile dropdown (#266)

AlphadayHQ · Feb 29, 2024 · d1672a6 · d1672a6
1 parent af6657c
commit d1672a6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownContainer.tsx
@@ -1,11 +1,13 @@
 import { FC } from "react";
+import { useAccount } from "src/api/hooks";
 import { useAuth } from "src/api/hooks/useAuth";
 import { useTutorial } from "src/api/hooks/useTutorial";
 import { ETutorialTipId } from "src/api/types";
 import ProfileDropdownWrapper from "./ProfileDropdownWrapper";
 
 const ProfileDropdownContainer: FC = () => {
     const { openAuthModal, isAuthenticated, logout } = useAuth();
+    const { userProfile } = useAccount();
     const {
         showTutorial,
         currentTutorial,
@@ -25,6 +27,7 @@ const ProfileDropdownContainer: FC = () => {
                     ? setTutFocusElemRef
                     : undefined
             }
+            profile={userProfile}
         />
     );
 };

diff --git a/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx b/packages/frontend/src/containers/header/profile-dropdown/ProfileDropdownWrapper.tsx
@@ -8,6 +8,7 @@ import {
     IconButton,
     twMerge,
 } from "@alphaday/ui-kit";
+import { TUserProfile } from "src/api/types";
 import { Logger } from "src/api/utils/logging";
 import CONFIG from "src/config";
 import globalMessages from "src/globalMessages";
@@ -23,6 +24,7 @@ interface IProps {
     setTutFocusElemRef?:
         | React.Dispatch<React.SetStateAction<HTMLElement | null>>
         | undefined;
+    profile: TUserProfile | undefined;
 }
 
 const Divider = () => (
@@ -36,6 +38,7 @@ const ProfileDropdownWrapper: React.FC<IProps> = ({
     showTutorial,
     isAuthenticated,
     setTutFocusElemRef,
+    profile,
 }) => {
     const [toggleState, setToggleState] = useState(false);
 
@@ -84,13 +87,16 @@ const ProfileDropdownWrapper: React.FC<IProps> = ({
             {!showTutorial && (
                 <DropdownMenu
                     className={twMerge(
-                        "two-col:p-[18px_0px] border-borderLine left-auto right-0 mt-1 w-[275px] rounded-lg rounded-t-none rounded-bl rounded-br border border-solid shadow-none",
+                        "two-col:p-[18px_0px] border-borderLine left-auto right-0 mt-1 w-[275px] rounded-lg rounded-t rounded-bl rounded-br border border-solid shadow-none",
                         styles["dropdown-menu"]
                     )}
                 >
                     <div className="mx-2">
-                        <div className="flex justify-between px-2 pb-5 pt-0">
+                        <div className="flex justify-start px-2 pb-5 pt-0">
                             <DropdownAvatar />
+                            <p className="m-0 self-center ml-4 capitalize fontGroup-highlight">
+                                {profile?.user.username}
+                            </p>
                         </div>
                         <Divider />
                         <DropdownItem

diff --git a/packages/ui-kit/src/components/dropdown/dropdown.tsx b/packages/ui-kit/src/components/dropdown/dropdown.tsx
@@ -77,10 +77,10 @@ export const Dropdown: FC<DropdownProps> = ({
 
 export const DropdownAvatar: FC = () => {
     return (
-        <div className="bg-backgroundVariant200 relative h-16 w-16 rounded-full">
+        <div className="bg-backgroundVariant200 relative h-12 w-12 rounded-full">
             <div className="absolute inset-0 flex h-full w-full items-center justify-center rounded-full text-4 font-bold uppercase leading-[100%] text-primary">
                 <div>
-                    <UserSVG className="fill-primary w-5" />
+                    <UserSVG className="fill-primary w-4" />
                 </div>
             </div>
         </div>