button styling

Signed-off-by: mannika763 <[email protected]>
layer5io · Jul 26, 2024 · 48881ab · 48881ab
1 parent 4e2dc76
commit 48881ab
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/src/components/SistentNavigation/pagination.js b/src/components/SistentNavigation/pagination.js
@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from "react";
-
+import { HiOutlineChevronLeft } from "@react-icons/all-files/hi/HiOutlineChevronLeft";
+import { HiOutlineChevronRight } from "@react-icons/all-files/hi/HiOutlineChevronRight";
 import { content } from "./content";
 import Button from "../../reusecore/Button";
 import PaginationWrapper from "./pagination.style";
+import { colors } from "@mui/material";
 
 const SistentPagination = () => {
   const [currentPage, setCurrentPage] = useState(0);
@@ -18,16 +20,16 @@ const SistentPagination = () => {
       {currentPage > 0 ? (
         <Button secondary url={content[currentPage - 1]?.link}>
           <div className="btn-content">
-          <div className="previous-text">  Previous</div>
-         <div className="where-to-go-prev">&larr;{content[currentPage - 1]?.text}</div></div>
+          <div className="previous-text">Previous</div>
+         <div className="where-to-go-prev"><HiOutlineChevronLeft className="left-icon"/>{content[currentPage - 1]?.text}</div></div>
         </Button>
       ) : null}
 
       {currentPage < content.length - 1 ? (
         <Button primary url={content[currentPage + 1]?.link}>
           <div className="btn-content">
-          <div className="next-text"> Next</div>
-         <div className="where-to-go">{content[currentPage + 1]?.text} &rarr;</div></div>
+          <div className="next-text">Next</div>
+         <div className="where-to-go">{content[currentPage + 1]?.text} <HiOutlineChevronRight className="right-icon"/></div></div>
         </Button>
       ) : null}
     </PaginationWrapper>

diff --git a/src/components/SistentNavigation/pagination.style.js b/src/components/SistentNavigation/pagination.style.js
@@ -7,29 +7,42 @@ const TocPaginationWrapper = styled.div`
   margin: 3rem 2rem 4rem 2rem;
 .btn-content{
 display: grid;
-width: 100%;
+padding: 6px 16px;
+gap: 5px;
+}
+
+.right-icon .fsCoJX path{
+color: black;
+}
+.left-icon .fsCoJX path {
+ color: white
 }
 .previous-text{
 display: flex;
-justify-content: start;
 color: white;
-font-size: 14px;
+margin: auto;
+
 }
 .next-text{
 display: flex;
-justify-content: end;
-font-size: 14px;
+margin: auto;
 }
 .where-to-go-prev{
 display: flex;
-justify-content: start;
+font-family: "Open Sans", sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
 color: white;
 }
 .where-to-go{
 display: flex;
-justify-content: end;
+font-family: "Open Sans", sans-serif;
+    color: #000000;
+    font-size: 1rem;
+    font-weight: 500;
 }
 
+
   @media screen and (max-width: 540px) {
     margin: 0 0 2rem 0;
     flex-flow: row wrap;