header background

src/components/Header/Header.js

@@ -1,9 +1,42 @@
-import React from 'react'; 
+import React, { Component } from 'react'; 
 
-const header = () => (
+
-   <header className="header">
+
+
+
+
+class Header extends Component {
+
+  render() {
+
+    const backgroundStyle = {
+      transform: "scaleY(-45rem)",
+      backgroundPosition: "center",
+      backgroundSize: "cover",
+      backgroundImage: `url(https://image.tmdb.org/t/p/original/${this.props.movie.backdrop_path})`
+    }
+
+    return (
+      <header style={backgroundStyle} className="header">
+          <div  className="header__background">
+              {/* <h1>{this.props.movie.name}</h1> */}
+          </div>    
     
-   </header>
+        </header>
-); 
+    )
 
-export default header; 
+  }
+}
+
+
+// const header = (props) => (
+
+//    <header className="header">
+//   <div className="header__background" style={{ background: `url(https://image.tmdb.org/t/p/original/${props.movie.backdrop_path})` }}>
+//       <h1>{props.movie.name}</h1>
+
+//    </div>
+//    </header>
+// ); 
+
+export default Header; 

src/components/MovieRow/MovieSummary/MovieSummary.js

@@ -1,23 +1,20 @@
 import React, { Component } from 'react'; 
 import Aux from '../../../hoc/Aux/Aux';
