From deeffada38271a3da95044605056bcd43a4b2f26 Mon Sep 17 00:00:00 2001
From: Zack Cerza <zack@redhat.com>
Date: Thu, 26 Sep 2024 10:51:04 -0600
Subject: [PATCH] job: accordion -> details

---
 src/pages/+Layout.css                   | 16 ++++++++++++++++
 src/pages/runs/@name/jobs/@id/+Page.tsx | 15 ++++-----------
 2 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/src/pages/+Layout.css b/src/pages/+Layout.css
index 20bc565..6db4615 100644
--- a/src/pages/+Layout.css
+++ b/src/pages/+Layout.css
@@ -125,6 +125,22 @@ body {
   }
 }
 
+/* Accordion */
+details {
+  background-color: var(--mui-palette-background-paper);
+  border-radius: var(--mui-shape-borderRadius);
+  padding: calc(var(--mui-spacing) * 2);
+
+  summary * {
+    display: inline-block;
+  }
+
+}
+
+details>div {
+  margin-top: calc(var(--mui-spacing) * 2);
+}
+
 [data-mui-color-scheme="dark"] {
 
   /* @media (prefers-color-scheme: dark) { */
diff --git a/src/pages/runs/@name/jobs/@id/+Page.tsx b/src/pages/runs/@name/jobs/@id/+Page.tsx
index 73bc434..7518d3f 100644
--- a/src/pages/runs/@name/jobs/@id/+Page.tsx
+++ b/src/pages/runs/@name/jobs/@id/+Page.tsx
@@ -1,12 +1,8 @@
 import { useData } from 'vike-react/useData'
 import Grid from '@mui/material/Grid2';
 import Typography from "@mui/material/Typography";
-import Accordion from "@mui/material/Accordion";
-import AccordionSummary from "@mui/material/AccordionSummary";
-import AccordionDetails from "@mui/material/AccordionDetails";
 import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import FolderIcon from '@mui/icons-material/Folder';
 import HighlightOffIcon from "@mui/icons-material/HighlightOff";
 import PlayCircleOutlineIcon from "@mui/icons-material/PlayCircleOutline";
@@ -166,17 +162,14 @@ export default function Job() {
       </Helmet>
       <JobHeader data={data} />
       <Grid size={12}>
-        <Accordion
-          TransitionProps={{ unmountOnExit: true }}
+        <details
           style={{ marginTop: "20px" }}
         >
-          <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+          <summary>
             <Typography>Full job details</Typography>
-          </AccordionSummary>
-          <AccordionDetails>
+          </summary>
             <JobDetails data={data} />
-          </AccordionDetails>
-        </Accordion>
+        </details>
       </Grid>
     </Grid>
   );