feat(web-ui): update blog post styles (#822)

* feat(web-ui): improve styling in blog posts * refactor(web-ui): support empty text in metadata hook * feat(web-ui): add document title to pages * fix(web-ui): rename text key --------- Co-authored-by: Johan Book <{ID}+{username}@users.noreply.github.com>
johanbook · Jul 11, 2024 · ffd1de3 · ffd1de3
1 parent 257033d
commit ffd1de3
Show file tree

Hide file tree

Showing 5 changed files with 17 additions and 13 deletions.
diff --git a/services/web-ui/public/locales/en/core.json b/services/web-ui/public/locales/en/core.json
@@ -5,7 +5,7 @@
   },
   "navigation": {
     "blog": "Blog",
-    "chat": "Conversations",
+    "chat": "Chats",
     "profile": "Profile"
   },
   "table": {

diff --git a/services/web-ui/src/features/blogs/components/BlogPost/BlogPost.tsx b/services/web-ui/src/features/blogs/components/BlogPost/BlogPost.tsx
@@ -6,8 +6,6 @@ import {
   Avatar,
   Box,
   Button,
-  CardActions,
-  CardContent,
   Collapse,
   IconButton,
   List,
@@ -82,7 +80,7 @@ export function BlogPost({
 
       <BlogPostPhotos photos={post.photos} />
 
-      <CardActions disableSpacing>
+      <Box sx={{ px: 1, pt: 1 }}>
         <BlogPostLikeButton
           blogPostId={post.id}
           reactionId={post.reactions.currentProfileReactionId}
@@ -91,29 +89,29 @@ export function BlogPost({
         <IconButton aria-label="comment" onClick={() => setShowComments(true)}>
           <ModeCommentOutlined />
         </IconButton>
-      </CardActions>
+      </Box>
 
       {post.reactions.count > 0 && (
-        <CardContent sx={{ py: 0 }}>
+        <Box sx={{ px: 2, pt: 1 }}>
           <Typography variant="subtitle2">
             {t("reactions.count", {
               count: post.reactions.count,
               first: firstReactions.join(", "),
               last: lastReaction,
             })}
           </Typography>
-        </CardContent>
+        </Box>
       )}
 
       {post.comments.length > 0 && !alwaysShowComments && (
-        <CardActions disableSpacing>
+        <Box sx={{ px: 1 }}>
           <Button onClick={() => setShowComments(!showComments)}>
             {t(
               showComments ? "actions.hide-comments" : "actions.view-comments",
               { count: post.comments.length }
             )}
           </Button>
-        </CardActions>
+        </Box>
       )}
 
       <Collapse in={showComments}>
@@ -122,7 +120,7 @@ export function BlogPost({
             <ListItem key={comment.id} style={{ alignItems: "start" }}>
               <Avatar src={comment.profile.imageUrl} />
 
-              <Box sx={{ paddingLeft: 1 }}>
+              <Box sx={{ pl: 1 }}>
                 <Box sx={{ alignItems: "center", display: "flex" }}>
                   <Typography>
                     <b>{comment.profile.name}</b>

diff --git a/services/web-ui/src/features/blogs/pages/BlogPostListPage/BlogPostListPage.container.tsx b/services/web-ui/src/features/blogs/pages/BlogPostListPage/BlogPostListPage.container.tsx
@@ -7,6 +7,7 @@ import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { InteractionObserver } from "src/core/infinite-scroll";
 import { CacheKeysConstants, useInfiniteQuery } from "src/core/query";
+import { useMetaData } from "src/hooks/useMetaData";
 
 import { BlogPostForm } from "../../components/BlogPostForm";
 import { BlogPostPageComponent } from "./BlogPostListPage.component";
@@ -16,6 +17,8 @@ import { BlogPostListPageSkeleton } from "./BlogPostListPage.skeleton";
 const ITEMS_PER_PAGE = 10;
 
 export function BlogPostListPageContainer(): ReactElement {
+  useMetaData({ title: "" });
+
   const { t } = useTranslation("blog");
 
   const { error, data, isPending, fetchNextPage, hasNextPage } =

diff --git a/services/web-ui/src/features/blogs/pages/BlogPostPage/BlogPostPage.container.tsx b/services/web-ui/src/features/blogs/pages/BlogPostPage/BlogPostPage.container.tsx
@@ -7,12 +7,15 @@ import { blogsApi } from "src/apis";
 import { ErrorMessage } from "src/components/ui/ErrorMessage";
 import { useTranslation } from "src/core/i18n";
 import { CacheKeysConstants, useQuery } from "src/core/query";
+import { useMetaData } from "src/hooks/useMetaData";
 
 import { BlogPost } from "../../components/BlogPost";
 import { BlogPostPageNav } from "./BlogPostPage.nav";
 import { BlogPostPageSkeleton } from "./BlogPostPage.skeleton";
 
 export function BlogPostPageContainer(): ReactElement {
+  useMetaData({ title: "Post" });
+
   const { t } = useTranslation("blog");
   const { id = "" } = useParams();
 

diff --git a/services/web-ui/src/hooks/useMetaData.ts b/services/web-ui/src/hooks/useMetaData.ts
@@ -8,8 +8,8 @@ interface IUseMetaDataProps {
 
 export function useMetaData({ title }: IUseMetaDataProps) {
   useEffect(() => {
-    if (title) {
-      document.title = `${title} | ${config.APP.NAME}`;
-    }
+    document.title = title
+      ? `${title} | ${config.APP.NAME}`
+      : (document.title = `${config.APP.NAME}`);
   }, [title]);
 }