adjust styles for error tile to match

hubmapconsortium · Aug 20, 2024 · 8813366 · 8813366
1 parent 2300131
commit 8813366
Showing 1 changed file with 64 additions and 36 deletions.
diff --git a/context/app/static/js/components/entity-tile/EntityTile/EntityTile.tsx b/context/app/static/js/components/entity-tile/EntityTile/EntityTile.tsx
@@ -10,7 +10,8 @@ import { Entity } from 'js/components/types';
 import StatusIcon from 'js/components/detailPage/StatusIcon';
 import ContactUsLink from 'js/shared-styles/Links/ContactUsLink';
 import { useHandleCopyClick } from 'js/hooks/useCopyText';
-import IconLink from 'js/shared-styles/Links/iconLinks/IconLink';
+import Paper from '@mui/material/Paper';
+import Stack from '@mui/material/Stack';
 import EntityTileFooter from '../EntityTileFooter/index';
 import EntityTileBody from '../EntityTileBody/index';
 import { StyledIcon } from './style';
@@ -59,42 +60,69 @@ function ErrorTile({ entity_type, id }: Pick<EntityTileProps, 'id' | 'entity_typ
   const entityTypeLowercase = entity_type.toLowerCase();
   const copy = useHandleCopyClick();
   return (
-    <Tile
-      icon={
-        <StatusIcon
-          status="error"
-          sx={{ fontSize: '1.5rem', marginRight: (theme) => theme.spacing(1), alignSelf: 'start' }}
-        />
-      }
-      bodyContent={
-        <>
-          <Tile.Title>Unable to load {entityTypeLowercase}.</Tile.Title>
-          <Typography variant="body2">
-            Please <ContactUsLink /> with the {entityTypeLowercase}&apos;s ID for more information.
-          </Typography>
-          <Typography variant="body2">
-            ID:{' '}
-            <IconLink
-              onClick={(e) => {
-                e.preventDefault();
-                copy(id);
-              }}
-              href="#"
-              icon={
-                <IconButton>
-                  <ContentCopyIcon />
-                </IconButton>
-              }
-            >
-              {id}
-            </IconLink>
-          </Typography>
-        </>
-      }
-      footerContent={undefined}
-      tileWidth={tileWidth}
-    />
+    <Paper
+      sx={(theme) => ({
+        bgcolor: '#fbebf3',
+        width: tileWidth,
+        padding: theme.spacing(1),
+        borderRadius: theme.spacing(0.5),
+        border: `1px solid ${theme.palette.error.main}`,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: theme.spacing(1),
+      })}
+      variant="outlined"
+    >
+      <Stack direction="row" gap={1} color="error.main" alignItems="center">
+        <StatusIcon status="error" sx={{ fontSize: '1.5rem' }} />
+        <Typography variant="subtitle1">{id}</Typography>
+        <IconButton onClick={() => copy(id)}>
+          <ContentCopyIcon color="info" />
+        </IconButton>
+      </Stack>
+      <Typography variant="body2">
+        Unable to load {entityTypeLowercase}. <ContactUsLink capitalize /> with the {entityTypeLowercase} ID for more
+        information.
+      </Typography>
+    </Paper>
   );
+  // return (
+  //   <Tile
+  //     icon={
+  // <StatusIcon
+  //   status="error"
+  //   sx={{ fontSize: '1.5rem', marginRight: (theme) => theme.spacing(1), alignSelf: 'start' }}
+  // />
+  //     }
+  //     bodyContent={
+  //       <>
+  //         <Tile.Title>Unable to load {entityTypeLowercase}.</Tile.Title>
+  //         <Typography variant="body2">
+  //           Please <ContactUsLink /> with the {entityTypeLowercase}&apos;s ID for more information.
+  //         </Typography>
+  //         <Typography variant="body2">
+  //           ID:{' '}
+  //           <IconLink
+  //             onClick={(e) => {
+  //               e.preventDefault();
+  //               copy(id);
+  //             }}
+  //             href="#"
+  //             icon={
+  //               <IconButton>
+  //                 <ContentCopyIcon />
+  //               </IconButton>
+  //             }
+  //           >
+  //             {id}
+  //           </IconLink>
+  //         </Typography>
+  //       </>
+  //     }
+  //     footerContent={undefined}
+  //     tileWidth={tileWidth}
+  //   />
+  // );
 }
 
 export { tileWidth, ErrorTile };