Pull-Request-Community · MichalPorag · Jul 12, 2022 · Jun 24, 2022 · Jul 2, 2022 · Jul 2, 2022
diff --git a/components/description/description.module.scss b/components/description/description.module.scss
diff --git a/components/descriptionContainer/DescriptionContainer.module.scss b/components/descriptionContainer/DescriptionContainer.module.scss
@@ -0,0 +1,6 @@
+.container {
+  display: flex;
+  justify-content: center;
+  background-color: var(--background-description);
+  box-shadow: 0 0 10px 5px rgb(0, 0, 0, 0.2);
+}
diff --git a/components/description/Description.tsx → ...riptionContainer/DescriptionContainer.tsx b/components/description/Description.tsx → ...riptionContainer/DescriptionContainer.tsx
@@ -1,14 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react';
-import style from './description.module.scss';
-import colors from '../../styles/colors';
+import style from './DescriptionContainer.module.scss';
 
-const Description = ({ descriptionOutput, descriptionHeight }) => {
+const DescriptionContainer = (props) => {
+  const { children, descriptionHeight } = props;
   const myRef = useRef(null);
   const [height, setHeight] = useState(0);
 
   useEffect(() => {
     descriptionHeight(height);
-  }, [descriptionHeight, height]);
+  }, [height]);
 
   useEffect(() => {
     const handleResize = () => {
@@ -23,9 +23,9 @@ const Description = ({ descriptionOutput, descriptionHeight }) => {
 
   return (
     <div ref={myRef} id="container" className={style.container}>
-      {descriptionOutput}
+      {children}
     </div>
   );
 };
 
-export default Description;
+export default DescriptionContainer;
diff --git a/components/layout/layout.module.scss b/components/layout/layout.module.scss
@@ -0,0 +1,20 @@
+.description {
+  height: max-content;
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem; // Based on 16px.
+  gap: 20px;
+  padding: 136px 0 114px;
+  margin: 0 auto;
+  width: 1280px;
+
+  @media only screen and (max-width: 1280px) {
+    padding: 136px 24px 114px;
+  }
+
+  @media only screen and (max-width: 768px) {
+    padding: 136px 24px 80px;
+    margin: 0 auto;
+    max-width: 1280px;
+  }
+}
diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx
@@ -3,16 +3,17 @@ import Head from 'next/head';
 import { getMetaData } from '../../services/metaData';
 import Navbar from './navbar/navbar';
 import Footer from './footer/footer';
-import Description from '../description/Description';
 import { useState } from 'react';
+import DescriptionContainer from '../descriptionContainer/DescriptionContainer';
+import style from './layout.module.scss';
 
-const Layout = ({ children, descriptionText }: LayoutProps) => {
+const Layout = ({ children, descriptionContent }: LayoutProps) => {
   const currentRoute = useRouter().pathname;
   const { title, metaContents } = getMetaData(currentRoute);
   const [currentHeight, setCurrentHeight] = useState(0);
 
   return (
-    <div>
+    <>
       <Head>
         <link rel="icon" href="/favicon.png" />
         <meta property="image" content="/images/logo.png" />
@@ -22,21 +23,22 @@ const Layout = ({ children, descriptionText }: LayoutProps) => {
         {metaContents && metaContents.map((meta, i) => <meta key={i} {...meta} />)}
       </Head>
       <Navbar DesHeight={currentHeight} />
-      <Description
-        descriptionOutput={descriptionText}
+      <DescriptionContainer
         descriptionHeight={(hight) => {
           setCurrentHeight(hight);
         }}
-      />
-      <div className="layout__container layout__body--container">{children}</div>
+      >
+        <div className={style.description}>{descriptionContent}</div>
+      </DescriptionContainer>
+      {children}
       <Footer />
-    </div>
+    </>
   );
 };
 
 interface LayoutProps {
   children: object;
-  descriptionText?: object;
+  descriptionContent?: object;
 }
 
 export default Layout;
diff --git a/pages/articles.tsx b/pages/articles.tsx
@@ -1,9 +1,6 @@
 import { GetStaticProps } from 'next';
-import Description from '../components/description/Description';
 import Layout from '../components/layout/layout';
-import { PersonCard } from '../components/personCard/personCard';
 import { getPeople, IPerson } from '../services/people';
-import styles from '../styles/Home.module.scss';
 import { randomShuffle } from '../utils/randomShuffle';
 interface IHomeProps {
   people: IPerson[];
@@ -12,7 +9,7 @@ interface IHomeProps {
 export default function Articles({ people }: IHomeProps) {
   return (
     <Layout>
-      <div className={styles.container}>Scafolding for article page</div>
+      <div>Scafolding for article page</div>
     </Layout>
   );
 }

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -12,11 +12,13 @@ interface IHomeProps {
 
 export default function Home({ people }: IHomeProps) {
   return (
-    <Layout descriptionText={MainPageDescription()}>
-      <div className={styles.cards__wrapper}>
-        {people.map((person, i) => (
-          <PersonCard key={person.name + i} person={person} />
-        ))}
+    <Layout descriptionContent={<MainPageDescription/>}>
+      <div className={styles.container}>
+        <div className={styles.cards__wrapper}>
+          {people.map((person, i) => (
+            <PersonCard key={person.name + i} person={person} />
+          ))}
+        </div>
       </div>
     </Layout>
   );

diff --git a/pages/projects.tsx b/pages/projects.tsx
@@ -1,6 +1,5 @@
 import next from 'next';
 import React, { useState } from 'react';
-import Description from '../components/description/Description';
 import Navbar from '../components/layout/navbar/navbar';
 import style from '../styles/projects.module.scss';
 import ProjectPage from '../components/projectPage/projectPage';
@@ -12,7 +11,7 @@ export default function Vast() {
   console.log(currentHeight);
 
   return (
-    <Layout descriptionText={ProjectPage()}>
+    <Layout descriptionContent={<ProjectPage/>}>
       <h1>projects</h1>
     </Layout>
   );