From d2a9b4b9d897b0325628f362c3603819f2ecf3c8 Mon Sep 17 00:00:00 2001
From: Arunmozhi <arunmozhi@opencraft.com>
Date: Mon, 29 Apr 2024 17:34:50 +1000
Subject: [PATCH] fix: style the header similary to other MFEs

---
 src/components/site-header/AvatarDropdown.jsx  | 9 ++++-----
 src/components/site-header/styles/_Header.scss | 1 -
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/site-header/AvatarDropdown.jsx b/src/components/site-header/AvatarDropdown.jsx
index 98096087ce..5f18c61bb8 100644
--- a/src/components/site-header/AvatarDropdown.jsx
+++ b/src/components/site-header/AvatarDropdown.jsx
@@ -1,9 +1,9 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform/config';
 import { AppContext } from '@edx/frontend-platform/react';
-import { AvatarButton, Dropdown } from '@edx/paragon';
+import { Button, Dropdown } from '@edx/paragon';
 import { isDefinedAndNotNull } from '../../utils/common';
 
 const AvatarDropdown = ({ showLabel }) => {
@@ -15,7 +15,6 @@ const AvatarDropdown = ({ showLabel }) => {
   } = getConfig();
   const { enterpriseConfig, authenticatedUser } = useContext(AppContext);
   const { profileImage } = authenticatedUser;
-  const userFirstName = useMemo(() => authenticatedUser?.name.split(' ').shift(), [authenticatedUser]);
   const enterpriseDashboardLink = `/${enterpriseConfig.slug}`;
 
   const idpPresent = isDefinedAndNotNull(enterpriseConfig.identityProvider);
@@ -28,9 +27,9 @@ const AvatarDropdown = ({ showLabel }) => {
     <Dropdown>
       <Dropdown.Toggle
         showLabel={showLabel}
-        as={AvatarButton}
-        src={profileImage.imageUrlMedium}
+        as={Button}
         id="site-header-avatar-dropdown-toggle"
+        variant="outline-primary"
       >
         My Account
       </Dropdown.Toggle>
diff --git a/src/components/site-header/styles/_Header.scss b/src/components/site-header/styles/_Header.scss
index 6bb191fc10..d8327c9dcd 100644
--- a/src/components/site-header/styles/_Header.scss
+++ b/src/components/site-header/styles/_Header.scss
@@ -50,7 +50,6 @@ $header-logo-height-mobile: 1.5rem;
 }
 
 .site-header-desktop {
-  border-bottom: 4px solid $brand;
   background: $white;
   .nav-link {
     text-decoration: none;