added Link to Home logo

Bad-Raider · Sep 17, 2023 · 12e1384 · 12e1384
1 parent 6ecf7bd
commit 12e1384
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 17 deletions.
diff --git a/src/components/CarsList/CarsList.jsx b/src/components/CarsList/CarsList.jsx
@@ -7,7 +7,7 @@ import { fetchMoreCars } from '../../redux/operation';
 const CarsList = () => {
   const { car } = useSelector(state => state);
   const dispatch = useDispatch();
-  const lastlItem = car.items?.length % car.limit;
+  const lastItem = car.items?.length % car.limit;
 
   const handleClickLoadMore = () => {
     dispatch(fetchMoreCars());
@@ -24,7 +24,7 @@ const CarsList = () => {
         />
       ))}
     </ListCar>
-    {(car.items.length > 0 && lastlItem !== 1) &&
+    {(car.items.length > 0 && lastItem !== 1) &&
       <BtnLoadeMore onClick={handleClickLoadMore}>Load more</BtnLoadeMore>}
   </>
 };

diff --git a/src/components/CarsList/CarsList.styled.js b/src/components/CarsList/CarsList.styled.js
@@ -2,16 +2,19 @@ import styled from '@emotion/styled';
 import { colors, transition } from '../../styles/common/vars';
 
 export const ListCar = styled.ul`
-    display: grid;
-    grid-template-columns: repeat(1, 1fr);
-    row-gap: 50px;
-    column-gap: 29px;
-    margin-bottom: 100px;
+  display: grid;
+  justify-items: center;
+  grid-template-columns: repeat(1, 1fr);
+  row-gap: 50px;
+  column-gap: 29px;
+  margin-bottom: 100px;
 
-    @media screen and (min-width: 768px) {
+  @media screen and (min-width: 768px) {
     grid-template-columns: repeat(2, 1fr);
-    row-gap: 50px;
-    column-gap: 29px;
+  }
+  
+  @media screen and (min-width: 1280px) {
+    grid-template-columns: repeat(3, 1fr);
   }
 
   @media screen and (min-width: 1440px) {

diff --git a/src/components/Catalog/Filter.styled.jsx → src/components/Catalog/Filter.styled.js b/src/components/Catalog/Filter.styled.jsx → src/components/Catalog/Filter.styled.js
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -5,7 +5,7 @@ import pageLogoPath from 'images/page-logo.png';
 const Header = () => {
   return (
     <PageHeader>
-      <Link>
+      <Link to="/">
         <PageLogo src={pageLogoPath} width={150} />
       </Link>
       <nav>

diff --git a/src/components/Header/Header.styled.js b/src/components/Header/Header.styled.js
@@ -17,18 +17,22 @@ export const PageLogo = styled.img`
 
 export const NavList = styled.ul`
   display: flex;
-  gap: 25px;
+
+  @media screen and (min-width: 768px) {
+    gap: 25px;;
+  }
+  
 `;
 
 export const NavigationLink = styled(NavLink)`
   display: block;
-  padding: 32px;
+  padding: 10px;
 
   font-size: 18px;
   font-weight: 600;
   text-transform: uppercase;
   transition: color ${transition.duration}, border-color ${transition.duration},
-    background-color ${transition.duration};
+  background-color ${transition.duration};
   border-bottom: 4px solid transparent;
 
   &:hover,
@@ -40,4 +44,9 @@ export const NavigationLink = styled(NavLink)`
     color: ${colors.accentColor};
     border-bottom: 4px solid ${colors.accentColor};
   }
+
+  @media screen and (min-width: 768px) {
+    padding: 30px;
+  }
+
 `;
diff --git a/src/components/Shared/Container.styled.jsx b/src/components/Shared/Container.styled.jsx
@@ -2,10 +2,15 @@ import styled from '@emotion/styled';
 
 export const Container = styled.div`
   margin: 0 auto;
-
+  width: 375px;
+  padding: 0 20px;
   outline: 1px solid tomato;
 
-  width: 1280px;
+  @media screen and (min-width: 768px) {
+    width: 768px;
+  }
 
-  padding: 0 20px;
+  @media screen and (min-width: 1280px) {
+    width: 1280px;
+  }
 `;