Improve card styling consistency with Backstage design system (#1593)

Author: lokanandaprabhu

workspaces/adoption-insights/.changeset/improve-card-styling-consistency.md

@@ -0,0 +1,9 @@
+---
+'@red-hat-developer-hub/backstage-plugin-adoption-insights': patch
+---
+
+Improve card styling consistency with Backstage design system
+
+- Remove explicit borders from CardWrapper component to match standard Backstage card styling
+- Replace custom border styling with Material-UI Paper elevation system for consistent visual appearance
+- Update Divider component to use default styling without custom borders

workspaces/adoption-insights/plugins/adoption-insights/src/components/CardWrapper/CardWrapper.tsx

@@ -32,10 +32,7 @@ const CardWrapper: FC<CardWrapperProps> = ({
   filter,
 }: CardWrapperProps) => {
   return (
-    <Box
-      component={Paper}
-      sx={{ border: theme => `1px solid ${theme.palette.grey[300]}` }}
-    >
+    <Paper elevation={1}>
       <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
         <Typography
           variant="h5"
@@ -51,11 +48,9 @@ const CardWrapper: FC<CardWrapperProps> = ({
 
         {filter && <Box>{filter}</Box>}
       </Box>
-      <Divider
-        sx={{ border: theme => `1px solid ${theme.palette.grey[300]}` }}
-      />
+      <Divider />
       <Box>{children}</Box>
-    </Box>
+    </Paper>
   );
 };