diff --git a/src/assets/colors.scss b/src/assets/colors.scss index ae95898b..019b1d99 100644 --- a/src/assets/colors.scss +++ b/src/assets/colors.scss @@ -1,19 +1,18 @@ // Color variables - +$primary: #007394; +$primary-dark: #003057; $color-black: #020917; -$hyperlink-color: #17897c; +$black-80: #333; $color-white: #fefefe; $color-gray: #60646d; $gray-60: #808080; -$gradient-gray: rgba(247, 249, 253, 0.1); -$color-active-button: #989ba3; -$bg-main-color: #f3f3f3; -$gray-light: #dfe1e1; +$gray-20: #dfe1e1; $color-pink: #ffd0d7; $color-green: #c4eacd; $color-yellow: #f2f4be; $color-purple: #e4b8d6; -$black-80: #333; -$primary: #007394; -$primary-dark: #003057; $blue-20: #e4faff; + +$hyperlink-color: #17897c; +$color-active-button: #989ba3; +$bg-main-color: #f3f3f3; diff --git a/src/assets/global.scss b/src/assets/global.scss index 2177a3b8..872f2081 100644 --- a/src/assets/global.scss +++ b/src/assets/global.scss @@ -1,17 +1,17 @@ @import "assets/colors.scss"; .page-content-container { - border: 1px solid #dfe1e1; + border: 1px solid $gray-20; 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; +.filter-container .filters { + border: 1px solid $gray-20; border-radius: 0.375rem; - padding: 1rem; + padding: 1.5rem 1rem; } .pagination-table .pagination { diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx index acd79ff9..8b2fc65f 100644 --- a/src/features/Courses/CoursesPage/index.jsx +++ b/src/features/Courses/CoursesPage/index.jsx @@ -66,7 +66,7 @@ const CoursesPage = () => { }; return ( - +

Courses

