Fix lp 62 revamp leaderboard

admin/src/components/utilities/Footer.tsx

@@ -6,13 +6,13 @@ const Footer = () => {
       <footer data-testid="footer" className="mt-auto" role="footer">
         <div className="FooterContainer">
           <div className="FooterContent">
-            <span className="FooterContentText">
+            <div className="FooterContentText">
               © 2023{" "}
               <a href="https://www.incubyte.co/" data-testid="footerLink">
                 Incubyte
               </a>
               . All Rights Reserved.
-            </span>
+            </div>
             <div className="FooterIconLinkSection">
               <a
                 href="https://www.linkedin.com/company/incubyte"

admin/src/css/utilities/Footer.css

@@ -7,7 +7,7 @@
 }
 
 .FooterContentText {
-  @apply text-sm text-gray-500 sm:text-center;
+  @apply text-sm text-gray-500 xsm:text-center sm:text-center; 
 }
 
 .FooterLink {

frontend/src/components/courses/CoursePageIndex.test.tsx

@@ -16,8 +16,6 @@ describe("Welcome Image", () => {
     );
 
     const indexImage = screen.getByRole("coursePageIndexImage");
-    expect(indexImage).toHaveAttribute("src", Symbol);
-    expect(indexImage).toHaveAttribute("alt", "Course Page Image");
     expect(indexImage).toBeInTheDocument();
   });
 });

frontend/src/components/courses/CoursePageIndex.tsx

@@ -4,16 +4,23 @@ import "../../css/courses/CoursePageIndex.css";
 const CoursePageIndex = () => {
   return (
     <>
-      <img
-        className="coursePageIndexImage"
-        style={{ width: "100%" }}
-        src={Symbol}
-        alt="Course Page Image"
-        data-testid="indexPageImage"
+      <div
+        className="ImageContainer"
         role="coursePageIndexImage"
-      />
+      >
+        <div className="ContentContainer">
+          <h2 className="ContentHeading">
+            Lets Learn Something New, Today !!!
+          </h2>
+
+          <p className="ContentParagraph">
+            If you can learn 1% better each day for one year, you will end up 37
+            times better by the time you are done.
+          </p>
+        </div>
+      </div>
     </>
   );
 };
 
-export default CoursePageIndex;
+export default CoursePageIndex;

frontend/src/components/home/LeaderBoard.test.tsx

@@ -162,26 +162,6 @@ describe("should render the leaderBoard component", () => {
     });
   });
 
