Merge pull request #252 from Web-Dev-Path/Refactor/to-scss-blog-tag

Refactor/to scss blog tag

Author: shayla-develops-webs

CHANGELOG.md

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

components/blog/Tag/Tag.module.scss

@@ -0,0 +1,7 @@
+.tagLink {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: var(--color-light-bg);
+  border-radius: 2rem;
+  font-weight: bold;
+}

components/blog/Tag/index.js

@@ -1,5 +1,10 @@
-import S from './styles';
+import styles from './Tag.module.scss';
+import Link from 'next/link';
 
 export const Tag = ({ text }) => {
-  return <S.TagLink href={`/blog/category/${text}`}>{text}</S.TagLink>;
+  return (
+    <Link href={`/blog/category/${text}`} className={styles.tagLink}>
+      {text}
+    </Link>
+  );
 };

components/blog/Tag/styles.js

@@ -6,6 +6,7 @@
   --color-dark-grey: #9ba39d;
   --color-grey: #d9d9d9;
   --color-white: #ffffff;
+  --color-light-bg: #8cd5e8;
   --color-primary-content: #292929;
   --color-transparent: transparent;
   --color-box-shadow: rgba(0, 0, 0, 0.08);