From 60aa2c66a257ecf915c09ca544af0177000051d1 Mon Sep 17 00:00:00 2001 From: amalshweiki Date: Wed, 27 Mar 2024 12:37:01 +0200 Subject: [PATCH 1/3] fixs movie page --- frontend/public/images/noImage.png | Bin 0 -> 1525 bytes .../MovieCastCarousel/MovieCastCarousel.jsx | 21 +++++++++++++----- .../MovieCastCarouselStyles.jsx | 14 +++++++++--- .../components/moviePage/Reviews/Reviews.jsx | 2 +- .../moviePage/Reviews/ReviewsCarousel.jsx | 21 +++++++++--------- .../components/moviePage/Reviews/reviews.css | 3 ++- .../moviePage/movieDetails/MovieDetails.jsx | 6 ++--- .../movieDetails/movieDetailsStyles.jsx | 2 +- frontend/src/pages/moviePage/MoviePage.jsx | 4 ++-- .../src/pages/moviePage/MoviePageStyles.jsx | 8 +++---- 10 files changed, 50 insertions(+), 31 deletions(-) create mode 100644 frontend/public/images/noImage.png diff --git a/frontend/public/images/noImage.png b/frontend/public/images/noImage.png new file mode 100644 index 0000000000000000000000000000000000000000..1de3f301fc17601bf034d4c5e434950c7b7580d4 GIT binary patch literal 1525 zcmVjr5G^1oDu~|y|6kX(x4YMha2Q5=llA0flTF@^ zr@(v<+-?^xT)1%I!i5VL{&&=->E>~)7L4QEHKzVFqYd=z`^j1%O@yedP9r)yBFQ_{G@nAUZV}~TFRRN>cYMB$oy457Z=6zTtm)+QW?fFtM>*cuvDHEIU4qPjpAHY#5jF z33&j|#&WY12drmv0LjJDGshx^$6RiB^6I;G87q|IOQqwppY;ulH5P)_xxROkg`)Zg zPd*1z&!G=8Ma*`-Y2349@q<8Zk2$~M0ah;Nzwv}wS55A(nd{RjciA0 zPzMROp_Y z!nLn_mIjuc@|T!xzeDC{ZXI6!ix;Oeis6JRH+-N(JRQm@hD#t5cmw3$UgGWUZe_KS z2$@C>&3&FtRx61>6R4^D{DAZUeXpy$W-*~Qmq&Ba_kMH!yFOzUuFVGYm~vIhnbVC(?Y3amm-8znEqjPM|5}vW9D9HL{2_v+Sl)*0sKRgKwRc zIonULn^3~`6uv0Vpo3vjtxc7o@Pwod_36_2L|m-Vh8xAFV}XsFkU>&CPgpxKKSF|v zePRT2)_Q~nC<(WPSDaRq9wlVG_Xh&@)d$rePZ+Kfq)VbeZ^0N{9BRr7`6gA zX0QUgzF*Truw70krE~>`IGDhwh$O(PSEeUibgmY0|p= z0hpCg4vDMPWV=YveH}-WW3c#zpFUGE;DHHfuAWQ=DWyVO}TEucNG)#o>=A=<<=s3^)J{^6$kF>N1LsMibo z_`99j@i$QXMm=RM}Kh6ToG9iFB64fwUhE?l^9;lhOr b7jp0i?teN^QeY@n00000NkvXXu0mjfRL}BR literal 0 HcmV?d00001 diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx index 6d1995f..1185e1d 100644 --- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx +++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx @@ -2,12 +2,14 @@ import { Link } from 'react-router-dom'; import { Carousel } from 'react-responsive-carousel'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; +import defaultAvatar from '../../../../../../public/images/noImage.png'; import { CastCard, CastName, CastChar, CastImg, arrowStyles, + HorizontalLine, } from './MovieCastCarouselStyles'; const MovieCastCarousel = ({ movie }) => { @@ -20,37 +22,40 @@ const MovieCastCarousel = ({ movie }) => { } return (
+ - hasPrev && ( + - ) + } renderArrowNext={(onClickHandler, hasNext, label) => - hasNext && ( + - ) + } > + {chunks.map((chunk, index) => ( +
{chunk.map(element => (
{ style={{ display: 'inline-block', margin: '2px' }} > + { + e.target.src = defaultAvatar; + }} /> {element.name} diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx index f96b9fc..b66be55 100644 --- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx @@ -1,13 +1,13 @@ import styled from 'styled-components'; export const CastCard = styled.div` - margin-top: 3rem; + margin-top: 5rem; width: 160px; height: 330px; background-color: #49bcec; border-radius: 20px; - margin-left: 10px; + margin-left: 8px; box-shadow: 0 8px 6px -6px grey; margin-bottom: 60px; `; @@ -38,7 +38,7 @@ export const CastImg = styled.img` export const arrowStyles = { position: 'absolute', zIndex: 2, - top: 'calc(60% - 30px)', + top: 'calc(60% - 72px)', width: 30, height: 30, @@ -50,3 +50,11 @@ export const arrowStyles = { fontSize: '30px', fontWeight: 'bold', }; +export const HorizontalLine = styled.hr` + border: 0; + height: 1px; + background:red; + margin-top: 5rem; + margin-left:0.5rem; + margin-right:0.5rem; +`; \ No newline at end of file diff --git a/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx b/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx index c27e6be..fd0e805 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx +++ b/frontend/src/features/movies/components/moviePage/Reviews/Reviews.jsx @@ -6,7 +6,7 @@ const Reviews = ({ movie }) => { return ( <> - {reviews && ( )}; + {reviews && ( )} ); diff --git a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx index 85f902a..bc690f0 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx +++ b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import { useState } from 'react'; import { Carousel } from 'react-responsive-carousel'; import 'react-responsive-carousel/lib/styles/carousel.min.css'; import './reviews.css'; @@ -39,32 +39,33 @@ const ReviewsCarousel = ({ reviews }) => { return ( - hasPrev && ( + renderArrowPrev={(onClickHandler, label) => + - ) + } - renderArrowNext={(onClickHandler, hasNext, label) => - hasNext && ( + renderArrowNext={(onClickHandler, label) => + - ) + } > {reviews.map((review, index) => ( @@ -73,7 +74,7 @@ const ReviewsCarousel = ({ reviews }) => {

{renderReviewContent(review.content, index)} {review.content.split(' ').length > 50 && ( - )} diff --git a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css index 7f0a1ee..37b80fc 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css +++ b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css @@ -1,5 +1,5 @@ .carousel-slide-2 { - margin-left: 2rem; + margin-left: 8rem; margin-right: 2rem; margin-top: 2rem; padding-left: 2rem; @@ -23,6 +23,7 @@ } } .show-more { + cursor:pointer; background: none; border: none; color: #195b97; diff --git a/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx b/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx index c653528..94e1574 100644 --- a/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx +++ b/frontend/src/features/movies/components/moviePage/movieDetails/MovieDetails.jsx @@ -48,17 +48,17 @@ const MovieDetails = ({ movie }) => { {movie.ratings && ( - {movie.ratings.imdb && ( + {movie.ratings.imdb && !isNaN(parseFloat(movie.ratings.imdb)) &&( {movie.ratings.imdb} )} - {movie.ratings.tmdb && ( + {movie.ratings.tmdb && !isNaN(parseFloat(movie.ratings.tmbd)) && ( {movie.ratings.tmdb} )} - {movie.ratings.metaCritic && ( + {movie.ratings.metaCritic && !isNaN(parseFloat(movie.ratings.metaCritic)) &&( {movie.ratings.metaCritic} )} diff --git a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx index eb0efb9..dbc65a0 100644 --- a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx @@ -5,7 +5,7 @@ export const DetailContainer = styled.div` background: rgba(0, 0, 0, 0.5); text-align: center; height: fit-content; - margin-top: 1rem; + margin-top: 2.3em; border-radius: 8px; padding: 2rem 4rem; color: #69bada; diff --git a/frontend/src/pages/moviePage/MoviePage.jsx b/frontend/src/pages/moviePage/MoviePage.jsx index c587ff4..0bb78c8 100644 --- a/frontend/src/pages/moviePage/MoviePage.jsx +++ b/frontend/src/pages/moviePage/MoviePage.jsx @@ -36,8 +36,8 @@ const MoviePage = () => {

{Movie && ( - - + {/* */} + diff --git a/frontend/src/pages/moviePage/MoviePageStyles.jsx b/frontend/src/pages/moviePage/MoviePageStyles.jsx index 5f0c608..2cdee2f 100644 --- a/frontend/src/pages/moviePage/MoviePageStyles.jsx +++ b/frontend/src/pages/moviePage/MoviePageStyles.jsx @@ -1,6 +1,6 @@ import styled from 'styled-components'; export const PageContainer = styled.div` - padding: 0vw 10vw; + padding: 0vw 14vw; overflow: hidden; background: linear-gradient(to right, #141e30, #456181); @media screen and (max-width: 1200px) { @@ -12,7 +12,7 @@ export const PageContainer = styled.div` `; export const MovieContainer = styled.div` - position: relative; + padding-top:4vw; background-color: #79d3f3; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); @@ -47,8 +47,8 @@ export const OverlayContainer = styled.div` props.poster ? `url(https://image.tmdb.org/t/p/w1280/${props.poster})` : null}; - background-size: cover; - background-repeat: no-repeat; + background-size: 100% 100%; + background-repeat:cover; background-position: center; } `; From 9bf9e4114a97c004e9afd71254a26296df3df00a Mon Sep 17 00:00:00 2001 From: amalshweiki Date: Wed, 27 Mar 2024 14:19:39 +0200 Subject: [PATCH 2/3] themes --- .../DirectorAndWriters/DirectorAndWritersStyles.jsx | 2 +- .../MovieCastCarousel/MovieCastCarousel.jsx | 1 + .../MovieCastCarousel/MovieCastCarouselStyles.jsx | 12 ++++++------ .../components/moviePage/Reviews/ReviewsCarousel.jsx | 6 +++--- .../movies/components/moviePage/Reviews/reviews.css | 8 ++++---- .../moviePage/TrailerWidget/TrailerWidget.jsx | 9 ++++++++- .../moviePage/TrailerWidget/TrailerWidgetStyles.jsx | 2 +- .../moviePage/movieDetails/movieDetailsStyles.jsx | 4 ++-- .../tagLineAndPlot/TagLineAndPlotStyles.jsx | 2 +- frontend/src/pages/moviePage/MoviePage.jsx | 2 +- frontend/src/pages/moviePage/MoviePageStyles.jsx | 5 +++-- 11 files changed, 31 insertions(+), 22 deletions(-) diff --git a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx index 5948099..cbdbdc3 100644 --- a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx @@ -5,7 +5,7 @@ export const DirectorWriters = styled.div` padding: 2rem; align-self: flex-end; font-size: var(--paragraph); - color: #0c3675; + color:var(--primary-color); text-align: left; margin-top: 1rem; `; diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx index 1185e1d..974010e 100644 --- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx +++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarousel.jsx @@ -25,6 +25,7 @@ const MovieCastCarousel = ({ movie }) => { { position: 'absolute', zIndex: 2, - top: '50% ', + top: '45% ', width: 30, height: 30, cursor: 'pointer', - background: '#49BCEC', + background: 'var(--primary-color)', border: 'none', - color: '#7AD3F3', + color: 'var(--secondary-color-light)', borderRadius: '50%', fontSize: '30px', fontWeight: 'bold', diff --git a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css index 37b80fc..a2ddbce 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css +++ b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css @@ -6,15 +6,15 @@ text-align: left; position: relative; min-height: 100px; - color: #2a6496; + color:var(--primary-color); font-size: 15px; font-weight: 400; width: 80%; } .carousel-slide-2 p { margin-left: 50px; - border-left: 2px solid #49bcec; - border-right: 2px solid #49bcec; + border-left: 2px solid var(--primary-color); + border-right: 2px solid var(--primary-color); padding-left: 20px; padding-right: 20px; @media screen and (max-width: 500px) { @@ -26,6 +26,6 @@ cursor:pointer; background: none; border: none; - color: #195b97; + color:var(--primary-color); font-weight: bold; } diff --git a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx index 72f33ae..4110a02 100644 --- a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx +++ b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidget.jsx @@ -20,6 +20,13 @@ const TrailerWidget = ({ movie }) => { const openModal = () => setIsOpen(true); const closeModal = () => setIsOpen(false); + const correctTrailerUrl = (url) => { + const urlParts = url.split('watch?v=='); + if (urlParts.length === 2) { + return `https://www.youtube.com/embed/${urlParts[1]}`; + } + return url; + }; return ( <> @@ -97,7 +104,7 @@ const TrailerWidget = ({ movie }) => { {movie.trailers.map((trailer, index) => ( diff --git a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx index 78dc61b..89e429e 100644 --- a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx @@ -11,7 +11,7 @@ export const WidgetContainer = styled.div` width: 25rem; height: 25rem; top: 50%; - left: 83%; + left: 85%; z-index: 1; transition: transform 0.5s ease; diff --git a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx index dbc65a0..15c4561 100644 --- a/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/movieDetails/movieDetailsStyles.jsx @@ -5,10 +5,10 @@ export const DetailContainer = styled.div` background: rgba(0, 0, 0, 0.5); text-align: center; height: fit-content; - margin-top: 2.3em; + margin-top: 2.5em; border-radius: 8px; padding: 2rem 4rem; - color: #69bada; + color: var(--primary-color); @media screen and (max-width: 500px) { padding: 2rem 4rem; width: 100vw; diff --git a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx index 3c28271..753251b 100644 --- a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx @@ -8,7 +8,7 @@ export const TagPlotContainer = styled.div` padding: 2rem; align-self: flex-start; font-size: var(--paragraph); - color: #0c3675; + color:var(--primary-color); text-align: left; @media screen and (max-width: 500px) { diff --git a/frontend/src/pages/moviePage/MoviePage.jsx b/frontend/src/pages/moviePage/MoviePage.jsx index 0bb78c8..ee2726e 100644 --- a/frontend/src/pages/moviePage/MoviePage.jsx +++ b/frontend/src/pages/moviePage/MoviePage.jsx @@ -36,7 +36,7 @@ const MoviePage = () => {
{Movie && ( - {/* */} + diff --git a/frontend/src/pages/moviePage/MoviePageStyles.jsx b/frontend/src/pages/moviePage/MoviePageStyles.jsx index 2cdee2f..05606d6 100644 --- a/frontend/src/pages/moviePage/MoviePageStyles.jsx +++ b/frontend/src/pages/moviePage/MoviePageStyles.jsx @@ -2,7 +2,8 @@ import styled from 'styled-components'; export const PageContainer = styled.div` padding: 0vw 14vw; overflow: hidden; - background: linear-gradient(to right, #141e30, #456181); + background-color:var(--secondary-color); + /* background: linear-gradient(to right, #141e30, #456181); */ @media screen and (max-width: 1200px) { padding: 0 10vw; } @@ -13,7 +14,7 @@ export const PageContainer = styled.div` export const MovieContainer = styled.div` padding-top:4vw; - background-color: #79d3f3; + background-color:var(--secondary-color); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); @media only screen and (max-width: 500px) { From 2b65567a03e14301712db3dfbeccfd99c4b6595e Mon Sep 17 00:00:00 2001 From: amalshweiki Date: Wed, 27 Mar 2024 14:50:18 +0200 Subject: [PATCH 3/3] them2 --- .../DirectorAndWritersStyles.jsx | 2 +- .../MovieCastCarousel/MovieCastCarouselStyles.jsx | 14 +++++++------- .../moviePage/Reviews/ReviewsCarousel.jsx | 4 ++-- .../components/moviePage/Reviews/reviews.css | 6 +++--- .../TrailerWidget/TrailerWidgetStyles.jsx | 2 +- .../tagLineAndPlot/TagLineAndPlotStyles.jsx | 2 +- frontend/src/pages/moviePage/MoviePageStyles.jsx | 2 +- 7 files changed, 16 insertions(+), 16 deletions(-) diff --git a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx index cbdbdc3..1e4de6a 100644 --- a/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/DirectorAndWriters/DirectorAndWritersStyles.jsx @@ -5,7 +5,7 @@ export const DirectorWriters = styled.div` padding: 2rem; align-self: flex-end; font-size: var(--paragraph); - color:var(--primary-color); + color:var(--secondary-color-light); text-align: left; margin-top: 1rem; `; diff --git a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx index 396406f..16e5084 100644 --- a/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/MovieCastCarousel/MovieCastCarouselStyles.jsx @@ -4,7 +4,7 @@ export const CastCard = styled.div` margin-top: 5rem; width: 160px; height: 330px; - background-color:var(--primary-color); + background-color:var(--secondary-color); border-radius: 20px; margin-left: 8px; @@ -16,7 +16,7 @@ export const CastName = styled.h3` justify-content: left; font-size: 15px; margin-left: 10px; - color:var(--secondary-color); + color:var(--primary-color); font-weight: bold; font-weight: 400; `; @@ -25,7 +25,7 @@ export const CastChar = styled.p` justify-content: left; margin-left: 8px; - color:var(--secondary-color); + color:var(--primary-color); font-size: 15px; `; export const CastImg = styled.img` @@ -43,9 +43,9 @@ export const arrowStyles = { width: 30, height: 30, cursor: 'pointer', - background: 'var(--primary-color)', - border: 'none', - color: 'var(--secondary-color-light)', + background: 'var(--secondary-color-light)', + border: 'none', + color: 'var(--secondary-color-lightest)', borderRadius: '50%', fontSize: '30px', fontWeight: 'bold', @@ -53,7 +53,7 @@ export const arrowStyles = { export const HorizontalLine = styled.hr` border: 0; height: 1px; - background:var(--primary-color); + background:var(--secondary-color-light); margin-top: 5rem; margin-left:0.5rem; margin-right:0.5rem; diff --git a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx index fd4ba2b..d56565d 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx +++ b/frontend/src/features/movies/components/moviePage/Reviews/ReviewsCarousel.jsx @@ -28,9 +28,9 @@ const ReviewsCarousel = ({ reviews }) => { width: 30, height: 30, cursor: 'pointer', - background: 'var(--primary-color)', + background: 'var(--secondary-color-light)', border: 'none', - color: 'var(--secondary-color-light)', + color: 'var(--secondary-color-lightest)', borderRadius: '50%', fontSize: '30px', fontWeight: 'bold', diff --git a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css index a2ddbce..54941c6 100644 --- a/frontend/src/features/movies/components/moviePage/Reviews/reviews.css +++ b/frontend/src/features/movies/components/moviePage/Reviews/reviews.css @@ -6,15 +6,15 @@ text-align: left; position: relative; min-height: 100px; - color:var(--primary-color); + color:var(--secondary-color-light); font-size: 15px; font-weight: 400; width: 80%; } .carousel-slide-2 p { margin-left: 50px; - border-left: 2px solid var(--primary-color); - border-right: 2px solid var(--primary-color); + border-left: 2px solid var(--secondary-color-light); + border-right: 2px solid var(--secondary-color-light); padding-left: 20px; padding-right: 20px; @media screen and (max-width: 500px) { diff --git a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx index 89e429e..84e6f1f 100644 --- a/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/TrailerWidget/TrailerWidgetStyles.jsx @@ -9,7 +9,7 @@ export const WidgetContainer = styled.div` background-size: contain; background-repeat: no-repeat; width: 25rem; - height: 25rem; + height: 30rem; top: 50%; left: 85%; diff --git a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx index 753251b..864cecd 100644 --- a/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx +++ b/frontend/src/features/movies/components/moviePage/tagLineAndPlot/TagLineAndPlotStyles.jsx @@ -8,7 +8,7 @@ export const TagPlotContainer = styled.div` padding: 2rem; align-self: flex-start; font-size: var(--paragraph); - color:var(--primary-color); + color:var(--secondary-color-light); text-align: left; @media screen and (max-width: 500px) { diff --git a/frontend/src/pages/moviePage/MoviePageStyles.jsx b/frontend/src/pages/moviePage/MoviePageStyles.jsx index 05606d6..23be48f 100644 --- a/frontend/src/pages/moviePage/MoviePageStyles.jsx +++ b/frontend/src/pages/moviePage/MoviePageStyles.jsx @@ -14,7 +14,7 @@ export const PageContainer = styled.div` export const MovieContainer = styled.div` padding-top:4vw; - background-color:var(--secondary-color); + background-color:var(--primary-color); box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); @media only screen and (max-width: 500px) {