From 690193b226da197248814664dc5feba903451d17 Mon Sep 17 00:00:00 2001
From: Zouhair Fouiguira <zouhairfgra@gmail.com>
Date: Sun, 29 Oct 2023 21:39:20 +0100
Subject: [PATCH] styling

---
 package-lock.json               | 10 ++++++++
 package.json                    |  1 +
 src/App.css                     | 41 ++++++++++++++++++++++++++++++---
 src/components/MovieDetails.jsx | 28 +++++++++++++++-------
 4 files changed, 69 insertions(+), 11 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4151f80..86e1716 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.17.0",
         "react-scripts": "5.0.1",
+        "react-spinners": "^0.13.8",
         "web-vitals": "^2.1.4"
       }
     },
@@ -14799,6 +14800,15 @@
         }
       }
     },
+    "node_modules/react-spinners": {
+      "version": "0.13.8",
+      "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+      "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+      "peerDependencies": {
+        "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
diff --git a/package.json b/package.json
index 935d46d..d8793e2 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.17.0",
     "react-scripts": "5.0.1",
+    "react-spinners": "^0.13.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
diff --git a/src/App.css b/src/App.css
index 990c9f6..2bfed05 100644
--- a/src/App.css
+++ b/src/App.css
@@ -18,7 +18,7 @@ body {
 }
 
 .app {
-  padding: 4rem;
+  padding: 2rem;
 
   display: flex;
   justify-content: center;
@@ -26,7 +26,7 @@ body {
   flex-direction: column;
 }
 
-h1 {
+h1:not(#h1) {
   font-size: 3rem;
   letter-spacing: 0.9px;
   background: linear-gradient(
@@ -41,7 +41,7 @@ h1 {
 }
 
 .search {
-  width: 71%;
+  width: 60%;
   margin: 4rem 0 2rem;
 
   display: flex;
@@ -163,6 +163,41 @@ h1 {
   left: 0;
 }
 
+/* Mvoie Details style */
+.movieContainer {
+  display: flex; /* Use flexbox for layout */
+}
+
+.movieImage {
+  flex: 1; /* Take up half of the available space (adjust as needed) */
+  margin-right: 20px; /* Add some spacing between the poster and details */
+}
+
+
+
+
+#h1{
+  font-size: 4em;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  font-style: inherit;
+  color: #a1a1a1;
+}
+.infoMovie {
+  flex: 2; /* Adjust the width as needed */
+  color: #fff; /* Set the text color to white */
+  padding: 25px; /* Add some padding for spacing */
+}
+
+.infoMovie h2 {
+  font-size: 24px; /* Customize the title font size */
+  margin-bottom: 10px; /* Add margin below the title */
+}
+
+.infoMovie p {
+  font-size: 16px; /* Customize the paragraph font size */
+  margin: 20px 0; /* Add some vertical margin between paragraphs */
+}
+
 .movie div:nth-of-type(3) span {
   font-family: "Raleway", sans-serif;
   text-transform: uppercase;
diff --git a/src/components/MovieDetails.jsx b/src/components/MovieDetails.jsx
index 2c99ec5..c806864 100644
--- a/src/components/MovieDetails.jsx
+++ b/src/components/MovieDetails.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from "react";
 import { useParams } from "react-router-dom";
+import { BeatLoader } from "react-spinners";
 
 const MovieDetails = () => {
   const { imdbID } = useParams();
@@ -27,17 +28,28 @@ const MovieDetails = () => {
   return (
     <div className="movie-details">
       {movieDetails ? (
-        <div>
-          <h2>{movieDetails.Title}</h2>
-          <p>{movieDetails.Plot}</p>
-          <p>Director: {movieDetails.Director}</p>
-          <p>Actors: {movieDetails.Actors}</p>
-          <p>Genre: {movieDetails.Genre}</p>
-          <p>Runtime: {movieDetails.Runtime}</p>
-          <p>IMDb Rating: {movieDetails.imdbRating}</p>
+        <div className="movieContainer">
+          <div className="movieImage">
+            <img alt="moviePoster" src={movieDetails.Poster} />
+          </div>
+          <div className="infoMovie">
+            <h1 id="h1">{movieDetails.Title}</h1>
+            <p>Plot: {movieDetails.Plot}</p>
+            <p>Director: {movieDetails.Director}</p>
+            <p>Actors: {movieDetails.Actors}</p>
+            <p>Genre: {movieDetails.Genre}</p>
+            <p>Runtime: {movieDetails.Runtime}</p>
+            <p>IMDb Rating: {movieDetails.imdbRating}</p>
+          </div>
         </div>
       ) : (
         <div className="empty">
+          <BeatLoader
+            size={15} // Adjust the size of the loader as needed
+            color={"#f9d3b4"} // Change the loader color
+            loading={true}
+            padding={10}
+          />
           <h2>Loading movie details...</h2>
         </div>
       )}