From 71bad5a19f8aea358b3f21dde4f69fd53a870184 Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Thu, 4 Jul 2024 02:00:20 -0400
Subject: chore: Refactor ThingsHistory component and add styling improvements

---
 src/views/Things/ThingsHistory.jsx | 84 +++++++++++++++++++-------------------
 1 file changed, 43 insertions(+), 41 deletions(-)

(limited to 'src/views/Things/ThingsHistory.jsx')

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={{
-- 
cgit