Cleaned up + tested Parallax.js

client/package.json

@@ -29,6 +29,7 @@
     "react-quill": "^1.3.5",
     "react-router-dom": "^5.3.0",
     "react-scripts": "^4.0.3",
+    "react-scroll-parallax": "^3.3.1",
     "react-social-icons": "^5.6.1",
     "react-table": "^7.7.0",
     "styled-components": "^5.3.3",

client/src/features/Parallax.js

@@ -1,12 +1,11 @@
 import { Parallax } from 'react-scroll-parallax';
-import styles from "../pages/Home/HomePage.module.css";
 
-const ParallaxContainer = (speed, component) => (
+const ParallaxContainer = ({speed, children}) => {
+  return (
     <Parallax speed={speed}>
-        <div className={styles.background_video}>
-          {component}
-        </div>
+        {children}
     </Parallax>
-);
+  )
+};
 
 export default ParallaxContainer;

client/src/pages/Home/HomePage.js

@@ -17,9 +17,9 @@ function HomePage() {
           {"  "} it!
         </h1>
       </div>
-      {ParallaxContainer(-3,  <HomeYoutube embedId={process.env.REACT_APP_HOME_VIDEO_EMBED_ID} />)}
+      <HomeYoutube embedId={process.env.REACT_APP_HOME_VIDEO_EMBED_ID} />
       <h1 className={styles.h1}>Check out the events coming up this month! </h1>
-      {ParallaxContainer(-3,  <HomeCalendar />)}
+      <HomeCalendar />
     </div>
   );
 }