Finished up responsiveness, and made some pages more minimal

src/components/Card.jsx

@@ -11,26 +11,9 @@ const Card = ({ movie, setRating }) => (
                 className={styles.Image}
             />
             <div className={styles.Bottom}>
-                <p className={styles.Title}>
+                {movie.rating && (
-                    {movie.title} - {movie.year}
-                </p>
-                {movie.rating ? (
                     <Rate rating={movie.rating} setRating={setRating} />
-                ) : (
-                    <p className={styles.Average}>
-                        Average rating: {movie.averageVote}{" "}
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="16"
-                            height="16"
-                            fill="currentColor"
-                            viewBox="0 0 16 16"
-                        >
-                            <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z" />
-                        </svg>
-                    </p>
                 )}
-                <p className={styles.Overview}>{movie.overview}</p>
             </div>
         </div>
     </Link>

src/components/TopBar.jsx

@@ -13,6 +13,17 @@ const TopBar = ({ search, setSearch, absolute }) => {
         return () => window.removeEventListener("resize", handleResize)
     }, [])
 
+    const Search = (
+        <input
+            type="text"
+            className={styles.Search}
+            value={search}
+            autoFocus
+            placeholder="Search for movies..."
+            onChange={({ target }) => setSearch(target.value)}
+        />
+    )
+
     return (
         <div
             className={`${styles.Container} ${
@@ -23,20 +34,13 @@ const TopBar = ({ search, setSearch, absolute }) => {
                 <h1 className={styles.Title}>React Movie Finder</h1>
             </Link>
 
-            {setSearch && (
+            {setSearch && width > 1000 && Search}
-                <input
-                    type="text"
-                    className={styles.Search}
-                    value={search}
-                    autoFocus
-                    placeholder="Search for movies..."
-                    onChange={({ target }) => setSearch(target.value)}
-                />
-            )}
 
             <Link to="/ratings" className={styles.Ratings}>
                 <h1>Your ratings</h1>
             </Link>
+
+            {setSearch && width <= 1000 && Search}
         </div>
     )
 }

src/pages/Actor.jsx

@@ -70,7 +70,7 @@ const Actor = () => {
                 <h1 className={styles.Name}>{actor?.name}</h1>
                 <div className={styles.Section}>
                     <h2>Biography</h2>
-                    <div className={styles.Description}>
+                    <div>
                         {actor?.biography ? (
                             <a
                                 href="#"

src/pages/Home.jsx

@@ -3,12 +3,11 @@ import useDebounce from "hooks/useDebounce"
 import { useEffect, useState } from "react"
 import styles from "styles/Home.module.css"
 import config from "config"
-import { GENRES } from "../constants"
 import Card from "components/Card"
 
 const Home = () => {
     const [movies, setMovies] = useState([])
-    const [page, setPage] = useState(1)
+    const [page] = useState(1)
     const [search, setSearch] = useState("")
     const debouncedSearch = useDebounce(search)
 
@@ -23,22 +22,15 @@ const Home = () => {
             )
             const data = await response.json()
             setMovies(
-                data.results.map((movie) => ({
+                data.results
-                    id: movie.id,
+                    .filter((movie) => movie?.poster_path)
-                    overview: movie.overview,
+                    .map((movie) => ({
-                    adult: movie.adult,
+                        id: movie.id,
-                    posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
+                        posterUrl: `https://image.tmdb.org/t/p/w342${movie.poster_path}`,
-                    backdropUrl: `https://image.tmdb.org/t/p/original${movie.backdrop_path}`,
+                        title: movie.title,
-                    genres: movie.genre_ids.map((genreId) =>
+                        year: movie.release_date.split("-")[0],
-                        GENRES.find((genre) => genre.id == genreId)
+                        averageVote: movie.vote_average / 2,
-                    ),
+                    }))
-                    title: movie.title,
-                    releaseDate: movie.release_date,
-                    year: movie.release_date.split("-")[0],
-                    averageVote: movie.vote_average,
-                    voteCount: movie.vote_count,
-                    popularity: movie.popularity,
-                }))
             )
         }
 

src/pages/Movie.jsx

@@ -35,7 +35,7 @@ const Movie = () => {
                 title: data.title,
                 releaseDate: data.release_date,
                 year: data.release_date.split("-")[0],
-                averageVote: data.vote_average,
+                averageVote: data.vote_average / 2,
                 voteCount: data.vote_count,
                 popularity: data.popularity,
                 tagline: data.tagline,

src/styles/Actor.module.css

@@ -4,6 +4,7 @@
     padding: 15px;
     color: white;
 }
+
 .Name {
     margin-top: 10px;
 }
@@ -35,13 +36,13 @@
 
 .Collapse {
     color: white;
+    text-decoration: none;
 }
 
 .Credits {
     display: flex;
     width: 100%;
     gap: 20px;
-    height: 500px;
     overflow: scroll;
 }
 

src/styles/Card.module.css

@@ -13,8 +13,6 @@
 }
 
 .Card {
-    background-color: var(--primary);
-    padding: 12px 15px;
     border-radius: 7px;
     display: flex;
     gap: 5px;
@@ -23,15 +21,6 @@
     flex-direction: column;
 }
 
-.Overview {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    display: -webkit-box !important;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    white-space: normal;
-}
-
 .Title,
 .Average {
     margin: 0;

src/styles/Home.module.css

@@ -10,7 +10,7 @@
     justify-items: center;
     width: 85%;
     margin: 0 100px;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
     gap: 20px;
     text-align: center;
 }

src/styles/TopBar.module.css

@@ -5,13 +5,32 @@
 .Container {
     display: grid;
     width: 100%;
-    grid-template-columns: repeat(var(--cols, 2), 1fr);
+    grid-template-columns: 1fr;
-    padding: 0 30px;
+    padding: 10px 30px;
-    align-items: center;
+    gap: 10px;
-    background: linear-gradient(to bottom, #00000090, #00000000);
+    background: linear-gradient(to bottom, #00000090, #00000010);
     color: white;
 }
 
+.Container h1 {
+    margin: 0;
+}
+
+@media (min-width: 1000px) {
+    .Container {
+        grid-template-columns: repeat(var(--cols, 2), 1fr);
+    }
+
+    .Ratings {
+        justify-self: end;
+    }
+
+    .Search {
+        justify-self: center;
+        width: 20em;
+    }
+}
+
 .Container.Absolute {
     position: absolute;
 }
@@ -30,13 +49,9 @@
     border: 2px solid white;
     color: white;
     font: inherit;
-    justify-self: center;
+    width: 100%;
-    width: 20em;
     height: 3em;
+    margin-top: 10px;
     border-radius: 10px;
     background-color: var(--secondary);
 }
-
-.Ratings {
-    justify-self: end;
-}