improved stylings for table footer (#112)

opengovsg · May 22, 2020 · 7977fc2 · 7977fc2
1 parent 7f001e8
commit 7977fc2
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/...s/UserPage/UserLinkTable/UrlTable/MemoTablePagination/PaginationActionComponent/index.jsx b/...s/UserPage/UserLinkTable/UrlTable/MemoTablePagination/PaginationActionComponent/index.jsx
@@ -3,15 +3,26 @@ import { Grid, IconButton, createStyles, makeStyles } from '@material-ui/core'
 import arrowLeftIcon from '../../../assets/arrow-left-icon.svg'
 import arrowRightIcon from '../../../assets/arrow-right-icon.svg'
 
-const useStyles = makeStyles((theme) =>
+const useStyles = makeStyles(() =>
   createStyles({
     pageSelectGrid: {
       fontWeight: 500,
       color: '#767676',
-      width: 'auto',
-      marginRight: '-139px',
-      [theme.breakpoints.up('sm')]: {
-        marginLeft: 'auto',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      display: 'flex',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      zIndex: 1,
+    },
+    gridItemHorizontalPadding: {
+      '&:first-child': {
+        paddingRight: 34,
+      },
+      '&:last-child': {
+        paddingLeft: 34,
       },
     },
   }),
@@ -20,23 +31,19 @@ const useStyles = makeStyles((theme) =>
 export default ({ pageCount, onChangePage, page }) => {
   const classes = useStyles()
   return (
-    <Grid
-      container
-      item
-      alignItems="center"
-      spacing={5}
-      className={classes.pageSelectGrid}
-    >
-      <Grid item>
+    <Grid container item alignItems="center" className={classes.pageSelectGrid}>
+      <Grid item className={classes.gridItemHorizontalPadding}>
         <IconButton
           onClick={(event) => onChangePage(event, page - 1)}
           disabled={page <= 0}
         >
           <img src={arrowLeftIcon} alt="Previous page" draggable={false} />
         </IconButton>
       </Grid>
-      <Grid item>{`Page ${page + 1} of ${pageCount}`}</Grid>
-      <Grid item>
+      <Grid item className={classes.gridItemHorizontalPadding}>{`Page ${
+        page + 1
+      } of ${pageCount}`}</Grid>
+      <Grid item className={classes.gridItemHorizontalPadding}>
         <IconButton
           onClick={(event) => onChangePage(event, page + 1)}
           disabled={pageCount <= page + 1}

diff --git a/src/client/components/UserPage/UserLinkTable/UrlTable/MemoTablePagination/index.jsx b/src/client/components/UserPage/UserLinkTable/UrlTable/MemoTablePagination/index.jsx
@@ -58,7 +58,6 @@ const MemoTablePagination = React.memo(
           toolbar: classes.toolbar,
           caption: classes.caption,
           select: classes.select,
-          root: classes.root,
           selectIcon: classes.selectIcon,
         }}
         labelDisplayedRows={() => {}}

diff --git a/...e/UrlTable/MemoTablePagination/styles.jsx → ...le/UrlTable/MemoTablePagination/styles.ts b/...e/UrlTable/MemoTablePagination/styles.jsx → ...le/UrlTable/MemoTablePagination/styles.ts
@@ -1,18 +1,17 @@
 import { createStyles, makeStyles } from '@material-ui/core'
 
+type StyleProps = {
+  appMargins: number
+}
+
 export default makeStyles((theme) =>
   createStyles({
-    root: {
-      display: 'inline',
-    },
     toolbar: {
-      paddingLeft: 0,
-      paddingRight: 0,
-      width: '50%',
+      paddingLeft: (props: StyleProps) => props.appMargins,
+      paddingRight: (props: StyleProps) => props.appMargins,
     },
     spacer: {
       flex: 0,
-      paddingLeft: (props) => props.appMargins,
     },
     caption: {
       fontWeight: 400,
@@ -23,11 +22,13 @@ export default makeStyles((theme) =>
     },
     select: {
       border: 'solid 1px #d8d8d8',
+      zIndex: 2,
       [theme.breakpoints.down('sm')]: {
         display: 'none',
       },
     },
     selectIcon: {
+      zIndex: 2,
       [theme.breakpoints.down('sm')]: {
         display: 'none',
       },