Merge pull request #255 from Web-Dev-Path/refactor/to-scss-postcontent

Convert PostContent's styles from Styled Components to CSS Modules

Author: oluwatobiss

CHANGELOG.md

@@ -163,9 +163,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - ButtonLink
   - SubmitButton
   - AuthorBio
+  - PostContent
   - SearchBar
   - BlogPostsContainer
   - RevealContentContainer
-  
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling 

components/blog/PostContent/styles.js …blog/PostContent/PostContent.module.scsscomponents/blog/PostContent/styles.js renamed to components/blog/PostContent/PostContent.module.scss components/blog/PostContent/styles.js renamed to components/blog/PostContent/PostContent.module.scss

@@ -1,17 +1,14 @@
-import styled, { css } from 'styled-components';
-
-const P = styled.p`
+.subtitle {
   font-size: 2rem;
   font-style: italic;
   text-align: left;
   line-height: normal;
   margin: 2rem 0;
-`;
-const SubTitle = styled(P)``;
+}
 
-const ContentContainer = styled.div`
+.contentContainer {
   a {
-    color: ${({ theme }) => theme.colors.blue};
+    color: var(--color-blue);
   }
   .article-body-image-wrapper {
     display: flex;
@@ -44,29 +41,23 @@ const ContentContainer = styled.div`
     font-size: 1rem;
     padding: 1rem;
     border-radius: 0.5rem;
-    background-color: ${({ theme }) => theme.colors.black};
-    color: ${({ theme }) => theme.colors.white};
+    background-color: var(--color-black);
+    color: var(--color-white);
     overflow-x: scroll;
   }
   .highlight__panel-action.js-fullscreen-code-action {
     display: none;
   }
-`;
+}
 
-const ImageWrapper = styled.div`
+.imageWrapper {
   position: relative;
   max-width: 828px;
   height: 348px;
   margin: 0 auto;
   img {
-    border-color: ${({ theme }) => theme.colors.darkGrey};
+    border-color: var(--color-dark-grey);
     border-radius: 10px;
     object-fit: contain;
   }
-`;
-
-export default {
-  SubTitle,
-  ContentContainer,
-  ImageWrapper,
-};
+}

components/blog/PostContent/index.js

@@ -1,21 +1,23 @@
-import S from './styles';
+import styles from './PostContent.module.scss';
 import Image from 'next/image';
 import Container from '@/components/containers/Container';
+
 export default function PostContent({ post }) {
   const publishedDate = post.published_at.split('T')[0];
   return (
     <Container>
       <h1>{post.title}</h1>
-      <S.SubTitle>{`${post.user.name}\u00A0\u00A0\u00A0${publishedDate}`}</S.SubTitle>
-
+      <p
+        className={styles.subtitle}
+      >{`${post.user.name}\u00A0\u00A0\u00A0${publishedDate}`}</p>
       {post.cover_image && (
-        <S.ImageWrapper>
+        <div className={styles.imageWrapper}>
           <Image src={post.cover_image} alt='Blog post cover' fill />
-        </S.ImageWrapper>
+        </div>
       )}
-      <S.ContentContainer>
+      <div className={styles.contentContainer}>
         <div dangerouslySetInnerHTML={{ __html: post.body_html }} />
-      </S.ContentContainer>
+      </div>
     </Container>
   );
 }

styles/themes.scss

@@ -1,6 +1,8 @@
 :root {
   --bg-contact-card: #ffffff;
   --bg-color: #eaeaea;
+  --color-black: #000000;
+  --color-blue: #0000ee;
   --color-dark-grey: #9ba39d;
   --color-grey: #d9d9d9;
   --color-white: #ffffff;