fixes varios (#10)

raulocba · web-flow · commit 652f9c8231a5 · 2025-08-19T10:51:20.000-03:00
* fixes varios

* node fix, pagination and margins
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "engines": {
-    "node": "20",
+    "node": "20.19.4",
     "npm": "~10"
   },
   "dependencies": {
@@ -17,6 +17,7 @@
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.27.2",
+    "nvm": "^0.0.4",
     "react": "^18.1.0",
     "react-alice-carousel": "^2.6.1",
     "react-dom": "^18.1.0",
diff --git a/src/App.css b/src/App.css
@@ -23,6 +23,7 @@
     font-family: "Montserrat", sans-serif;
     font-size: 2vw;
     padding: 4px;
+    padding-top: 70px !important;
     border-radius: 50px;
     color: white;
 }
diff --git a/src/components/ContentModal/ContentModal.css b/src/components/ContentModal/ContentModal.css
@@ -88,7 +88,7 @@
     }
 
     .ContentModal__title {
-        font-size: 3.5vw;
+        font-size: 2.5vw;
     }
 
     .ContentModal__description {
diff --git a/src/components/Genres.js b/src/components/Genres.js
@@ -35,13 +35,13 @@ const Genres = ({
     fetchGenres();
 
     return () => {
-      setGenres({}); 
+      setGenres([]); 
     };
     // eslint-disable-next-line
   }, []);
 
   return (
-    <div style={{ padding: "6px 0" }}>
+    <div style={{ padding: "100px 20px 0px" }}>
       {selectedGenres.map((genre) => (
         <Chip
           style={{ margin: 2 }}
diff --git a/src/components/Pages/Movies/Movies.js b/src/components/Pages/Movies/Movies.js
@@ -54,11 +54,12 @@ const Movies = () => {
               vote_average={c.vote_average}
             />
           ))}
-      </div>
+      
       {numOfPages > 1 && (
         <CustomPagination setPage={setPage} numOfPages={numOfPages} />
       )}
     </div>
+    </div>
   );
 };
 
diff --git a/src/components/Pages/Search/Search.css b/src/components/Pages/Search/Search.css
@@ -1,4 +1,5 @@
 .search {
     display: flex;
     margin: 15px 0;
+    padding-top: 100px;
 }
diff --git a/src/components/Pages/Search/Search.js b/src/components/Pages/Search/Search.js
@@ -102,10 +102,11 @@ const Search = () => {
         {searchText &&
           !content &&
           (type ? <h2>No Series Found</h2> : <h2>No Movies Found</h2>)}
-      </div>
-      {numOfPages > 1 && (
+           {numOfPages > 1 && (
         <CustomPagination setPage={setPage} numOfPages={numOfPages} />
       )}
+      </div>
+     
     </div>
   );
 };
diff --git a/src/components/Pages/Series/Series.js b/src/components/Pages/Series/Series.js
@@ -53,10 +53,11 @@ const Series = () => {
               vote_average={c.vote_average}
             />
           ))}
-      </div>
+      
       {numOfPages > 1 && (
         <CustomPagination setPage={setPage} numOfPages={numOfPages} />
       )}
+      </div>
     </div>
   );
 };
diff --git a/src/components/Pages/Trending/Trending.css b/src/components/Pages/Trending/Trending.css
@@ -2,4 +2,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
+    background-color: #39445a;
+    padding-top: 30px;
+    padding-bottom: 60px;
 }
diff --git a/src/components/Pages/Trending/Trending.js b/src/components/Pages/Trending/Trending.js
@@ -24,14 +24,15 @@ useEffect(() => {
 return (
 <div>
 <span className="pageTitle">Trending2</span>
-<div className="trending">
+<div className="trending" style={{ paddingTop: "80px", paddingBottom: "60px" }}>
 {
 content && content.map((c)=><SingleContent key={c.id} id={c.id} poster={c.poster_path} title={c.title || c.name} data={c.first_air_date || c.release_date}
 media_type={c.media_type} vote_average={c.vote_average}
 />)
 }
-</div>
 <CustomPagination setPage={setPage}/>
+</div>
+
 </div>
 );
 };
diff --git a/src/components/Pagination/CustomPagination.js b/src/components/Pagination/CustomPagination.js
@@ -22,13 +22,14 @@ export default function CustomPagination({ setPage, numOfPages = 10 }) {
         display: "flex",
         justifyContent: "center",
         marginTop: 10,
+        marginBottom: 20,
       }}
     >
       <ThemeProvider theme={darkTheme}>
         <Pagination
           onChange={(e) => handlePageChange(e.target.textContent)}
           count={numOfPages}
-          color="primary"
+          color="secondary"
           hideNextButton
           hidePrevButton
         />
diff --git a/src/components/SingleContent/SingleContent.css b/src/components/SingleContent/SingleContent.css
@@ -4,7 +4,7 @@
     width: 200px;
     padding: 5px;
     margin: 5px 0;
-    background-color: #282c34;
+    background-color: #aeb2b9;
     border-radius: 10px;
     position: relative;
     font-family: "Montserrat", sans-serif;
diff --git a/src/index.css b/src/index.css
@@ -8,6 +8,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: #39445a;
 }
 
 code {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -23,6 +23,7 @@`
`23`	`23`	`font-family: "Montserrat", sans-serif;`
`24`	`24`	`font-size: 2vw;`
`25`	`25`	`padding: 4px;`
	`26`	`+ padding-top: 70px !important;`
`26`	`27`	`border-radius: 50px;`
`27`	`28`	`color: white;`
`28`	`29`	`}`
Original file line number	Diff line number	Diff line change
`@@ -88,7 +88,7 @@`
`88`	`88`	`}`
`89`	`89`
`90`	`90`	`.ContentModal__title {`
`91`		`- font-size: 3.5vw;`
	`91`	`+ font-size: 2.5vw;`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`.ContentModal__description {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`.search {`
`2`	`2`	`display: flex;`
`3`	`3`	`margin: 15px 0;`
	`4`	`+ padding-top: 100px;`
`4`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -2,4 +2,7 @@`
`2`	`2`	`display: flex;`
`3`	`3`	`flex-wrap: wrap;`
`4`	`4`	`justify-content: space-around;`
	`5`	`+ background-color: #39445a;`
	`6`	`+ padding-top: 30px;`
	`7`	`+ padding-bottom: 60px;`
`5`	`8`	`}`