for chat0

src/components/Footer/Footer.tsx

@@ -10,7 +10,7 @@ export const Footer = () => {
     <div className="footer-container">
       <div className="footer-block">
         <Link to="/" target="_self" className="footer-logo">
-          <img src="./uploadedImg/logo.png" alt="Logo"></img>
+          <img src="./uploadedImg/logo.svg" alt="Logo"></img>
         </Link>
 
         <ul className="footer-links">
@@ -49,7 +49,7 @@ export const Footer = () => {
         <div className="footer-back-btn-bl">
           <p className="footer-back-p">Back to top</p>
           <button className="footer-UpArrow" onClick={handleScroll}>
-            <img src="./uploadedImg/UpArrow.png"></img>
+            <img src="./uploadedImg/up.svg"></img>
           </button>
         </div>
       </div>

src/components/HeaderNav/HearderNav.tsx

@@ -20,7 +20,7 @@ export const HeaderNav = () => {
     <div>
       <div className="container">
         <Link to="/" target="_self" className="logo">
-          <img src="./uploadedImg/logo.png" alt="Logo"></img>
+          <img src="./uploadedImg/logo.svg" alt="Logo"></img>
         </Link>
         {useLocation().pathname !== '/menu' && (
           <ul className="links">
@@ -50,15 +50,15 @@ export const HeaderNav = () => {
         <ul className="icons">
           <li className="icon">
             <Link to="/favorites" className="icon-link onTablet">
-              <img src="./uploadedImg/like.png"></img>
+              <img src="./uploadedImg/like.svg"></img>
               {favItems.length > 0 && (
                 <div className="show-items">{favItems.length}</div>
               )}
             </Link>
           </li>
           <li className="icon">
             <Link to="/bucket" className="icon-link onTablet">
-              <img src="./uploadedImg/shoppingBag.png"></img>
+              <img src="./uploadedImg/bag.svg"></img>
               {bucketItems.length > 0 && (
                 <div className="show-items">{totalCount}</div>
               )}
@@ -73,7 +73,7 @@ export const HeaderNav = () => {
           ) : (
             <li className="icon">
               <Link to="/menu" className="icon-link onMobile">
-                <img src="./uploadedImg/burger.png"></img>
+                <img src="./uploadedImg/Menu.svg"></img>
               </Link>
             </li>
           )}

src/modules/pages/Accessories/Accessories.tsx

@@ -70,14 +70,18 @@ export const Accessories: React.FC = () => {
     }, 500);
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  });
+
   return (
     <div className="phones-container">
       <div className="fav-link">
         <Link to="/" className="favIcon">
-          <img src="./uploadedImg/Home.png"></img>
+          <img src="./uploadedImg/home.svg"></img>
         </Link>
         <a className="favIcon">
-          <img src="./uploadedImg/LeftArrow.png"></img>
+          <img src="./uploadedImg/right.svg"></img>
         </a>
         <p className="fav-link-p">Accessories</p>
       </div>
@@ -97,7 +101,7 @@ export const Accessories: React.FC = () => {
               <option value="Cheapest">Cheapest</option>
             </select>
             <div className="select-btn">
-              <img src="./uploadedImg/DownArrow.png"></img>
+              <img src="./uploadedImg/down.svg"></img>
             </div>
           </div>
         </div>
@@ -114,7 +118,7 @@ export const Accessories: React.FC = () => {
               <option value="24">24</option>
             </select>
             <div className="select-btn">
-              <img src="./uploadedImg/DownArrow.png"></img>
+              <img src="./uploadedImg/down.svg"></img>
             </div>
           </div>
         </div>
@@ -137,7 +141,7 @@ export const Accessories: React.FC = () => {
       {!isLoading && (
         <div className="btn-container">
           <button className="arrow-btn-LR" onClick={prevPage}>
-            <img src="./uploadedImg/RightArrow.png"></img>
+            <img src="./uploadedImg/left.svg"></img>
           </button>
           {pages.map((page, index) => (
             <button
@@ -153,7 +157,7 @@ export const Accessories: React.FC = () => {
             </button>
           ))}
           <button className="arrow-btn-LR" onClick={nextPage}>
-            <img src="./uploadedImg/LeftArrow.png"></img>
+            <img src="./uploadedImg/right.svg"></img>
           </button>
         </div>
       )}

src/modules/pages/Bucket/Bucket.scss

@@ -4,7 +4,8 @@
   width: 1200px;
   margin: 0 auto;
   margin-bottom: 80px;
-  min-height: 100vh;
+  min-height: 70vh;
+  overflow-x: hidden;
 
   @include on-tablet {
     width: 640px;
@@ -157,6 +158,14 @@
   font-weight: 600;
   line-height: 21px;
   color: #313237;
+
+  @include on-tablet {
+    width: 594px;
+  }
+
+  @include on-mobile {
+    width: 290px;
+  }
 }
 
 .model-h1 {
@@ -213,7 +222,7 @@
 }
 
 .bucket-link-p {
-  font-family: Mont-SemiBold, sans-serif;
+  font-family: Mont, sans-serif;
   font-size: 12px;
   font-weight: 700;
   line-height: 15.34px;

src/modules/pages/Bucket/Bucket.tsx

@@ -2,7 +2,7 @@ import './Bucket.scss';
 import { BucketCard } from './Components/BucketCard';
 import { useProductsContext } from '../../../PageContext';
 import { Model } from './Components/Model';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const Bucket = () => {
@@ -25,18 +25,19 @@ export const Bucket = () => {
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, []);
+
   return (
     <div className="bucket-layout">
       <div className="bucket-link-block">
         <button className="bucket-link-btn" onClick={() => navigate(-1)}>
-          <img
-            src="./uploadedImg/LeftBlackArrow.png"
-            className="close-img"
-          ></img>
+          <img src="./uploadedImg/right-black.svg" className="close-img"></img>
           <p className="bucket-link-p">Back</p>
         </button>
       </div>
-      <h1 className="bucket-h1">Card</h1>
+      <h1 className="bucket-h1">Cart</h1>
       <div className="products-block">
         <div className="cards-layout">
           {bucketItems.length > 0 ? (

src/modules/pages/Bucket/Components/BucketCard/BucketCard.tsx

@@ -26,19 +26,19 @@ export const BucketCard: React.FC<Props> = ({ item }) => {
     <div className="bucket-card">
       <div className="up-content">
         <button className="close-img-btn" onClick={handleDeleteItem}>
-          <img src="./uploadedImg/Close.png" className="close-img"></img>
+          <img src="./uploadedImg/close.svg" className="close-img"></img>
         </button>
         <img src={item.item.images[0]} className="card-img"></img>
         <p className="card-p">{item.item.name}</p>
       </div>
       <div className="down-content">
         <div className="card-btns">
           <button className="card-btn" onClick={handleMinusItem}>
-            <img src="./uploadedImg/Minus.png" className="card-btn-img"></img>
+            <img src="./uploadedImg/Minus.svg" className="card-btn-img"></img>
           </button>
           <div className="card-number">{item.count}</div>
           <button className="card-btn" onClick={handlePlusItem}>
-            <img src="./uploadedImg/Plus.png" className="card-btn-img"></img>
+            <img src="./uploadedImg/Plus.svg" className="card-btn-img"></img>
           </button>
         </div>
         <p className="card-price">{`$${item.item.priceDiscount * item.count}`}</p>

src/modules/pages/Favorites/Favorites.scss

@@ -7,6 +7,7 @@
 
   @include on-tablet {
     width: 640px;
+    min-height: 73vh;
   }
 
   @include on-mobile {
@@ -93,6 +94,7 @@ line-height: 15.34px;
 text-align: left;
 margin: 0;
 color: #89939A;
+font-family: Mont, sans-serif;
 
 }
 
@@ -114,6 +116,14 @@ color: #89939A;
   font-weight: 600;
   line-height: 21px;
   color: #313237;
+
+  @include on-tablet {
+    width: 594px;
+  }
+
+  @include on-mobile {
+    width: 290px;
+  }
 }
 
 .margin-0 {

src/modules/pages/Favorites/Favorites.tsx

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useEffect } from 'react';
 import './Favorites.scss';
 import { Card } from '../Home/components/NewPhones/components';
 import { ProductsContext } from '../../../PageContext';
@@ -7,14 +7,18 @@ import { Link } from 'react-router-dom';
 export const Favorites = () => {
   const { favItems } = useContext(ProductsContext);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  });
+
   return (
     <div className="favorites-layout">
       <div className="fav-link">
         <Link to="/" className="favIcon">
-          <img src="./uploadedImg/Home.png"></img>
+          <img src="./uploadedImg/home.svg"></img>
         </Link>
         <a className="favIcon">
-          <img src="./uploadedImg/LeftArrow.png"></img>
+          <img src="./uploadedImg/right.svg"></img>
         </a>
         <p className="fav-link-p">Favorites</p>
       </div>

src/modules/pages/Home/components/HotPrices/HotPrices.tsx

@@ -48,11 +48,11 @@ export const HotPrices: React.FC = () => {
         <h1 className="newPhones-h1">Hot prices</h1>
         <div className="slide-btns">
           <button className="arrow-btn" onClick={handlePrevSlide}>
-            <img src="./uploadedImg/RightArrow.png"></img>
+            <img src="./uploadedImg/left.svg"></img>
           </button>
 
           <button className="arrow-btn" onClick={handleNextSlide}>
-            <img src="./uploadedImg/LeftArrow.png"></img>
+            <img src="./uploadedImg/right.svg"></img>
           </button>
         </div>
       </div>