Removing unnecessary props Title

Author: mariana-caldas

components/blog/BlogPostsContainer.js

@@ -32,9 +32,13 @@ const BlogPostsContainer = ({
     <RevealContentContainer>
       <div className={styles.blogContainer}>
         {heading ? (
-          <Title blogTitle title={heading} />
+          <Container>
+            <Title title={heading} />
+          </Container>
         ) : tag ? (
-          <Title blogTitle title={tagToHeading[tag]} />
+          <Container>
+            <Title title={tagToHeading[tag]} />
+          </Container>
         ) : null}
         {
           // put in rows of 3 if more than 3 posts (for swipable cards)

components/snippets/Title.js

@@ -1,19 +1,12 @@
 import styled from 'styled-components';
 
-export const TitleStyle = styled.h2`
-  ${props =>
-    props.blogTitle &&
-    `
-    align-self: flex-start;
-    margin: ${props.adjustedTitle ? '0 auto 1rem 15rem' : '0 auto 1rem'};
-    width: 90%;
-    max-width: 1440px;
-    min-height: 5rem;
-    `};
+export const StyledTitle = styled.h2`
+  align-self: flex-start;
+  margin: '0 auto 1rem';
 `;
 
-const Title = ({ title, blogTitle }) => {
-  return <TitleStyle blogTitle={blogTitle}>{title}</TitleStyle>;
+const Title = ({ title }) => {
+  return <StyledTitle>{title}</StyledTitle>;
 };
 
 export default Title;

pages/blog/index.js

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import BlogPostsContainer from '@/components/blog/BlogPostsContainer';
+import Container from '@/components/containers/Container';
 import SearchBar from '@/components/blog/SearchBar';
 import Title from '@/components/snippets/Title';
 import styles from '@/styles/Blog.module.scss';
@@ -27,10 +28,13 @@ export default function Blog({ posts }) {
 
   return (
     <>
-      <div className={styles.blogSearch}>
-        <Title blogTitle title={!searchTerm && 'Latest Posts'} />
-        <SearchBar setSearchTerm={setSearchTerm} />
-      </div>
+      <Container>
+        <div className={styles.blogSearch}>
+          <Title blogTitle title={!searchTerm && 'Latest Posts'} />
+          <SearchBar setSearchTerm={setSearchTerm} />
+        </div>
+      </Container>
+
       <BlogPostsContainer {...filteredData} />
       {!searchTerm &&
         Object.keys(tagToHeading).map(tag => (

styles/Blog.module.scss

@@ -23,15 +23,14 @@
 
 .blogSearch {
   display: flex;
-  align-items: center;
   padding-top: 2.5rem;
-  margin: 0 auto;
-  width: 90%;
-  max-width: $large-desktop-breakpoint;
+  justify-content: space-between;
+  flex-direction: column-reverse;
+  align-items: flex-start;
 
-  @include mobile {
-    flex-direction: column-reverse;
-    align-items: flex-start;
+  @include desktop {
+    align-items: center;
+    flex-direction: row;
   }
 }
 

styles/SearchBar.module.scss

@@ -4,16 +4,17 @@
 .searchBar {
   display: flex;
   justify-content: space-between;
-  width: 19rem;
   height: 2.5rem;
   border-radius: 0.5rem;
   border: 0;
   box-shadow: 2px 4px 8px 3px rgba(0, 0, 0, 0.08);
   font-size: 1.2rem;
+  width: 100%;
+  margin-top: 3rem;
 
-  @include mobile {
-    width: 80%;
-    margin: 3rem auto;
+  @include desktop {
+    width: 24rem;
+    margin: unset;
   }
 
   input[type='search'] {

yarn.lock

@@ -3576,7 +3576,7 @@ strip-indent@^1.0.1:
   dependencies:
     get-stdin "^4.0.1"
 
-styled-components@^5.3.6:
+styled-components@^5, styled-components@^5.3.6:
   version "5.3.6"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.6.tgz#27753c8c27c650bee9358e343fc927966bfd00d1"
   integrity sha512-hGTZquGAaTqhGWldX7hhfzjnIYBZ0IXQXkCYdvF1Sq3DsUaLx6+NTHC5Jj1ooM2F68sBiVz3lvhfwQs/S3l6qg==