table of content fix and next-prev button fix 2

Signed-off-by: Rajesh-Nagarajan-11 <rajeshnagarajan36@gmail.com>

Author: Rajesh-Nagarajan-11

src/sections/Community/Handbook/handbook-single/HandbookPagination.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { Link } from "gatsby";
-import { PaginationWrapper } from "../../../components/handbook-navigation/TocPagination.style";
+import TocPaginationWrapper from "../../../components/handbook-navigation/TocPagination.style";
 import Button from "../../../reusecore/Button";
 
 const HandbookPagination = ({ pages, currentSlug }) => {
@@ -9,22 +9,18 @@ const HandbookPagination = ({ pages, currentSlug }) => {
   const nextPage = currentIndex < pages.length - 1 ? pages[currentIndex + 1] : null;
 
   return (
-    <PaginationWrapper>
-      <div className="previous-page">
-        {prevPage && (
-          <Link to={prevPage.fields.slug}>
-            <Button $secondary title="Previous" />
-          </Link>
-        )}
-      </div>
-      <div className="next-page">
-        {nextPage && (
-          <Link to={nextPage.fields.slug}>
-            <Button $primary title="Next" />
-          </Link>
-        )}
-      </div>
-    </PaginationWrapper>
+    <TocPaginationWrapper>
+      {prevPage && (
+        <Button $secondary $url={prevPage.fields.slug}>
+          &larr; Previous
+        </Button>
+      )}
+      {nextPage && (
+        <Button $primary $url={nextPage.fields.slug}>
+          Next &rarr;
+        </Button>
+      )}
+    </TocPaginationWrapper>
   );
 };
 

src/sections/Community/Handbook/handbook-single/HandbookTOC.js

@@ -1,27 +1,33 @@
 import React from "react";
 import { Link } from "gatsby";
-import { TocWrapper } from "../../../components/handbook-navigation/toc.style";
+import TOCWrapper from "../../../components/handbook-navigation/toc.style";
 import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
 
 const HandbookTOC = ({ pages, currentSlug }) => {
   return (
-    <TocWrapper>
-      <div className="toc-list go-top">
-        <h3>
+    <TOCWrapper>
+      <div className="go-back">
+        <Link to="/community/handbook">
           <HiOutlineChevronLeft />
-          Table Of Contents
-        </h3>
-        <ul>
+          <h4>Table of Contents</h4>
+        </Link>
+      </div>
+      <div className="toc-list">
+        <ul className="toc-ul">
           {pages.map((page, index) => (
-            <li key={index} className={currentSlug === page.fields.slug ? "active" : ""}>
-              <Link to={page.fields.slug}>
+            <li key={index}>
+              <Link
+                to={page.fields.slug}
+                className="toc-sub-heading toc-sub-inline"
+                activeClassName="active"
+              >
                 {page.frontmatter.title}
               </Link>
             </li>
           ))}
         </ul>
       </div>
-    </TocWrapper>
+    </TOCWrapper>
   );
 };