styles: post meta data

src/components/Blog/Authors/index.tsx

@@ -1,30 +1,20 @@
-import { Avatar, AvatarGroup, Typography } from '@mui/material'
-import css from '../styles.module.css'
+import { Avatar, AvatarGroup } from '@mui/material'
 import type { Entry } from 'contentful'
 import type { TypeAuthorSkeleton } from '@/contentful/types'
 import { isAsset } from '@/lib/typeGuards'
-import { formatAuthorsList } from '@/components/Blog/utils/formatAuthorsList'
 
 export type AuthorsProps = Entry<TypeAuthorSkeleton, undefined, string>[]
 
-const Authors = ({ authors }: { authors: AuthorsProps }) => {
-  return (
-    <div className={css.authors}>
-      <AvatarGroup className={css.avatarGroup} max={3}>
-        {authors.map((author) => {
-          const { name, picture } = author.fields
+const Authors = ({ authors }: { authors: AuthorsProps }) => (
+  <AvatarGroup max={3}>
+    {authors.map((author) => {
+      const { name, picture } = author.fields
 
-          return isAsset(picture) && picture.fields.file?.url ? (
-            <Avatar key={name} src={picture.fields.file.url} alt={picture.fields.title} />
-          ) : undefined
-        })}
-      </AvatarGroup>
-
-      <Typography variant="caption" color="text.primary">
-        {formatAuthorsList(authors)}
-      </Typography>
-    </div>
-  )
-}
+      return isAsset(picture) && picture.fields.file?.url ? (
+        <Avatar key={name} src={picture.fields.file.url} alt={picture.fields.title} />
+      ) : undefined
+    })}
+  </AvatarGroup>
+)
 
 export default Authors

src/components/Blog/ContentsTable/index.tsx

@@ -25,6 +25,8 @@ const ContentsTable = ({ content }: { content: ContentfulDocument }) => {
     [content],
   )
 
+  if (!headings.length) return null
+
   return (
     <div className={css.contentsTable}>
       <Typography variant="caption" color="text.primary">

src/components/Blog/Post/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Container, Divider, Grid, Typography } from '@mui/material'
+import { Button, Container, Divider, Grid, Typography } from '@mui/material'
 import { type Entry } from 'contentful'
 import type { TypeAuthorSkeleton } from '@/contentful/types'
 import { isAsset, isEntryTypeAuthor, isEntryTypePost } from '@/lib/typeGuards'
@@ -18,6 +18,7 @@ import { COMMS_EMAIL } from '@/config/constants'
 import { useBlogPost } from '@/hooks/useBlogPost'
 import type { BlogPostEntry } from '@/config/types'
 import Meta from '@/components/Blog/Meta'
+import { formatAuthorsList } from '@/components/Blog/utils/formatAuthorsList'
 
 export type BlogPostProps = {
   blogPost: BlogPostEntry
@@ -44,13 +45,17 @@ const BlogPost = ({ blogPost }: BlogPostProps) => {
         </Typography>
 
         <div className={css.meta}>
-          <Box mt={{ xs: 2, md: 3 }}>
-            <Tags tags={tags} />
-          </Box>
+          <div className={css.info}>
+            <Authors authors={authorsList} />
 
-          <Authors authors={authorsList} />
+            <div>
+              <Typography variant="body2">{formatAuthorsList(authorsList)}</Typography>
 
-          <Meta post={post} />
+              <Meta post={post} />
+            </div>
+          </div>
+
+          <Tags tags={tags} />
         </div>
 
         {isAsset(coverImage) && coverImage.fields.file?.url ? (
@@ -111,6 +116,7 @@ const Sidebar = ({
       {isPressRelease ? (
         <div className={css.questionBox}>
           <Typography>Do you have any questions?</Typography>
+
           <Button href={`mailto:${COMMS_EMAIL}`} target="_blank" variant="contained" className={css.button}>
             <Typography>Press inquiry</Typography>
           </Button>
@@ -131,6 +137,7 @@ const SharingLinks = ({
     <Typography variant="caption" color="text.primary">
       Share this
     </Typography>
+
     <Socials title={title} authors={authors} />
   </div>
 )

src/components/Blog/styles.module.css

@@ -20,30 +20,35 @@
   margin-top: 16px;
 }
 
-.excerpt {
-  margin-bottom: 24px;
+.meta {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  margin-top: 16px;
+  margin-bottom: 40px;
+  gap: 16px;
 }
 
-.tagsWrapper {
+.info {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
+  align-items: flex-start;
   gap: 16px;
 }
 
-.chip {
-  border-radius: 4px;
-  height: 24px;
+.excerpt {
+  margin-bottom: 24px;
 }
 
-.authors {
+.tagsWrapper {
   display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
-.avatarGroup {
-  margin: 16px 16px 16px 0px;
-  justify-content: flex-end;
+.chip {
+  border-radius: 4px;
+  height: 24px;
 }
 
 .content {
@@ -59,6 +64,7 @@
 .coverImage {
   max-width: none;
   width: 100%;
+  border-radius: 16px;
 }
 
 .postBody a {
@@ -122,8 +128,15 @@
     overflow-wrap: normal;
   }
 
-  .avatarGroup {
-    margin: 24px 24px 24px 0px;
+  .meta {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+  }
+
+  .info {
+    flex-direction: row;
+    align-items: center;
   }
 
   .content {