feat: update styling for indigo header

edly-io · Dec 8, 2023 · 12020a4 · 12020a4
1 parent 5a259a7
commit 12020a4
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 39 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -2,7 +2,7 @@ name: Release CI
 on:
   push:
     branches:
-    - master
+    - indigo
 jobs:
   release:
     name: Release

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
-  "name": "@edx/frontend-component-header",
-  "version": "1.0.0-semantically-released",
+  "name": "@edly-io/indigo-frontend-component-header",
+  "version": "1.0.0",
   "description": "The standard header for Open edX",
   "main": "dist/index.js",
   "publishConfig": {
@@ -24,14 +24,14 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/openedx/frontend-component-header.git"
+    "url": "git+https://github.com/edly-io/frontend-component-header.git"
   },
   "author": "edX",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/openedx/frontend-component-header/issues"
+    "url": "https://github.com/edly-io/frontend-component-header/issues"
   },
-  "homepage": "https://github.com/openedx/frontend-component-header#readme",
+  "homepage": "https://github.com/edly-io/frontend-component-header#readme",
   "devDependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
     "@edx/browserslist-config": "^1.1.1",
@@ -72,5 +72,10 @@
     "prop-types": "^15.5.10",
     "react": "^16.9.0 || ^17.0.0",
     "react-dom": "^16.9.0 || ^17.0.0"
+  },
+  "release": {
+    "branches": [
+      "indigo"
+    ]
   }
 }
diff --git a/src/learning-header/AuthenticatedUserDropdown.jsx b/src/learning-header/AuthenticatedUserDropdown.jsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-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 { Dropdown, Image } from '@edx/paragon';
 
 import messages from './messages';
 
@@ -17,34 +15,42 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
   );
 
   return (
-    <>
-      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <Dropdown className="user-dropdown ml-3">
-        <Dropdown.Toggle variant="outline-primary">
-          <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
-          <span data-hj-suppress className="d-none d-md-inline">
-            {username}
-          </span>
-        </Dropdown.Toggle>
-        <Dropdown.Menu className="dropdown-menu-right">
-          {dashboardMenuItem}
-          <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
-            {intl.formatMessage(messages.profile)}
-          </Dropdown.Item>
-          <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
-            {intl.formatMessage(messages.account)}
-          </Dropdown.Item>
-          { getConfig().ORDER_HISTORY_URL && (
-            <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
-              {intl.formatMessage(messages.orderHistory)}
-            </Dropdown.Item>
-          )}
-          <Dropdown.Item href={getConfig().LOGOUT_URL}>
-            {intl.formatMessage(messages.signOut)}
-          </Dropdown.Item>
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
+    <Dropdown className="user-dropdown ml-3">
+      <Dropdown.Toggle variant="outline-primary">
+        <div className="hamburger-menu">
+          <span className="line" />
+          <span className="line" />
+          <span className="line" />
+          <span className="line" />
+        </div>
+        <Image
+          src={`${getConfig().LMS_BASE_URL}/static/indigo/images/profile.svg`}
+          alt="Image description"
+        />
+        <span data-hj-suppress className="sr-only">
+          {username}
+        </span>
+      </Dropdown.Toggle>
+      <Dropdown.Menu className="dropdown-menu-right">
+        <a href={`${getConfig().LMS_BASE_URL}/dashboard`} className="pgn__dropdown-item dropdown-item h-desktop">My Courses</a>
+        <a href={`${getConfig().LMS_BASE_URL}/courses`} className="pgn__dropdown-item dropdown-item h-desktop">Discover</a>
+        {dashboardMenuItem}
+        <Dropdown.Item href={`${getConfig().ACCOUNT_PROFILE_URL}/u/${username}`}>
+          {intl.formatMessage(messages.profile)}
+        </Dropdown.Item>
+        <Dropdown.Item href={getConfig().ACCOUNT_SETTINGS_URL}>
+          {intl.formatMessage(messages.account)}
+        </Dropdown.Item>
+        { getConfig().ORDER_HISTORY_URL && (
+        <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
+          {intl.formatMessage(messages.orderHistory)}
+        </Dropdown.Item>
+        )}
+        <Dropdown.Item href={getConfig().LOGOUT_URL}>
+          {intl.formatMessage(messages.signOut)}
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 };
 

diff --git a/src/learning-header/LearningHeader.jsx b/src/learning-header/LearningHeader.jsx
@@ -45,8 +45,20 @@ const LearningHeader = ({
       <div className="container-xl py-2 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>
-          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+          <div className="course-info-header">
+            <span className="d-block title">{courseTitle}</span>
+            <span className="d-block org">{courseOrg} {courseNumber}</span>
+          </div>
+          <div className="nav-course">
+            <a href={`${getConfig().LMS_BASE_URL}/dashboard`}>
+              My Courses
+            </a>
+          </div>
+          <div className="nav-course">
+            <a href={`${getConfig().LMS_BASE_URL}/courses`}>
+              Discover
+            </a>
+          </div>
         </div>
         {showUserDropdown && authenticatedUser && (
         <AuthenticatedUserDropdown