feat: Header theme Design

edly-io · Nov 20, 2023 · f49fe1b · f49fe1b
1 parent 02eb893
commit f49fe1b
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 2 deletions.
diff --git a/src/Icons.jsx b/src/Icons.jsx
@@ -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>
+);
diff --git a/src/index.scss b/src/index.scss
@@ -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';

diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -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>
   );
@@ -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}
@@ -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 && (
@@ -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>

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -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>