Merge pull request #173 from VasylievYurii/ExercisesNewChangings

added active indicators when the page is active and fixed the styles according to the layout
VasylievYurii · Nov 22, 2023 · 28c162c · 28c162c
2 parents 01b2d59 + ff1a824
commit 28c162c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 7 deletions.
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
@@ -1,6 +1,6 @@
 import { SpanPagination, WrapperPaginate } from './Pagination.styled';
 
-const Pagination = ({ exePerPage, totalExe, paginate }) => {
+const Pagination = ({ exePerPage, totalExe, paginate, currentPage }) => {
   const pageNumbers = [];
   for (let i = 1; i <= Math.ceil(totalExe / exePerPage); i++) {
     pageNumbers.push(i);
@@ -11,7 +11,11 @@ const Pagination = ({ exePerPage, totalExe, paginate }) => {
       <WrapperPaginate>
         {pageNumbers.map((number) => (
           <div key={number}>
-            <SpanPagination href="#" onClick={() => paginate(number)} />
+            <SpanPagination
+              href="#"
+              onClick={() => paginate(number)}
+              isActive={number === currentPage}
+            />
           </div>
         ))}
       </WrapperPaginate>

diff --git a/src/components/Pagination/Pagination.styled.js b/src/components/Pagination/Pagination.styled.js
@@ -3,16 +3,25 @@ import styled from 'styled-components';
 export const WrapperPaginate = styled.div`
   display: flex;
   gap: 8px;
-  margin-top: 32px;
+  padding-top: 40px;
+  padding-bottom: 40px;
   margin-left: auto;
   margin-right: auto;
   width: 6em;
+
+  @media screen and (min-width: 768px) {
+    padding-top: 32px;
+    padding-bottom: 40px;
+  }
 `;
+
 export const SpanPagination = styled.a`
   cursor: pointer;
   width: 12px;
   height: 12px;
-  background: rgba(239, 237, 232, 0.1);
+  background: ${(props) =>
+    props.isActive ? '#E6533C' : 'rgba(239, 237, 232, 0.1)'};
+
   border-radius: 50%;
   display: flex;
   position: relative;

diff --git a/src/pages/BodyParts/BodyParts.jsx b/src/pages/BodyParts/BodyParts.jsx
@@ -46,6 +46,7 @@ const BodyParts = () => {
             exePerPage={perPage()}
             paginate={paginate}
             totalExe={bodyparts.length}
+            currentPage={currentPage}
           />
         )}
       </WrapperPagination>

diff --git a/src/pages/Equipment/Equipment.jsx b/src/pages/Equipment/Equipment.jsx
@@ -41,6 +41,7 @@ const Equipment = () => {
         exePerPage={perPage()}
         totalExe={equipment.length}
         paginate={paginate}
+        currentPage={currentPage}
       />
     </>
   );

diff --git a/src/pages/Exercises/Exercises.styled.js b/src/pages/Exercises/Exercises.styled.js
@@ -4,19 +4,25 @@ import styled from 'styled-components';
 export const ChaptersWrapper = styled.ul`
   display: flex;
   gap: 28px;
-  padding-top: 14px;
+  margin-top: 20px;
+
   @media screen and (min-width: 768px) {
-    padding-top: 14px;
+    margin-top: 0;
   }
   @media screen and (min-width: 1440px) {
     justify-content: end;
   }
 `;
 
 export const DesctopWrapper = styled.div`
-  @media screen and (min-width: 1440px) {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 768px) {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
+    align-items: center;
   }
 `;
 export const LinkStyled = styled(NavLink)`

diff --git a/src/pages/Muscles/Muscles.jsx b/src/pages/Muscles/Muscles.jsx
@@ -41,6 +41,7 @@ const Muscles = () => {
         exePerPage={perPage()}
         totalExe={muscles.length}
         paginate={paginate}
+        currentPage={currentPage}
       />
     </>
   );