-import MovieRow from '../MovieRow'; 
  
 
 class MovieSummary extends Component {
 
-   
 
    render() {
 
-
       return (
-            <Aux>
+         <Aux>
-            <div className="shit">
+            <div className="modal__container">
                <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>
                <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>
@@ -26,10 +23,7 @@ class MovieSummary extends Component {
                <p>staring: mdf gglo bool emmy djf </p>
                <p>Genres: mdf gglo bool emmy djf </p>
             </div>
-
+         </Aux>
-   
-      
-   </Aux>
       )
    }
 }

src/components/UI/Modal/Modal.js

@@ -2,21 +2,15 @@ import React, {Component} from 'react';
 import Aux from '../../../hoc/Aux/Aux'; 
 import Backdrop from '../Backdrop/Backdrop'
 
+
+
+
 class Modal extends Component {
 
-  
 
    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 (
@@ -25,10 +19,8 @@ class Modal extends Component {
                <div
                   style={backgroundStyle}
                   className={"modal " + (this.props.show ? "show" : "hide")}>
-                  {this.props.children}
+                  {this.props.children} 
                </div>
-           
-       
          </Aux>
       ); 
    }

src/containers/App.js

@@ -5,6 +5,7 @@ import axios from 'axios';
 import MovieRow from '../components/MovieRow/MovieRow'
 import Modal from '../components/UI/Modal/Modal'; 
 import MovieSummary from '../components/MovieRow/MovieSummary/MovieSummary'; 
+import CancelIcon from '../static/images/cancel-music.svg'
 
 
 
@@ -77,9 +78,9 @@ makeAipCall = (searchItem) => {
     }
     axios.get(url)
       .then(res => {
-
+        console.log(res);
         const movieData = res.data; 
-        console.log(movieData); 
+        // console.log(movieData); 
         this.setState({movieDetails: movieData}); 
       }).catch(error => {
 
@@ -97,7 +98,7 @@ makeAipCall = (searchItem) => {
       return (
          <div>  
           <Navigation showMovies={this.onSearchHandler} />
-          {this.state.toggleMovieList ? <Layout /> : <div //onClick={this.onChangeHandler} 
+          {this.state.toggleMovieList ? <Layout /> : <div 
                                             className="search-container">{this.state.rows}</div>}
           <Modal show={this.state.toggleModal} modalClosed={this.closeModal} movie={this.state.movieDetails}>
             <MovieSummary movie={this.state.movieDetails}/>

src/containers/Layout/Layout.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import axios from 'axios'; 
 import Header from '../../components/Header/Header'; 
 import MovieShowcase from '../MovieShowcase/MovieShowcase'; 
 import MovieOriginals from '../MovieOriginals/MovieOriginals'; 
@@ -9,6 +9,28 @@ import { BrowserRouter } from "react-router-dom";
 
 class Layout extends Component {
 
+  state = {
+    selectedMovie: {}
+  }
+
+  componentDidMount = () => {
+    this.getMovie(); 
+  }
+  
+  71411
+  getMovie = () => {
+    // 1) make api call to retrieve movie 
+    const url = "https://api.themoviedb.org/3/tv/71411?api_key=224ce27b38a3805ecf6f6c36eb3ba9d0";
+    axios.get(url) 
+      .then(res => {
+        const movieData = res.data; 
+        this.setState({ selectedMovie: movieData })
+
+      }).catch(error => {
+        console.log(error); 
+      })
+  
+  }
 
 
    render() {
@@ -17,7 +39,7 @@ class Layout extends Component {
       return (
       <BrowserRouter>
           <div className="container">
-            <Header />
+            <Header movie={this.state.selectedMovie}/>
             <MovieShowcase />
             <MovieOriginals />
            <Footer /> 

src/containers/Navigation/Navigation.js

@@ -46,7 +46,6 @@ class navigation extends Component {
             <input
               onChange={this.props.showMovies}
               className="navigation__container--left__input"
-              // onKeyPress={this.props.showMan}
               type="text"
               placeholder="Title, genres, people" />
             

src/static/images/cancel-music.svg

@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 212.982 212.982" style="enable-background:new 0 0 212.982 212.982;" xml:space="preserve">
+<g id="Close">
+	<path style="fill-rule:evenodd;clip-rule:evenodd;" d="M131.804,106.491l75.936-75.936c6.99-6.99,6.99-18.323,0-25.312
+		c-6.99-6.99-18.322-6.99-25.312,0l-75.937,75.937L30.554,5.242c-6.99-6.99-18.322-6.99-25.312,0c-6.989,6.99-6.989,18.323,0,25.312
+		l75.937,75.936L5.242,182.427c-6.989,6.99-6.989,18.323,0,25.312c6.99,6.99,18.322,6.99,25.312,0l75.937-75.937l75.937,75.937
+		c6.989,6.99,18.322,6.99,25.312,0c6.99-6.99,6.99-18.322,0-25.312L131.804,106.491z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

src/static/sass/base/_base.scss

@@ -45,7 +45,7 @@
 
 body {
 	box-sizing: border-box;
-	background-color: fff;
+	background-color: $color-background;
 }
 
 html {
@@ -55,21 +55,8 @@ html {
 
 // GRID AREA 
 .container {
+	
 	display: grid;      
 	grid-template-rows: 47vw min-content min-content min-content; 
 	grid-template-columns:  4% repeat(10, 1fr) 4%;
 }
-
-.searchContent {
-	height: 100vh;
-	background-color: $color-background;
-}
-
-.search-container {
-	background-color: $color-background;
-	height: 150%;
-	padding-bottom: 10rem;
-	padding-left: 4rem;
-	
-
-}

src/static/sass/components/_modal.scss

@@ -26,6 +26,15 @@
       font-size: 2rem;
    }
 
+   &__cancel {
+      cursor: pointer;
+      width: 1.8rem;
+      fill: #fff;
+      float: right;
+      padding-right: 2rem;
+      padding-top: 2rem;
+   }
+
    &__overview {
       color: $color-modal-grey;
       padding-top: 2rem;
@@ -35,27 +44,19 @@
    }
 }
 
-// .hide {
+.show {
-//    transition: all 1s;
+   opacity: 1;
-//    // transform: translateY(-100vh); 
+}
-//    display: none;
-// }
 
-   .show {
+.hide {
-      opacity: 1;
+   transition: all 1s;
-      // transform: scale(1);
+   display: none;
-   }
+}
 
-   .hide {
+.modal__container {
-      transition: all 1s;
+   background: linear-gradient(90deg, #000 50%, transparent);
-      // transform: translateY(-100vh); 
+   width: 70%;
-      display: none;
+   padding-top: 3rem;
-   }
+   height: 100%;
-
+   padding-left: 3.5rem;
-   .shit {
+}
-     background: linear-gradient(90deg, #000 50%, transparent);
-     width: 70%;
-     padding-top: 3rem;
-     height: 100%;
-     padding-left: 3.5rem;
-   }

src/static/sass/components/_movie.scss

@@ -1,5 +1,4 @@
 .movie {
-   // z-index: -1;
    flex: 1 1 auto; 
    padding-top: 6rem;
    display: inline-block;
@@ -12,7 +11,8 @@
 
       &:hover {
           z-index: -1;
-         transform: scale(1.4); 
+         transform: scale(1.25); 
+        
       }
 
    }

src/static/sass/components/_search.scss

@@ -0,0 +1,11 @@
+.searchContent {
+   height: 100vh;
+   background-color: $color-background;
+}
+
+.search-container {
+   background-color: $color-background;
+   height: 150%;
+   padding-bottom: 10rem;
+   padding-left: 4rem;
+}

src/static/sass/layout/_header.scss

@@ -1,5 +1,9 @@
 .header {
-   padding-top: 4rem;
    background-color: rebeccapurple;
    grid-column: 1 / 13;
+   
+
+   &__background {
+     
+   }  
 }