fix: fixes for pages and footer

Pearson-Advance · Dec 22, 2023 · 25957e3 · 25957e3
1 parent ee9bd7a
commit 25957e3
Show file tree

Hide file tree

Showing 16 changed files with 172 additions and 159 deletions.
diff --git 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
@@ -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/CoursesFilters/index.jsx b/src/features/Courses/CoursesFilters/index.jsx
@@ -44,7 +44,7 @@ const CoursesFilters = ({
 
   return (
     <div className="filter-container justify-content-center row">
-      <div className="col-11">
+      <div className="col-11 px-0">
         <h3>Find  a course</h3>
         <Form className="row justify-content-center" onSubmit={handleCoursesFilter}>
           <Form.Row className="col-12">
@@ -58,7 +58,7 @@ const CoursesFilters = ({
                 value={courseSelected}
               />
             </Form.Group>
-            <div className="d-flex col-3 justify-content-end mr-3 align-items-start">
+            <div className="d-flex col-3 justify-content-end align-items-start">
               <Button onClick={handleCleanFilters} variant="tertiary" text className="mr-2">Reset</Button>
               <Button type="submit">Apply</Button>
             </div>

diff --git a/src/features/Courses/CoursesPage/index.jsx b/src/features/Courses/CoursesPage/index.jsx
@@ -66,7 +66,7 @@ const CoursesPage = () => {
   };
 
   return (
-    <Container size="xl">
+    <Container size="xl" className="px-4">
       <h2 className="title-page">Courses</h2>
       <div className="page-content-container">
         <CoursesFilters

diff --git a/src/features/Instructors/InstructorsFilters/index.jsx b/src/features/Instructors/InstructorsFilters/index.jsx
@@ -90,52 +90,53 @@ const InstructorsFilters = ({ fetchData, resetPagination, setFilters }) => {
 
   return (
     <div className="filter-container justify-content-center row">
-      <div className="col-11">
+      <div className="col-11 px-0">
         <h3>Search</h3>
-        <Form className="row justify-content-center" onSubmit={handleInstructorsFilter}>
-          <Form.Row className="col-12">
-            <Form.Group as={Col}>
-              <Form.Control
-                type="text"
-                floatingLabel="Instructor Name"
-                name="instructor_name"
-                placeholder="Enter Instructor Name"
-                onChange={(e) => setInstructorName(e.target.value)}
-                value={instructorName}
-              />
-            </Form.Group>
-            <Form.Group as={Col}>
-              <Form.Control
-                type="email"
-                floatingLabel="Instructor Email"
-                name="instructor_email"
-                placeholder="Enter Instructor Email"
-                onChange={(e) => setInstructorEmail(e.target.value)}
-                value={instructorEmail}
-              />
-            </Form.Group>
-          </Form.Row>
-          <div className="col-12 px-1">
-            <Form.Row className="col-4">
+        <div className="filters">
+          <Form className="row justify-content-center" onSubmit={handleInstructorsFilter}>
+            <Form.Row className="col-12">
               <Form.Group as={Col}>
-                <Select
-                  placeholder="Course"
-                  name="course_name"
-                  className="mr-2"
-                  options={courseOptions}
-                  onChange={option => setCourseSelected(option)}
-                  value={courseSelected}
+                <Form.Control
+                  type="text"
+                  floatingLabel="Instructor Name"
+                  name="instructor_name"
+                  placeholder="Enter Instructor Name"
+                  onChange={(e) => setInstructorName(e.target.value)}
+                  value={instructorName}
+                />
+              </Form.Group>
+              <Form.Group as={Col}>
+                <Form.Control
+                  type="email"
+                  floatingLabel="Instructor Email"
+                  name="instructor_email"
+                  placeholder="Enter Instructor Email"
+                  onChange={(e) => setInstructorEmail(e.target.value)}
+                  value={instructorEmail}
                 />
               </Form.Group>
             </Form.Row>
-          </div>
-          <div className="d-flex col-12 justify-content-end mr-3">
-            <Button onClick={handleCleanFilters} variant="tertiary" text className="mr-2">Reset</Button>
-            <Button type="submit">Apply</Button>
-          </div>
-        </Form>
+            <div className="col-12 px-1">
+              <Form.Row className="col-4">
+                <Form.Group as={Col}>
+                  <Select
+                    placeholder="Course"
+                    name="course_name"
+                    className="mr-2"
+                    options={courseOptions}
+                    onChange={option => setCourseSelected(option)}
+                    value={courseSelected}
+                  />
+                </Form.Group>
+              </Form.Row>
+            </div>
+            <div className="d-flex col-12 justify-content-end mr-3">
+              <Button onClick={handleCleanFilters} variant="tertiary" text className="mr-2">Reset</Button>
+              <Button type="submit">Apply</Button>
+            </div>
+          </Form>
+        </div>
       </div>
-
     </div>
   );
 };

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

diff --git 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 (
     <footer>
@@ -25,20 +28,20 @@ export const Footer = () => {
           <span className="icon">
             <FontAwesomeIcon icon={faEarthAmericas} />
           </span>
-          <a href={termsOfServiceLink()}>
+          <a href={englishLink()}>
             English - US
           </a>
         </li>
         <li className="footer-item">
           <span className="icon">
             <FontAwesomeIcon icon={faCookieBite} />
           </span>
-          <a href={termsOfServiceLink()}>
+          <a href={cookiesLink()}>
             Cookie preferences
           </a>
         </li>
       </ul>
-      <p className="footer-copyright">Copyright 2023 Pearson Education Inc. or its affiliate(s). All rights reserved.</p>
+      <p className="footer-copyright">Copyright {currentYear} 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,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;

diff --git 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
@@ -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 (
     <header className="institution-header py-4 px-3">
       <div className="header-left d-flex">
-        <a href={`${config.LMS_BASE_URL}`}>
+        <a href={`${getConfig().LMS_BASE_URL}`}>
           <img src="/images/logoPearson.png" alt="icon" />
         </a>
-        <h3 className="platform-name">CertPREP Training Center Dashboard </h3>
+        <h3 className="platform-name">CertPREP Training Center Dashboard</h3>
       </div>
       <div className="header-rigth d-flex align-items-center">
-        <a href="/">
+        <a href={questionsLink()}>
           <i className="fa-regular fa-circle-question icon" />
         </a>
-        <a href="/">
+        <a href={globalLink()}>
           <span className="icon">
             <FontAwesomeIcon icon={faEarthAmericas} />
           </span>
@@ -34,7 +36,7 @@ export const Header = () => {
           </Dropdown.Toggle>
           <Dropdown.Menu>
             <Dropdown.Item
-              href={`${config.ACCOUNT_PROFILE_URL}/${authenticatedUser.username}`}
+              href={`${getConfig().ACCOUNT_PROFILE_URL}/${authenticatedUser.username}`}
             >
               Profile
             </Dropdown.Item>

diff --git 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
@@ -50,8 +50,7 @@ const Main = () => {
         <div className="pageWrapper">
           <Sidebar />
           <main>
-            <Container size="xl">
-
+            <Container size="xl" className="px-0 container-pages">
               <Switch>
                 <Route path="/students" exact component={StudentsPage} />
               </Switch>

diff --git 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 {