feat: changes footer and header

Pearson-Advance · Dec 19, 2023 · ee9bd7a · ee9bd7a
1 parent 66d3c2a
commit ee9bd7a
Show file tree

Hide file tree

Showing 19 changed files with 192 additions and 249 deletions.
diff --git a/public/images/logoPearson.png b/public/images/logoPearson.png
diff --git a/public/index.html b/public/index.html
@@ -5,6 +5,7 @@
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+      <link rel="stylesheet" href=https://kit.fontawesome.com/d7e21cf75e.css crossorigin="anonymous">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/colors.scss b/src/assets/colors.scss
@@ -4,12 +4,16 @@ $color-black: #020917;
 $hyperlink-color: #17897c;
 $color-white: #fefefe;
 $color-gray: #60646d;
+$gray-60: #808080;
 $gradient-gray: rgba(247, 249, 253, 0.1);
 $color-active-button: #989ba3;
-$bg-main-color: white;
+$bg-main-color: #f3f3f3;
 $gray-light: #dfe1e1;
 $color-pink: #ffd0d7;
 $color-green: #c4eacd;
 $color-yellow: #f2f4be;
 $color-purple: #e4b8d6;
 $black-80: #333;
+$primary: #007394;
+$primary-dark: #003057;
+$blue-20: #e4faff;
diff --git a/src/assets/global.scss b/src/assets/global.scss
@@ -1,17 +1,24 @@
+@import "assets/colors.scss";
+
 .page-content-container {
-    border: 1px solid #dfe1e1;
-    border-radius: 0.375rem;
-    padding: 20px 0;
-    box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.16);
+  border: 1px solid #dfe1e1;
+  border-radius: 0.375rem;
+  padding: 20px 0;
+  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.16);
+  background-color: $color-white;
 }
 
 .filter-container > div {
-    border: 1px solid #dfe1e1;
-    border-radius: 0.375rem;
-    padding: 1rem;
+  border: 1px solid #dfe1e1;
+  border-radius: 0.375rem;
+  padding: 1rem;
 }
 
 .pagination-table .pagination {
-    justify-content: flex-end;
-    padding-right: 25px;
+  justify-content: flex-end;
+  padding-right: 25px;
+}
+
+.title-page {
+  padding: 20px 0;
 }
diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx
@@ -67,7 +67,7 @@ const CoursesPage = () => {
 
   return (
     <Container size="xl">
-      <h1>Courses</h1>
+      <h2 className="title-page">Courses</h2>
       <div className="page-content-container">
         <CoursesFilters
           dataCourses={state.data}

diff --git a/src/features/Instructors/InstructorsPage/index.jsx b/src/features/Instructors/InstructorsPage/index.jsx
@@ -61,7 +61,7 @@ const InstructorsPage = () => {
   return (
     <Container size="xl">
       <div className="d-flex justify-content-between align-items-center">
-        <h1>Instructors</h1>
+        <h2 className="title-page">Instructors</h2>
         <AddInstructors />
       </div>
       <div className="page-content-container">

diff --git a/src/features/Main/Footer/_test_/index.test.jsx b/src/features/Main/Footer/_test_/index.test.jsx
@@ -18,7 +18,7 @@ describe('Footer Component', () => {
 
     await waitFor(() => {
       const linkElements = screen.getAllByRole('link');
-      expect(linkElements).toHaveLength(2);
+      expect(linkElements).toHaveLength(4);
     });
   });
 });
diff --git a/src/features/Main/Footer/index.jsx b/src/features/Main/Footer/index.jsx
@@ -1,5 +1,7 @@
-import { getConfig } from '@edx/frontend-platform';
 import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCookieBite, faEarthAmericas } from '@fortawesome/free-solid-svg-icons';
 import './index.scss';
 
 export const Footer = () => {
@@ -9,17 +11,34 @@ export const Footer = () => {
   return (
     <footer>
       <ul className="footer-links">
-        <li>
+        <li className="footer-item">
+          <a href={termsOfServiceLink()}>
+            Terms
+          </a>
+        </li>
+        <li className="footer-item">
           <a href={privacyPolicyLink()}>
-            Privacy Policy
+            Privacy
+          </a>
+        </li>
+        <li className="footer-item">
+          <span className="icon">
+            <FontAwesomeIcon icon={faEarthAmericas} />
+          </span>
+          <a href={termsOfServiceLink()}>
+            English - US
           </a>
         </li>
-        <li>
+        <li className="footer-item">
+          <span className="icon">
+            <FontAwesomeIcon icon={faCookieBite} />
+          </span>
           <a href={termsOfServiceLink()}>
-            Terms of Service
+            Cookie preferences
           </a>
         </li>
       </ul>
+      <p className="footer-copyright">Copyright 2023 Pearson Education Inc. or its affiliate(s). All rights reserved.</p>
     </footer>
   );
 };
diff --git a/src/features/Main/Footer/index.scss b/src/features/Main/Footer/index.scss
@@ -1,34 +1,47 @@
 @import "assets/colors.scss";
 
 footer {
-  padding: 46px 24px 136px;
+  padding: 30px 24px;
   display: block;
 
   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
@@ -1,7 +1,6 @@
 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';
 
@@ -20,17 +19,13 @@ describe('Header', () => {
     await act(async () => {
       const renderResult = render(
         <AppContext.Provider value={{ authenticatedUser, config }}>
-          <InstitutionContext.Provider value={[{ id: 1, name: 'Institution Name' }]}>
-            <Header />
-          </InstitutionContext.Provider>
+          <Header />
         </AppContext.Provider>,
       );
 
       getByText = renderResult.getByText;
     });
-
-    expect(getByText('Institution Name')).toBeInTheDocument();
-    expect(getByText('U')).toBeInTheDocument();
+    expect(getByText('User')).toBeInTheDocument();
   });
 
   it('renders header correctly', () => {
@@ -40,11 +35,11 @@ describe('Header', () => {
       </AppContext.Provider>,
     );
 
-    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
@@ -1,60 +1,46 @@
-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 { faEarthAmericas } from '@fortawesome/free-solid-svg-icons';
+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 userName = authenticatedUser.username;
 
   return (
     <header className="institution-header py-4 px-3">
-      <div className="institution-name">
-        {dataInstitution.length > 1 ? (
-          <h3>Global Admin</h3>
-        ) : (
-          <h3>{dataInstitution.length === 1 ? dataInstitution[0].name : 'No Institution Found'}</h3>
-        )}
+      <div className="header-left d-flex">
+        <a href={`${config.LMS_BASE_URL}`}>
+          <img src="/images/logoPearson.png" alt="icon" />
+        </a>
+        <h3 className="platform-name">CertPREP Training Center Dashboard </h3>
       </div>
-      <div className="actions">
-        <div className="account-menu-container">
-          <button type="button" className="button-unstyled" aria-expanded={isAccountMenuOpen} onClick={handleAccountMenuToggle}>
-            <span className="avatar">{usernameFirstLetter}</span>
-            <span className="icon-18">
-              <FontAwesomeIcon icon={faCaretDown} />
-            </span>
-          </button>
-          {isAccountMenuOpen && (
-            <div className="account-menu">
-              <ul>
-                <li>
-                  <a
-                    className="nav-link"
-                    href={`${config.ACCOUNT_PROFILE_URL}/${authenticatedUser.username}`}
-                  >
-                    Profile
-                  </a>
-                </li>
-                <li>
-                  <a
-                    className="nav-link"
-                    href={`${getConfig().LMS_BASE_URL}/logout`}
-                  >
-                    Log Out
-                  </a>
-                </li>
-              </ul>
-            </div>
-          )}
-        </div>
+      <div className="header-rigth d-flex align-items-center">
+        <a href="/">
+          <i className="fa-regular fa-circle-question icon" />
+        </a>
+        <a href="/">
+          <span className="icon">
+            <FontAwesomeIcon icon={faEarthAmericas} />
+          </span>
+        </a>
+        <Dropdown className="dropdown-user">
+          <Dropdown.Toggle variant="success" id="dropdown-basic-1">
+            <i className="fa-regular fa-user icon" />
+            {userName}
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item
+              href={`${config.ACCOUNT_PROFILE_URL}/${authenticatedUser.username}`}
+            >
+              Profile
+            </Dropdown.Item>
+            <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/logout`}>Log Out</Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     </header>
   );