fix: pagination

Chia-Network · Oct 12, 2023 · 4514b92 · 4514b92
1 parent 489fb69
commit 4514b92
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 25 deletions.
diff --git a/src/components/blocks/APIPagination.js b/src/components/blocks/APIPagination.js
@@ -62,7 +62,7 @@ export const PagesContainer = styled(ControlsContainer)`
                     color: ${props.theme.colors.default.secondaryDark};`;
     } else {
       return `border: 1px solid ${props.theme.colors.default.shade5};
-                    color: ${props.theme.colors.default.secondary};`;
+                    color: #586065;`;
     }
   }};
 
@@ -72,8 +72,8 @@ export const PagesContainer = styled(ControlsContainer)`
         return `border: 1px solid ${props.theme.colors.default.secondaryDark};
                     color: ${props.theme.colors.default.secondaryDark};`;
       } else {
-        return `border: 1px solid ${props.theme.colors.default.secondaryDark};
-                    color: ${props.theme.colors.default.secondaryDark};`;
+        return `border: 1px solid ${props.theme.colors.default.shade5};
+                    color: ${props.theme.colors.default.shade5};`;
       }
     }};
   }
@@ -139,7 +139,7 @@ const APIPagination = withTheme(({ showLast = false, actions }) => {
           !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
         }
       >
-        <ArrowDownIcon height={12} width={12} />
+        <ArrowDownIcon height={12} width={12} color="#586065" />
       </ControlsContainer>
       {displayedPages &&
         displayedPages.map(element => (
@@ -153,22 +153,24 @@ const APIPagination = withTheme(({ showLast = false, actions }) => {
             {element}
           </PagesContainer>
         ))}
-      {showLast && currentPageNumber + 3 < numberOfPages && numberOfPages > 5 && (
-        <>
-          <ThreeDotsIcon width={10} height={10} />
-          <PagesContainer onClick={() => changeCurrentPageTo(numberOfPages)}>
-            {numberOfPages}
-          </PagesContainer>
-        </>
-      )}
+      {showLast &&
+        currentPageNumber + 3 < numberOfPages &&
+        numberOfPages > 5 && (
+          <>
+            <ThreeDotsIcon width={10} height={10} />
+            <PagesContainer onClick={() => changeCurrentPageTo(numberOfPages)}>
+              {numberOfPages}
+            </PagesContainer>
+          </>
+        )}
       <ControlsContainer
         isDisabled={nextButtonIsDisabled}
         isNextButton
         onClick={() =>
           !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
         }
       >
-        <ArrowDownIcon height={12} width={12} />
+        <ArrowDownIcon height={12} width={12} color="#586065" />
       </ControlsContainer>
     </PaginationContainer>
   );

diff --git a/src/components/blocks/Pagination.js b/src/components/blocks/Pagination.js
@@ -59,7 +59,7 @@ const PagesContainer = styled(ControlsContainer)`
                     color: ${props.theme.colors.default.secondaryDark};`;
     } else {
       return `border: 1px solid ${props.theme.colors.default.shade5};
-                    color: ${props.theme.colors.default.secondary};`;
+                    color: #586065;`;
     }
   }};
 
