diff --git a/public/images/logoPearson.png b/public/images/logoPearson.png new file mode 100644 index 00000000..a42cf811 Binary files /dev/null and b/public/images/logoPearson.png differ diff --git a/public/index.html b/public/index.html index b96a7093..f4222a62 100644 --- a/public/index.html +++ b/public/index.html @@ -5,6 +5,7 @@ +
diff --git a/src/assets/colors.scss b/src/assets/colors.scss index 68cd8205..ae95898b 100644 --- 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 index 8b575af5..2177a3b8 100644 --- 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 index fe4b5d85..acd79ff9 100644 --- a/src/features/Courses/CoursesPage/index.jsx +++ b/src/features/Courses/CoursesPage/index.jsx @@ -67,7 +67,7 @@ const CoursesPage = () => { return ( -

Courses

+

Courses

{ return (
-

Instructors

+

Instructors

diff --git a/src/features/Main/Footer/_test_/index.test.jsx b/src/features/Main/Footer/_test_/index.test.jsx index cee4d62a..a729d3a6 100644 --- 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 index f8b8609a..9fd29411 100644 --- 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 ( ); }; diff --git a/src/features/Main/Footer/index.scss b/src/features/Main/Footer/index.scss index 19d7a47a..8e820a7a 100644 --- 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 index f2fdab1a..f855dbad 100644 --- 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( - -
- +
, ); 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', () => { , ); - 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..7c6d7bef 100644 --- 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 (
-
- {dataInstitution.length > 1 ? ( -

Global Admin

- ) : ( -

{dataInstitution.length === 1 ? dataInstitution[0].name : 'No Institution Found'}

- )} +
+ + icon + +

CertPREP Training Center Dashboard

-
-
- - {isAccountMenuOpen && ( - - )} -
+
+ + + + + + + + + + + + {userName} + + + + Profile + + Log Out + +
); diff --git a/src/features/Main/Header/index.scss b/src/features/Main/Header/index.scss index da188340..35e0ef8d 100644 --- a/src/features/Main/Header/index.scss +++ b/src/features/Main/Header/index.scss @@ -14,92 +14,59 @@ header.institution-header { justify-content: space-between; align-items: center; display: flex; + background-color: $primary-dark; .actions { align-items: center; display: flex; } -} - -.account-menu-container { - position: relative; - z-index: 11; - .button-unstyled { - padding-right: 18px; - position: relative; + .platform-name { + color: $color-white; + margin: 0; } - .avatar { - border: 2px solid $color-black; - border-radius: 100px; - display: block; - font-weight: 700; - height: 36px; - line-height: 36px; - overflow: hidden; - padding-top: 0; - width: 36px; - - img { - height: 110%; - width: auto; - } + .header-left img { + max-width: 30px; + margin-right: 20px; } - .account-menu { - background: $color-white; - border-radius: 5px; - box-shadow: $account-menu-box-shadow; - display: block; - padding: 10px; - position: absolute; - right: -13px; - text-align: right; - top: 50px; - width: 200px; + .header-rigth { + color: $color-white; - ul { - list-style: none; - margin: 0; - padding: 0; - - li { - font-size: 1rem; - padding: 8px 12px; - text-align: left; - - a { - color: $hyperlink-color; - text-decoration: underline; - } - } + .icon { + margin-right: 30px; + color: $color-white; } + } - a { - display: block; + .dropdown-user .dropdown-toggle, + .dropdown-user .dropdown-toggle:focus, + .dropdown-user .dropdown-toggle:focus-visible, + .dropdown-user .dropdown-toggle:active, + .dropdown-user .dropdown-toggle.btn-success:focus::before { + background: transparent; + border: none; + outline: none; + padding-left: 0; + } - &:hover { - text-decoration: none; - } - } + .dropdown-user .dropdown-toggle .icon { + margin-right: 10px; } - .icon-18 { - svg { - fill: currentColor; - } + .dropdown-menu { + min-width: 160px; - color: $color-black; - position: absolute; - right: 0; - top: 4px; - } + .dropdown-item { + color: $color-black; + text-decoration: none; - .button-unstyled[aria-expanded="true"] { - .icon-18 { - -webkit-transform: rotate(180deg); - transform: rotate(180deg); + &:hover, + &:active, + &:focus { + background-color: $blue-20; + } } } } @@ -111,18 +78,6 @@ header.institution-header { gap: 10px; } -.button-unstyled { - background-color: initial; - border: none; - color: inherit; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - margin: 0; - padding: 0; - padding-right: 0px; -} - a { &:hover { text-decoration: none; diff --git a/src/features/Main/Sidebar/index.jsx b/src/features/Main/Sidebar/index.jsx index a5bfbc82..fcab71cc 100644 --- a/src/features/Main/Sidebar/index.jsx +++ b/src/features/Main/Sidebar/index.jsx @@ -1,9 +1,5 @@ -import { AppContext } from '@edx/frontend-platform/react'; +import React, { useState } from 'react'; import { useHistory } from 'react-router-dom'; -import React, { useContext, useState } from 'react'; -import { getConfig } from '@edx/frontend-platform'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { faUsers, faUser, faBook } from '@fortawesome/free-solid-svg-icons'; import './index.scss'; export const Sidebar = () => { @@ -15,53 +11,41 @@ export const Sidebar = () => { history.push(`/${tabName}`); }; - const { config } = useContext(AppContext); - return (
-
- - icon - -