style: update the post body styling, and make it unified with the editor

src/Components/Inputs/TextEditor/ToolButton/HeadingsToolBtn.tsx

@@ -46,7 +46,7 @@ export default function HeadingsToolButton({ classes }: Props) {
             <FiType className={classes.icon} />
         </MenuButton>
     } transition>
-        {Array(6).fill(0).map((_, idx) => <MenuItem
+        {Array(3).fill(0).map((_, idx) => <MenuItem
             key={idx}
             className={`
                 py-8 px-16 hover:bg-gray-200

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/ContentEditor.tsx

@@ -97,7 +97,7 @@ export default function ContentEditor({ placeholder, initialContent, name }: Pro
 
 
     return (
-        <div className={`remirror-theme ${styles.wrapper} bg-white`}>
+        <div className={`remirror-theme ${styles.wrapper} post-body bg-white`}>
             <Remirror
                 manager={manager}
                 initialContent={initialContent}

src/features/Posts/pages/CreatePostPage/Components/ContentEditor/styles.module.scss

@@ -1,3 +1,5 @@
+@import "/src/styles/mixins/index.scss";
+
 .wrapper {
   :global {
     .ProseMirror {
@@ -6,6 +8,8 @@
       border-bottom-right-radius: inherit;
       min-height: var(--rmr-space-7);
 
+      @include post-body;
+
       a {
         color: rgb(54, 139, 236);
 

src/features/Posts/pages/FeedPage/FeedPage.tsx

@@ -12,6 +12,7 @@ import { Helmet } from "react-helmet";
 import Button from 'src/Components/Button/Button'
 import { FaDiscord } from 'react-icons/fa'
 import { FiArrowRight } from 'react-icons/fi'
+import { capitalize } from 'src/utils/helperFunctions'
 
 
 export default function FeedPage() {
@@ -54,7 +55,7 @@ export default function FeedPage() {
                     </p>}
                     <h1 className="text-h2 font-bolder">{
                         tagFilter ?
-                            <>{tagFilter.icon} {tagFilter.title}</>
+                            <>{tagFilter.icon} {capitalize(tagFilter.title)}</>
                             :
                             "Stories ✍🏼"
                     }</h1>

src/features/Posts/pages/FeedPage/PopularTagsFilter/PopularTagsFilter.tsx

@@ -3,6 +3,7 @@ import Skeleton from 'react-loading-skeleton';
 import Slider from 'src/Components/Slider/Slider';
 import { Tag, usePopularTagsQuery } from 'src/graphql';
 import { MEDIA_QUERIES } from 'src/utils/theme';
+import { capitalize } from 'src/utils/helperFunctions';
 
 export type FilterTag = Pick<Tag, 'id' | 'title' | "icon">
 
@@ -55,7 +56,7 @@ export default function PopularTagsFilter({ value, onChange }: Props) {
                             >
                                 <span className={`${tag.id !== selectedId && 'bg-gray-50'} rounded-8 w-40 h-40 text-center py-8`}>{tag.icon}</span>
                                 <span className="self-center px-16">
-                                    {tag.title}
+                                    {capitalize(tag.title)}
                                 </span>
                             </li>)}
                     </ul>

src/features/Posts/pages/PostDetailsPage/Components/PageContent/styles.module.scss

@@ -1,60 +1,5 @@
-.body :where(h1, h2, h3, h4, h5, h6) {
-  font-weight: 700;
-  margin-top: 36px;
-  margin-bottom: calc(min(16px, 0.5em));
-}
+@import "/src/styles/mixins/index.scss";
 
-.body h1 {
-  font-size: 48px;
-  line-height: 54px;
-}
-.body h2 {
-  font-size: 36px;
-  line-height: 50px;
-}
-.body h3 {
-  font-size: 29px;
-  line-height: 40px;
-}
-.body h4 {
-  font-size: 22px;
-  line-height: 31px;
-}
-.body h5 {
-  font-size: 19px;
-  line-height: 26px;
-}
-
-.body p,
-.body ul {
-  font-size: 16px;
-  line-height: 22px;
-  margin-bottom: 1.5em;
-}
-
-.body a {
-  color: rgb(107, 107, 249);
-}
-.body a:hover {
-  text-decoration: underline;
-}
-
-.body pre {
-  background-color: #efeff3;
-  padding: 16px;
-  border-radius: 12px;
-  color: #272727;
-  margin-bottom: 24px;
-  font-family: monospace;
-  overflow-x: scroll;
-
-  &::-webkit-scrollbar {
-    height: 8px;
-  }
-}
-
-.body iframe {
-  width: calc(min(100%, 640px));
-  aspect-ratio: 16/9;
-  margin: 36px auto;
+.body {
+  @include post-body;
 }

src/features/Posts/pages/PostDetailsPage/styles.module.scss

@@ -1,4 +1,4 @@
-@import "/src/styles/mixins";
+@import "/src/styles/mixins/index.scss";
 
 .grid {
   display: grid;

src/styles/index.scss

@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap");
-@import "mixins";
 
 $screen-xs-min: 320px;
 

src/styles/mixins/_post_body.scss

@@ -0,0 +1,69 @@
+@mixin post-body {
+  :is(h1, h2, h3, h4, h5, h6) {
+    font-weight: 700;
+    margin-bottom: calc(min(16px, 0.5em));
+
+    &:not(:first-child) {
+      margin-top: 36px;
+    }
+  }
+
+  h1 {
+    font-size: 36px;
+    line-height: 50px;
+  }
+  h2 {
+    font-size: 32px;
+    line-height: 44px;
+  }
+  h3 {
+    font-size: 28px;
+    line-height: 40px;
+  }
+  h4 {
+    font-size: 22px;
+    line-height: 31px;
+  }
+  h5 {
+    font-size: 19px;
+    line-height: 26px;
+  }
+  h5 {
+    font-size: 16px;
+    line-height: 26px;
+  }
+
+  p,
+  ul {
+    font-size: 16px;
+    line-height: 22px;
+    margin-bottom: 1.5em;
+  }
+
+  a {
+    color: rgb(107, 107, 249);
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+
+  pre {
+    background-color: #efeff3;
+    padding: 16px;
+    border-radius: 12px;
+    color: #272727;
+    margin-bottom: 24px;
+    font-family: monospace;
+    overflow-x: auto;
+
+    &::-webkit-scrollbar {
+      height: 8px;
+    }
+  }
+
+  iframe {
+    width: calc(min(100%, 640px));
+    aspect-ratio: 16/9;
+    margin: 36px auto;
+  }
+}

src/styles/mixins/index.scss

@@ -1 +1,2 @@
 @import "media_queries";
+@import "post_body";

tailwind.config.js

@@ -32,7 +32,7 @@ module.exports = {
       fontSize: {
         h1: ["36px", "50px"],
         h2: ["32px", "44px"],
-        h3: ["29px", "40px"],
+        h3: ["28px", "40px"],
         h4: ["22px", "31px"],
         h5: ["19px", "26px"],
         body1: ["24px", "30px"],