-  test("should render the container1 on the Leader Board page", async () => {
-    render(
-      <BrowserRouter>
-        <LeaderBoard />
-      </BrowserRouter>
-    );
-    await waitFor(() => {
-      const leaderBoardContainer1 = screen.getByTestId("container1");
-      const userImage = screen.getByTestId("container1 Image");
-      const userInfo = screen.getByTestId("container1 user Info");
-      expect(leaderBoardContainer1).toBeInTheDocument();
-      expect(userImage).toHaveAttribute("alt", "user image");
-      expect(userImage).toBeInTheDocument();
-      expect(userInfo).toBeInTheDocument();
-      expect(userInfo).toHaveTextContent("Email");
-      expect(userInfo).toHaveTextContent("Role");
-      expect(userInfo).toHaveTextContent("Credits");
-    });
-  });
-
   test("should render the container2 on the Leader Board page", async () => {
     render(
       <BrowserRouter>
@@ -194,7 +174,6 @@ describe("should render the leaderBoard component", () => {
       expect(leaderBoardContainer2).toBeInTheDocument();
       expect(table).toBeInTheDocument();
       expect(table).toHaveTextContent("Email");
-      expect(table).toHaveTextContent("Rank");
       expect(table).toHaveTextContent("Role");
       expect(table).toHaveTextContent("Credits");
     });

frontend/src/components/home/LeaderBoard.tsx

@@ -1,25 +1,22 @@
-import { useIsAuthenticated } from "@azure/msal-react";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { ToastContainer, toast } from "react-toastify";
 import "../../css/home/LeaderBoard.css";
 import { courseType } from "../courses/Courses";
 import { userType } from "../user/user";
 import Carousel from "../utilities/Carousel";
 import { LeaderBoardType } from "./LeaderBoardType";
+import HomePage from "../../assets/HomePage.png";
 import Skeleton from "react-loading-skeleton";
-import "react-loading-skeleton/dist/skeleton.css";
 
 const LeaderBoard = () => {
   const [activeCourses, setActiveCourses] = useState<courseType[]>([]);
   const [completeCourses, setCompleteCourses] = useState<courseType[]>([]);
   const [leaderBoardUsers, setLeaderBoardUsers] = useState<LeaderBoardType[]>(
     []
   );
-  const isAuthenticated = useIsAuthenticated();
   const [currentUserCredit, setCurrentUserCredit] = useState<number>(0);
   const [currentUser, setCurrentUser] = useState<userType>();
   const [isLoading, setIsLoading] = useState(true);
-
   const fetchCurrentUserCredit = async () => {
     const authToken = localStorage.getItem("authToken");
     try {
@@ -157,127 +154,91 @@ const LeaderBoard = () => {
 
   return (
     <>
-      <div className="LeaderBoardContainer " role="leaderBoard">
-        <div className="w-full text-center mb-8">
-          <h2
-            className="LeaderBoardTitleContainer"
-            data-testid="leaderBoardTitle"
-          >
-            Leader Board
-          </h2>
-        </div>
-        <div className="LeaderBoardContainers" data-testid="container1">
-          {isLoading ? (
-            <Skeleton className="lg:max-w-[580px] h-[450px]" />
-          ) : (
-            <>
-              <div className="LeaderBoardInnerContainer">
-                <div>
-                  <img
-                    className="LeaderBoardInnerFirstImageContainer"
-                    src={currentUser?.profilePhoto}
-                    alt="user image"
-                    data-testid="container1 Image"
-                  />
-                </div>
-                <div
-                  className="LeaderBoardUserInfoContainer"
-                  data-testid="container1 user Info"
-                >
-                  <div className="LeaderBoardUserInnerInfoContainer">
-                    <p className="LeaderBoardUserInnerInfo">
-                      Email: {currentUser?.email}
-                    </p>
-                    <p className="LeaderBoardUserInnerInfo">
-                      Credits: {currentUserCredit}
-                    </p>
-                    <p className="LeaderBoardUserInnerInfo">
-                      Role: {currentUser?.role}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </>
-          )}
+      <div className="leaderBoard">
+        <div className="HomePageImageBgSection">
+          <div className="HomePageQuateContainer">
+            <p className="HomePageQuate">
+              Learning is a never-ending journey, and the more you explore, the
+              more you discover.
+            </p>
+          </div>
         </div>
-        <div className="LeaderBoardContainers" data-testid="container2">
+        <h1 data-testid="leaderBoardTitle" className="LeaderBoardTableHeading">
+          Leader Board
+        </h1>
+        <div
+          className="LeaderBoardTableContainer"
+          data-testid="container2"
+          role="leaderBoard"
+        >
           {isLoading ? (
-            <Skeleton className="lg:max-w-[480px] h-[450px]" />
+            <Skeleton height={360} />
           ) : (
-            <>
-              <div className="LeaderBoardContainerTwoTableContainer">
-                <div className="LeaderBoardInnerContainerScrollbar">
-                  <table
-                    className="LeaderBoardContainerTwoTable"
-                    data-testid="container2 table"
-                  >
-                    <thead>
-                      <tr role="row">
-                        <th className="rounded-tl LeaderBoardContainerTwoTableBorder">
-                          Rank
-                        </th>
-                        <th className="LeaderBoardContainerTwoTableBorder">
-                          Email
-                        </th>
-                        <th className="LeaderBoardContainerTwoTableBorder">
-                          Role
-                        </th>
-                        <th className="LeaderBoardContainerTwoTableBorder">
-                          Credits
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      {leaderBoardUsers.map((leaderBoardUser, index) => {
-                        return (
-                          <React.Fragment key={index}>
-                            {
-                              <tr
-                                className={`${
-                                  index % 2 === 0 ? "bg-gray-100" : "bg-white"
-                                }`}
-                                role="row"
-                              >
-                                <td className="LeaderBoardContainerTwoTableBorder">
-                                  {index + 1}
-                                </td>
-                                <td className="LeaderBoardContainerTwoTableBorder">
-                                  {leaderBoardUser?.user?.email}
-                                </td>
-                                <td className="LeaderBoardContainerTwoTableBorder">
-                                  {leaderBoardUser?.user?.role}
-                                </td>
-                                <td className="LeaderBoardContainerTwoTableBorder">
-                                  {leaderBoardUser?.CompletedCourseCount * 10}
-                                </td>
-                              </tr>
-                            }
-                          </React.Fragment>
-                        );
-                      })}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </>
+            <table data-testid="container2 table" className="LeaderBoardTable">
+              <thead
+                className="LeaderBoardTableHead"
+                data-testid="tableHeading"
+              >
+                <tr>
+                  <th scope="col" className="LeaderBoardTableHeadCols">
+                    Sr No.
+                  </th>
+                  <th scope="col" className="LeaderBoardTableHeadCols">
+                    Email
+                  </th>
+                  <th scope="col" className="LeaderBoardTableHeadCols">
+                    Role
+                  </th>
+                  <th scope="col" className="LeaderBoardTableHeadCols">
+                    Credits
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {leaderBoardUsers?.map((leaderBoardUser, index) => {
+                  return (
+                    <tr
+                      key={index}
+                      className={`${
+                        index % 2 === 1 ? "bg-gray-100" : "bg-white"
+                      }`}
+                      role="row"
+                    >
+                      <td className="LeaderBoardTableRows">{index + 1}</td>
+                      <td className="LeaderBoardTableRows">
+                        {leaderBoardUser?.user?.email}
+                      </td>
+                      <td className="LeaderBoardTableRows">
+                        {leaderBoardUser?.user?.role}
+                      </td>
+                      <td className="LeaderBoardTableRows">
+                        {leaderBoardUser?.CompletedCourseCount * 10}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
           )}
         </div>
+        <br />
+        <hr className="mt-10" />
+        <Carousel
+          titleName="Active Courses"
+          contentId={"activeContent"}
+          courses={activeCourses}
+          isLoading={isLoading}
+        />
+        <hr className="mt-10" />
+        <Carousel
+          titleName="Completed Courses"
+          contentId={"completeContent"}
+          courses={completeCourses}
+          isLoading={isLoading}
+        />
+
+        <ToastContainer />
       </div>
-      <br />
-      <Carousel
-        titleName="Active Courses"
-        contentId={"activeContent"}
-        courses={activeCourses}
-        isLoading={isLoading}
-      />
-      <hr className="mt-10" />
-      <Carousel
-        titleName="Completed Courses"
-        contentId={"completeContent"}
-        courses={completeCourses}
-        isLoading={isLoading}
-      />
-      <ToastContainer />
     </>
   );
 };

frontend/src/components/utilities/Footer.tsx

@@ -6,13 +6,13 @@ const Footer = () => {
       <footer data-testid="footer" role="footer">
         <div className="FooterContainer">
           <div className="FooterContent">
-            <span className="FooterContentText">
+            <div className="FooterContentText">
               © 2023{" "}
               <a href="https://www.incubyte.co/" data-testid="footerLink">
                 Incubyte
               </a>
               . All Rights Reserved.
-            </span>
+            </div>
             <div className="FooterIconLinkSection">
               <a
                 href="https://www.linkedin.com/company/incubyte"

frontend/src/css/courseDetails/courseDetails.css

@@ -5,7 +5,7 @@
   @apply container grid justify-items-center content-center object-contain bg-slate-100 rounded-lg max-w-full;
 }
 .courseImage {
-  @apply rounded-full lg:h-40 md:h-36 sm:h-24 xsm:h-24 lg:w-40 md:w-36 sm:w-24 xsm:w-24 block object-cover;
+  @apply rounded-full lg:h-40 md:h-36 sm:h-24 xsm:h-24 lg:w-40 md:w-36 sm:w-24 xsm:w-24 block;
 }
 .courseImageDiv {
   @apply relative mt-5;
@@ -29,7 +29,7 @@
   @apply flex flex-col items-center gap-7 content-center;
 }
 .courseResources {
-  @apply container grid justify-items-center content-center relative lg:h-96 md:h-80 sm:h-72 h-60 sm:w-10/12 xsm:w-10/12 max-w-full overflow-hidden;
+  @apply container grid justify-items-center content-center mb-5 relative lg:h-96 md:h-80 sm:h-72 h-60 sm:w-10/12 xsm:w-10/12 max-w-full overflow-hidden;
 }
 .resourceFrame {
   @apply rounded-xl border-none absolute h-full max-w-full;

frontend/src/css/courses/CoursePageIndex.css

@@ -1,3 +1,15 @@
-.coursePageIndexImage{
-    @apply h-auto border-solid border-black
-}
+.ImageContainer {
+  @apply flex mx-3 sm:mx-10 my-1 sm:my-2 shadow-md rounded-lg bg-course-page bg-[length:100%_25vh] h-[25vh] lg:bg-[length:100%_50vh] md:bg-[length:100%_30vh] lg:h-[50vh] md:h-[30vh] justify-center;
+}
+
+.ContentContainer {
+  @apply flex flex-col justify-evenly items-center text-white text-center p-4;
+}
+
+.ContentHeading {
+  @apply text-sm xsm:text-xl sm:text-2xl md:text-3xl lg:text-4xl font-bold mt-4 mb-2;
+}
+
+.ContentParagraph {
+  @apply text-xs xsm:text-base sm:text-lg md:text-xl lg:text-2xl mb-4;
+}