some style fix

Watchlist, TopBar, Home page

src/components/Cast/Cast.jsx

@@ -7,7 +7,7 @@ import { CastList } from './Cast.styled';
 const Cast = () => {
   const [cast, setCast] = useState([]);
   const { movieId } = useParams();
-  console.log(cast);
+  // console.log(cast);
 
   useEffect(() => {
     const fathMovie = async () => {

src/components/GalleryTitle/GalleryTitle.styled.js

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-export const Title = styled.h2`
-  font-weight: 32px;
+export const Title = styled.h3`
+  font-size: 36px;
   margin-bottom: 25px;
 `;

src/components/Header/Header.styled.js

@@ -30,6 +30,7 @@ export const HeaderBurgerIcon = styled(RxHamburgerMenu)`
 
 export const Nav = styled.nav`
   display: none;
+  align-items: center;
 
   margin-right: auto;
   padding: 10px 0;

src/components/MovieDetailsCard/MovieDetailsCard.jsx

@@ -12,7 +12,7 @@ import {
   InfoWrapper,
   Title,
   List,
-  TitleSecond,
+  // TitleSecond,
   TextOverview,
   ScoreBox,
   // ImageWrapper,
@@ -22,7 +22,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { selectIsLogedIn } from '../../redux/auth/auth-selectors';
 import { Notify } from 'notiflix';
 
-const BASIC_IMG_URL = 'https://image.tmdb.org/t/p/w200';
+const BASIC_IMG_URL = 'https://image.tmdb.org/t/p/w400';
 
 export const MovieDetailsCard = ({ card, isAdded }) => {
   // console.log(card);
@@ -79,7 +79,8 @@ export const MovieDetailsCard = ({ card, isAdded }) => {
 
         <InfoWrapper>
           <Title>{title}</Title>
-          <h4 style={{ fontStyle: 'italic', marginBottom: 15 }}>{tagline}</h4>
+          <p style={{ color: 'tomato' }}>{formatDate(release_date)}</p>
+          <h3 style={{ fontStyle: 'italic', marginBottom: 15 }}>{tagline}</h3>
           <div
             style={{
               display: 'flex',
@@ -98,10 +99,6 @@ export const MovieDetailsCard = ({ card, isAdded }) => {
             <p style={{ color: 'yellow' }}>
               {convertMinutesToHoursAndMinutes(runtime)}
             </p>
-            <p style={{ color: 'f33f3f' }}>
-              {' '}
-              Release date: {formatDate(release_date)}
-            </p>
           </div>
           <List
             style={{
@@ -127,7 +124,7 @@ export const MovieDetailsCard = ({ card, isAdded }) => {
                 );
               })}
           </List>
-          <TitleSecond>Overview</TitleSecond>
+          {/* <TitleSecond>Overview</TitleSecond> */}
           <TextOverview>{overview}</TextOverview>
           <div
             style={{

src/components/MovieDetailsCard/MovieDetailsCard.styled.js

@@ -16,7 +16,7 @@ export const HeadWrapper = styled.div`
 export const InfoWrapper = styled.div`
   /* width: 100%; */
   /* width: 645px; */
-  padding: 15px;
+  padding: 10px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -27,8 +27,8 @@ export const ImageWrapper = styled.div`
 `;
 
 export const Image = styled.img`
-  min-width: 350px;
-  min-height: 475px;
+  /* min-width: 350px; */
+  /* min-height: 475px; */
   /* width: 100%; */
   /* height: 100%; */
   border-bottom-left-radius: 8px;
@@ -37,8 +37,9 @@ export const Image = styled.img`
 
 export const Title = styled.h2`
   font-size: 46px;
-  margin: 10px 0px;
+
   font-family: 'Lato', sans-serif;
+  color: var(--primary-accent);
 `;
 export const TitleSecond = styled.h2`
   font-size: 26px;

src/components/Topbar/Topbar.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
 import {
   Autoplay,
@@ -12,11 +12,31 @@ import 'swiper/css/bundle';
 // import 'swiper/css/pagination';
 // import 'swiper/css/scrollbar';
 
-import slides from 'slider.json';
-
 import { TopBarWrapper, TopBarTitle, TopBarText } from './Topbar.styled';
+import { getAllTrending } from 'servises/api';
+
+const BASIC_IMG_URL = 'https://image.tmdb.org/t/p/w1280';
 
 export const TopBar = ({ title, text, span }) => {
+  const [moviesSlides, setMoviesSlides] = useState([]);
+
+  const getSlides = async () => {
+    try {
+      const { results } = await getAllTrending('day');
+      if (!results) {
+        throw new Error();
+      }
+      setMoviesSlides(results);
+      // console.log(results);
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  useEffect(() => {
+    getSlides();
+  }, []);
+
   return (
     <TopBarWrapper>
       <TopBarTitle>
@@ -39,10 +59,13 @@ export const TopBar = ({ title, text, span }) => {
         modules={[Autoplay, Pagination, Navigation]}
         className="mySwiper"
       >
-        {slides.map(({ image, title }, i) => {
+        {moviesSlides.map(({ backdrop_path, title }, i) => {
           return (
             <SwiperSlide key={i}>
-              <img src={image} alt={title} />
+              <>
+                <img src={`${BASIC_IMG_URL}${backdrop_path}`} alt={title} />
+                <h3>{title}</h3>
+              </>
             </SwiperSlide>
           );
         })}

src/components/Topbar/Topbar.styled.jsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 export const TopBarWrapper = styled.div`
   position: relative;
   max-width: 1106px;
-  height: 350px;
+  height: 420px;
   margin-bottom: 25px;
   border-radius: 8px;
   /* padding: 20px; */
@@ -17,7 +17,7 @@ export const TopBarWrapper = styled.div`
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(86, 86, 86, 0.8);
+    background-color: rgba(86, 86, 86, 0.6);
     z-index: 10; /* Выставим z-index поверх слайдера (обычно слайдеры имеют z-index: 0 по умолчанию) */
   }
 `;

src/components/WatchListListItem/WatchListListItem.module.css

@@ -5,7 +5,7 @@
   font-size: 22px;
   display: flex;
   /* justify-content: space-between; */
-  width: 100%;
+  /* width: 50%; */
   padding: 5px;
   gap: 35px;
   border-radius: 8px;
@@ -22,7 +22,7 @@
   gap: 10px;
 }
 .item_title {
-  color: #fff;
+  color: var(--primary-accent);
 }
 .item_date {
   font-size: 14px;

src/pages/Home.jsx

@@ -1,15 +1,15 @@
 import { useEffect, useState } from 'react';
-// import { useSearchParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
+// import { useSearchParams } from 'react-router-dom';
+import { Gallery } from 'components/Gallery/Gallery';
+import { TopBar } from 'components/Topbar/Topbar';
+import text from '../servises/constant';
 
 import { GalleryTitle } from 'components/GalleryTitle/GalleryTitle';
 // import { MobileHeader } from 'components/Mobile/Header/MobileHeader';
-import { Gallery } from 'components/Gallery/Gallery';
 // import { Sidebar } from 'components/Sidebar/Sidebar';
 // import { SearchForm } from 'components/SearchForm/SearchForm';
-import { TopBar } from 'components/Topbar/Topbar';
 
-import text from '../servises/constant';
 import { selectLoading, selectMovies } from '../redux/movies/selectors';
 import { fetchTopMovies } from '../redux/movies/operations';
 
@@ -53,7 +53,7 @@ const Home = () => {
         <TopBar title={'Welcome to'} span={'MovieBox'} text={text}></TopBar>
       ) : null}
       {/* <SearchForm /> */}
-      <GalleryTitle text={'Trending movies'} />
+      <GalleryTitle text={'Popular Movies'} />
       <Gallery gallery={movies}></Gallery>
     </>
   );