updated styles

src/AppRouter.js

@@ -5,6 +5,7 @@ import Home from './pages/Home'
 import NotFound from './pages/NotFound'
 import Search from './pages/Search'
 import Navbar from './components/Navbar'
+import Footer from './components/Footer'
 
 const AppRouter = () => (
   <BrowserRouter>
@@ -15,6 +16,7 @@ const AppRouter = () => (
       <Route path='/search' component={Search} />
       <Route component={NotFound} />
     </Switch>
+    <Footer />
   </BrowserRouter>
 )
 

src/components/MainContent.js

@@ -3,7 +3,6 @@ import { useDispatch, useSelector } from 'react-redux'
 import * as movieActions from '../store/actions'
 
 import Header from './Header'
-import Footer from './Footer'
 import DisplayMovieRow from './DisplayMovieRow'
 
 const MainContent = ({ selectMovieHandler }) => {
@@ -77,7 +76,6 @@ const MainContent = ({ selectMovieHandler }) => {
           movies={documentaries.data}
         />
       </div>
-      <Footer />
     </div>
   )
 }

src/pages/Search.js

@@ -41,9 +41,9 @@ const Search = () => {
       <>
         <div className='search-container'>
           {searchResults.map((movie) => {
-            if (movie.poster_path !== null && movie.media_type !== 'person') {
+            if (movie.backdrop_path !== null && movie.media_type !== 'person') {
               const movieImageUrl =
-                'https://image.tmdb.org/t/p/w500' + movie.poster_path
+                'https://image.tmdb.org/t/p/w500' + movie.backdrop_path
               return (
                 <div className='movie'>
                   <div

src/static/sass/components/_movie.scss

@@ -1,38 +1,34 @@
 .movie {
-   flex: 1 1 auto; 
+  flex: 1 1 auto;
-   padding-top: 6rem;
+  display: inline-block;
-   display: inline-block;
+  padding-right: 0.5rem;
+  padding-bottom: 7rem;
 
-   @include responsive(tab_port) {
+  @include responsive(phone) {
-      padding-top: 4rem;
+    padding-bottom: 4rem;
-   }
+  }
 
-   &__column-poster {
+  &__column-poster {
-      height: 25rem;
+    height: 15rem;
-      width: 17.5rem;
+    cursor: pointer;
-      cursor: pointer;
+    transition: transform 0.3s;
-      transition: transform .3s;
+    -webkit-transition: transform 0.3s;
-      -webkit-transition: transform .3s;
+
+    &:hover {
+      transform: scale(1.25);
 
       @include responsive(tab_port) {
-         height: 20rem;
+        transform: scale(1.15);
-         width: 14rem;
       }
-      
-       &:hover {
-         transform: scale(1.25);
-
-         @include responsive(tab_port) {
-             transform: scale(1.15);
-         }
-       }
-   }
-
-    &__poster {
-       height: 100%;
     }
+  }
+
+  &__poster {
+    height: 100%;
+    border-radius: 5px;
+  }
 }
 
 div.movie:first-child {
-   padding-top: 15rem;
+  padding-top: 15rem;
 }

src/static/sass/components/_movieShowcase.scss

@@ -17,7 +17,6 @@
 .swiper-container-horizontal > .swiper-pagination-bullets {
   bottom: 0 !important;
   left: 0 !important;
-  //   width: 10% !important;
 }
 
 div.swiper-button-prev,
@@ -115,6 +114,7 @@ div.swiper-button-next {
         height: 100%;
         width: 100%;
         object-fit: contain;
+        border-radius: 5px;
       }
 
       &__netflix {

src/static/sass/layout/_header.scss

@@ -2,11 +2,10 @@
   background-color: $color-background;
   grid-column: 1 / 13;
   height: 82vh;
-  //   display: inline-block;
   display: grid;
 
   @include responsive(phone) {
-    height: 50rem;
+    height: 58rem;
   }
 
   &__container {
@@ -70,10 +69,6 @@
       line-height: 1.3;
       padding-top: 2.5rem;
       font-size: 1.8rem;
-
-      @include responsive(phone) {
-        width: 36rem;
-      }
     }
   }
 
@@ -87,5 +82,9 @@
       rgb(17, 17, 17),
       rgb(17, 17, 17)
     );
+
+    @include responsive(phone) {
+      height: 4rem;
+    }
   }
 }