diff options
author | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-04 02:00:20 -0400 |
---|---|---|
committer | Mo Tarbin <mhed.t91@gmail.com> | 2024-07-04 02:00:20 -0400 |
commit | 71bad5a19f8aea358b3f21dde4f69fd53a870184 (patch) | |
tree | 6d85d8bff7f4b69e03725dd789dfb5346be636f9 /src/views/Things/ThingsHistory.jsx | |
parent | c5ee02d1813c8532d4e05ceb0e4459fe1b19bf91 (diff) | |
download | donetick-frontend-71bad5a19f8aea358b3f21dde4f69fd53a870184.tar.gz donetick-frontend-71bad5a19f8aea358b3f21dde4f69fd53a870184.tar.bz2 donetick-frontend-71bad5a19f8aea358b3f21dde4f69fd53a870184.zip |
chore: Refactor ThingsHistory component and add styling improvements
Diffstat (limited to '')
-rw-r--r-- | src/views/Things/ThingsHistory.jsx | 84 |
1 files changed, 43 insertions, 41 deletions
diff --git a/src/views/Things/ThingsHistory.jsx b/src/views/Things/ThingsHistory.jsx index 4b32b0e..c043a55 100644 --- a/src/views/Things/ThingsHistory.jsx +++ b/src/views/Things/ThingsHistory.jsx @@ -107,47 +107,49 @@ const ThingsHistory = () => { <Typography level='h3' mb={1.5}> History: </Typography> - <List sx={{ p: 0 }}> - {thingsHistory.map((history, index) => ( - <> - <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> - <ListItemContent sx={{ my: 0 }}> - <Box - sx={{ - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - }} - > - <Typography level='body1' sx={{ fontWeight: 'md' }}> - {moment(history.updatedAt).format( - 'ddd MM/DD/yyyy HH:mm:ss', - )} - </Typography> - <Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip> - </Box> - </ListItemContent> - </ListItem> - {index < thingsHistory.length - 1 && ( - <> - <ListDivider component='li'> - {/* time between two completion: */} - {index < thingsHistory.length - 1 && - thingsHistory[index + 1].createdAt && ( - <Typography level='body3' color='text.tertiary'> - {formatTimeDifference( - history.createdAt, - thingsHistory[index + 1].createdAt, - )}{' '} - before - </Typography> - )} - </ListDivider> - </> - )} - </> - ))} - </List> + <Box sx={{ borderRadius: 'sm', p: 2, boxShadow: 'md' }}> + <List sx={{ p: 0 }}> + {thingsHistory.map((history, index) => ( + <> + <ListItem sx={{ gap: 1.5, alignItems: 'flex-start' }}> + <ListItemContent sx={{ my: 0 }}> + <Box + sx={{ + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + }} + > + <Typography level='body1' sx={{ fontWeight: 'md' }}> + {moment(history.updatedAt).format( + 'ddd MM/DD/yyyy HH:mm:ss', + )} + </Typography> + <Chip>{history.state === '1' ? 'Active' : 'Inactive'}</Chip> + </Box> + </ListItemContent> + </ListItem> + {index < thingsHistory.length - 1 && ( + <> + <ListDivider component='li'> + {/* time between two completion: */} + {index < thingsHistory.length - 1 && + thingsHistory[index + 1].createdAt && ( + <Typography level='body3' color='text.tertiary'> + {formatTimeDifference( + history.createdAt, + thingsHistory[index + 1].createdAt, + )}{' '} + before + </Typography> + )} + </ListDivider> + </> + )} + </> + ))} + </List> + </Box> {/* Load more Button */} <Box sx={{ |