Merge branch 'main' into refactor/to-scss-RelatedPosts

Author: briangesteban

CHANGELOG.md

@@ -150,23 +150,44 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - Added Faith to 'about us'
 - Updated Mariana's title in 'about us'
 - Updated outdated dependencies
+- Added Shayla to 'about us'
 
 ### Fixed
 
 - Updated husky script to avoid warning
+- Resolved incorrect meta tag rendering for nested routes
+- Prevent horizontal page scroll caused by overflowing long titles
 
 ### Changed
 
 - Migrating styles from Styled Components to CSS Modules
-  - ContactUsCard
+  - ContactUsCards
   - ContactUsForm
   - ButtonLink
   - SubmitButton
   - AuthorBio
+  - BlogTag
   - PostContent
   - SearchBar
   - BlogPostsContainer
+  - BlogPostContainer
   - RevealContentContainer
+  - Member
+  - Row
+  - Container
+  - Wrapper
+  - Title
+  - Decorations/Bracket
+  - Decorations/Stick
+  - TwoColumn
   - RelatedPosts
+- Extracted :root from themes.scss to globals.scss
 - Updated ContactUsForm's checkbox wrapper from div to label to enhance its accessibility
 - Updated SearchInput width to 100% for better styling
+- Updated the prop name to propStyles in Container component to fix the name conflict that introduced a styling bug
+- Updated altTag from TwoColumns component to comply with W3C standards
+  - BlogPostContainer
+  - about page
+  - home(index) page
+- Created a combineClasses function to clean up conditional class handling
+- Rename RowAlignLeft to Row

components/blog/BlogPostContainer/index.js

@@ -3,10 +3,8 @@ import TwoColumn from '@/components/containers/TwoColumn';
 import AuthorBio from '@/components/blog/AuthorBio';
 import RelatedOrLatestPosts from '@/components/blog/RelatedPosts';
 import PostContent from '@/components/blog/PostContent';
-import { useTheme } from 'styled-components';
 
 const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => {
-  const theme = useTheme();
   const { user } = post;
   return (
     <>
@@ -27,12 +25,12 @@ const BlogPostContainer = ({ post, relatedPosts, latestPosts }) => {
           title='Still got questions?'
           content='Feel free to contact us.'
           image='/images/svg/square-brackets.svg'
-          altTag='Hashtag'
-          color={theme.colors.primaryContent}
-          bgColor={theme.colors.white}
-          $contentType='questions'
+          altTag=''
+          color='var(--color-primary-content)'
+          bgColor='var(--color-white)'
           link='/contact'
           linkText='Contact us'
+          customInnerClass='questions'
           customBtnClass='inverted-grey'
         />
       </RevealContentContainer>

components/blog/BlogPostsContainer/BlogPostsContainer.module.scss

@@ -1,5 +1,4 @@
-@use '@/styles/mixins' as *;
-@use '@/styles/variables' as *;
+@use '@/styles/index' as *;
 
 .blogContainer {
   display: flex;

components/blog/BlogPostsContainer/index.js

@@ -1,7 +1,6 @@
 import Link from 'next/link';
 import { BlogCardsColumns } from '@/components/containers/CardColumns/BlogCardsColumns';
 import { BlogCard } from '@/components/containers/Card/BlogCard';
-import Title from '@/components/snippets/Title';
 import RevealContentContainer from '@/components/containers/RevealContentContainer';
 import { tagToHeading } from '@/utils/blogCategories';
 import Container from '@/components/containers/Container';
@@ -28,11 +27,11 @@ const BlogPostsContainer = ({
       <section className={styles.blogContainer}>
         {heading ? (
           <Container>
-            <Title title={heading} />
+            <h2>{heading}</h2>
           </Container>
         ) : tag ? (
           <Container>
-            <Title title={tagToHeading[tag]} />
+            <h2>{tagToHeading[tag]}</h2>
           </Container>
         ) : null}
         {swipe ? (

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

@@ -1,15 +1,13 @@
 import styles from './ButtonLink.module.scss';
+import { combineClasses } from '@/utils/classnames';
 
 export default function ButtonLink({
   link,
   children,
   customBtnClass,
   openNewTab,
 }) {
-  const buttonClass = customBtnClass
-    ? `${styles.buttonLink} ${styles[customBtnClass]}`
-    : styles.buttonLink;
-
+  const buttonClass = combineClasses(styles.buttonLink, customBtnClass, styles);
   return (
     <a
       href={link}

components/buttons/ButtonLink/index.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,12 @@
-import S from './styles';
+import styles from './Container.module.scss';
 
-export default function Container({ className, children, styles }) {
+export default function Container({ className, children, styles: propStyles }) {
   return (
-    <S.Container className={className} style={styles}>
+    <div
+      className={`${styles.container} ${className || ''}`}
+      style={propStyles}
+    >
       {children}
-    </S.Container>
+    </div>
   );
 }