feat: Submissions log styles update (#3155)

theopensystemslab · May 16, 2024 · e445ca4 · e445ca4
1 parent 1812cbd
commit e445ca4
Showing 1 changed file with 38 additions and 29 deletions.
diff --git a/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx b/editor.planx.uk/src/pages/FlowEditor/components/Settings/Submissions/EventsLog.tsx
@@ -2,8 +2,8 @@ import KeyboardArrowDown from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUp from "@mui/icons-material/KeyboardArrowUp";
 import Payment from "@mui/icons-material/Payment";
 import Send from "@mui/icons-material/Send";
-import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
+import Chip from "@mui/material/Chip";
 import Collapse from "@mui/material/Collapse";
 import IconButton from "@mui/material/IconButton";
 import { styled } from "@mui/material/styles";
@@ -54,19 +54,22 @@ const EventsLog: React.FC<GetSubmissionsResponse> = ({
 
   return (
     <TableContainer>
-      <Table>
+      <Table sx={{ tableLayout: "fixed" }}>
         <TableHead>
           <TableRow>
-            <TableCell sx={{ width: 300 }}>
+            <TableCell sx={{ width: 240 }}>
               <strong>Event</strong>
             </TableCell>
-            <TableCell sx={{ width: 200 }}>
+            <TableCell sx={{ width: 110 }}>
+              <strong>Status</strong>
+            </TableCell>
+            <TableCell sx={{ width: 120 }}>
               <strong>Date</strong>
             </TableCell>
-            <TableCell>
+            <TableCell sx={{ width: 380 }}>
               <strong>Session ID</strong>
             </TableCell>
-            <TableCell></TableCell>
+            <TableCell sx={{ width: 60 }}></TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -85,30 +88,26 @@ const CollapsibleRow: React.FC<Submission> = (submission) => {
   return (
     <React.Fragment key={submission.eventId}>
       <TableRow sx={{ "& > *": { borderBottom: "unset" } }}>
-        <TableCell
-          sx={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-          }}
-        >
-          <Avatar
+        <TableCell>
+          <Box
             sx={{
-              background: "none",
-              marginRight: (theme) => theme.spacing(1),
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
             }}
           >
-            {submission.eventType === "Pay" ? (
-              <Payment
-                color={submission.status === "Success" ? "success" : "error"}
-              />
-            ) : (
-              <Send
-                color={submission.status === "Success" ? "success" : "error"}
-              />
-            )}
-          </Avatar>
-          {submission.eventType}
+            {submission.eventType === "Pay" ? <Payment /> : <Send />}
+            <Typography variant="body2" ml={1}>
+              {submission.eventType}
+            </Typography>
+          </Box>
+        </TableCell>
+        <TableCell>
+          {submission.status === "Success" ? (
+            <Chip label="Success" size="small" color="success" />
+          ) : (
+            <Chip label="Error" size="small" color="error" />
+          )}
         </TableCell>
         <TableCell>
           {format(new Date(submission.createdAt), "dd/MM/yy hh:mm:ss")}
@@ -125,8 +124,17 @@ const CollapsibleRow: React.FC<Submission> = (submission) => {
         </TableCell>
       </TableRow>
       <TableRow sx={{ background: (theme) => theme.palette.background.paper }}>
-        <TableCell sx={{ paddingBottom: 0, paddingTop: 0 }} colSpan={4}>
-          <Collapse in={open} timeout="auto" unmountOnExit>
+        <TableCell sx={{ padding: 0, border: "none" }} colSpan={5}>
+          <Collapse
+            in={open}
+            timeout="auto"
+            unmountOnExit
+            sx={{
+              borderBottom: (theme) =>
+                `1px solid ${theme.palette.border.light}`,
+              padding: (theme) => theme.spacing(0, 1.5),
+            }}
+          >
             <FormattedResponse {...submission} />
           </Collapse>
         </TableCell>
@@ -153,6 +161,7 @@ const FormattedResponse: React.FC<Submission> = (submission) => {
           margin: 1,
           maxWidth: "contentWrap",
           overflowWrap: "break-word",
+          whiteSpace: "pre-wrap",
         }}
       >
         {submission.status === "Success"