fix: style the header similary to other MFEs

open-craft · Apr 29, 2024 · d2a9b4b · d2a9b4b
1 parent b686bd8
commit d2a9b4b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git 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
@@ -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;