Adjusting the component sytle in ordersTable

src/apps/explorer/components/OrdersTableWidget/index.tsx

@@ -35,46 +35,51 @@ const PaginationTextCSS = css`
   font-weight: normal;
   white-space: nowrap;
 `
-const PaginationDropdownButton = styled.div`
+const PaginationWrapper = styled.span`
   ${PaginationTextCSS}
   align-items: center;
+  display: flex;
+  justify-content: center;
 `
 
-const PaginationWrapper = styled.div`
+const DropdownPagination = styled(Dropdown)`
+  .dropdown-options {
+    min-width: 70px;
+  }
+`
+const PaginationDropdownButton = styled.button`
   ${PaginationTextCSS}
+  background: none;
+  border: none;
+  white-space: nowrap;
+  cursor: pointer;
 `
 
 const PaginationText = styled.p`
-  cursor: pointer;
-  white-space: nowrap;
-  font-size: ${({ theme }): string => theme.fontSizeDefault};
+  margin-right: 0.8rem;
 `
 
-const DropdownPagination = styled(Dropdown)`
-  .dropdown-options {
-    min-width: 70px;
-  }
-`
 const PaginationItem = styled(DropdownOption)`
   align-items: center;
   cursor: pointer;
   height: 32px;
   line-height: 1.2;
-  padding: 0 10px;
+  padding-right: 2rem;
   white-space: nowrap;
 `
 
 const Pagination: React.FC = () => {
-  const [pageSize, setPageSize] = useState(20)
-
+  const quantityPerPage = [10, 20, 30, 50]
+  const [pageSize, setPageSize] = useState(quantityPerPage[1])
   const onSetPageSize = (pageOption: number): void => setPageSize(pageOption)
 
   return (
     <PaginationWrapper>
       <PaginationText>Rows per page:</PaginationText>
       <DropdownPagination
         dropdownButtonContent={<PaginationDropdownButton>{pageSize} ▼</PaginationDropdownButton>}
-        items={[10, 20, 30, 50].map((pageOption) => (
+        currentItem={quantityPerPage.findIndex((option) => option === pageSize)}
+        items={quantityPerPage.map((pageOption) => (
           <PaginationItem key={pageOption} onClick={(): void => onSetPageSize(pageOption)}>
             {pageOption}
           </PaginationItem>