fix(web-ui): update blog post skeleton style

services/web-ui/src/features/blogs/pages/BlogPostListPage/BlogPostListPage.container.tsx

@@ -50,6 +50,10 @@ export function BlogPostListPageContainer(): ReactElement {
   if (isPending) {
     return (
       <BlogPostListPageNav>
+        <Box sx={{ py: 2, px: 2 }}>
+          <BlogPostForm />
+        </Box>
+
         <BlogPostListPageSkeleton />
       </BlogPostListPageNav>
     );

services/web-ui/src/features/blogs/pages/BlogPostListPage/BlogPostListPage.skeleton.tsx

@@ -1,36 +1,28 @@
 import { ReactElement } from "react";
 
-import { Box, Card, Skeleton } from "@mui/material";
-
-import { BlogPostForm } from "../../components/BlogPostForm";
+import { Box, Skeleton } from "@mui/material";
 
 export function BlogPostListPageSkeleton(): ReactElement {
   const skeletons = [100, 200, 110, 170, 50, 90];
 
   return (
     <>
-      <Box sx={{ paddingBottom: 2, paddingTop: 2 }}>
-        <BlogPostForm />
-      </Box>
-
       {skeletons.map((width) => (
-        <Card
-          key={width}
-          sx={{ marginBottom: 2, padding: 2 }}
-          variant="outlined"
-        >
-          <Box sx={{ alignItems: "center", display: "flex", paddingBottom: 2 }}>
+        <Box key={width} sx={{ py: 2, borderTop: 1, borderColor: "divider" }}>
+          <Box sx={{ alignItems: "center", display: "flex", pb: 2, pl: 2 }}>
             <Skeleton height={40} variant="circular" width={40} />
 
             <Box sx={{ flexGrow: 1, paddingLeft: 1 }}>
               <Skeleton width={width} />
             </Box>
           </Box>
 
-          <Skeleton />
+          <Box sx={{ px: 2 }}>
+            <Skeleton />
+          </Box>
 
-          <Skeleton height={100} sx={{ padding: 1 }} />
-        </Card>
+          <Skeleton height={140} />
+        </Box>
       ))}
     </>
   );