{ return (
-
+

Search

-
- - - setInstructorName(e.target.value)} - value={instructorName} - /> - - - setInstructorEmail(e.target.value)} - value={instructorEmail} - /> - - -
- +
+ + - setCourseSelected(option)} + value={courseSelected} + /> + + +
+
+ + +
+ +
-
); }; diff --git a/src/features/Instructors/InstructorsPage/index.jsx b/src/features/Instructors/InstructorsPage/index.jsx index 113fb42c..ae7084dc 100644 --- a/src/features/Instructors/InstructorsPage/index.jsx +++ b/src/features/Instructors/InstructorsPage/index.jsx @@ -59,7 +59,7 @@ const InstructorsPage = () => { }; return ( - +

Instructors

diff --git a/src/features/Main/Footer/index.jsx b/src/features/Main/Footer/index.jsx index 9fd29411..b9718c1b 100644 --- a/src/features/Main/Footer/index.jsx +++ b/src/features/Main/Footer/index.jsx @@ -7,6 +7,9 @@ import './index.scss'; export const Footer = () => { const privacyPolicyLink = () => `${getConfig().FOOTER_PRIVACY_POLICY_LINK}`; const termsOfServiceLink = () => `${getConfig().FOOTER_TERMS_OF_SERVICE_LINK}`; + const cookiesLink = () => `${getConfig().FOOTER_COOKIES_LINK}`; + const englishLink = () => `${getConfig().FOOTER_ENGLISH_LINK}`; + const currentYear = new Date().getFullYear(); return (
@@ -25,7 +28,7 @@ export const Footer = () => { - + English - US @@ -33,12 +36,12 @@ export const Footer = () => { - + Cookie preferences -

Copyright 2023 Pearson Education Inc. or its affiliate(s). All rights reserved.

+

Copyright {currentYear} Pearson Education Inc. or its affiliate(s). All rights reserved.

); }; diff --git a/src/features/Main/Footer/index.scss b/src/features/Main/Footer/index.scss index 8e820a7a..5562b967 100644 --- a/src/features/Main/Footer/index.scss +++ b/src/features/Main/Footer/index.scss @@ -1,8 +1,10 @@ @import "assets/colors.scss"; footer { - padding: 30px 24px; + padding: 24px; display: block; + background-color: $color-white; + margin-top: 40px; ul.footer-links { display: flex; @@ -44,4 +46,4 @@ footer { color: $color-black; margin-top: 5px; } -} +} \ No newline at end of file diff --git a/src/features/Main/Header/_test_/index.test.jsx b/src/features/Main/Header/_test_/index.test.jsx index f855dbad..8cf2160e 100644 --- a/src/features/Main/Header/_test_/index.test.jsx +++ b/src/features/Main/Header/_test_/index.test.jsx @@ -4,6 +4,14 @@ import { AppContext } from '@edx/frontend-platform/react'; 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', diff --git a/src/features/Main/Header/index.jsx b/src/features/Main/Header/index.jsx index 7c6d7bef..ec547426 100644 --- a/src/features/Main/Header/index.jsx +++ b/src/features/Main/Header/index.jsx @@ -7,22 +7,24 @@ import { Dropdown } from '@edx/paragon'; import 'features/Main/Header/index.scss'; export const Header = () => { - const { authenticatedUser, config } = useContext(AppContext); + const { authenticatedUser } = useContext(AppContext); const userName = authenticatedUser.username; + const questionsLink = () => `${getConfig().HEADER_QUESTIONS_LINK}`; + const globalLink = () => `${getConfig().HEADER_GLOBAL_LINK}`; return (
- + icon -

CertPREP Training Center Dashboard

+

CertPREP Training Center Dashboard

- + - + @@ -34,7 +36,7 @@ export const Header = () => { Profile diff --git a/src/features/Main/Sidebar/index.scss b/src/features/Main/Sidebar/index.scss index f098e01c..f0b25a56 100644 --- a/src/features/Main/Sidebar/index.scss +++ b/src/features/Main/Sidebar/index.scss @@ -9,6 +9,7 @@ li { padding: 4px 0; } + .sidebar-item { align-items: center; color: $color-black; @@ -30,10 +31,3 @@ } } } - -.backbutton { - &:hover { - background-color: $gradient-gray; - box-sizing: border-box; - } -} diff --git a/src/features/Main/index.jsx b/src/features/Main/index.jsx index 6f0fc99c..bc7fb8d0 100644 --- a/src/features/Main/index.jsx +++ b/src/features/Main/index.jsx @@ -50,8 +50,7 @@ const Main = () => {
- - + diff --git a/src/features/Main/index.scss b/src/features/Main/index.scss index 7529f636..18c67ea6 100644 --- a/src/features/Main/index.scss +++ b/src/features/Main/index.scss @@ -35,11 +35,14 @@ input { } main { - background: $bg-main-color; border-top-left-radius: 24px; scrollbar-gutter: auto; z-index: 1; } + + .container-pages { + background-color: $bg-main-color; + } } header.vertical-nav { diff --git a/src/features/Students/StudentsFilters/index.jsx b/src/features/Students/StudentsFilters/index.jsx index fd9d0384..51208cc0 100644 --- a/src/features/Students/StudentsFilters/index.jsx +++ b/src/features/Students/StudentsFilters/index.jsx @@ -133,87 +133,89 @@ const StudentsFilters = ({ resetPagination, fetchData, setFilters }) => { return (
-
+

Search

-
- - - setStudentName(e.target.value)} - value={studentName} - /> - - - setStudentEmail(e.target.value)} - value={studentEmail} - /> - - - - - setClassSelected(option)} - value={classSelected} - /> - - - setExamSelected(option)} - value={examSelected} - /> - - -
- - -
-
+
+
+ + + setStudentName(e.target.value)} + value={studentName} + /> + + + setStudentEmail(e.target.value)} + value={studentEmail} + /> + + + + + setClassSelected(option)} + value={classSelected} + /> + + + setExamSelected(option)} + value={examSelected} + /> + + +
+ + +
+
+
); diff --git a/src/features/Students/StudentsMetrics/index.scss b/src/features/Students/StudentsMetrics/index.scss index 3c06bb60..e1789063 100644 --- a/src/features/Students/StudentsMetrics/index.scss +++ b/src/features/Students/StudentsMetrics/index.scss @@ -1,7 +1,7 @@ @import "assets/colors.scss"; .container-cards { - border: 1px solid $gray-light; + border: 1px solid $gray-20; padding: 2rem; border-radius: 0.375rem; margin-bottom: 2rem; diff --git a/src/features/Students/StudentsPage/index.jsx b/src/features/Students/StudentsPage/index.jsx index d50c61cd..37561f7f 100644 --- a/src/features/Students/StudentsPage/index.jsx +++ b/src/features/Students/StudentsPage/index.jsx @@ -59,7 +59,7 @@ const StudentsPage = () => { }; return ( - +

Students