Skip to content

Commit

Permalink
feat: Header theme Design
Browse files Browse the repository at this point in the history
  • Loading branch information
RahatAli authored and RahatAli committed Nov 20, 2023
1 parent 02eb893 commit f49fe1b
Show file tree
Hide file tree
Showing 4 changed files with 87 additions and 2 deletions.
76 changes: 76 additions & 0 deletions src/Icons.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,3 +44,79 @@ export const CaretIcon = (props) => (
/>
</svg>
);

export const DashboardIcon = (props) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
version="1.1"
{...props}
>
<path
d="M7 1V19M17 1H3C1.89543 1 1 1.89543 1 3V17C1 18.1046 1.89543 19 3 19H17C18.1046 19 19 18.1046 19 17V3C19 1.89543 18.1046 1 17 1Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const ProfileIcon = (props) => (
<svg
width="18"
height="20"
viewBox="0 0 18 20"
fill="none"
version="1.1"
{...props}
>
<path
d="M17 19V17C17 15.9391 16.5786 14.9217 15.8284 14.1716C15.0783 13.4214 14.0609 13 13 13H5C3.93913 13 2.92172 13.4214 2.17157 14.1716C1.42143 14.9217 1 15.9391 1 17V19M9 9C11.2091 9 13 7.20914 13 5C13 2.79086 11.2091 1 9 1C6.79086 1 5 2.79086 5 5C5 7.20914 6.79086 9 9 9Z"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const AccountIcon = (props) => (
<svg
width="24"
height="20"
viewBox="0 0 24 20"
fill="none"
version="1.1"
{...props}
>
<path
d="M4 19V12M4 8V1M12 19V10M12 6V1M20 19V14M20 10V1M1 12H7M9 6H15M17 14H23"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);

export const LogoutIcon = (props) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
version="1.1"
{...props}
>
<path
d="M7 19H3C2.46957 19 1.96086 18.7893 1.58579 18.4142C1.21071 18.0391 1 17.5304 1 17V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H7M14 15L19 10M19 10L14 5M19 10H7"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
);
2 changes: 2 additions & 0 deletions src/index.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
$spacer: 1rem;
$blue: #007db8;
$white: #fff;
$gray-light: #d9d9d9;
$default-radius: 20px;

@import './Menu/menu.scss';
@import './studio-header/header.scss';
Expand Down
9 changes: 8 additions & 1 deletion src/learning-header/AuthenticatedUserDropdown.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,16 @@ import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
import { getConfig } from '@edx/frontend-platform';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Dropdown } from '@edx/paragon';
import {
ProfileIcon, LogoutIcon, AccountIcon, DashboardIcon,
} from '../Icons';

import messages from './messages';

const AuthenticatedUserDropdown = ({ intl, username }) => {
const dashboardMenuItem = (
<Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
<span className="drop-icon"><DashboardIcon className="text-primary" /></span>
{intl.formatMessage(messages.dashboard)}
</Dropdown.Item>
);
Expand All @@ -20,7 +24,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
<>
{/* <a className="text-gray-700" href={}>{intl.formatMessage(messages.help)}</a> */}
<Dropdown className="user-dropdown ml-3">
<Dropdown.Toggle variant="outline-primary">
<Dropdown.Toggle variant="none" className="user-dropdown-toggle">
<FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
<span data-hj-suppress className="d-none d-md-inline">
{username}
Expand All @@ -29,9 +33,11 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
<Dropdown.Menu className="dropdown-menu-right">
{dashboardMenuItem}
<Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
<span className="drop-icon"><ProfileIcon className="text-primary" /></span>
{intl.formatMessage(messages.profile)}
</Dropdown.Item>
<Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
<span className="drop-icon"><AccountIcon className="text-primary" /></span>
{intl.formatMessage(messages.account)}
</Dropdown.Item>
{ getConfig().ORDER_HISTORY_URL && (
Expand All @@ -40,6 +46,7 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
</Dropdown.Item>
)}
<Dropdown.Item href={getConfig().LOGOUT_URL}>
<span className="drop-icon"><LogoutIcon className="text-primary" /></span>
{intl.formatMessage(messages.signOut)}
</Dropdown.Item>
</Dropdown.Menu>
Expand Down
2 changes: 1 addition & 1 deletion src/learning-header/LearningHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ const LearningHeader = ({
return (
<header className="learning-header">
<a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
<div className="container-xl py-2 d-flex align-items-center">
<div className="container-xl d-flex align-items-center">
{headerLogo}
<div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
<span className="d-block small m-0">{courseOrg} {courseNumber}</span>
Expand Down

0 comments on commit f49fe1b

Please sign in to comment.