more css

lewypopescu · Aug 5, 2024 · 5378379 · 5378379
1 parent 79dc261
commit 5378379
Show file tree

Hide file tree

Showing 7 changed files with 85 additions and 20 deletions.
diff --git a/src/components/Cast/Cast.jsx b/src/components/Cast/Cast.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { getMovieCredits } from '../../api';
 import styles from './Cast.module.css';
+import PropTypes from 'prop-types';
 
 const Cast = () => {
   const { movieId } = useParams();
@@ -43,4 +44,15 @@ const Cast = () => {
   );
 };
 
+Cast.propTypes = {
+  cast: PropTypes.arrayOf(
+    PropTypes.shape({
+      cast_id: PropTypes.number.isRequired,
+      name: PropTypes.string.isRequired,
+      character: PropTypes.string.isRequired,
+      profile_path: PropTypes.string,
+    })
+  ),
+};
+
 export default Cast;
diff --git a/src/components/Home/Home.module.css b/src/components/Home/Home.module.css
@@ -12,6 +12,9 @@
 .list {
   list-style: none;
   padding: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column-reverse;
 }
 
 .item {

diff --git a/src/components/MovieDetails/MovieDetails.jsx b/src/components/MovieDetails/MovieDetails.jsx
@@ -26,6 +26,19 @@ const MovieDetails = () => {
       <button onClick={() => window.history.back()} className={styles.button}>
         Go back
       </button>
+      <h3 className={styles.additionalInfoTitle}>Additional information</h3>
+      <ul className={styles.additionalInfoList}>
+        <li>
+          <Link to={`/movies/${movieId}/cast`} className={styles.link}>
+            Cast
+          </Link>
+        </li>
+        <li>
+          <Link to={`/movies/${movieId}/reviews`} className={styles.link}>
+            Reviews
+          </Link>
+        </li>
+      </ul>
       <img
         src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`}
         alt={movie.title}
@@ -43,19 +56,6 @@ const MovieDetails = () => {
       <p className={styles.genres}>
         {movie.genres.map(genre => genre.name).join(', ')}
       </p>
-      <h3 className={styles.additionalInfoTitle}>Additional information</h3>
-      <ul className={styles.additionalInfoList}>
-        <li>
-          <Link to={`/movies/${movieId}/cast`} className={styles.link}>
-            Cast
-          </Link>
-        </li>
-        <li>
-          <Link to={`/movies/${movieId}/reviews`} className={styles.link}>
-            Reviews
-          </Link>
-        </li>
-      </ul>
     </div>
   );
 };

diff --git a/src/components/MovieDetails/MovieDetails.module.css b/src/components/MovieDetails/MovieDetails.module.css
@@ -17,6 +17,10 @@
   font-weight: bold;
 }
 
+.button:hover {
+  background-color: #005bb5;
+}
+
 .poster {
   width: 300px;
   height: auto;
@@ -29,12 +33,13 @@
   font-weight: bold;
   color: #003366;
   margin-bottom: 10px;
+  width: 20%;
 }
 
 .score {
   font-size: 1.2em;
   font-weight: bold;
-  color: #666;
+  color: #667;
   margin-bottom: 20px;
 }
 
@@ -52,7 +57,7 @@
   font-size: 1.2em;
   color: #333;
   margin-bottom: 20px;
-  width: 50%;
+  width: 20%;
 }
 
 .additionalInfoList {

diff --git a/src/components/Movies/Movies.module.css b/src/components/Movies/Movies.module.css
@@ -4,6 +4,9 @@
 
 .form {
   margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .input {
@@ -19,6 +22,10 @@
 .list {
   list-style: none;
   padding: 0;
+  display: flex;
+  align-items: center;
+  flex-direction: column-reverse;
+  margin-top: 50px;
 }
 
 .item {

diff --git a/src/components/Reviews/Reviews.jsx b/src/components/Reviews/Reviews.jsx
@@ -22,9 +22,19 @@ const Reviews = () => {
 
   if (reviews.length === 0) {
     return (
-      <p className={styles.message}>
-        We don't have any reviews for this movie.
-      </p>
+      <>
+        <div className={styles.container}>
+          <button
+            onClick={() => window.history.back()}
+            className={styles.button}
+          >
+            Go back
+          </button>
+          <p className={styles.message}>
+            We don't have any reviews for this movie.
+          </p>
+        </div>
+      </>
     );
   }
 

diff --git a/src/components/Reviews/Reviews.module.css b/src/components/Reviews/Reviews.module.css
@@ -1,12 +1,31 @@
 .container {
-  max-width: 800px;
-  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   padding: 20px;
+  text-align: center;
+}
+
+.button {
+  background-color: #66b2ff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-bottom: 20px;
+  font-weight: bold;
 }
 
 .list {
   list-style: none;
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  text-align: center;
+  width: 40%;
 }
 
 .item {
@@ -37,3 +56,12 @@ p {
 .button:hover {
   background-color: #005bb5;
 }
+
+.message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px;
+  text-align: center;
+  width: 40%;
+}