fix: Select pagination and buttons (#1521)

platform/ui/src/assets/icons/arrow-down.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 4" width="10.48" height="4">
+	<g fill="currentColor" fill-rule="evenodd">
+		<path d="M7.86 2L10.48 0L5.24 0L0 0L2.62 2L5.24 4L7.86 2Z" fill="currentColor"></path>
+	</g>
+</svg>

platform/ui/src/components/Icon/getIcon.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 // Icons
+import arrowDown from './../../assets/icons/arrow-down.svg';
 import seriesActive from './../../assets/icons/series-active.svg';
 import seriesInactive from './../../assets/icons/series-inactive.svg';
 import cancel from './../../assets/icons/cancel.svg';
@@ -17,6 +18,7 @@ import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
 import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
 
 const ICONS = {
+  'arrow-down': arrowDown,
   'series-active': seriesActive,
   'series-inactive': seriesInactive,
   cancel: cancel,

platform/ui/src/views/StudyList/components/StudyListPagination.js

@@ -4,6 +4,7 @@ import {
   ButtonGroup,
   Button,
   IconButton,
+  Icon,
 } from '../../../components/';
 
 const StudyListPagination = props => {
@@ -19,14 +20,24 @@ const StudyListPagination = props => {
       <div className="container m-auto relative px-8">
         <div className="flex justify-between">
           <div className="flex items-center">
+            <div className="relative mr-3">
               <select
                 defaultValue="25"
-              className="bg-black text-white border border-custom-darkSlateBlue text-base h-8 mr-3 focus:outline-none"
+                className="block appearance-none w-full bg-transparent border border-custom-darkSlateBlue text-white text-base px-2 pr-4 rounded leading-tight focus:outline-none"
+                style={{ height: 28 }}
               >
                 <option value="25">25</option>
                 <option value="50">50</option>
                 <option value="100">100</option>
               </select>
+              <div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
+                <Icon
+                  name="arrow-down"
+                  className="text-white"
+                  style={{ width: 6 }}
+                />
+              </div>
+            </div>
             <Typography className="text-base opacity-60">
               Results per page
             </Typography>
@@ -39,7 +50,8 @@ const StudyListPagination = props => {
               <ButtonGroup color="primary">
                 <IconButton
                   size="small"
-                  className="border-custom-darkSlateBlue px-4"
+                  className="border-custom-darkSlateBlue px-4 py-2 text-base"
+                  style={{ padding: '3px 12px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(1)}
                 >
@@ -47,13 +59,15 @@ const StudyListPagination = props => {
                 </IconButton>
                 <Button
                   size="small"
-                  className="border-custom-darkSlateBlue"
+                  className="border-custom-darkSlateBlue py-2 text-base"
+                  style={{ padding: '3px 8px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(currentPage - 1)}
                 >{`< Previous`}</Button>
                 <Button
                   size="small"
-                  className="border-custom-darkSlateBlue"
+                  className="border-custom-darkSlateBlue py-2 text-base"
+                  style={{ padding: '3px 20px', minWidth: 0 }}
                   color="white"
                   onClick={() => navigateToPage(currentPage + 1)}
                 >