diff --git a/src/features/Main/Footer/index.jsx b/src/features/Main/Footer/index.jsx
index f8b8609a..af39fdd7 100644
--- a/src/features/Main/Footer/index.jsx
+++ b/src/features/Main/Footer/index.jsx
@@ -1,25 +1,27 @@
-import { getConfig } from '@edx/frontend-platform';
import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
import './index.scss';
export const Footer = () => {
const privacyPolicyLink = () => `${getConfig().FOOTER_PRIVACY_POLICY_LINK}`;
const termsOfServiceLink = () => `${getConfig().FOOTER_TERMS_OF_SERVICE_LINK}`;
+ const currentYear = new Date().getFullYear();
return (
);
};
diff --git a/src/features/Main/Footer/index.scss b/src/features/Main/Footer/index.scss
index 19d7a47a..27170525 100644
--- a/src/features/Main/Footer/index.scss
+++ b/src/features/Main/Footer/index.scss
@@ -1,34 +1,49 @@
@import "assets/colors.scss";
footer {
- padding: 46px 24px 136px;
+ padding: 24px;
display: block;
+ background-color: $color-white;
+ margin-top: 40px;
ul.footer-links {
display: flex;
flex-wrap: wrap;
- gap: 24px;
justify-content: center;
list-style-type: none;
margin: 0;
padding: 0;
- li {
+ .footer-item {
margin: 0;
- padding: 0;
+ padding: 0 20px;
+ color: $primary;
+
+ &:not(:last-child) {
+ border-right: 1px solid $gray-60;
+ }
a {
- color: $color-gray;
+ color: $primary;
font-size: 14px;
line-height: 1.143;
- text-decoration: none;
white-space: nowrap;
&:hover {
- color: $color-black;
- text-decoration: underline;
+ color: $primary-dark;
}
}
+
+ .icon {
+ margin-right: 5px;
+ }
}
}
+
+ .footer-copyright {
+ text-align: center;
+ font-size: 14px;
+ color: $color-black;
+ margin-top: 5px;
+ }
}
diff --git a/src/features/Main/Header/_test_/index.test.jsx b/src/features/Main/Header/_test_/index.test.jsx
index f2fdab1a..8cf2160e 100644
--- a/src/features/Main/Header/_test_/index.test.jsx
+++ b/src/features/Main/Header/_test_/index.test.jsx
@@ -1,10 +1,17 @@
import React from 'react';
import { render, fireEvent, act } from '@testing-library/react';
import { AppContext } from '@edx/frontend-platform/react';
-import { InstitutionContext } from 'features/Main/institutionContext';
import { Header } from 'features/Main/Header';
import '@testing-library/jest-dom/extend-expect';
+jest.mock('@edx/frontend-platform', () => ({
+ getConfig: jest.fn(() => ({
+ LMS_BASE_URL: 'http://localhost:18000',
+ COURSE_OPERATIONS_API_V2_BASE_URL: 'http://localhost:18000/pearson_course_operation/api/v2',
+ ACCOUNT_PROFILE_URL: 'https://example.com/profile',
+ })),
+}));
+
describe('Header', () => {
const authenticatedUser = {
username: 'User',
@@ -20,17 +27,13 @@ describe('Header', () => {
await act(async () => {
const renderResult = render(
-
-
-
+
,
);
getByText = renderResult.getByText;
});
-
- expect(getByText('Institution Name')).toBeInTheDocument();
- expect(getByText('U')).toBeInTheDocument();
+ expect(getByText('User')).toBeInTheDocument();
});
it('renders header correctly', () => {
@@ -40,11 +43,11 @@ describe('Header', () => {
,
);
- const institutionName = getByText('No Institution Found');
- const avatar = getByText('U');
+ const titleApp = getByText('CertPREP Training Center Dashboard');
+ const userName = getByText('User');
- expect(institutionName).toBeInTheDocument();
- expect(avatar).toBeInTheDocument();
+ expect(userName).toBeInTheDocument();
+ expect(titleApp).toBeInTheDocument();
});
it('toggles account menu on button click', () => {
diff --git a/src/features/Main/Header/index.jsx b/src/features/Main/Header/index.jsx
index 6c9049fe..5265ffaf 100644
--- a/src/features/Main/Header/index.jsx
+++ b/src/features/Main/Header/index.jsx
@@ -1,60 +1,40 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
import { AppContext } from '@edx/frontend-platform/react';
import { getConfig } from '@edx/frontend-platform';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faCaretDown } from '@fortawesome/free-solid-svg-icons';
-import { InstitutionContext } from 'features/Main/institutionContext';
+import { Dropdown } from '@edx/paragon';
import 'features/Main/Header/index.scss';
export const Header = () => {
- const dataInstitution = useContext(InstitutionContext);
- const [isAccountMenuOpen, setIsAccountMenuOpen] = useState(false);
- const handleAccountMenuToggle = () => {
- setIsAccountMenuOpen((prevState) => !prevState);
- };
- const { authenticatedUser, config } = useContext(AppContext);
- const usernameFirstLetter = authenticatedUser.username.charAt(0).toUpperCase();
+ const { authenticatedUser } = useContext(AppContext);
+ const userName = authenticatedUser.username;
+ const questionsLink = () => `${getConfig().HEADER_QUESTIONS_LINK}`;
return (