correct Pager component to see total pages

src/components/elements/CircleNumber.js

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 import PropsTypes from 'prop-types';
 
 const CircleNumberStyle = styled(Container)`
-  border-radius: 50%;
+  border-radius: ${({borderRadius}) => borderRadius ? borderRadius : '50%'};
   background-color: ${({theme}) => theme.colors.green};
   color: ${({theme}) => theme.colors.white};
   display: flex;
@@ -13,30 +13,34 @@ const CircleNumberStyle = styled(Container)`
   font-family: 'Kanit', sans-serif;
   font-size: 14px;
   font-weight: 500;
-  width: 24px;
-  height: 24px;
+  width: ${({width}) => width ? width : '24px'};
+  height: ${({height}) => height ? height : '24px'};
 
   @media (min-width: ${({theme}) => theme.overMobile}) {
-    width: 36px;
-    height: 36px;
+    width: ${({width}) => width ? width : '36px'};
+    height: ${({height}) => height ? height : '36px'};
     font-size: 22px;
   }
 `;
 
 const CircleNumber = (props) => {
     return (
-        <CircleNumberStyle>
+        <CircleNumberStyle width={props.width} borderRadius={props.borderRadius}>
             {props.number}
         </CircleNumberStyle>
     );
 };
 
 CircleNumber.propTypes = {
-    number: PropsTypes.number,
+    number: PropsTypes.string,
+    width: PropsTypes.string,
+    borderRadius: PropsTypes.string
 };
 
 CircleNumber.defaultProps = {
-    number: 0,
+    number: '',
+    width: null,
+    borderRadius: null
 };
 
 export default CircleNumber;

src/components/elements/Pager.js

@@ -55,7 +55,7 @@ const Pager = (props) => {
             <PagerStyle>
                 <LeftArrow as='button' src={polygon} onClick={props.previousPage} size='cover'
                            backgroundColor={(props.pageNr === 1) ? 'transparent' : theme.colors.dark}/>
-                <CircleNumber number={props.pageNr}/>
+                <CircleNumber number={props.number} width={props.width} borderRadius={props.borderRadius}/>
                 <RightArrow as='button' src={polygon} onClick={props.nextPage} size='cover'
                             backgroundColor={(props.pageNr === props.pages)
                                 ? 'transparent' : theme.colors.dark}/>
@@ -71,6 +71,9 @@ Pager.propTypes = {
     pageNr: PropsTypes.number,
     nextPage: PropsTypes.func,
     pages: PropsTypes.number,
+    number: PropsTypes.string,
+    width: PropsTypes.string,
+    borderRadius: PropsTypes.string
 };
 
 Pager.defaultProps = {
@@ -78,7 +81,10 @@ Pager.defaultProps = {
     previousPage: null,
     pageNr: 1,
     nextPage: null,
-    pages: 1
+    pages: 1,
+    number: '',
+    width: null,
+    borderRadius: null
 };
 
 export default Pager;

src/components/elements/Table/Table.js

@@ -86,13 +86,25 @@ const Table = (props) => {
         <>
             <Loading visible={loading}/>
             <Media query={theme.mobile}>
-                {!loading ? mobileRender() : ''}
+                <>
+                    {!loading ? mobileRender() : ''}
+                    <Pager visible={!loading} pageNr={pageNr}
+                           pages={CALC_PAGES(leaderboardData.entries ? leaderboardData.entries : [])}
+                           nextPage={nextPage} previousPage={previousPage} width='48px' borderRadius='64px'
+                           number={`${pageNr} / ${CALC_PAGES(leaderboardData.entries ?
+                               leaderboardData.entries : [])}`}/>
+                </>
             </Media>
             <Media query={theme.desktop}>
-                {!loading ? desktopRender() : ''}
+                <>
+                    {!loading ? desktopRender() : ''}
+                    <Pager visible={!loading} pageNr={pageNr}
+                           pages={CALC_PAGES(leaderboardData.entries ? leaderboardData.entries : [])}
+                           nextPage={nextPage} previousPage={previousPage} width='72px' borderRadius='64px'
+                           number={`${pageNr} / ${CALC_PAGES(leaderboardData.entries ?
+                               leaderboardData.entries : [])}`}/>
+                </>
             </Media>
-            <Pager visible={!loading} pageNr={pageNr} nextPage={nextPage} previousPage={previousPage}
-                   pages={CALC_PAGES(leaderboardData.entries ? leaderboardData.entries : [])}/>
         </>
     );
 };

src/pages/Challanges/Challenges.js

@@ -97,7 +97,8 @@ const Challenges = () => {
                         </FlexColumn>
                     </FlexColumn>
                     <Pager visible={!loading} pageNr={pageNr} pages={CALC_PAGES(challenges)}
-                           nextPage={nextPage} previousPage={previousPage}/>
+                           nextPage={nextPage} previousPage={previousPage} width='48px' borderRadius='64px'
+                           number={`${pageNr} / ${CALC_PAGES(challenges)}`}/>
                 </FlexColumn>
             </>
         );
@@ -132,7 +133,8 @@ const Challenges = () => {
                         </FlexColumn>
                     </FlexColumn>
                     <Pager visible={!loading} pageNr={pageNr} pages={CALC_PAGES(challenges)}
-                           nextPage={nextPage} previousPage={previousPage}/>
+                           nextPage={nextPage} previousPage={previousPage} width='72px' borderRadius='64px'
+                           number={`${pageNr} / ${CALC_PAGES(challenges)}`}/>
                 </FlexColumn>
             </>
         );