@@ -69,8 +69,8 @@ const PagesContainer = styled(ControlsContainer)`
         return `border: 1px solid ${props.theme.colors.default.secondaryDark};
                     color: ${props.theme.colors.default.secondaryDark};`;
       } else {
-        return `border: 1px solid ${props.theme.colors.default.secondaryDark};
-                    color: ${props.theme.colors.default.secondaryDark};`;
+        return `border: 1px solid ${props.theme.colors.default.shade5};
+                    color: ${props.theme.colors.default.shade5};`;
       }
     }};
   }
@@ -112,7 +112,7 @@ const Pagination = withTheme(
             !backButtonIsDisabled && changeCurrentPageTo(currentPageNumber - 1)
           }
         >
-          <ArrowDownIcon height={12} width={12} />
+          <ArrowDownIcon height={12} width={12} color="#586065" />
         </ControlsContainer>
         {displayedPages &&
           displayedPages.map(element => (
@@ -130,7 +130,7 @@ const Pagination = withTheme(
           currentPageNumber + 2 + 1 < numberOfPages &&
           numberOfPages > 5 && (
             <>
-              <ThreeDotsIcon width={10} height={10} />
+              <ThreeDotsIcon width={10} height={10} color="#586065" />
               <PagesContainer
                 onClick={() => changeCurrentPageTo(numberOfPages)}
               >
@@ -145,7 +145,7 @@ const Pagination = withTheme(
             !nextButtonIsDisabled && changeCurrentPageTo(currentPageNumber + 1)
           }
         >
-          <ArrowDownIcon height={12} width={12} />
+          <ArrowDownIcon height={12} width={12} color="#586065" />
         </ControlsContainer>
       </PaginationContainer>
     );

diff --git a/src/components/icons/ArrowDownIcon.js b/src/components/icons/ArrowDownIcon.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-const ArrowDownIcon = withTheme(({ width, height }) => {
+const ArrowDownIcon = withTheme(({ width, height, color = 'black' }) => {
   return (
     <svg
       width={`${width}px`}
       height={`${height}px`}
       viewBox="0 0 18 12"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M17.7188 0.00012207H15.961C15.8415 0.00012207 15.729 0.058716 15.6586 0.15481L9.00005 9.33294L2.34146 0.15481C2.27115 0.058716 2.15865 0.00012207 2.03912 0.00012207H0.281303C0.128959 0.00012207 0.0398965 0.17356 0.128959 0.297779L8.39302 11.6907C8.69302 12.1032 9.30708 12.1032 9.60474 11.6907L17.8688 0.297779C17.9602 0.17356 17.8711 0.00012207 17.7188 0.00012207Z"
-        fill="currentColor"
+        fill={color}
       />
     </svg>
   );

diff --git a/src/components/icons/ThreeDotsIcon.js b/src/components/icons/ThreeDotsIcon.js
@@ -1,17 +1,18 @@
 import React from 'react';
 import { withTheme } from 'styled-components';
 
-const ThreeDotsIcon = withTheme(({ width, height }) => {
+const ThreeDotsIcon = withTheme(({ width, height, color = 'black' }) => {
   return (
     <svg
       width={`${width}px`}
       height={`${height}px`}
       viewBox="0 0 16 4"
       fill="none"
-      xmlns="http://www.w3.org/2000/svg">
+      xmlns="http://www.w3.org/2000/svg"
+    >
       <path
         d="M0.125 1.97656C0.125 2.14892 0.158949 2.3196 0.224908 2.47884C0.290867 2.63807 0.387546 2.78276 0.509422 2.90464C0.631299 3.02652 0.775988 3.12319 0.935228 3.18915C1.09447 3.25511 1.26514 3.28906 1.4375 3.28906C1.60986 3.28906 1.78053 3.25511 1.93977 3.18915C2.09901 3.12319 2.2437 3.02652 2.36558 2.90464C2.48745 2.78276 2.58413 2.63807 2.65009 2.47884C2.71605 2.3196 2.75 2.14892 2.75 1.97656C2.75 1.8042 2.71605 1.63353 2.65009 1.47429C2.58413 1.31505 2.48745 1.17036 2.36558 1.04848C2.2437 0.926608 2.09901 0.82993 1.93977 0.763971C1.78053 0.698012 1.60986 0.664063 1.4375 0.664063C1.26514 0.664063 1.09447 0.698012 0.935228 0.763971C0.775988 0.82993 0.631299 0.926608 0.509422 1.04848C0.387546 1.17036 0.290867 1.31505 0.224908 1.47429C0.158949 1.63353 0.125 1.8042 0.125 1.97656ZM6.6875 1.97656C6.6875 2.32466 6.82578 2.6585 7.07192 2.90464C7.31806 3.15078 7.6519 3.28906 8 3.28906C8.3481 3.28906 8.68194 3.15078 8.92808 2.90464C9.17422 2.6585 9.3125 2.32466 9.3125 1.97656C9.3125 1.62847 9.17422 1.29463 8.92808 1.04848C8.68194 0.802343 8.3481 0.664062 8 0.664063C7.6519 0.664062 7.31806 0.802343 7.07192 1.04848C6.82578 1.29463 6.6875 1.62847 6.6875 1.97656ZM13.25 1.97656C13.25 2.32466 13.3883 2.6585 13.6344 2.90464C13.8806 3.15078 14.2144 3.28906 14.5625 3.28906C14.9106 3.28906 15.2444 3.15078 15.4906 2.90464C15.7367 2.6585 15.875 2.32466 15.875 1.97656C15.875 1.62847 15.7367 1.29463 15.4906 1.04848C15.2444 0.802343 14.9106 0.664062 14.5625 0.664063C14.2144 0.664062 13.8806 0.802343 13.6344 1.04848C13.3883 1.29463 13.25 1.62847 13.25 1.97656Z"
-        fill="currentColor"
+        fill={color}
       />
     </svg>
   );

diff --git a/src/pages/Audit/index.js b/src/pages/Audit/index.js
@@ -197,6 +197,7 @@ const Audit = () => {
                       limit: constants.MAX_AUDIT_TABLE_SIZE,
                       useMockedResponse: false,
                       order: auditSortOrder,
+                      storeFullResponse: true,
                     }),
                   )
                 }