fix: all styling has been redone and Redux module has been added along with Axios

App styling has been improved and new modules added for use with a future API

Author: anastaciom

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package-lock.json

@@ -10,9 +10,12 @@
  "@testing-library/jest-dom": "^5.16.1",
  "@testing-library/react": "^12.1.2",
  "@testing-library/user-event": "^13.5.0",
+ "axios": "^0.25.0",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "react-redux": "^7.2.6",
  "react-scripts": "5.0.0",
+ "redux": "^4.1.2",
  "web-vitals": "^2.1.3"
  },
  "scripts": {

package.json

@@ -11,8 +11,7 @@
  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
- 
+ <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;500;700&display=swap" rel="stylesheet">
  <title>Discover</title>
 </head>
 

public/index.html

@@ -1,6 +1,6 @@
 .App {
- width: 100%;
- height: 100%;
+ min-width: 100%;
+ min-height: 100%;
  background: rgb(28, 18, 53);
  background: linear-gradient(
  57deg,
@@ -11,8 +11,8 @@
 
 @media (min-width: 660px) and (max-width: 768px) {
  .App {
- width: 100%;
- height: 100%;
+ min-width: 100%;
+ min-height: 100%;
  background: rgb(28, 18, 53);
  background: linear-gradient(
  57deg,
@@ -25,8 +25,8 @@
 
 @media (min-width: 768px) and (max-width: 1280px) {
  .App {
- width: 100%;
- height: 100%;
+ min-width: 100%;
+ min-height: 100%;
  background: rgb(28, 18, 53);
  background: linear-gradient(
  57deg,

src/App.css

@@ -1,12 +1,33 @@
 import "./App.css";
+import AreaPhotos from "./components/AreaPhotos";
 import Banner from "./components/Banner";
 import Header from "./components/Header";
+import React, { useEffect, useState } from "react";
 
 function App() {
+ const [headerBackground, setHeaderBackground] = useState(false);
+
+ useEffect(() => {
+ const scrollListener = () => {
+ if (window.scrollY > 10) {
+ setHeaderBackground(true);
+ } else {
+ setHeaderBackground(false);
+ }
+ };
+
+ window.addEventListener("scroll", scrollListener);
+
+ return () => {
+ window.removeEventListener("scroll", scrollListener);
+ };
+ }, []);
+
  return (
  <div className="App">
- <Header />
+ <Header background={headerBackground} />
  <Banner />
+ <AreaPhotos />
  </div>
  );
 }

src/App.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import "./style.css";
+
+export default function AreaPhotos() {
+ return (
+ <section id="areaPhotos">
+ <div id="titleAreaPhotos">
+ <h1>Photos</h1>
+ </div>
+ <div id="searchPhotos">
+ <label htmlFor="search">Search for Date:</label>
+ <input type="Date" id="search" />
+ </div>
+
+ <div className="gridPhotos">
+ <span>
+ foto1
+ </span>
+ <span>
+ foto1
+ </span>
+ <span>
+ foto1
+ </span>
+ <span>
+ foto1
+ </span>
+ </div>
+ </section>
+ );
+}

src/components/AreaPhotos/AreaSearch.jsx

@@ -0,0 +1,7 @@
+#areaPhotos{
+ width: 100%;
+ height: auto;
+ /* background-color: red; */
+ margin-top: 50px;
+ padding: 10px;
+}

src/components/AreaPhotos/index.jsx

@@ -1,16 +1,21 @@
 import React from "react";
 import { PlayCircle} from "@mui/icons-material/"
-
+import { Instagram, Facebook, Twitter} from "@mui/icons-material/";
 export default function CardVideo() {
  return (
  <div id="infoCard">
+ <div id="contactArea">
+ <Instagram style={{ color: "#fff", fontSize: 30, cursor: "pointer" }} />
+ <Facebook style={{ color: "#fff", fontSize: 30, cursor: "pointer" }} />
+ <Twitter style={{ color: "#fff", fontSize: 30, cursor: "pointer" }} />
+ </div>
  <span id="boxVideo">
  <PlayCircle
  style={{ fontSize: 50, color: "#fc5560", cursor: "pointer" }}
  />
  </span>
  <span id="card-description">
- <h3>Meet with the future</h3>
+ <h3>Meet with the<br/>  future</h3>
  <small>Technology</small>
  </span>
  </div>