images size fix, css fix

genreList, topBar, sideBar
GeorgiySergeev · Mar 14, 2024 · 912475f · 912475f
1 parent 4cea221
commit 912475f
Show file tree

Hide file tree

Showing 10 changed files with 23 additions and 17 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicon.svg b/public/favicon.svg
diff --git a/public/index.html b/public/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
+    <!-- <link rel="icon" href="../public/favicon.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta

diff --git a/src/assets/icons/movie-database-logo.png b/src/assets/icons/movie-database-logo.png
diff --git a/src/components/GenreList/GenreList.styled.js b/src/components/GenreList/GenreList.styled.js
@@ -2,8 +2,8 @@ import styled from '@emotion/styled';
 // import { Button } from '@mui/material';
 
 export const GenreListWrapper = styled.div`
-  /* overflow: scroll;
-  height: 375px; */
+  /* overflow: scroll; */
+  /* height: 375px; */
   /* width: 90%; */
   /* padding: 10px; */
   margin-top: 35px;
@@ -17,7 +17,7 @@ export const GenreListStyled = styled.ul`
   flex-wrap: wrap;
 
   /* flex-direction: column; */
-  gap: 10px;
+  gap: 12px;
   a:hover {
     scale: 105%;
     color: #f33f3f;
@@ -31,6 +31,6 @@ export const GenreListStyled = styled.ul`
 export const Button = styled.button`
   border: 1px solid rgba(255, 190, 190, 0.2);
   border-radius: 8px;
-  font-size: 16px;
+  font-size: 21px;
   padding: 5px;
 `;
diff --git a/src/components/MovieCard/MovieCard.jsx b/src/components/MovieCard/MovieCard.jsx
@@ -30,7 +30,7 @@ export const MovieCard = ({
   vote_average,
   isAdded,
 }) => {
-  const BASIC_IMG_URL = 'https://image.tmdb.org/t/p/w200';
+  const BASIC_IMG_URL = 'https://image.tmdb.org/t/p/w400';
   const location = useLocation();
   const formatedData = formatDate(relise);
   const formatedDataAlt = formatDate(first_air_date);

diff --git a/src/components/MovieDetailsCard/MovieDetailsCard.jsx b/src/components/MovieDetailsCard/MovieDetailsCard.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { convertMinutesToHoursAndMinutes } from 'servises/minutesTohours';
 import defaultImg from '../../assets/default-img/no-available-image.png';
-import { AddToListButton } from 'components/Sidebar/Sidebar.styled';
+import { WatchListButton } from 'components/Sidebar/Sidebar.styled';
 import { addMovie, removeMovie } from '../../redux/watchlist/watchlist-slice';
 
 import { formatDate } from 'servises/date';
@@ -138,9 +138,9 @@ export const MovieDetailsCard = ({ card, isAdded }) => {
               <p>Score</p>
               <h3>{vote_count}</h3>
             </ScoreBox>
-            <AddToListButton style={{ width: 239 }} onClick={handleClick}>
+            <WatchListButton style={{ width: 239 }} onClick={handleClick}>
               {buttonText}
-            </AddToListButton>
+            </WatchListButton>
           </div>
         </InfoWrapper>
       </HeadWrapper>

diff --git a/src/components/Sidebar/Sidebar.jsx b/src/components/Sidebar/Sidebar.jsx
@@ -6,7 +6,7 @@ import {
   SidebarContainer,
   Nav,
   HeadTitle,
-  AddToListButton,
+  WatchListButton,
 } from './Sidebar.styled';
 // import Filter from '../Filter/Filter';
 
@@ -25,7 +25,7 @@ export const Sidebar = () => {
       <HeadTitle>MovieBox</HeadTitle>
       <Nav></Nav>
       <Link to={'/watchlist'}>
-        <AddToListButton>My watchlist</AddToListButton>
+        <WatchListButton>My watchlist</WatchListButton>
       </Link>
       {!shouldShowComponent && <GenreList></GenreList>}
       {shouldShowComponent && <div></div>}

diff --git a/src/components/Sidebar/Sidebar.styled.js b/src/components/Sidebar/Sidebar.styled.js
@@ -7,8 +7,8 @@ export const SidebarContainer = styled.div`
 
   width: 269px;
 
-  padding: 68px 15px 15px 15px;
-  height: 820px;
+  padding: 25px 15px 15px 15px;
+  height: 880px;
 
   border-bottom-left-radius: 15px;
   border-bottom-right-radius: 15px;
@@ -89,11 +89,12 @@ export const HeadTitle = styled.h1`
   font-size: 48px;
 `;
 
-export const AddToListButton = styled.button`
+export const WatchListButton = styled.button`
   width: 100%;
   height: 41px;
   background-color: #f33f3f;
   color: #141414;
+  font-weight: 700;
 
   border-radius: 8px;
   :hover {

diff --git a/src/components/Topbar/Topbar.styled.jsx b/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: 420px;
+  height: 380px;
   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.6);
+    background-color: rgba(86, 86, 86, 0.8);
     z-index: 10; /* Выставим z-index поверх слайдера (обычно слайдеры имеют z-index: 0 по умолчанию) */
   }
 `;
@@ -46,7 +46,7 @@ export const TopBarText = styled.p`
   left: 20px;
   font-size: 18px;
   font-family: 'Archivo', sans-serif;
-  color: #e1e1e1;
+  color: #ffffff;
   width: 380px;
   margin-bottom: 13px;
   line-height: 28px;