PADV-903 feat: changes footer and header (#23)

* feat: changes footer and header
Pearson-Advance · Dec 22, 2023 · b195cf5 · b195cf5
1 parent d381631
commit b195cf5
Show file tree

Hide file tree

Showing 22 changed files with 321 additions and 395 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
@@ -1,15 +1,18 @@
 // Color variables
-
+$primary: #007394;
+$primary-dark: #003057;
 $color-black: #020917;
-$hyperlink-color: #17897c;
+$black-80: #333;
 $color-white: #fefefe;
 $color-gray: #60646d;
-$gradient-gray: rgba(247, 249, 253, 0.1);
-$color-active-button: #989ba3;
-$bg-main-color: white;
-$gray-light: #dfe1e1;
+$gray-60: #808080;
+$gray-20: #dfe1e1;
 $color-pink: #ffecf0;
 $color-green: #e7f7eb;
 $color-yellow: #fafbe5;
 $color-purple: #f4e3ee;
-$black-80: #333;
+$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,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 $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;
-    border-radius: 0.375rem;
-    padding: 1rem;
+.filter-container .filters {
+  border: 1px solid $gray-20;
+  border-radius: 0.375rem;
+  padding: 1.5rem 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/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,8 +66,8 @@ const CoursesPage = () => {
   };
 
   return (
-    <Container size="xl">
-      <h1>Courses</h1>
+    <Container size="xl" className="px-4">
+      <h2 className="title-page">Courses</h2>
       <div className="page-content-container">
         <CoursesFilters
           dataCourses={state.data}

diff --git a/src/features/Dashboard/DashboardPage/index.jsx b/src/features/Dashboard/DashboardPage/index.jsx
@@ -7,8 +7,10 @@ const DashboardPage = () => {
   const dataInstitution = useContext(InstitutionContext);
 
   return (
-    <Container size="xl">
-      <h2 className="title-page">{dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}</h2>
+    <Container size="xl" className="px-4">
+      <h2 className="title-page">
+        {dataInstitution.length === 1 ? `Welcome to ${dataInstitution[0].name}` : 'Select an institution'}
+      </h2>
       <StudentsMetrics />
     </Container>
   );

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,9 +59,9 @@ const InstructorsPage = () => {
   };
 
   return (
-    <Container size="xl">
+    <Container size="xl" className="px-4">
       <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/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 (
     <footer>
       <ul className="footer-links">
-        <li>
-          <a href={privacyPolicyLink()}>
-            Privacy Policy
+        <li className="footer-item">
+          <a href={termsOfServiceLink()}>
+            Terms
           </a>
         </li>
-        <li>
-          <a href={termsOfServiceLink()}>
-            Terms of Service
+        <li className="footer-item">
+          <a href={privacyPolicyLink()}>
+            Privacy
           </a>
         </li>
       </ul>
+      <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,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
@@ -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(
         <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 +43,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', () => {