Updates for some styling synchronization. (#2324)

* Updates for some styling synchronization. * Adding another page navigator for the bottom of the page. Co-authored-by: phix <peter.hicks@astronomer.io> Co-authored-by: Willy Lulciuc <willy@datakin.com>
MarquezProject · Dec 16, 2022 · bc98a0b · bc98a0b
1 parent a2a63ae
commit bc98a0b
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 24 deletions.
diff --git a/web/src/components/core/date-picker/MqDatePicker.tsx b/web/src/components/core/date-picker/MqDatePicker.tsx
@@ -14,8 +14,9 @@ const styles = (theme: Theme) =>
       cursor: 'pointer',
       backgroundColor: 'transparent',
       border: `2px solid ${theme.palette.common.white}`,
-      padding: `${theme.spacing(1)}px ${theme.spacing(1)}px`,
+      padding: `${theme.spacing(1)}px ${theme.spacing(3)}px`,
       transition: theme.transitions.create(['border-color', 'box-shadow']),
+      borderRadius: theme.spacing(4),
       '& *': {
         cursor: 'pointer'
       },

diff --git a/web/src/components/core/input-base/MqInputBase.tsx b/web/src/components/core/input-base/MqInputBase.tsx
@@ -18,6 +18,14 @@ export const MqInputBase = withStyles((theme: Theme) =>
         borderColor: theme.palette.primary.main,
         boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`,
         borderRadius: theme.spacing(4)
+      },
+      '&:hover': {
+        borderColor: theme.palette.primary.main,
+        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`,
+        '& > label': {
+          color: theme.palette.primary.main,
+          transition: theme.transitions.create(['color'])
+        }
       }
     }
   })
@@ -39,6 +47,14 @@ export const MqInputNoIcon = withStyles((theme: Theme) =>
         borderColor: theme.palette.primary.main,
         boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`,
         borderRadius: theme.spacing(4)
+      },
+      '&:hover': {
+        borderColor: theme.palette.primary.main,
+        boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 3px`,
+        '& > label': {
+          color: theme.palette.primary.main,
+          transition: theme.transitions.create(['color'])
+        }
       }
     }
   })

diff --git a/web/src/routes/events/Events.tsx b/web/src/routes/events/Events.tsx
@@ -9,8 +9,10 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Theme
+  Theme,
+  Tooltip
 } from '@material-ui/core'
+import { ChevronLeftRounded, ChevronRightRounded } from '@material-ui/icons'
 import { Event } from '../../types/api'
 import { IState } from '../../store/reducers'
 import { MqScreenLoad } from '../../components/core/screen-load/MqScreenLoad'
@@ -22,6 +24,7 @@ import { formatDateAPIQuery, formatDatePicker } from '../../helpers/time'
 import { saveAs } from 'file-saver'
 import { theme } from '../../helpers/theme'
 import Box from '@material-ui/core/Box'
+import IconButton from '@material-ui/core/IconButton'
 import MqDatePicker from '../../components/core/date-picker/MqDatePicker'
 import MqEmpty from '../../components/core/empty/MqEmpty'
 import MqJson from '../../components/core/code/MqJson'
@@ -49,13 +52,16 @@ const styles = (theme: Theme) => {
       borderRadius: '50%'
     },
     table: {
-      marginBottom: '100px'
+      marginBottom: theme.spacing(2)
     },
     row: {
       cursor: 'pointer',
       '&:hover': {
         backgroundColor: theme.palette.action.hover
       }
+    },
+    ml2: {
+      marginLeft: theme.spacing(2)
     }
   })
 }
@@ -129,7 +135,7 @@ class Events extends React.Component<EventsProps, EventsState> {
     if (eventsProps !== eventsState) {
       this.setState({
         events: eventsProps,
-        pageIsLast: eventsProps.length < page * this.pageSize ? true : false
+        pageIsLast: eventsProps.length < page * this.pageSize
       })
     }
   }
@@ -140,7 +146,7 @@ class Events extends React.Component<EventsProps, EventsState> {
 
   getEvents() {
     const { events, page } = this.state
-    return events.slice(0 + (page - 1) * this.pageSize, this.pageSize + (page - 1) * this.pageSize)
+    return events.slice((page - 1) * this.pageSize, this.pageSize + (page - 1) * this.pageSize)
   }
 
   pageNavigation() {
@@ -192,9 +198,32 @@ class Events extends React.Component<EventsProps, EventsState> {
       <Container maxWidth={'lg'} disableGutters>
         <MqScreenLoad loading={isEventsLoading || !isEventsInit}>
           <>
-            <Box p={2}>
-              <MqText heading>{i18next.t('events_route.title')}</MqText>
-              Page: {this.pageNavigation()}
+            <Box p={2} display={'flex'} justifyContent={'space-between'}>
+              <Box>
+                <MqText heading>{i18next.t('events_route.title')}</MqText>
+                Page: {this.pageNavigation()}
+              </Box>
+              <Box>
+                <Tooltip title={i18next.t('events_route.previous_page')}>
+                  <IconButton
+                    className={classes.ml2}
+                    color='primary'
+                    disabled={page === 1}
+                    onClick={() => this.handleClickPage('prev')}
+                  >
+                    <ChevronLeftRounded />
+                  </IconButton>
+                </Tooltip>
+                <Tooltip title={i18next.t('events_route.next_page')}>
+                  <IconButton
+                    color='primary'
+                    disabled={pageIsLast}
+                    onClick={() => this.handleClickPage('next')}
+                  >
+                    <ChevronRightRounded />
+                  </IconButton>
+                </Tooltip>
+              </Box>
             </Box>
             <Box p={2} className={classes.nav}>
               <MqDatePicker
@@ -207,22 +236,6 @@ class Events extends React.Component<EventsProps, EventsState> {
                 value={formatDatePicker(dateTo)}
                 onChange={(e: any) => this.handleChangeDatepicker(e, 'to')}
               />
-              <Button
-                variant='outlined'
-                color='primary'
-                disabled={page === 1}
-                onClick={() => this.handleClickPage('prev')}
-              >
-                {i18next.t('events_route.previous_page')}
-              </Button>
-              <Button
-                variant='outlined'
-                color='primary'
-                disabled={pageIsLast}
-                onClick={() => this.handleClickPage('next')}
-              >
-                {i18next.t('events_route.next_page')}
-              </Button>
             </Box>
             {events.length === 0 ? (
               <Box p={2}>
@@ -324,6 +337,27 @@ class Events extends React.Component<EventsProps, EventsState> {
                 </Table>
               </>
             )}
+            <Box display={'flex'} justifyContent={'flex-end'} mb={2}>
+              <Tooltip title={i18next.t('events_route.previous_page')}>
+                <IconButton
+                  className={classes.ml2}
+                  color='primary'
+                  disabled={page === 1}
+                  onClick={() => this.handleClickPage('prev')}
+                >
+                  <ChevronLeftRounded />
+                </IconButton>
+              </Tooltip>
+              <Tooltip title={i18next.t('events_route.next_page')}>
+                <IconButton
+                  color='primary'
+                  disabled={pageIsLast}
+                  onClick={() => this.handleClickPage('next')}
+                >
+                  <ChevronRightRounded />
+                </IconButton>
+              </Tooltip>
+            </Box>
           </>
         </MqScreenLoad>
       </Container>