Refactor/to-scss-blog-post-container

CHANGELOG.md

@@ -160,7 +160,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Changed
 
 - Migrating styles from Styled Components to CSS Modules
-  - ContactUsCard
+  - ContactUsCards
   - ContactUsForm
   - ButtonLink
   - SubmitButton
@@ -169,15 +169,19 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
   - PostContent
   - SearchBar
   - BlogPostsContainer
+  - BlogPostContainer
   - RevealContentContainer
   - Member
   - Row
   - Container
   - Wrapper
+  - 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
-- Reverted the prop name to styles in Container component as the change of the name introduced a styling bug 
-- Rename RowAlignLeft to Row
-- Extracted :root from themes.scss to globals.scss
+- 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,9 +25,7 @@ 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}
+          altTag=''
           $contentType='questions'
           link='/contact'
           linkText='Contact us'

pages/about.js

@@ -31,7 +31,7 @@ export default function AboutUs() {
           }
           rowOrder='row'
           image='/images/svg/square-brackets.svg'
-          altTag='Square Brackets'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.primaryAccent}
           $contentType='our-background'
@@ -72,7 +72,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/open-angle-bracket.svg'
-          altTag='Open angle bracket'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.white}
           $contentType='our-process'
@@ -94,7 +94,7 @@ export default function AboutUs() {
             </div>
           }
           image='/images/svg/close-angle-bracket.svg'
-          altTag='close-angle-bracket'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.white}
           $contentType='our-process'
@@ -137,7 +137,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/semi-colon.svg'
-          altTag='Semi-colon'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.white}
           $contentType='our-purpose'
@@ -148,7 +148,7 @@ export default function AboutUs() {
           title='Wanna learn more?'
           content={''}
           image='/images/svg/close-curly-bracket.svg'
-          altTag='Close curly bracket'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.lightBg}
           $contentType='wanna-learn-more'
@@ -217,7 +217,7 @@ export default function AboutUs() {
           }
           rowOrder='row-reverse'
           image='/images/svg/slash.svg'
-          altTag='Slash'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.white}
           $contentType='get-started'
@@ -254,7 +254,7 @@ export default function AboutUs() {
           title='Still got questions?'
           content='Feel free to contact us.'
           image='/images/svg/hashtag.svg'
-          altTag='Hashtag'
+          altTag=''
           color={theme.colors.primaryContent}
           bgColor={theme.colors.white}
           $contentType='questions'

pages/index.js

@@ -12,7 +12,7 @@ export default function Home() {
         <TwoColumn
           title="Let's grow together."
           image='/images/join-us.webp'
-          altTag='Join the project'
+          altTag='Three people collaborating happily on a laptop in a modern workspace'
           content='Web Dev Path is an open-source initiative that provides hands-on experience in a simulated professional environment to people who seek to begin or move forward in their web development journey.'
           link='/about'
           customBtnClass='inverted-grey'