From d9bd42ef8261219472a044d6f7434a1237fc1143 Mon Sep 17 00:00:00 2001
From: Sidney Alcantara <sidney@sidney.me>
Date: Wed, 10 Nov 2021 18:56:43 +1100
Subject: [PATCH] CloudLogs: make AccordionSummary sticky to top

---
 .../TableHeader/CloudLogs/BuildLogs/index.tsx | 43 +++++++++++----
 .../TableHeader/CloudLogs/CloudLogItem.tsx    | 52 +++++++++++++------
 .../CloudLogs/CloudLogSubheader.tsx           |  1 +
 3 files changed, 70 insertions(+), 26 deletions(-)

diff --git a/src/components/Table/TableHeader/CloudLogs/BuildLogs/index.tsx b/src/components/Table/TableHeader/CloudLogs/BuildLogs/index.tsx
index a94dd2b6..702ec9ba 100644
--- a/src/components/Table/TableHeader/CloudLogs/BuildLogs/index.tsx
+++ b/src/components/Table/TableHeader/CloudLogs/BuildLogs/index.tsx
@@ -35,12 +35,43 @@ const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
   minHeight: 32,
   alignItems: "flex-start",
 
+  padding: theme.spacing(0, 1.375, 0, 1.5),
+  borderRadius: theme.shape.borderRadius,
+  "&:hover": { backgroundColor: theme.palette.action.hover },
+
+  userSelect: "auto",
+
   "&.Mui-expanded": {
-    backgroundColor: theme.palette.action.hover,
-    "&:hover": { backgroundColor: theme.palette.action.selected },
-    "&.Mui-focusVisible": {
+    backgroundColor: theme.palette.background.paper,
+    ".MuiPaper-elevation24 &": {
+      backgroundImage:
+        "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    },
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: -1,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: "inherit",
+
+      transition: theme.transitions.create(["background-color"], {
+        duration: theme.transitions.duration.short,
+      }),
+      backgroundColor: theme.palette.action.hover,
+    },
+    "&:hover::before": { backgroundColor: theme.palette.action.selected },
+    "&.Mui-focusVisible::before": {
       backgroundColor: theme.palette.action.disabledBackground,
     },
+
+    position: "sticky",
+    zIndex: 2,
+    top: 0,
+    ".MuiListSubheader-sticky ~ li &": { top: 32 },
   },
 
   "& svg": {
@@ -67,12 +98,6 @@ const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
       "& > :first-child": { marginLeft: theme.spacing((18 / 8 + 2) * -1) },
     },
   },
-
-  padding: theme.spacing(0, 1.375, 0, 1.5),
-  borderRadius: theme.shape.borderRadius,
-  "&:hover": { backgroundColor: theme.palette.action.hover },
-
-  userSelect: "auto",
 }));
 
 export default function BuildLogs() {
diff --git a/src/components/Table/TableHeader/CloudLogs/CloudLogItem.tsx b/src/components/Table/TableHeader/CloudLogs/CloudLogItem.tsx
index 54d2a1e8..f6baac36 100644
--- a/src/components/Table/TableHeader/CloudLogs/CloudLogItem.tsx
+++ b/src/components/Table/TableHeader/CloudLogs/CloudLogItem.tsx
@@ -34,12 +34,43 @@ const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
   minHeight: 32,
   alignItems: "flex-start",
 
+  padding: theme.spacing(0, 1.375, 0, 1.5),
+  borderRadius: theme.shape.borderRadius,
+  "&:hover": { backgroundColor: theme.palette.action.hover },
+
+  userSelect: "auto",
+
   "&.Mui-expanded": {
-    backgroundColor: theme.palette.action.hover,
-    "&:hover": { backgroundColor: theme.palette.action.selected },
-    "&.Mui-focusVisible": {
+    backgroundColor: theme.palette.background.paper,
+    ".MuiPaper-elevation24 &": {
+      backgroundImage:
+        "linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.16))",
+    },
+
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      zIndex: -1,
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      borderRadius: "inherit",
+
+      transition: theme.transitions.create(["background-color"], {
+        duration: theme.transitions.duration.short,
+      }),
+      backgroundColor: theme.palette.action.hover,
+    },
+    "&:hover::before": { backgroundColor: theme.palette.action.selected },
+    "&.Mui-focusVisible::before": {
       backgroundColor: theme.palette.action.disabledBackground,
     },
+
+    position: "sticky",
+    zIndex: 2,
+    top: 0,
+    ".MuiListSubheader-sticky ~ li &": { top: 32 },
   },
 
   "& svg": {
@@ -67,20 +98,7 @@ const AccordionSummary = styled(MuiAccordionSummary)(({ theme }) => ({
     },
   },
 
-  "& .log-preview": {
-    flexShrink: 1,
-
-    // ".Mui-expanded&": {
-    //   overflow: "visible",
-    //   whiteSpace: "pre-wrap",
-    // },
-  },
-
-  padding: theme.spacing(0, 1.375, 0, 1.5),
-  borderRadius: theme.shape.borderRadius,
-  "&:hover": { backgroundColor: theme.palette.action.hover },
-
-  userSelect: "auto",
+  "& .log-preview": { flexShrink: 1 },
 }));
 
 const Chip = styled((props: ChipProps) => <MuiChip size="small" {...props} />)({
diff --git a/src/components/Table/TableHeader/CloudLogs/CloudLogSubheader.tsx b/src/components/Table/TableHeader/CloudLogs/CloudLogSubheader.tsx
index c33cfff5..97d18511 100644
--- a/src/components/Table/TableHeader/CloudLogs/CloudLogSubheader.tsx
+++ b/src/components/Table/TableHeader/CloudLogs/CloudLogSubheader.tsx
@@ -6,6 +6,7 @@ export const CloudLogSubheader = styled((props) => (
   marginTop: theme.spacing(2),
   ...theme.typography.subtitle2,
   padding: theme.spacing((32 - 20) / 2 / 8, 1.5),
+  lineHeight: "20px",
 
   "& code": { fontSize: "90%" },