Merge pull request #257 from Web-Dev-Path/refactor/to-scss-Member

Refactor/to scss member

Author: Satoshi-Sh

CHANGELOG.md

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

components/containers/Member/Member.module.scss

@@ -0,0 +1,91 @@
+@use '@/styles/mixins' as *;
+
+.card {
+  margin: 1rem 1rem 0 0.5rem;
+  padding: 1rem;
+  border-radius: 1.5rem;
+  min-height: 35rem;
+  background-color: var(--color-transparent);
+  display: flex;
+  justify-content: left;
+  flex-direction: column;
+  width: 100%;
+
+  @include tablet {
+    height: 30rem;
+    width: 40%;
+  }
+
+  @include medium-desktop {
+    min-width: 20%;
+    max-width: 20%;
+    margin: 1.5rem;
+  }
+}
+
+.name {
+  font-style: italic;
+  font-family: var(--font-heading);
+  font-size: 1.5rem;
+  color: var(--color-primary-content);
+  margin-bottom: 0px;
+  line-height: unset;
+}
+
+%headingStyle {
+  font-family: var(--font-heading);
+  font-size: 1rem;
+  color: var(--color-primary-content);
+  text-align: left;
+  line-height: normal;
+  margin: 0px;
+}
+
+.title {
+  @extend %headingStyle;
+}
+
+.position {
+  @extend %headingStyle;
+}
+
+.content {
+  align-items: center;
+  margin: auto;
+}
+
+.paragraph {
+  font-size: 1rem;
+  text-align: left;
+  line-height: normal;
+}
+
+.linkWrapper {
+  font-size: 1rem;
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  margin-bottom: 1rem;
+
+  a {
+    padding-left: 1rem;
+    text-decoration: underline;
+    text-underline-offset: 2px;
+    &:hover {
+      opacity: 0.6;
+      text-decoration: none;
+    }
+  }
+}
+
+.imageWrapper {
+  min-width: 10rem;
+  min-height: 10rem;
+  position: relative;
+  margin: 0.5rem auto;
+
+  img {
+    border-radius: 50%;
+    object-fit: cover;
+  }
+}

components/containers/Member/index.js

@@ -1,5 +1,5 @@
 import Image from 'next/image';
-import S from './styles';
+import styles from './Member.module.scss';
 
 export default function Member({
   image,
@@ -11,19 +11,19 @@ export default function Member({
   portfolio,
 }) {
   return (
-    <S.Card>
+    <div className={styles.card}>
       {image && (
-        <S.ImageWrapper>
+        <div className={styles.imageWrapper}>
           <Image src={image} alt={name} fill />
-        </S.ImageWrapper>
+        </div>
       )}
 
-      <S.Name>{name}</S.Name>
-      <S.Title>{title}</S.Title>
-      <S.Position>{position}</S.Position>
-      <S.Content>
+      <h2 className={styles.name}>{name}</h2>
+      <h3 className={styles.title}>{title}</h3>
+      <h3 className={styles.position}>{position}</h3>
+      <div className={styles.content}>
         {linkedIn && (
-          <S.LinkWrapper>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/linkedin-portfolio.svg'
               alt='LinkedIn'
@@ -37,10 +37,10 @@ export default function Member({
             >
               {linkedIn}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
         {portfolio && (
-          <S.LinkWrapper>
+          <div className={styles.linkWrapper}>
             <Image
               src='/images/svg/globe.svg'
               alt='Web Site'
@@ -54,11 +54,11 @@ export default function Member({
             >
               {portfolio}
             </a>
-          </S.LinkWrapper>
+          </div>
         )}
 
-        <S.Paragraph>{about}</S.Paragraph>
-      </S.Content>
-    </S.Card>
+        <p className={styles.paragraph}>{about}</p>
+      </div>
+    </div>
   );
 }

components/containers/Member/styles.js

@@ -11,6 +11,7 @@
   --color-box-shadow: rgba(0, 0, 0, 0.08);
   --dark-bg: #023047;
   --error: #be1313;
+  --font-heading: 'Open Sans';
 }
 
 // placeholder colors