Merge branch 'main' into chore/add-shayla-about-us

Author: shayla-develops-webs

CHANGELOG.md

@@ -164,10 +164,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

@@ -0,0 +1,7 @@
+@use '@/styles/variables' as *;
+
+.container {
+  margin: 0 auto;
+  width: 90%;
+  max-width: $large-desktop-breakpoint;
+}

components/containers/Container/Container.module.scss

@@ -1,9 +1,9 @@
-import S from './styles';
+import styles from './Container.module.scss';
 
-export default function Container({ className, children, styles }) {
+export default function Container({ className, children, style }) {
   return (
-    <S.Container className={className} style={styles}>
+    <div className={`${styles.container} ${className || ''}`} style={style}>
       {children}
-    </S.Container>
+    </div>
   );
 }

components/containers/Container/index.js

@@ -1,4 +1,5 @@
 @use '@/styles/mixins' as *;
+@use '@/styles/variables' as *;
 
 .card {
   margin: 1rem 1rem 0 0.5rem;
@@ -25,15 +26,15 @@
 
 .name {
   font-style: italic;
-  font-family: var(--font-heading);
+  font-family: $heading-font;
   font-size: 1.5rem;
   color: var(--color-primary-content);
   margin-bottom: 0px;
   line-height: unset;
 }
 
 %headingStyle {
-  font-family: var(--font-heading);
+  font-family: $heading-font;
   font-size: 1rem;
   color: var(--color-primary-content);
   text-align: left;

components/containers/Container/styles.js

@@ -6,12 +6,12 @@
   --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);
   --dark-bg: #023047;
   --error: #be1313;
-  --font-heading: 'Open Sans';
 }
 
 // placeholder colors