Merge pull request #247 from Web-Dev-Path/refactor/to-scss-authorbio

Refactor/to scss AuthorBio

Author: Satoshi-Sh

CHANGELOG.md

@@ -157,7 +157,11 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Changed
 
-- Started migrating styles from Styled Components to CSS Modules (ContactUsCard)
-- CSS Modules Migration for ButtonLink,SubmitButton
-- Updated ContactUsForm from Styled Components to CSS Modules (SCSS)
+- Migrating styles from Styled Components to CSS Modules
+  - ContactUsCard
+  - ContactUsForm
+  - ButtonLink
+  - SubmitButton
+  - AuthorBio
+  
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility

components/blog/AuthorBio/AuthorBio.module.scss

@@ -0,0 +1,54 @@
+@use '@/styles/mixins' as *;
+
+.grey-bg {
+  background-color: var(--color-grey);
+  padding: 4rem 0 7.5rem 0;
+  margin: 4rem 0;
+}
+
+.flex-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  justify-content: center;
+  @include tablet {
+    flex-direction: row;
+  }
+}
+
+.logos-container {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.split-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.image-wrapper {
+  min-width: 16rem;
+  min-height: 16rem;
+  position: relative;
+
+  img {
+    max-width: 16rem;
+    max-height: 16rem;
+    border-width: 3px;
+    border-color: var(--color-dark-grey);
+    border-style: solid;
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}
+
+.icon-wrapper {
+  width: 1.5rem;
+  height: 1.5rem;
+  position: relative;
+  img {
+    object-fit: cover;
+  }
+}

components/blog/AuthorBio/index.js

@@ -1,18 +1,18 @@
-import S from './styles';
+import styles from './AuthorBio.module.scss';
 import Image from 'next/image';
 import Container from '@/components/containers/Container';
 export default function AuthorBio({ user }) {
   return (
-    <S.GreyBG>
+    <div className={styles['grey-bg']}>
       <Container>
         <h3>Author Bio</h3>
-        <S.FlexContainer>
-          <S.ImageWrapper>
+        <div className={styles['flex-container']}>
+          <div className={styles['image-wrapper']}>
             <Image src={user.profile_image} alt="Author's profile" fill />
-          </S.ImageWrapper>
-          <S.SplitContainer>
+          </div>
+          <div className={styles['split-container']}>
             <p>{user.summary}</p>
-            <S.LogosContainer>
+            <div className={styles['logos-container']}>
               {user.twitter_username && (
                 <a
                   href={`https://x.com/${user.twitter_username}`}
@@ -67,10 +67,10 @@ export default function AuthorBio({ user }) {
                   width={48}
                 />
               </a>
-            </S.LogosContainer>
-          </S.SplitContainer>
-        </S.FlexContainer>
+            </div>
+          </div>
+        </div>
       </Container>
-    </S.GreyBG>
+    </div>
   );
 }

components/blog/AuthorBio/styles.js

@@ -1,6 +1,8 @@
 :root {
   --bg-contact-card: #ffffff;
   --bg-color: #eaeaea;
+  --color-dark-grey: #9ba39d;
+  --color-grey: #d9d9d9;
   --color-white: #ffffff;
   --color-primary-content: #292929;
   --color-transparent: transparent;