ENH:pulls main and changes some designs

incubyte · Aug 8, 2023 · 9600938 · 9600938
1 parent d444557
commit 9600938
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 47 deletions.
diff --git a/admin/src/components/utilities/Footer.tsx b/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"

diff --git a/admin/src/css/utilities/Footer.css b/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 {

diff --git a/frontend/src/assets/HomePage.png b/frontend/src/assets/HomePage.png
diff --git a/frontend/src/components/home/LeaderBoard.tsx b/frontend/src/components/home/LeaderBoard.tsx
@@ -6,6 +6,7 @@ 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";
 
 const LeaderBoard = () => {
   const [activeCourses, setActiveCourses] = useState<courseType[]>([]);
@@ -165,48 +166,57 @@ const LeaderBoard = () => {
         <h1 data-testid="leaderBoardTitle" className="courseHeading">
           Leader Board
         </h1>
-        <div className="courseContainer" data-testid="container2" role="leaderBoard">
-          <table data-testid="container2 table" className="courseTable">
-            <thead className="courseTableHead" data-testid="tableHeading">
-              <tr>
-                <th scope="col" className="courseTableHeadCols">
-                  SrNo.
-                </th>
-                <th scope="col" className="courseTableHeadCols">
-                  Email
-                </th>
-                <th scope="col" className="courseTableHeadCols">
-                  Role
-                </th>
-                <th scope="col" className="courseTableHeadCols">
-                  Credits
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {leaderBoardUsers?.map((leaderBoardUser, index) => {
-                return (
-                  <tr
-                    key={index}
-                    className={`${index % 2 === 1 ? "bg-gray-100" : "bg-white"
+        <div
+          className="courseContainer"
+          data-testid="container2"
+          role="leaderBoard"
+        >
+          {isLoading ? (
+            <Skeleton height={360} />
+          ) : (
+            <table data-testid="container2 table" className="courseTable">
+              <thead className="courseTableHead" data-testid="tableHeading">
+                <tr>
+                  <th scope="col" className="courseTableHeadCols">
+                    SrNo.
+                  </th>
+                  <th scope="col" className="courseTableHeadCols">
+                    Email
+                  </th>
+                  <th scope="col" className="courseTableHeadCols">
+                    Role
+                  </th>
+                  <th scope="col" className="courseTableHeadCols">
+                    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="courseTableRows">{index + 1}</td>
-                    <td className="courseTableRows">
-                      {leaderBoardUser?.user?.email}
-                    </td>
-                    <td className="courseTableRows">
-                      {leaderBoardUser?.user?.role}
-                    </td>
-                    <td className="courseTableRows">
-                      {leaderBoardUser?.CompletedCourseCount * 10}
-                    </td>
-                  </tr>
-                );
-              })}
-            </tbody>
-          </table>
+                      role="row"
+                    >
+                      <td className="courseTableRows">{index + 1}</td>
+                      <td className="courseTableRows">
+                        {leaderBoardUser?.user?.email}
+                      </td>
+                      <td className="courseTableRows">
+                        {leaderBoardUser?.user?.role}
+                      </td>
+                      <td className="courseTableRows">
+                        {leaderBoardUser?.CompletedCourseCount * 10}
+                      </td>
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          )}
         </div>
         <br />
         <hr className="mt-10" />

diff --git a/frontend/src/components/utilities/Footer.tsx b/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"

diff --git a/frontend/src/css/utilities/Footer.css b/frontend/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 {