added linear background to modal

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -1,22 +1,60 @@
-import React from 'react'; 
+import React, { Component } from 'react'; 
 import Aux from '../../../hoc/Aux/Aux';
 import MovieRow from '../MovieRow'; 
  
 
-const movieSummary = (props) => (
+class MovieSummary extends Component {
 
-   <Aux>
-      <h1 className="modal__title">{props.movie.title}</h1>
-      <p className="modal__info">
-         <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
-         Release date: {props.movie.release_date}  Runtime: {props.movie.runtime}m
-      </p>
-      <p className="modal__overview">{props.movie.overview}</p>
-       <button>Play</button>  
-       <button>My list</button>  
-       <p>staring: mdf gglo bool emmy djf </p>
-       <p>Genres: mdf gglo bool emmy djf </p>
+   
+
+   render() {
+
+
+      return (
+            <Aux>
+            <div className="shit">
+               <h1 className="modal__title">{this.props.movie.title || this.props.movie.name}</h1>
+               <p className="modal__info">
+                  <span className="modal__rating">Rating: {this.props.movie.vote_average * 10}%  </span>
+                  Release date: {this.props.movie.release_date || this.props.movie.first_air_date}  Runtime: {this.props.movie.runtime || this.props.movie.episode_run_time}m
+         </p>
+               <p className="modal__episode">{this.props.movie.number_of_episodes ? " Episodes: " + this.props.movie.number_of_episodes : ""}
+                  {this.props.movie.number_of_seasons ? " Seasons: " + this.props.movie.number_of_seasons : ""}</p>
+               <p className="modal__overview">{this.props.movie.overview}</p>
+               <button>Play</button>
+               <button>My list</button>
+               <p>staring: mdf gglo bool emmy djf </p>
+               <p>Genres: mdf gglo bool emmy djf </p>
+            </div>
+
+   
+      
    </Aux>
-); 
+      )
+   }
+}
 
-export default movieSummary; 
+
+
+
+// const movieSummary = (props) => (
+
+//    <Aux>
+//       <div>
+//          <h1 className="modal__title">{props.movie.title || props.movie.name}</h1>
+//          <p className="modal__info">
+//             <span className="modal__rating">Rating: {props.movie.vote_average * 10}%  </span> 
+//             Release date: {props.movie.release_date || props.movie.first_air_date}  Runtime: {props.movie.runtime  || props.movie.episode_run_time}m
+//          </p>
+//          <p className="modal__episode">{props.movie.number_of_episodes ? " Episodes: " + props.movie.number_of_episodes : ""} 
+//             {props.movie.number_of_seasons ? " Seasons: " + props.movie.number_of_seasons : ""}</p>
+//          <p className="modal__overview">{props.movie.overview}</p>
+//          <button>Play</button>  
+//          <button>My list</button>  
+//          <p>staring: mdf gglo bool emmy djf </p>
+//          <p>Genres: mdf gglo bool emmy djf </p>
+//       </div>
+//    </Aux>
+// ); 
+
+export default MovieSummary; 

src/components/UI/Modal/Modal.js

@@ -1,15 +1,38 @@
-import React from 'react'; 
+import React, {Component} from 'react'; 
 import Aux from '../../../hoc/Aux/Aux'; 
 import Backdrop from '../Backdrop/Backdrop'
 
-const modal = (props) => (
-   <Aux>
-      <Backdrop show={props.show} toggleBackdrop={props.modalClosed}/>
-      <div 
-         className={"modal " + (props.show ? "show" : "hide")}>
-         {props.children}
-      </div>
-   </Aux>
-); 
+class Modal extends Component {
 
-export default modal; 
+  
+
+   render() {
+// `background: linear-gradient(90deg, #000000, #ffffff00),
+
+      const backgroundStyle = {
+         // overflow: 'hidden',
+
+         // backgroundRepeat: "no-repeat",
+         // // backgroundPosition: 'center center'
+         // background: "red",
+         backgroundSize: "cover",
+         // backgroundImage: 'linear-gradient(to right, #1c1b1b, rgb(237, 232, 232)'
+         backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path || this.props.movie.poster_path})`,
+      }
+      return (
+         <Aux>
+            <Backdrop show={this.props.show} toggleBackdrop={this.props.modalClosed} />
+               <div
+                  style={backgroundStyle}
+                  className={"modal " + (this.props.show ? "show" : "hide")}>
+                  {this.props.children}
+               </div>
+           
+       
+         </Aux>
+      ); 
+   }
+
+}
+
+export default Modal;