refactor(web): remove typescript

packages/web/src/components/ExecutionStep/style.js

@@ -0,0 +1,54 @@
+import { styled, alpha } from '@mui/material/styles';
+import Card from '@mui/material/Card';
+import Box from '@mui/material/Box';
+export const AppIconWrapper = styled('div')`
+  display: flex;
+  align-items: center;
+`;
+export const AppIconStatusIconWrapper = styled('span')`
+  display: inline-flex;
+  position: relative;
+
+  svg {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate(50%, -50%);
+    // to make it distinguishable over an app icon
+    background: white;
+    border-radius: 100%;
+    overflow: hidden;
+  }
+`;
+export const Wrapper = styled(Card)`
+  width: 100%;
+  overflow: unset;
+`;
+export const Header = styled('div', {
+  shouldForwardProp: (prop) => prop !== 'collapsed',
+})`
+  padding: ${({ theme }) => theme.spacing(2)};
+  cursor: ${({ collapsed }) => (collapsed ? 'pointer' : 'unset')};
+`;
+export const Content = styled('div')`
+  border: 1px solid ${({ theme }) => alpha(theme.palette.divider, 0.8)};
+  border-left: none;
+  border-right: none;
+  padding: ${({ theme }) => theme.spacing(2, 0)};
+`;
+export const Metadata = styled(Box)`
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    'step id'
+    'step date';
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    grid-template-rows: auto auto auto;
+    grid-template-areas:
+      'id'
+      'step'
+      'date';
+  }
+`;