diff --git a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
index 0a8da10051e..ca2883f7fde 100644
--- a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
@@ -1,6 +1,7 @@
import { useRef, useState, useEffect } from 'react';
import { Product } from '../../../../types';
import { ProductCard } from '../../../shared/components/ProductCard';
+import { getImageUrl } from '../../../../utils';
import styles from './ProductsSlider.module.scss';
const CARD_WIDTH = 272;
@@ -57,7 +58,7 @@ export const ProductsSlider = ({ title, products }: Props) => {
aria-label="Previous products"
>
Page not found
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
index 9b74593e30c..cd9a9a53e0d 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -9,6 +9,7 @@ import { Product, ProductDetails } from '../../types';
import { Category, CATEGORIES } from '../../types';
import { useCart } from '../../context';
import { useProducts } from '../../context';
+import { getImageUrl } from '../../utils';
import { Loader } from '../shared/components/Loader';
import { ProductsSlider } from '../HomePage/components/ProductsSlider';
import styles from './ProductDetailsPage.module.scss';
@@ -63,7 +64,6 @@ export const ProductDetailsPage = () => {
setDetails(det);
setSuggested(sugg);
- // Find the matching Product entry (for cart / favorites)
const match = allProducts.find(p => p.itemId === productId) ?? null;
setProduct(match);
@@ -154,7 +154,10 @@ export const ProductDetailsPage = () => {
className={`${styles.thumb} ${i === activeImage ? styles.thumbActive : ''}`}
onClick={() => setActiveImage(i)}
>
-
+
})
))}
@@ -162,7 +165,7 @@ export const ProductDetailsPage = () => {
diff --git a/src/modules/shared/components/Dropdown/Dropdown.tsx b/src/modules/shared/components/Dropdown/Dropdown.tsx
index 7ffde3dd450..a36c2a62602 100644
--- a/src/modules/shared/components/Dropdown/Dropdown.tsx
+++ b/src/modules/shared/components/Dropdown/Dropdown.tsx
@@ -1,4 +1,5 @@
import { useState, useRef, useEffect } from 'react';
+import { getImageUrl } from '../../../../utils';
import styles from './Dropdown.module.scss';
type Option
= {
@@ -59,7 +60,7 @@ export const Dropdown = ({
{selectedOption?.label}
diff --git a/src/modules/shared/components/Footer/Footer.tsx b/src/modules/shared/components/Footer/Footer.tsx
index cb23d7ca9c5..3d629e9f5d4 100644
--- a/src/modules/shared/components/Footer/Footer.tsx
+++ b/src/modules/shared/components/Footer/Footer.tsx
@@ -1,5 +1,6 @@
import { Link } from 'react-router-dom';
import { AppRoutes } from '../../../../utils/routes';
+import { getImageUrl } from '../../../../utils';
import styles from './Footer.module.scss';
export const Footer = () => {
@@ -15,7 +16,10 @@ export const Footer = () => {
className={styles.logo}
aria-label="Go to home"
>
- 
+ })
diff --git a/src/modules/shared/components/Header/Header.tsx b/src/modules/shared/components/Header/Header.tsx
index 3555160a660..149f7bf86e1 100644
--- a/src/modules/shared/components/Header/Header.tsx
+++ b/src/modules/shared/components/Header/Header.tsx
@@ -1,6 +1,7 @@
import { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { AppRoutes } from '../../../../utils/routes';
+import { getImageUrl } from '../../../../utils';
import { useProducts, useCart } from '../../../../context';
import styles from './Header.module.scss';
@@ -26,7 +27,10 @@ export const Header = () => {
className={styles.logo}
aria-label="Go to home"
>
-
+
{/* Tablet+ nav links */}
@@ -57,7 +61,10 @@ export const Header = () => {
}
aria-label="Favourites"
>
-
+
})
{favorites.length > 0 && (
{favorites.length}
)}
@@ -69,7 +76,7 @@ export const Header = () => {
}
aria-label="Cart"
>
-
+
})
{totalQuantity > 0 && (
{totalQuantity}
)}
@@ -82,7 +89,11 @@ export const Header = () => {
onClick={() => setMenuOpen(prev => !prev)}
>
@@ -120,7 +131,10 @@ export const Header = () => {
aria-label="Favourites"
onClick={() => setMenuOpen(false)}
>
-
+
{favorites.length > 0 && (
{favorites.length}
)}
@@ -133,7 +147,7 @@ export const Header = () => {
aria-label="Cart"
onClick={() => setMenuOpen(false)}
>
-
+
{totalQuantity > 0 && (
{totalQuantity}
)}
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
index 42c8e15ab69..c73b7ac8817 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.tsx
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -1,6 +1,7 @@
import { Link } from 'react-router-dom';
import { Product } from '../../../../types';
import { useProducts, useCart } from '../../../../context';
+import { getImageUrl } from '../../../../utils';
import styles from './ProductCard.module.scss';
interface Props {
@@ -29,7 +30,7 @@ export const ProductCard = ({ product }: Props) => {
-
+
})
{name}
@@ -74,8 +75,8 @@ export const ProductCard = ({ product }: Props) => {
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 83cae8784f0..1a8b5227cfd 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -1 +1,10 @@
// Utility functions will be defined here
+
+export function getImageUrl(path: string): string {
+ const normalized = path.startsWith('/') ? path.slice(1) : path;
+ const base = import.meta.env.BASE_URL.endsWith('/')
+ ? import.meta.env.BASE_URL
+ : `${import.meta.env.BASE_URL}/`;
+
+ return `${base}${normalized}`;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 627a3196243..a177942dce9 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,4 +4,5 @@ import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ base: '/react_phone_catalog/',
});
From e9a7fc68a62dbe2ec46d2899396683b54a96e67a Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Sun, 3 May 2026 18:45:04 +0300
Subject: [PATCH 24/30] fixed base path
---
vite.config.ts | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/vite.config.ts b/vite.config.ts
index a177942dce9..e2987da10f4 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -4,5 +4,5 @@ import react from '@vitejs/plugin-react';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
- base: '/react_phone_catalog/',
+ base: '/react_phone-catalog/',
});
From 307a83bf43e9ae61fdab0cba1fc21acf5bf0f6bf Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Wed, 6 May 2026 18:54:30 +0300
Subject: [PATCH 25/30] polishing project, before PR
---
public/img/icons/Home.svg | 4 +
src/api/index.ts | 8 +-
src/constants/index.ts | 27 ++++
src/context/CartContext.tsx | 7 +-
src/hooks/useProductCounts.ts | 9 +-
src/modules/CartPage/CartPage.module.scss | 24 +--
.../components/CartItem/CartItem.module.scss | 15 +-
.../CartPage/components/CartItem/CartItem.tsx | 7 +-
.../CategoryPage/CategoryPage.module.scss | 10 +-
src/modules/CategoryPage/CategoryPage.tsx | 8 +-
.../Pagination/Pagination.module.scss | 43 +++---
.../components/Pagination/Pagination.tsx | 83 ++++++----
.../FavouritesPage/FavouritesPage.module.scss | 6 +-
src/modules/HomePage/HomePage.tsx | 21 ++-
.../PicturesSlider/PicturesSlider.module.scss | 15 +-
.../PicturesSlider/PicturesSlider.tsx | 14 +-
.../ProductsSlider/ProductsSlider.module.scss | 8 +-
.../ProductsSlider/ProductsSlider.tsx | 6 +-
.../ShopByCategory/ShopByCategory.module.scss | 7 +-
.../ShopByCategory/ShopByCategory.tsx | 12 +-
.../components/ShopByCategory/constants.ts | 0
.../ProductDetailsPage.module.scss | 146 +++++++-----------
.../ProductDetailsPage/ProductDetailsPage.tsx | 102 ++++++------
.../Breadcrumbs/Breadcrumbs.module.scss | 50 ++++++
.../components/Breadcrumbs/Breadcrumbs.tsx | 45 ++++++
.../shared/components/Breadcrumbs/index.ts | 1 +
.../components/Dropdown/Dropdown.module.scss | 29 ++--
.../shared/components/Dropdown/Dropdown.tsx | 4 +-
.../components/Footer/Footer.module.scss | 39 ++---
.../shared/components/Footer/Footer.tsx | 8 +-
.../components/Header/Header.module.scss | 100 +++---------
.../shared/components/Header/Header.tsx | 27 +---
.../shared/components/Layout/Layout.tsx | 81 ++++++++--
.../ProductCard/ProductCard.module.scss | 55 +++----
.../components/ProductCard/ProductCard.tsx | 7 +-
src/styles/_mixins.scss | 96 ++++++++----
src/styles/_reset.scss | 12 +-
src/styles/_variables.scss | 132 ++++++++--------
38 files changed, 719 insertions(+), 549 deletions(-)
create mode 100644 public/img/icons/Home.svg
create mode 100644 src/constants/index.ts
create mode 100644 src/modules/HomePage/components/ShopByCategory/constants.ts
create mode 100644 src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
create mode 100644 src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
create mode 100644 src/modules/shared/components/Breadcrumbs/index.ts
diff --git a/public/img/icons/Home.svg b/public/img/icons/Home.svg
new file mode 100644
index 00000000000..474476cb027
--- /dev/null
+++ b/public/img/icons/Home.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/api/index.ts b/src/api/index.ts
index 4a46d94c015..a7d424957b5 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -1,6 +1,10 @@
import { Product, ProductDetails, Category } from '../types';
-const BASE_URL = `${import.meta.env.BASE_URL}api`;
+const base = import.meta.env.BASE_URL.endsWith('/')
+ ? import.meta.env.BASE_URL
+ : `${import.meta.env.BASE_URL}/`;
+
+const BASE_URL = `${base}api`;
async function get(endpoint: string): Promise {
const response = await fetch(`${BASE_URL}/${endpoint}`);
@@ -48,7 +52,7 @@ export const getSuggestedProducts = (
count = 10,
): Promise =>
getProducts().then(all => {
- const pool = all.filter(p => p.itemId !== excludeId);
+ const pool = all.filter(product => product.itemId !== excludeId);
const shuffled = [...pool].sort(() => Math.random() - 0.5);
return shuffled.slice(0, count);
diff --git a/src/constants/index.ts b/src/constants/index.ts
new file mode 100644
index 00000000000..df9ab952471
--- /dev/null
+++ b/src/constants/index.ts
@@ -0,0 +1,27 @@
+import { getImageUrl } from '../utils';
+
+// Icon constants - reusable across all components
+export const ICONS = {
+ LOGO: getImageUrl('/img/icons/Logo.svg'),
+ HOME: getImageUrl('/img/icons/Home.svg'),
+ CART: getImageUrl('/img/icons/Cart.svg'),
+ FAVOURITES: getImageUrl('/img/icons/Favourites.svg'),
+ FAVOURITES_ACTIVE: getImageUrl('/img/icons/FavouritesHilight.svg'),
+ ARROW_DOWN: getImageUrl('/img/icons/arrow-down.svg'),
+ CLOSE: getImageUrl('/img/icons/Close.svg'),
+ MENU: getImageUrl('/img/icons/Menu.svg'),
+} as const;
+
+// Banner images for HomePage
+export const BANNER_IMAGES = {
+ PHONES: getImageUrl('/img/banner-phones.png'),
+ TABLETS: getImageUrl('/img/banner-tablets.png'),
+ ACCESSORIES: getImageUrl('/img/banner-accessories.png'),
+} as const;
+
+// Category images
+export const CATEGORY_IMAGES = {
+ PHONES: getImageUrl('/img/category-phones.png'),
+ TABLETS: getImageUrl('/img/category-tablets.png'),
+ ACCESSORIES: getImageUrl('/img/category-accessories.png'),
+} as const;
diff --git a/src/context/CartContext.tsx b/src/context/CartContext.tsx
index 5596a1dbc21..515d9af2243 100644
--- a/src/context/CartContext.tsx
+++ b/src/context/CartContext.tsx
@@ -79,11 +79,14 @@ export const CartProvider = ({ children }: { children: React.ReactNode }) => {
};
const totalAmount = cartItems.reduce(
- (sum, item) => sum + item.product.price * item.quantity,
+ (sum, cartItem) => sum + cartItem.product.price * cartItem.quantity,
0,
);
- const totalQuantity = cartItems.reduce((sum, item) => sum + item.quantity, 0);
+ const totalQuantity = cartItems.reduce(
+ (sum, cartItem) => sum + cartItem.quantity,
+ 0,
+ );
const clearCart = () => setCartItems([]);
diff --git a/src/hooks/useProductCounts.ts b/src/hooks/useProductCounts.ts
index d543711c5da..0dc1b9ad1b1 100644
--- a/src/hooks/useProductCounts.ts
+++ b/src/hooks/useProductCounts.ts
@@ -10,9 +10,12 @@ interface ProductCounts {
export const useProductCounts = (products: Product[]): ProductCounts => {
return useMemo(
() => ({
- phones: products.filter(p => p.category === 'phones').length,
- tablets: products.filter(p => p.category === 'tablets').length,
- accessories: products.filter(p => p.category === 'accessories').length,
+ phones: products.filter(product => product.category === 'phones').length,
+ tablets: products.filter(product => product.category === 'tablets')
+ .length,
+ accessories: products.filter(
+ product => product.category === 'accessories',
+ ).length,
}),
[products],
);
diff --git a/src/modules/CartPage/CartPage.module.scss b/src/modules/CartPage/CartPage.module.scss
index f3d7f647dd3..ce40b1c9452 100644
--- a/src/modules/CartPage/CartPage.module.scss
+++ b/src/modules/CartPage/CartPage.module.scss
@@ -1,4 +1,5 @@
@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
.page {
@include page-container;
@@ -35,7 +36,7 @@
}
.checkout {
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
padding: 16px;
display: flex;
flex-direction: column;
@@ -50,29 +51,29 @@
.total {
@include h2;
- color: var(--color-primary);
+ color: $color-primary;
}
.totalLabel {
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
- color: var(--color-secondary);
+ font-size: $font-size-small;
+ line-height: $line-height-small;
+ color: $color-secondary;
}
.divider {
width: 100%;
border: none;
- border-top: 1px solid var(--color-elements);
+ border-top: 1px solid $color-elements;
margin: 8px 0;
}
.checkoutBtn {
width: 100%;
height: 40px;
- background-color: var(--color-primary);
- color: var(--color-white);
- font-size: var(--font-size-button);
- line-height: var(--line-height-button);
+ background-color: $color-primary;
+ color: $color-white;
+ font-size: $font-size-button;
+ line-height: $line-height-button;
font-weight: 700;
border: none;
cursor: pointer;
@@ -86,8 +87,7 @@
.empty {
@include h2;
- color: var(--color-secondary);
+ color: $color-secondary;
text-align: center;
padding: 40px 0;
}
-
diff --git a/src/modules/CartPage/components/CartItem/CartItem.module.scss b/src/modules/CartPage/components/CartItem/CartItem.module.scss
index bdb43c0ae80..0047d31b188 100644
--- a/src/modules/CartPage/components/CartItem/CartItem.module.scss
+++ b/src/modules/CartPage/components/CartItem/CartItem.module.scss
@@ -1,11 +1,12 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
.item {
display: flex;
flex-direction: column;
gap: 16px;
padding: 16px;
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
@include on-tablet {
flex-direction: row;
@@ -48,7 +49,7 @@
.name {
@include body-text;
- color: var(--color-primary);
+ color: $color-primary;
flex: 1;
min-width: 120px; // ← wraps on mobile but stays readable
}
@@ -76,17 +77,17 @@
display: flex;
align-items: center;
justify-content: center;
- border: 1px solid var(--color-icons);
+ border: 1px solid $color-icons;
@include button-text;
- color: var(--color-primary);
+ color: $color-primary;
@include hover-transition(border-color);
&:hover:not(:disabled) {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
&:disabled {
- color: var(--color-icons);
+ color: $color-icons;
cursor: not-allowed;
}
}
@@ -99,7 +100,7 @@
.price {
@include h3;
- color: var(--color-primary);
+ color: $color-primary;
min-width: 80px;
text-align: right;
}
diff --git a/src/modules/CartPage/components/CartItem/CartItem.tsx b/src/modules/CartPage/components/CartItem/CartItem.tsx
index d84cb2e825c..3cc09315975 100644
--- a/src/modules/CartPage/components/CartItem/CartItem.tsx
+++ b/src/modules/CartPage/components/CartItem/CartItem.tsx
@@ -1,6 +1,7 @@
import { CartItem as CartItemType } from '../../../../types';
import { useCart } from '../../../../context';
import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import styles from './CartItem.module.scss';
type Props = {
@@ -20,11 +21,7 @@ export const CartItem = ({ item }: Props) => {
onClick={() => removeFromCart(product.id)}
aria-label={`Remove ${product.name} from cart`}
>
- })
+ 
![]()
{
const title = categoryTitles[category as Category];
- const sorted = [...products].sort((a, b) => {
+ const sorted = [...products].sort((productA, productB) => {
switch (sortBy) {
case 'alphabetically':
- return a.name.localeCompare(b.name);
+ return productA.name.localeCompare(productB.name);
case 'cheapest':
- return a.price - b.price;
+ return productA.price - productB.price;
case 'newest':
default:
- return b.year - a.year;
+ return productB.year - productA.year;
}
});
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.module.scss b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
index 5ef40c1f776..643a6c919ae 100644
--- a/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
@@ -1,4 +1,5 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
.pagination {
display: flex;
@@ -12,6 +13,17 @@
.pageItem {
// styling lives on .pageLink inside
+
+ &.arrow {
+ // Add 8px extra margin to create 16px total gap (8px base + 8px extra)
+ &:first-child {
+ margin-right: 8px;
+ }
+
+ &:last-child {
+ margin-left: 8px;
+ }
+ }
}
.pageLink {
@@ -20,44 +32,39 @@
justify-content: center;
width: 32px;
height: 32px;
- border: 1px solid var(--color-elements);
- margin-left: -1px;
- background: var(--color-white);
+ border: 1px solid $color-elements;
+ background: $color-white;
@include button-text;
- color: var(--color-primary);
+ color: $color-primary;
text-decoration: none;
cursor: pointer;
position: relative;
- @include hover-transition(border-color); // ← only 1 arg, matches your mixin
-
- &:first-child {
- margin-left: 0;
- }
+ @include hover-transition(border-color);
&:hover {
- border-color: var(--color-primary);
- color: var(--color-primary);
+ border-color: $color-primary;
+ color: $color-primary;
z-index: 1;
}
}
.pageItem.active .pageLink {
- background: var(--color-primary);
- border-color: var(--color-primary);
- color: var(--color-white);
+ background: $color-primary;
+ border-color: $color-primary;
+ color: $color-white;
z-index: 1;
cursor: default;
pointer-events: none;
}
.pageItem.disabled .pageLink {
- color: var(--color-icons);
- border-color: var(--color-elements);
+ color: $color-icons;
+ border-color: $color-elements;
cursor: default;
pointer-events: none;
&:hover {
- border-color: var(--color-elements);
- color: var(--color-icons);
+ border-color: $color-elements;
+ color: $color-icons;
}
}
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.tsx b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
index 56267bffd17..cb743e86457 100644
--- a/src/modules/CategoryPage/components/Pagination/Pagination.tsx
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
@@ -16,12 +16,7 @@ export const Pagination: React.FC = ({
}) => {
const totalPages = Math.ceil(total / perPage);
- const handleClick = (
- page: number,
- event: React.MouseEvent,
- ) => {
- event.preventDefault();
-
+ const handleClick = (page: number) => {
if (page < 1 || page > totalPages || page === currentPage) {
return;
}
@@ -29,54 +24,90 @@ export const Pagination: React.FC = ({
onPageChange(page);
};
+ const getVisiblePages = () => {
+ const maxVisible = 5;
+
+ if (totalPages <= maxVisible) {
+ return Array.from({ length: totalPages }, (_, index) => index + 1);
+ }
+
+ // Keep current page in the middle (position 3 of 5)
+ // but clamp so we never go below 1 or above totalPages
+ const half = Math.floor(maxVisible / 2); // 2
+
+ let start = currentPage - half; // want current in center
+ let end = currentPage + half; // 2 pages on each side
+
+ if (start < 1) {
+ // Too close to the beginning — pin left
+ start = 1;
+ end = maxVisible;
+ }
+
+ if (end > totalPages) {
+ // Too close to the end — pin right
+ end = totalPages;
+ start = totalPages - maxVisible + 1;
+ }
+
+ return Array.from({ length: end - start + 1 }, (_, index) => start + index);
+ };
+
+ const visiblePages = getVisiblePages();
+
return (
);
diff --git a/src/modules/FavouritesPage/FavouritesPage.module.scss b/src/modules/FavouritesPage/FavouritesPage.module.scss
index c21e29a11ed..4925e10d7dc 100644
--- a/src/modules/FavouritesPage/FavouritesPage.module.scss
+++ b/src/modules/FavouritesPage/FavouritesPage.module.scss
@@ -1,4 +1,5 @@
@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
.page {
@include page-container;
@@ -16,12 +17,12 @@
.count {
@include button-text;
- color: var(--color-secondary);
+ color: $color-secondary;
}
.empty {
@include h2;
- color: var(--color-secondary);
+ color: $color-secondary;
text-align: center;
padding: 40px 0;
}
@@ -59,4 +60,3 @@
padding-bottom: 40px;
}
}
-
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
index 828a2e2405b..faaa64d5d08 100644
--- a/src/modules/HomePage/HomePage.tsx
+++ b/src/modules/HomePage/HomePage.tsx
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { getProducts } from '../../api';
import { Product } from '../../types';
import { useProductCounts } from '../../hooks';
-import { getImageUrl } from '../../utils';
+import { BANNER_IMAGES } from '../../constants';
import styles from './HomePage.module.scss';
import { Loader } from '../shared/components/Loader';
import { ShopByCategory } from './components/ShopByCategory';
@@ -12,17 +12,17 @@ import { ProductsSlider } from './components/ProductsSlider';
const BANNER_SLIDES = [
{
id: 1,
- image: getImageUrl('/img/banner-phones.png'),
+ image: BANNER_IMAGES.PHONES,
alt: 'New phones — latest models',
},
{
id: 2,
- image: getImageUrl('/img/banner-tablets.png'),
+ image: BANNER_IMAGES.TABLETS,
alt: 'New tablets — power and portability',
},
{
id: 3,
- image: getImageUrl('/img/banner-accessories.png'),
+ image: BANNER_IMAGES.ACCESSORIES,
alt: 'Accessories — complete your setup',
},
];
@@ -44,12 +44,19 @@ export const HomePage = () => {
.then(all => {
setAllProducts(all);
- setBrandNew([...all].sort((a, b) => b.year - a.year));
+ setBrandNew(
+ [...all].sort((productA, productB) => productB.year - productA.year),
+ );
setHotPrices(
[...all]
- .filter(p => p.fullPrice > p.price)
- .sort((a, b) => b.fullPrice - b.price - (a.fullPrice - a.price)),
+ .filter(product => product.fullPrice > product.price)
+ .sort(
+ (productA, productB) =>
+ productB.fullPrice -
+ productB.price -
+ (productA.fullPrice - productA.price),
+ ),
);
})
.catch(() => setError(true))
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
index 22fad4d9236..e1d5e300eb9 100644
--- a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
@@ -1,4 +1,5 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
// Outer wrapper — column: image row on top, dots below
.slider {
@@ -10,7 +11,7 @@
.main {
display: flex;
align-items: center;
- margin-inline: calc(-1 * var(--page-padding-mobile));
+ margin-inline: calc(-1 * $page-padding-mobile);
@include on-tablet {
margin-inline: 0;
@@ -32,13 +33,13 @@
justify-content: center;
width: 32px;
height: 189px;
- background: var(--color-white);
- border: 1px solid var(--color-elements);
+ background: $color-white;
+ border: 1px solid $color-elements;
cursor: pointer;
@include hover-transition(border-color);
&:hover {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
img {
@@ -111,17 +112,17 @@
.dot {
width: 14px;
height: 4px;
- background: var(--color-elements);
+ background: $color-elements;
border: none;
cursor: pointer;
padding: 0;
@include hover-transition(background-color);
&:hover {
- background: var(--color-secondary);
+ background: $color-secondary;
}
}
.dotActive {
- background: var(--color-primary);
+ background: $color-primary;
}
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
index 8778d1caad8..e9c779f89f2 100644
--- a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.tsx
@@ -1,6 +1,6 @@
import React, { useState, useRef } from 'react';
import { useInterval } from '../../../../hooks';
-import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import styles from './PicturesSlider.module.scss';
type Slide = {
@@ -58,11 +58,7 @@ export const PicturesSlider = ({ slides }: Props) => {
onClick={goPrev}
aria-label="Previous slide"
>
- })
+ 
@@ -88,11 +84,7 @@ export const PicturesSlider = ({ slides }: Props) => {
onClick={goNext}
aria-label="Next slide"
>
-
+
- {categories.map(({ title, route, image, countKey }) => (
+ {CATEGORIES.map(({ title, route, image, countKey }) => (
-
diff --git a/src/modules/HomePage/components/ShopByCategory/constants.ts b/src/modules/HomePage/components/ShopByCategory/constants.ts
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
index 01e97798906..4ffba2c47d5 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -1,38 +1,9 @@
@use '../../styles/mixins' as *;
+@use '../../styles/variables' as *;
.page {
@include page-container;
- padding-top: 24px;
padding-bottom: 64px;
-
- @include on-tablet { padding-top: 32px; }
- @include on-desktop { padding-top: 56px; }
-}
-
-// Breadcrumbs
-.breadcrumbs {
- display: flex;
- align-items: center;
- gap: 8px;
- margin-bottom: 24px;
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
-}
-
-.breadcrumbLink {
- color: var(--color-secondary);
- text-decoration: none;
- transition: color var(--transition);
-
- &:hover { color: var(--color-primary); }
-}
-
-.breadcrumbSep {
- color: var(--color-icons);
-}
-
-.breadcrumbCurrent {
- color: var(--color-primary);
}
// Back button
@@ -44,11 +15,11 @@
background: none;
border: none;
cursor: pointer;
- font-size: var(--font-size-small);
- color: var(--color-secondary);
- transition: color var(--transition);
+ font-size: $font-size-small;
+ color: $color-secondary;
+ transition: color $transition;
- &:hover { color: var(--color-primary); }
+ &:hover { color: $color-primary; }
}
.title {
@@ -108,11 +79,11 @@
width: 50px;
height: 50px;
padding: 4px;
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
border-radius: 4px;
- background: var(--color-white);
+ background: $color-white;
cursor: pointer;
- transition: border-color var(--transition);
+ transition: border-color $transition;
img {
width: 100%;
@@ -121,12 +92,12 @@
}
&:hover {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
}
.thumbActive {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
.mainImage {
@@ -165,8 +136,8 @@
}
.optionLabel {
- font-size: var(--font-size-small);
- color: var(--color-secondary);
+ font-size: $font-size-small;
+ color: $color-secondary;
}
// Color buttons
@@ -182,16 +153,16 @@
width: 30px;
height: 30px;
border-radius: 50%;
- border: 2px solid var(--color-white);
- outline: 1px solid var(--color-elements);
+ border: 2px solid $color-white;
+ outline: 1px solid $color-elements;
cursor: pointer;
- transition: outline-color var(--transition);
+ transition: outline-color $transition;
- &:hover { outline-color: var(--color-secondary); }
+ &:hover { outline-color: $color-secondary; }
}
.colorBtnActive {
- outline-color: var(--color-primary);
+ outline-color: $color-primary;
}
// Capacity buttons
@@ -205,28 +176,28 @@
.capacityBtn {
padding: 4px 8px;
- border: 1px solid var(--color-icons);
- background: var(--color-white);
+ border: 1px solid $color-icons;
+ background: $color-white;
cursor: pointer;
- font-size: var(--font-size-button);
+ font-size: $font-size-button;
font-weight: 600;
- transition: border-color var(--transition), background var(--transition), color var(--transition);
+ transition: border-color $transition, background $transition, color $transition;
&:hover {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
}
.capacityBtnActive {
- background: var(--color-primary);
- color: var(--color-white);
- border-color: var(--color-primary);
+ background: $color-primary;
+ color: $color-white;
+ border-color: $color-primary;
}
// Divider
.divider {
height: 1px;
- background: var(--color-elements);
+ background: $color-elements;
}
// Price
@@ -237,14 +208,14 @@
}
.priceDiscount {
- font-size: var(--font-size-h3);
+ font-size: $font-size-h3;
font-weight: 700;
- color: var(--color-primary);
+ color: $color-primary;
}
.priceRegular {
- font-size: var(--font-size-body);
- color: var(--color-secondary);
+ font-size: $font-size-body;
+ color: $color-secondary;
text-decoration: line-through;
}
@@ -257,46 +228,46 @@
.cartBtn {
flex: 1;
height: 48px;
- background: var(--color-primary);
- color: var(--color-white);
+ background: $color-primary;
+ color: $color-white;
border: none;
cursor: pointer;
- font-size: var(--font-size-button);
+ font-size: $font-size-button;
font-weight: 700;
- transition: background var(--transition);
+ transition: background $transition;
- &:hover:not(:disabled) { background: var(--color-secondary); }
+ &:hover:not(:disabled) { background: $color-secondary; }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
.cartBtnAdded {
- background: var(--color-white);
- color: var(--color-green);
- border: 1px solid var(--color-elements);
+ background: $color-white;
+ color: $color-green;
+ border: 1px solid $color-elements;
- &:hover:not(:disabled) { background: var(--color-white); }
+ &:hover:not(:disabled) { background: $color-white; }
}
.favBtn {
width: 48px;
height: 48px;
- border: 1px solid var(--color-icons);
- background: var(--color-white);
+ border: 1px solid $color-icons;
+ background: $color-white;
cursor: pointer;
font-size: 20px;
- color: var(--color-primary);
+ color: $color-primary;
display: flex;
align-items: center;
justify-content: center;
- transition: border-color var(--transition);
+ transition: border-color $transition;
- &:hover:not(:disabled) { border-color: var(--color-primary); }
+ &:hover:not(:disabled) { border-color: $color-primary; }
&:disabled { opacity: 0.5; cursor: not-allowed; }
}
.favBtnActive {
- color: var(--color-red);
+ color: $color-red;
}
// Short specs under actions
@@ -311,10 +282,10 @@
li {
display: flex;
justify-content: space-between;
- font-size: var(--font-size-small);
+ font-size: $font-size-small;
- span:first-child { color: var(--color-secondary); }
- span:last-child { color: var(--color-primary); font-weight: 700; }
+ span:first-child { color: $color-secondary; }
+ span:last-child { color: $color-primary; font-weight: 700; }
}
}
@@ -343,38 +314,41 @@
}
.descTitle {
- font-size: var(--font-size-h4);
+ font-size: $font-size-h4;
font-weight: 700;
margin-bottom: 16px;
}
.descText {
- font-size: var(--font-size-body);
- line-height: var(--line-height-body);
- color: var(--color-secondary);
+ font-size: $font-size-body;
+ line-height: $line-height-body;
+ color: $color-secondary;
& + & { margin-top: 8px; }
}
.specsList {
+ margin-top: 30px;
list-style: none;
padding: 0;
- margin: 0;
display: flex;
flex-direction: column;
gap: 8px;
+ @include on-tablet {
+ margin-top: 25pxpx;
+ }
+
li {
display: flex;
justify-content: space-between;
- font-size: var(--font-size-body);
+ font-size: $font-size-body;
- span:first-child { color: var(--color-secondary); }
- span:last-child { color: var(--color-primary); font-weight: 700; text-align: right; }
+ span:first-child { color: $color-secondary; }
+ span:last-child { color: $color-primary; font-weight: 700; text-align: right; }
}
}
.suggestedSection {
margin-top: 56px;
}
-
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
index cd9a9a53e0d..f39364549dc 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useParams, useNavigate, Link } from 'react-router-dom';
+import React, { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
import {
getProductDetails,
getProducts,
@@ -7,6 +7,7 @@ import {
} from '../../api';
import { Product, ProductDetails } from '../../types';
import { Category, CATEGORIES } from '../../types';
+import { ICONS } from '../../constants';
import { useCart } from '../../context';
import { useProducts } from '../../context';
import { getImageUrl } from '../../utils';
@@ -28,6 +29,7 @@ export const ProductDetailsPage = () => {
const [loading, setLoading] = useState(false);
const [notFound, setNotFound] = useState(false);
const [error, setError] = useState(false);
+ const touchStartX = useRef
(0);
const { addToCart, isInCart } = useCart();
const { isFavorite, toggleFavorite } = useProducts();
@@ -54,17 +56,18 @@ export const ProductDetailsPage = () => {
getProducts(),
getSuggestedProducts(productId),
])
- .then(([det, allProducts, sugg]) => {
- if (!det) {
+ .then(([detail, allProducts, suggest]) => {
+ if (!detail) {
setNotFound(true);
return;
}
- setDetails(det);
- setSuggested(sugg);
+ setDetails(detail);
+ setSuggested(suggest);
- const match = allProducts.find(p => p.itemId === productId) ?? null;
+ const match =
+ allProducts.find(prod => prod.itemId === productId) ?? null;
setProduct(match);
})
@@ -87,6 +90,34 @@ export const ProductDetailsPage = () => {
navigate(`/${category}/${newId}`);
};
+ // Touch swipe handlers for image gallery
+ const handleTouchStart = (event: React.TouchEvent) => {
+ touchStartX.current = event.touches[0].clientX;
+ };
+
+ const handleTouchEnd = (event: React.TouchEvent) => {
+ if (!details) {
+ return;
+ }
+
+ const SWIPE_THRESHOLD = 50;
+ const diff = touchStartX.current - event.changedTouches[0].clientX;
+
+ if (Math.abs(diff) < SWIPE_THRESHOLD) {
+ return;
+ }
+
+ if (diff > 0) {
+ // Swipe left - next image
+ setActiveImage(prev => (prev + 1) % details.images.length);
+ } else {
+ // Swipe right - previous image
+ setActiveImage(prev =>
+ prev === 0 ? details.images.length - 1 : prev - 1,
+ );
+ }
+ };
+
if (loading) {
return (
@@ -114,38 +145,15 @@ export const ProductDetailsPage = () => {
const inCart = product ? isInCart(product.id) : false;
const inFav = product ? isFavorite(product.id) : false;
- const categoryLabel =
- category === 'phones'
- ? 'Phones'
- : category === 'tablets'
- ? 'Tablets'
- : 'Accessories';
-
return (
- {/* Breadcrumbs */}
-
-
- {/* Back button */}
{details.name}
- {/* Main section */}
- {/* Image gallery */}
{details.images.map((src, i) => (
@@ -168,24 +176,24 @@ export const ProductDetailsPage = () => {
src={getImageUrl(details.images[activeImage])}
alt={details.name}
className={styles.mainImg}
+ onTouchStart={handleTouchStart}
+ onTouchEnd={handleTouchEnd}
/>
- {/* Controls */}
- {/* Colors */}
Available colors
- {details.colorsAvailable.map(c => (
- -
+ {details.colorsAvailable.map(color => (
+
-
))}
@@ -194,7 +202,6 @@ export const ProductDetailsPage = () => {
- {/* Capacity */}
Select capacity
@@ -221,7 +228,6 @@ export const ProductDetailsPage = () => {
${details.priceRegular}
- {/* Actions */}
- {/* Short specs */}
-
Screen
@@ -263,7 +271,6 @@ export const ProductDetailsPage = () => {
- {/* About + Tech Specs */}
About
@@ -271,9 +278,9 @@ export const ProductDetailsPage = () => {
{details.description.map(block => (
{block.title}
- {block.text.map(t => (
-
- {t}
+ {block.text.map(text => (
+
+ {text}
))}
@@ -324,7 +331,6 @@ export const ProductDetailsPage = () => {
- {/* You may also like */}
{suggested.length > 0 && (
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
new file mode 100644
index 00000000000..3812b4ddad0
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -0,0 +1,50 @@
+@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
+
+.breadcrumbs {
+ @include page-container;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding-top: 24px;
+ margin-bottom: 24px;
+ flex-wrap: wrap;
+
+ @include on-tablet {
+ margin-bottom: 16px;
+ }
+}
+
+.breadcrumbLink {
+ display: flex;
+ align-items: center;
+ @include small-text;
+ color: $color-secondary;
+ text-decoration: none;
+ @include hover-transition(color);
+
+ &:hover {
+ color: $color-primary;
+ }
+}
+
+.homeIcon {
+ width: 16px;
+ height: 16px;
+ @include hover-transition(filter);
+
+ .breadcrumbLink:hover & {
+ filter: brightness(0) saturate(100%) invert(19%) sepia(8%) saturate(1059%) hue-rotate(202deg) brightness(95%) contrast(89%);
+ }
+}
+
+.breadcrumbArrow {
+ width: 16px;
+ height: 16px;
+ transform: rotate(-90deg);
+}
+
+.breadcrumbCurrent {
+ @include small-text;
+ color: $color-primary;
+}
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000000..c9b522df162
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { ICONS } from '../../../../constants';
+import styles from './Breadcrumbs.module.scss';
+
+type BreadcrumbItem = {
+ label: string;
+ to?: string;
+};
+
+type Props = {
+ links: BreadcrumbItem[];
+};
+
+export const Breadcrumbs: React.FC = ({ links }) => {
+ return (
+
+ );
+};
diff --git a/src/modules/shared/components/Breadcrumbs/index.ts b/src/modules/shared/components/Breadcrumbs/index.ts
new file mode 100644
index 00000000000..28140a257ff
--- /dev/null
+++ b/src/modules/shared/components/Breadcrumbs/index.ts
@@ -0,0 +1 @@
+export { Breadcrumbs } from './Breadcrumbs';
diff --git a/src/modules/shared/components/Dropdown/Dropdown.module.scss b/src/modules/shared/components/Dropdown/Dropdown.module.scss
index f9b5f995156..ebed57cd146 100644
--- a/src/modules/shared/components/Dropdown/Dropdown.module.scss
+++ b/src/modules/shared/components/Dropdown/Dropdown.module.scss
@@ -1,4 +1,5 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
// Single source of truth for trigger height
// optionsMenu top derives from this automatically via CSS
@@ -10,7 +11,7 @@
.label {
@include button-text;
- color: var(--color-secondary);
+ color: $color-secondary;
}
.selectWrapper {
@@ -25,20 +26,20 @@
width: 100%;
height: 40px;
padding: 0 12px;
- background: var(--color-white);
- border: 1px solid var(--color-elements);
+ background: $color-white;
+ border: 1px solid $color-elements;
border-radius: 0;
@include button-text;
- color: var(--color-primary);
+ color: $color-primary;
cursor: pointer;
@include hover-transition(border-color);
&:hover {
- border-color: var(--color-icons);
+ border-color: $color-icons;
}
&.triggerOpen {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
}
@@ -50,7 +51,7 @@
.arrow {
flex-shrink: 0;
- color: var(--color-secondary);
+ color: $color-secondary;
@include hover-transition(transform);
}
@@ -61,11 +62,11 @@
.optionsMenu {
position: absolute;
left: 0;
- top: 44px; // same as trigger height
+ top: 44px;
width: 100%;
list-style: none;
- background: var(--color-white);
- border: 1px solid var(--color-primary);
+ background: $color-white;
+ border: 1px solid $color-primary;
z-index: 10;
}
@@ -78,17 +79,17 @@
border-radius: 0;
@include button-text;
font-weight: 500;
- color: var(--color-secondary);
+ color: $color-secondary;
cursor: pointer;
text-align: left;
@include hover-transition(background-color);
&:hover {
- background: var(--color-hover-bg);
- color: var(--color-primary);
+ background: $color-hover-bg;
+ color: $color-primary;
}
&.optionSelected {
- color: var(--color-primary);
+ color: $color-primary;
}
}
diff --git a/src/modules/shared/components/Dropdown/Dropdown.tsx b/src/modules/shared/components/Dropdown/Dropdown.tsx
index a36c2a62602..2e2c6b62190 100644
--- a/src/modules/shared/components/Dropdown/Dropdown.tsx
+++ b/src/modules/shared/components/Dropdown/Dropdown.tsx
@@ -1,5 +1,5 @@
import { useState, useRef, useEffect } from 'react';
-import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import styles from './Dropdown.module.scss';
type Option = {
@@ -60,7 +60,7 @@ export const Dropdown = ({
{selectedOption?.label}
diff --git a/src/modules/shared/components/Footer/Footer.module.scss b/src/modules/shared/components/Footer/Footer.module.scss
index e5a0b179a5b..b6f205b4478 100644
--- a/src/modules/shared/components/Footer/Footer.module.scss
+++ b/src/modules/shared/components/Footer/Footer.module.scss
@@ -1,7 +1,8 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
.footer {
- box-shadow: 0px -1px 0px 0px var(--color-elements);
+ box-shadow: 0px -1px 0px 0px $color-elements;
margin-top: auto;
}
@@ -68,19 +69,19 @@
.navLink {
display: block;
- font-family: var(--font-family);
- font-size: var(--font-size-uppercase);
+ font-family: $font-family;
+ font-size: $font-size-uppercase;
font-weight: 800;
- line-height: var(--line-height-uppercase);
- letter-spacing: var(--letter-spacing-uppercase);
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
text-transform: uppercase;
- color: var(--color-secondary);
+ color: $color-secondary;
text-decoration: none;
@include hover-transition(color);
&:hover {
- color: var(--color-primary);
+ color: $color-primary;
}
}
@@ -92,27 +93,27 @@
background: none;
border: none;
cursor: pointer;
- font-family: var(--font-family);
- font-size: var(--font-size-uppercase);
+ font-family: $font-family;
+ font-size: $font-size-uppercase;
font-weight: 800;
- line-height: var(--line-height-uppercase);
- letter-spacing: var(--letter-spacing-uppercase);
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
text-transform: uppercase;
- color: var(--color-secondary);
+ color: $color-secondary;
@include hover-transition(color);
&:hover {
- color: var(--color-primary);
+ color: $color-primary;
.backToTopArrow {
- border-color: var(--color-primary);
+ border-color: $color-primary;
}
}
&:active {
.backToTopArrow {
- background-color: var(--color-primary);
- border-color: var(--color-primary);
+ background-color: $color-primary;
+ border-color: $color-primary;
img {
filter: invert(1);
@@ -131,14 +132,14 @@
display: flex;
align-items: center;
justify-content: center;
- border: 1px solid var(--color-icons);
+ border: 1px solid $color-icons;
flex-shrink: 0;
- transition: border-color var(--transition), background-color var(--transition);
+ transition: border-color $transition, background-color $transition;
img {
width: 16px;
height: 16px;
transform: rotate(180deg);
- transition: filter var(--transition);
+ transition: filter $transition;
}
}
diff --git a/src/modules/shared/components/Footer/Footer.tsx b/src/modules/shared/components/Footer/Footer.tsx
index 3d629e9f5d4..e971bec1e57 100644
--- a/src/modules/shared/components/Footer/Footer.tsx
+++ b/src/modules/shared/components/Footer/Footer.tsx
@@ -1,6 +1,6 @@
import { Link } from 'react-router-dom';
import { AppRoutes } from '../../../../utils/routes';
-import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import styles from './Footer.module.scss';
export const Footer = () => {
@@ -17,8 +17,9 @@ export const Footer = () => {
aria-label="Go to home"
>
@@ -57,8 +58,9 @@ export const Footer = () => {
Back to top
diff --git a/src/modules/shared/components/Header/Header.module.scss b/src/modules/shared/components/Header/Header.module.scss
index 48f337ee7d6..6385986f94d 100644
--- a/src/modules/shared/components/Header/Header.module.scss
+++ b/src/modules/shared/components/Header/Header.module.scss
@@ -1,4 +1,5 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
.header {
position: sticky;
@@ -6,8 +7,8 @@
z-index: 100;
width: 100%;
height: 48px;
- background-color: var(--color-white);
- box-shadow: 0 1px 0 0 var(--color-elements);
+ background-color: $color-white;
+ box-shadow: 0 1px 0 0 $color-elements;
@include on-desktop {
height: 64px;
@@ -77,42 +78,11 @@
display: flex;
align-items: center;
height: 100%;
- font-family: var(--font-family);
- font-size: var(--font-size-uppercase);
- font-weight: 800;
- line-height: var(--line-height-uppercase);
- letter-spacing: var(--letter-spacing-uppercase);
- text-transform: uppercase;
- color: var(--color-secondary);
- text-decoration: none;
- white-space: nowrap;
- position: relative;
- @include hover-transition(color);
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 3px;
- background-color: var(--color-primary);
- transform: scaleX(0);
- transform-origin: left;
- transition: transform var(--transition);
- }
-
- &:hover {
- color: var(--color-primary);
-
- &::after {
- transform: scaleX(1);
- }
- }
+ @include nav-link;
}
.navLinkActive {
- color: var(--color-primary);
+ color: $color-primary;
&::after {
transform: scaleX(1);
@@ -137,18 +107,18 @@
justify-content: center;
width: 48px;
height: 48px;
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
border-bottom: 2px solid transparent;
flex-shrink: 0;
position: relative;
@include hover-transition(border-color);
&:hover {
- border-color: var(--color-secondary);
+ border-color: $color-secondary;
}
&.iconButtonActive {
- border-bottom: 3px solid var(--color-primary);
+ border-bottom: 3px solid $color-primary;
}
img {
@@ -174,12 +144,12 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: var(--color-red);
- color: var(--color-white);
+ background-color: $color-red;
+ color: $color-white;
font-size: 9px;
font-weight: 700;
border-radius: 50%;
- border: 1px solid var(--color-white);
+ border: 1px solid $color-white;
@include on-tablet {
top: 25%;
@@ -199,13 +169,13 @@
width: 48px;
height: 48px;
background: none;
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
cursor: pointer;
flex-shrink: 0;
@include hover-transition(border-color);
&:hover {
- border-color: var(--color-secondary);
+ border-color: $color-secondary;
}
img {
@@ -226,7 +196,7 @@
left: 0;
bottom: 0;
width: 100%;
- background-color: var(--color-white);
+ background-color: $color-white;
z-index: 95;
transform: translateX(-100%);
transition: transform 0.7s ease;
@@ -254,42 +224,12 @@
.mobileNavLink {
display: block;
- font-family: var(--font-family);
- font-size: var(--font-size-uppercase);
- font-weight: 800;
- line-height: var(--line-height-uppercase);
- letter-spacing: var(--letter-spacing-uppercase);
- text-transform: uppercase;
- color: var(--color-secondary);
- text-decoration: none;
- position: relative;
padding-bottom: 8px;
- @include hover-transition(color);
-
- &::after {
- content: '';
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 3px;
- background-color: var(--color-primary);
- transform: scaleX(0);
- transform-origin: left;
- transition: transform var(--transition);
- }
-
- &:hover {
- color: var(--color-primary);
-
- &::after {
- transform: scaleX(1);
- }
- }
+ @include nav-link;
}
.mobileNavLinkActive {
- color: var(--color-primary);
+ color: $color-primary;
&::after {
transform: scaleX(1);
@@ -303,7 +243,7 @@
left: 0;
right: 0;
display: flex;
- border-top: 1px solid var(--color-elements);
+ border-top: 1px solid $color-elements;
}
.menuIconButton {
@@ -312,17 +252,17 @@
display: flex;
align-items: center;
justify-content: center;
- border: 1px solid var(--color-elements);
+ border: 1px solid $color-elements;
border-bottom: 2px solid transparent;
position: relative;
@include hover-transition(border-color);
&:hover {
- border-color: var(--color-secondary);
+ border-color: $color-secondary;
}
&.menuIconButtonActive {
- border-bottom-color: var(--color-primary);
+ border-bottom-color: $color-primary;
}
img {
diff --git a/src/modules/shared/components/Header/Header.tsx b/src/modules/shared/components/Header/Header.tsx
index 149f7bf86e1..f0c97cd2e34 100644
--- a/src/modules/shared/components/Header/Header.tsx
+++ b/src/modules/shared/components/Header/Header.tsx
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Link, NavLink } from 'react-router-dom';
import { AppRoutes } from '../../../../utils/routes';
-import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import { useProducts, useCart } from '../../../../context';
import styles from './Header.module.scss';
@@ -27,10 +27,7 @@ export const Header = () => {
className={styles.logo}
aria-label="Go to home"
>
-
+ 
{/* Tablet+ nav links */}
@@ -61,10 +58,7 @@ export const Header = () => {
}
aria-label="Favourites"
>
-
+ 
{favorites.length > 0 && (
{favorites.length}
)}
@@ -76,7 +70,7 @@ export const Header = () => {
}
aria-label="Cart"
>
-
+ 
{totalQuantity > 0 && (
{totalQuantity}
)}
@@ -89,11 +83,7 @@ export const Header = () => {
onClick={() => setMenuOpen(prev => !prev)}
>
@@ -131,10 +121,7 @@ export const Header = () => {
aria-label="Favourites"
onClick={() => setMenuOpen(false)}
>
-
+
{favorites.length > 0 && (
{favorites.length}
)}
@@ -147,7 +134,7 @@ export const Header = () => {
aria-label="Cart"
onClick={() => setMenuOpen(false)}
>
-
+
{totalQuantity > 0 && (
{totalQuantity}
)}
diff --git a/src/modules/shared/components/Layout/Layout.tsx b/src/modules/shared/components/Layout/Layout.tsx
index 40f8c39e394..818a18bc843 100644
--- a/src/modules/shared/components/Layout/Layout.tsx
+++ b/src/modules/shared/components/Layout/Layout.tsx
@@ -1,15 +1,76 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation, useParams } from 'react-router-dom';
import { Header } from '../Header';
import { Footer } from '../Footer';
+import { Breadcrumbs } from '../Breadcrumbs';
+import { Category, CATEGORIES } from '../../../../types';
-export const Layout = () => (
-
-
+export const Layout = () => {
+ const location = useLocation();
+ const { category, productId } = useParams<{
+ category: string;
+ productId: string;
+ }>();
-
-
-
+ const isHomePage = location.pathname === '/';
-
-
-);
+ // Generate breadcrumb links based on current route
+ const getBreadcrumbLinks = () => {
+ if (isHomePage) {
+ return [];
+ }
+
+ const links: Array<{ to?: string; label: string }> = [];
+
+ // For favourites page
+ if (location.pathname === '/favourites') {
+ links.push({ label: 'Favourites' });
+
+ return links;
+ }
+
+ // For cart page
+ if (location.pathname === '/cart') {
+ links.push({ label: 'Cart' });
+
+ return links;
+ }
+
+ // For category pages
+ if (category && CATEGORIES.includes(category as Category)) {
+ const categoryLabel =
+ category === 'phones'
+ ? 'Phones'
+ : category === 'tablets'
+ ? 'Tablets'
+ : 'Accessories';
+
+ links.push({ to: `/${category}`, label: categoryLabel });
+
+ // For product details page
+ if (productId) {
+ links.push({ label: productId });
+ }
+
+ return links;
+ }
+
+ return links;
+ };
+
+ const breadcrumbLinks = getBreadcrumbLinks();
+
+ return (
+
+
+
+
+ {!isHomePage && breadcrumbLinks.length > 0 && (
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/src/modules/shared/components/ProductCard/ProductCard.module.scss b/src/modules/shared/components/ProductCard/ProductCard.module.scss
index 18db0fed3ef..0b6fe7d3f4f 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.module.scss
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -1,4 +1,5 @@
@use '../../../../styles/mixins' as *;
+@use '../../../../styles/variables' as *;
.card {
width: 100%;
@@ -7,8 +8,8 @@
display: flex;
flex-direction: column;
gap: 8px;
- border: 1px solid var(--color-elements);
- background-color: var(--color-white);
+ border: 1px solid $color-elements;
+ background-color: $color-white;
}
.linkContainer {
@@ -21,7 +22,7 @@
@include hover-scale();
&:hover .name {
- color: var(--color-secondary);
+ color: $color-secondary;
}
}
@@ -45,7 +46,7 @@
.name {
@include button-text();
- color: var(--color-primary);
+ color: $color-primary;
}
.prices {
@@ -55,23 +56,23 @@
}
.price {
- font-size: var(--font-size-h3);
- line-height: var(--line-height-h3);
+ font-size: $font-size-h3;
+ line-height: $line-height-h3;
font-weight: 700;
- color: var(--color-primary);
+ color: $color-primary;
}
.fullPrice {
- font-size: var(--font-size-h3);
- line-height: var(--line-height-h3);
+ font-size: $font-size-h3;
+ line-height: $line-height-h3;
font-weight: 500;
- color: var(--color-secondary);
+ color: $color-secondary;
text-decoration: line-through;
}
.divider {
border: none;
- border-top: 1px solid var(--color-elements);
+ border-top: 1px solid $color-elements;
margin: 0;
}
@@ -91,17 +92,17 @@
}
.specLabel {
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
+ font-size: $font-size-small;
+ line-height: $line-height-small;
font-weight: 600;
- color: var(--color-secondary);
+ color: $color-secondary;
}
.specValue {
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
+ font-size: $font-size-small;
+ line-height: $line-height-small;
font-weight: 600;
- color: var(--color-primary);
+ color: $color-primary;
}
.buttons {
@@ -113,10 +114,10 @@
.addToCart {
flex: 1;
height: 40px;
- background-color: var(--color-primary);
- color: var(--color-white);
- font-size: var(--font-size-button);
- line-height: var(--line-height-button);
+ background-color: $color-primary;
+ color: $color-white;
+ font-size: $font-size-button;
+ line-height: $line-height-button;
font-weight: 700;
border: none;
cursor: pointer;
@@ -129,9 +130,9 @@
}
.addToCartActive {
- background-color: var(--color-white);
- color: var(--color-green);
- border: 1px solid var(--color-green);
+ background-color: $color-white;
+ color: $color-green;
+ border: 1px solid $color-green;
}
.favourites {
@@ -140,8 +141,8 @@
display: flex;
align-items: center;
justify-content: center;
- background-color: var(--color-white);
- border: 1px solid var(--color-icons);
+ background-color: $color-white;
+ border: 1px solid $color-icons;
cursor: pointer;
flex-shrink: 0;
@@ -153,7 +154,7 @@
}
&:hover {
- border-color: var(--color-primary);
+ border-color: $color-primary;
box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.4);
}
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
index c73b7ac8817..2fd906b1896 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.tsx
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom';
import { Product } from '../../../../types';
import { useProducts, useCart } from '../../../../context';
import { getImageUrl } from '../../../../utils';
+import { ICONS } from '../../../../constants';
import styles from './ProductCard.module.scss';
interface Props {
@@ -73,11 +74,7 @@ export const ProductCard = ({ product }: Props) => {
onClick={() => toggleFavorite(product)}
>
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 587a6ab2418..4c80a9c092b 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -16,28 +16,28 @@
// Page container
@mixin page-container {
- max-width: var(--content-max-width);
+ max-width: $content-max-width;
margin: 0 auto;
- padding-inline: var(--page-padding-mobile);
+ padding-inline: $page-padding-mobile;
@include on-tablet {
- padding-inline: var(--page-padding-tablet);
+ padding-inline: $page-padding-tablet;
}
@include on-desktop {
- padding-inline: var(--page-padding-desktop);
+ padding-inline: $page-padding-desktop;
}
}
// Smooth hover transition
@mixin hover-transition($property: all) {
- transition: $property var(--transition);
+ transition: $property $transition;
}
// Scale image links by 10% on hover (scales the img inside, not the container)
@mixin hover-scale {
img {
- transition: transform var(--transition);
+ transition: transform $transition;
}
&:hover img {
@@ -48,74 +48,104 @@
// Typography mixins
@mixin h1 {
font-weight: 700;
- font-size: var(--font-size-h1-mobile);
- line-height: var(--line-height-h1-mobile);
- letter-spacing: var(--letter-spacing-h1-mobile);
+ font-size: $font-size-h1-mobile;
+ line-height: $line-height-h1-mobile;
+ letter-spacing: $letter-spacing-h1-mobile;
@include on-tablet {
- font-size: var(--font-size-h1);
- line-height: var(--line-height-h1);
+ font-size: $font-size-h1;
+ line-height: $line-height-h1;
}
}
@mixin h2 {
font-weight: 700;
- font-size: var(--font-size-h2-mobile);
- line-height: var(--line-height-h2-mobile);
+ font-size: $font-size-h2-mobile;
+ line-height: $line-height-h2-mobile;
@include on-tablet {
- font-size: var(--font-size-h2);
- line-height: var(--line-height-h2);
- letter-spacing: var(--letter-spacing-h2);
+ font-size: $font-size-h2;
+ line-height: $line-height-h2;
+ letter-spacing: $letter-spacing-h2;
}
}
@mixin h3 {
font-weight: 600;
- font-size: var(--font-size-h3-mobile);
- line-height: var(--line-height-h3-mobile);
+ font-size: $font-size-h3-mobile;
+ line-height: $line-height-h3-mobile;
@include on-tablet {
font-weight: 700;
- font-size: var(--font-size-h3);
- line-height: var(--line-height-h3);
+ font-size: $font-size-h3;
+ line-height: $line-height-h3;
}
}
@mixin h4 {
font-weight: 600;
- font-size: var(--font-size-h4-mobile);
- line-height: var(--line-height-h4-mobile);
+ font-size: $font-size-h4-mobile;
+ line-height: $line-height-h4-mobile;
@include on-tablet {
- font-size: var(--font-size-h4);
- line-height: var(--line-height-h4);
+ font-size: $font-size-h4;
+ line-height: $line-height-h4;
}
}
@mixin uppercase {
font-weight: 700;
- font-size: var(--font-size-uppercase);
- line-height: var(--line-height-uppercase);
- letter-spacing: var(--letter-spacing-uppercase);
+ font-size: $font-size-uppercase;
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
text-transform: uppercase;
}
@mixin button-text {
font-weight: 600;
- font-size: var(--font-size-button);
- line-height: var(--line-height-button);
+ font-size: $font-size-button;
+ line-height: $line-height-button;
}
@mixin body-text {
font-weight: 400;
- font-size: var(--font-size-body);
- line-height: var(--line-height-body);
+ font-size: $font-size-body;
+ line-height: $line-height-body;
}
@mixin small-text {
font-weight: 600;
- font-size: var(--font-size-small);
- line-height: var(--line-height-small);
+ font-size: $font-size-small;
+ line-height: $line-height-small;
}
+@mixin nav-link {
+ font-family: $font-family;
+ font-size: $font-size-uppercase;
+ font-weight: 800;
+ line-height: $line-height-uppercase;
+ letter-spacing: $letter-spacing-uppercase;
+ text-transform: uppercase;
+ color: $color-secondary;
+ text-decoration: none;
+ position: relative;
+ @include hover-transition(color);
+
+ &::after {
+ content: '';
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 3px;
+ background-color: $color-primary;
+ transform: scaleX(0);
+ transform-origin: left;
+ transition: transform $transition;
+ }
+
+ &:hover {
+ color: $color-primary;
+ &::after { transform: scaleX(1); }
+ }
+}
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 61d7621734f..0a7b660eceb 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,3 +1,5 @@
+@use 'variables' as *;
+
*,
*::before,
*::after {
@@ -11,11 +13,11 @@ html {
}
body {
- font-family: var(--font-family), sans-serif;
- font-size: var(--font-size-body);
- line-height: var(--line-height-body);
- color: var(--color-primary);
- background-color: var(--color-white);
+ font-family: $font-family, sans-serif;
+ font-size: $font-size-body;
+ line-height: $line-height-body;
+ color: $color-primary;
+ background-color: $color-white;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index 53ca93cdd36..a765d370363 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -1,73 +1,69 @@
// Breakpoints
-$mobile: 320px;
$tablet: 640px;
$desktop: 1200px;
// Colors — Original Figma Design
-:root {
- --color-white: #ffffff;
- --color-primary: #313237;
- --color-secondary: #89939a;
- --color-icons: #b4bdc3;
- --color-elements: #e2e6e9;
- --color-hover-bg: #fafbfc;
- --color-surface-1: #f1f2f4;
- --color-surface-2: #f4f5f6;
- --color-green: #27ae60;
- --color-red: #eb5757;
-
- // Font family
- --font-family: 'Mont', sans-serif;
-
- // Desktop/Tablet typography
- --font-size-h1: 48px;
- --line-height-h1: 56px;
- --letter-spacing-h1: -0.01em;
-
- --font-size-h2: 32px;
- --line-height-h2: 41px;
- --letter-spacing-h2: -0.01em;
-
- --font-size-h3: 22px;
- --line-height-h3: 31px;
-
- --font-size-h4: 20px;
- --line-height-h4: 26px;
-
- --font-size-uppercase: 12px;
- --line-height-uppercase: 11px;
- --letter-spacing-uppercase: 0.04em;
-
- --font-size-button: 14px;
- --line-height-button: 21px;
-
- --font-size-body: 14px;
- --line-height-body: 21px;
-
- --font-size-small: 12px;
- --line-height-small: 15px;
-
- // Mobile typography
- --font-size-h1-mobile: 32px;
- --line-height-h1-mobile: 41px;
- --letter-spacing-h1-mobile: -0.01em;
-
- --font-size-h2-mobile: 22px;
- --line-height-h2-mobile: 31px;
-
- --font-size-h3-mobile: 20px;
- --line-height-h3-mobile: 26px;
-
- --font-size-h4-mobile: 16px;
- --line-height-h4-mobile: 20px;
-
- // Layout
- --content-max-width: 1200px;
- --page-padding-mobile: 16px;
- --page-padding-tablet: 24px;
- --page-padding-desktop: 32px;
-
- // Transitions
- --transition: 0.5s ease;
-}
-
+$color-white: #ffffff;
+$color-primary: #313237;
+$color-secondary: #89939a;
+$color-icons: #b4bdc3;
+$color-elements: #e2e6e9;
+$color-hover-bg: #fafbfc;
+$color-surface-1: #f1f2f4;
+$color-surface-2: #f4f5f6;
+$color-green: #27ae60;
+$color-red: #eb5757;
+
+// Font family
+$font-family: 'Mont', sans-serif;
+
+// Desktop/Tablet typography
+$font-size-h1: 48px;
+$line-height-h1: 56px;
+$letter-spacing-h1: -0.01em;
+
+$font-size-h2: 32px;
+$line-height-h2: 41px;
+$letter-spacing-h2: -0.01em;
+
+$font-size-h3: 22px;
+$line-height-h3: 31px;
+
+$font-size-h4: 20px;
+$line-height-h4: 26px;
+
+$font-size-uppercase: 12px;
+$line-height-uppercase: 11px;
+$letter-spacing-uppercase: 0.04em;
+
+$font-size-button: 14px;
+$line-height-button: 21px;
+
+$font-size-body: 14px;
+$line-height-body: 21px;
+
+$font-size-small: 12px;
+$line-height-small: 15px;
+
+// Mobile typography
+$font-size-h1-mobile: 32px;
+$line-height-h1-mobile: 41px;
+$letter-spacing-h1-mobile: -0.01em;
+
+$font-size-h2-mobile: 22px;
+$line-height-h2-mobile: 31px;
+
+$font-size-h3-mobile: 20px;
+$line-height-h3-mobile: 26px;
+
+$font-size-h4-mobile: 16px;
+$line-height-h4-mobile: 20px;
+
+// Layout
+$content-max-width: 1200px;
+$page-padding-mobile: 16px;
+$page-padding-tablet: 24px;
+$page-padding-desktop: 32px;
+
+// Transitions
+$transition: 0.5s ease;
From 37bcd8e1d07f6f2ee6a1314e1fc7505f0a25dd64 Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Thu, 7 May 2026 16:55:28 +0300
Subject: [PATCH 26/30] fixing tests errors
---
package-lock.json | 662 ++++++++++++++----
package.json | 2 +-
public/img/icons/arrow-breadcrumb.svg | 3 +
src/constants/index.ts | 1 +
src/modules/CartPage/CartPage.module.scss | 6 +-
.../components/CartItem/CartItem.module.scss | 19 +-
.../CategoryPage/CategoryPage.module.scss | 2 +
.../Pagination/Pagination.module.scss | 23 +-
.../components/Pagination/Pagination.tsx | 9 +-
.../ProductsList/ProductsList.module.scss | 13 +-
.../FavouritesPage/FavouritesPage.module.scss | 9 +-
src/modules/HomePage/HomePage.module.scss | 15 +-
.../PicturesSlider/PicturesSlider.module.scss | 2 +
.../ShopByCategory/ShopByCategory.module.scss | 3 +
.../ProductDetailsPage.module.scss | 44 +-
.../Breadcrumbs/Breadcrumbs.module.scss | 19 +-
.../components/Breadcrumbs/Breadcrumbs.tsx | 2 +-
.../components/Dropdown/Dropdown.module.scss | 8 +
.../components/Footer/Footer.module.scss | 44 +-
.../components/Header/Header.module.scss | 6 +
.../ProductCard/ProductCard.module.scss | 19 +-
src/styles/_fonts.scss | 7 +-
src/styles/_mixins.scss | 1 +
src/styles/_variables.scss | 14 +-
vite.config.ts | 3 +
25 files changed, 684 insertions(+), 252 deletions(-)
create mode 100644 public/img/icons/arrow-breadcrumb.svg
diff --git a/package-lock.json b/package-lock.json
index c30edb9a118..628d1d034e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -51,7 +51,7 @@
"mochawesome-report-generator": "^6.2.0",
"prettier": "^3.3.2",
"sass": "^1.77.8",
- "stylelint": "^16.7.0",
+ "stylelint": "^15.11.0",
"typescript": "^5.2.2",
"typescript-eslint": "^8.58.2",
"vite": "^8.0.9"
@@ -603,16 +603,6 @@
"ms": "^2.1.1"
}
},
- "node_modules/@dual-bundle/import-meta-resolve": {
- "version": "4.1.0",
- "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
- "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
- "dev": true,
- "funding": {
- "type": "github",
- "url": "https://github.com/sponsors/wooorm"
- }
- },
"node_modules/@emnapi/core": {
"version": "1.10.0",
"resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -929,12 +919,6 @@
"stylelint-scss": "^5.3.0"
}
},
- "node_modules/@mate-academy/stylelint-config/node_modules/known-css-properties": {
- "version": "0.29.0",
- "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
- "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
- "dev": true
- },
"node_modules/@mate-academy/stylelint-config/node_modules/stylelint-config-recommended": {
"version": "13.0.0",
"resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-13.0.0.tgz",
@@ -1741,6 +1725,13 @@
"integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
"dev": true
},
+ "node_modules/@types/minimist": {
+ "version": "1.2.5",
+ "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.5.tgz",
+ "integrity": "sha512-hov8bUuiLiyFPGyFPE1lwWhmzYbirOXQNNo40+y3zow8aFVTeyn3VWL0VFFfdNddA8S4Vf0Tc062rzyNr7Paag==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@types/node": {
"version": "20.14.10",
"resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
@@ -1750,6 +1741,13 @@
"undici-types": "~5.26.4"
}
},
+ "node_modules/@types/normalize-package-data": {
+ "version": "2.4.4",
+ "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.4.tgz",
+ "integrity": "sha512-37i+OaWTh9qeK4LSHPsyRC7NahnGotNuZvjLSgcPzblpHB3rrCJxAOgI5gCdKm7coonsaX1Of0ILiTcnZjbfxA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/@types/prop-types": {
"version": "15.7.12",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
@@ -3025,6 +3023,16 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/arrify": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+ "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/asn1": {
"version": "0.2.6",
"resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.6.tgz",
@@ -3355,6 +3363,51 @@
"node": ">=6"
}
},
+ "node_modules/camelcase": {
+ "version": "6.3.0",
+ "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+ "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/camelcase-keys": {
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-7.0.2.tgz",
+ "integrity": "sha512-Rjs1H+A9R+Ig+4E/9oyB66UC5Mj9Xq3N//vcLf2WzgdTi/3gUu3Z9KoqmlrEG4VuuLK8wJHofxzdQXz/knhiYg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "camelcase": "^6.3.0",
+ "map-obj": "^4.1.0",
+ "quick-lru": "^5.1.1",
+ "type-fest": "^1.2.1"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/camelcase-keys/node_modules/type-fest": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+ "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+ "dev": true,
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/caniuse-lite": {
"version": "1.0.30001642",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
@@ -3616,15 +3669,16 @@
"dev": true
},
"node_modules/cosmiconfig": {
- "version": "9.0.0",
- "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
- "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
+ "version": "8.3.6",
+ "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-8.3.6.tgz",
+ "integrity": "sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "env-paths": "^2.2.1",
"import-fresh": "^3.3.0",
"js-yaml": "^4.1.0",
- "parse-json": "^5.2.0"
+ "parse-json": "^5.2.0",
+ "path-type": "^4.0.0"
},
"engines": {
"node": ">=14"
@@ -3969,6 +4023,56 @@
}
}
},
+ "node_modules/decamelize": {
+ "version": "5.0.1",
+ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-5.0.1.tgz",
+ "integrity": "sha512-VfxadyCECXgQlkoEAjeghAr5gY3Hf+IKjKb+X8tGVDtveCjN+USwprd2q3QXBR9T1+x2DG0XZF5/w+7HAtSaXA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/decamelize-keys": {
+ "version": "1.1.1",
+ "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.1.tgz",
+ "integrity": "sha512-WiPxgEirIV0/eIOMcnFBA3/IJZAZqKnwAwWyvvdi4lsr1WCN22nhdf/3db3DoZcUjTV2SqfzIwNyp6y2xs3nmg==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "decamelize": "^1.1.0",
+ "map-obj": "^1.0.0"
+ },
+ "engines": {
+ "node": ">=0.10.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/decamelize-keys/node_modules/decamelize": {
+ "version": "1.2.0",
+ "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+ "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
+ "node_modules/decamelize-keys/node_modules/map-obj": {
+ "version": "1.0.1",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+ "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/deep-equal": {
"version": "2.2.3",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-2.2.3.tgz",
@@ -4183,15 +4287,6 @@
"node": ">=8.6"
}
},
- "node_modules/env-paths": {
- "version": "2.2.1",
- "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
- "integrity": "sha512-+h1lkLKhZMTYjog1VEpJNG7NZJWcuc2DDk/qsqSTRRCOXiLjeQ1d1/udrUGhqMxUgAlwKNZ0cf2uqan5GLuS2A==",
- "dev": true,
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/environment": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/environment/-/environment-1.1.0.tgz",
@@ -4206,10 +4301,11 @@
}
},
"node_modules/error-ex": {
- "version": "1.3.2",
- "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
- "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+ "version": "1.3.4",
+ "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.4.tgz",
+ "integrity": "sha512-sqQamAnR14VgCr1A618A3sGrygcpK+HEbenA/HiEAkkUwcZIIB/tgWqHFxWgOyDh4nB4JCRimh79dR5Ywc9MDQ==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"is-arrayish": "^0.2.1"
}
@@ -6063,6 +6159,16 @@
"dev": true,
"license": "MIT"
},
+ "node_modules/hard-rejection": {
+ "version": "2.1.0",
+ "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+ "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=6"
+ }
+ },
"node_modules/has-bigints": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
@@ -6149,6 +6255,39 @@
"node": ">= 0.4"
}
},
+ "node_modules/hosted-git-info": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+ "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "lru-cache": "^6.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/hosted-git-info/node_modules/lru-cache": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+ "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+ "dev": true,
+ "license": "ISC",
+ "dependencies": {
+ "yallist": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
+ "node_modules/hosted-git-info/node_modules/yallist": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+ "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
+ "dev": true,
+ "license": "ISC"
+ },
"node_modules/html-tags": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
@@ -6251,6 +6390,16 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/import-lazy": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+ "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ }
+ },
"node_modules/imurmurhash": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
@@ -6348,7 +6497,8 @@
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
"integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
- "dev": true
+ "dev": true,
+ "license": "MIT"
},
"node_modules/is-async-function": {
"version": "2.1.1",
@@ -6656,6 +6806,16 @@
"node": ">=8"
}
},
+ "node_modules/is-plain-obj": {
+ "version": "1.1.0",
+ "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+ "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=0.10.0"
+ }
+ },
"node_modules/is-plain-object": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
@@ -6930,7 +7090,8 @@
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
"integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
- "dev": true
+ "dev": true,
+ "license": "MIT"
},
"node_modules/json-schema": {
"version": "0.4.0",
@@ -7036,10 +7197,11 @@
}
},
"node_modules/known-css-properties": {
- "version": "0.34.0",
- "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.34.0.tgz",
- "integrity": "sha512-tBECoUqNFbyAY4RrbqsBQqDFpGXAEbdD5QKr8kACx3+rnArmuuR22nKQWKazvp07N9yjTyDZaw/20UIH8tL9DQ==",
- "dev": true
+ "version": "0.29.0",
+ "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.29.0.tgz",
+ "integrity": "sha512-Ne7wqW7/9Cz54PDt4I3tcV+hAyat8ypyOGzYRJQfdxnnjeWsTxt1cy8pjvvKeI5kfXuyvULyeeAvwvvtAX3ayQ==",
+ "dev": true,
+ "license": "MIT"
},
"node_modules/language-subtag-registry": {
"version": "0.3.23",
@@ -7346,7 +7508,8 @@
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
- "dev": true
+ "dev": true,
+ "license": "MIT"
},
"node_modules/lint-staged": {
"version": "16.4.0",
@@ -7988,6 +8151,19 @@
"semver": "bin/semver.js"
}
},
+ "node_modules/map-obj": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+ "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=8"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/math-intrinsics": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -8015,17 +8191,55 @@
"dev": true
},
"node_modules/meow": {
- "version": "13.2.0",
- "resolved": "https://registry.npmjs.org/meow/-/meow-13.2.0.tgz",
- "integrity": "sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==",
+ "version": "10.1.5",
+ "resolved": "https://registry.npmjs.org/meow/-/meow-10.1.5.tgz",
+ "integrity": "sha512-/d+PQ4GKmGvM9Bee/DPa8z3mXs/pkvJE2KEThngVNOqtmljC6K7NMPxtc2JeZYTmpWb9k/TmxjeL18ez3h7vCw==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/minimist": "^1.2.2",
+ "camelcase-keys": "^7.0.0",
+ "decamelize": "^5.0.0",
+ "decamelize-keys": "^1.1.0",
+ "hard-rejection": "^2.1.0",
+ "minimist-options": "4.1.0",
+ "normalize-package-data": "^3.0.2",
+ "read-pkg-up": "^8.0.0",
+ "redent": "^4.0.0",
+ "trim-newlines": "^4.0.2",
+ "type-fest": "^1.2.2",
+ "yargs-parser": "^20.2.9"
+ },
+ "engines": {
+ "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/meow/node_modules/type-fest": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+ "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
"dev": true,
+ "license": "(MIT OR CC0-1.0)",
"engines": {
- "node": ">=18"
+ "node": ">=10"
},
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
+ "node_modules/meow/node_modules/yargs-parser": {
+ "version": "20.2.9",
+ "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz",
+ "integrity": "sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==",
+ "dev": true,
+ "license": "ISC",
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/merge-stream": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -8134,6 +8348,21 @@
"url": "https://github.com/sponsors/ljharb"
}
},
+ "node_modules/minimist-options": {
+ "version": "4.1.0",
+ "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+ "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "arrify": "^1.0.1",
+ "is-plain-obj": "^1.1.0",
+ "kind-of": "^6.0.3"
+ },
+ "engines": {
+ "node": ">= 6"
+ }
+ },
"node_modules/mochawesome": {
"version": "7.1.3",
"resolved": "https://registry.npmjs.org/mochawesome/-/mochawesome-7.1.3.tgz",
@@ -8643,6 +8872,22 @@
"integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
"dev": true
},
+ "node_modules/normalize-package-data": {
+ "version": "3.0.3",
+ "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+ "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+ "dev": true,
+ "license": "BSD-2-Clause",
+ "dependencies": {
+ "hosted-git-info": "^4.0.1",
+ "is-core-module": "^2.5.0",
+ "semver": "^7.3.4",
+ "validate-npm-package-license": "^3.0.1"
+ },
+ "engines": {
+ "node": ">=10"
+ }
+ },
"node_modules/normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -8981,6 +9226,7 @@
"resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
"integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
"dev": true,
+ "license": "MIT",
"dependencies": {
"@babel/code-frame": "^7.0.0",
"error-ex": "^1.3.1",
@@ -9228,29 +9474,20 @@
"dev": true
},
"node_modules/postcss-safe-parser": {
- "version": "7.0.0",
- "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-7.0.0.tgz",
- "integrity": "sha512-ovehqRNVCpuFzbXoTb4qLtyzK3xn3t/CUBxOs8LsnQjQrShaB4lKiHoVqY8ANaC0hBMHq5QVWk77rwGklFUDrg==",
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+ "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
"dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/postcss/"
- },
- {
- "type": "tidelift",
- "url": "https://tidelift.com/funding/github/npm/postcss-safe-parser"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/ai"
- }
- ],
+ "license": "MIT",
"engines": {
- "node": ">=18.0"
+ "node": ">=12.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
- "postcss": "^8.4.31"
+ "postcss": "^8.3.3"
}
},
"node_modules/postcss-scss": {
@@ -9437,6 +9674,19 @@
}
]
},
+ "node_modules/quick-lru": {
+ "version": "5.1.1",
+ "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-5.1.1.tgz",
+ "integrity": "sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -9519,6 +9769,69 @@
"react-dom": ">=16.6.0"
}
},
+ "node_modules/read-pkg": {
+ "version": "6.0.0",
+ "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-6.0.0.tgz",
+ "integrity": "sha512-X1Fu3dPuk/8ZLsMhEj5f4wFAF0DWoK7qhGJvgaijocXxBmSToKfbFtqbxMO7bVjNA1dmE5huAzjXj/ey86iw9Q==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@types/normalize-package-data": "^2.4.0",
+ "normalize-package-data": "^3.0.2",
+ "parse-json": "^5.2.0",
+ "type-fest": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/read-pkg-up": {
+ "version": "8.0.0",
+ "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-8.0.0.tgz",
+ "integrity": "sha512-snVCqPczksT0HS2EC+SxUndvSzn6LRCwpfSvLrIfR5BKDQQZMaI6jPRC9dYvYFDRAuFEAnkwww8kBBNE/3VvzQ==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "find-up": "^5.0.0",
+ "read-pkg": "^6.0.0",
+ "type-fest": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/read-pkg-up/node_modules/type-fest": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+ "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+ "dev": true,
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/read-pkg/node_modules/type-fest": {
+ "version": "1.4.0",
+ "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-1.4.0.tgz",
+ "integrity": "sha512-yGSza74xk0UG8k+pLh5oeoYirvIiWo5t0/o3zHHAO2tRDiZcxWP7fywNlXhqb6/r6sWvwi+RsyQMWhVLe4BVuA==",
+ "dev": true,
+ "license": "(MIT OR CC0-1.0)",
+ "engines": {
+ "node": ">=10"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -9544,6 +9857,36 @@
"url": "https://github.com/sponsors/jonschlinkert"
}
},
+ "node_modules/redent": {
+ "version": "4.0.0",
+ "resolved": "https://registry.npmjs.org/redent/-/redent-4.0.0.tgz",
+ "integrity": "sha512-tYkDkVVtYkSVhuQ4zBgfvciymHaeuel+zFKXShfDnFP5SyVEP7qo70Rf1jTOTCx3vGNAbnEi/xFkcfQVMIBWag==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "indent-string": "^5.0.0",
+ "strip-indent": "^4.0.0"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
+ "node_modules/redent/node_modules/indent-string": {
+ "version": "5.0.0",
+ "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-5.0.0.tgz",
+ "integrity": "sha512-m6FAo/spmsW2Ab2fU35JTYwtOKa2yAwXSwgjSv1TJzh4Mh7mC3lzAOVLBprb72XsTrgkEIsl7YrFNAiDiRhIGg==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/reflect.getprototypeof": {
"version": "1.0.10",
"resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
@@ -10170,6 +10513,42 @@
"node": ">=0.10.0"
}
},
+ "node_modules/spdx-correct": {
+ "version": "3.2.0",
+ "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
+ "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "dependencies": {
+ "spdx-expression-parse": "^3.0.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "node_modules/spdx-exceptions": {
+ "version": "2.5.0",
+ "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
+ "integrity": "sha512-PiU42r+xO4UbUS1buo3LPJkjlO7430Xn5SVAhdpzzsPHsjbYVflnnFdATgabnLude+Cqu25p6N+g2lw/PFsa4w==",
+ "dev": true,
+ "license": "CC-BY-3.0"
+ },
+ "node_modules/spdx-expression-parse": {
+ "version": "3.0.1",
+ "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+ "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "spdx-exceptions": "^2.1.0",
+ "spdx-license-ids": "^3.0.0"
+ }
+ },
+ "node_modules/spdx-license-ids": {
+ "version": "3.0.23",
+ "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz",
+ "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
+ "dev": true,
+ "license": "CC0-1.0"
+ },
"node_modules/sshpk": {
"version": "1.18.0",
"resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.18.0.tgz",
@@ -10394,6 +10773,19 @@
"node": ">=6"
}
},
+ "node_modules/strip-indent": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-4.1.1.tgz",
+ "integrity": "sha512-SlyRoSkdh1dYP0PzclLE7r0M9sgbFKKMFXpFRUMNuKhQSbC6VQIGzq3E0qsfvGJaUFJPGv6Ws1NZ/haTAjfbMA==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/strip-json-comments": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -10419,79 +10811,70 @@
"node": ">=0.10.0"
}
},
+ "node_modules/style-search": {
+ "version": "0.1.0",
+ "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+ "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
+ "dev": true,
+ "license": "ISC"
+ },
"node_modules/stylelint": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.7.0.tgz",
- "integrity": "sha512-Q1ATiXlz+wYr37a7TGsfvqYn2nSR3T/isw3IWlZQzFzCNoACHuGBb6xBplZXz56/uDRJHIygxjh7jbV/8isewA==",
+ "version": "15.11.0",
+ "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.11.0.tgz",
+ "integrity": "sha512-78O4c6IswZ9TzpcIiQJIN49K3qNoXTM8zEJzhaTE/xRTCZswaovSEVIa/uwbOltZrk16X4jAxjaOhzz/hTm1Kw==",
"dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/stylelint"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/stylelint"
- }
- ],
+ "license": "MIT",
"dependencies": {
- "@csstools/css-parser-algorithms": "^2.7.1",
- "@csstools/css-tokenizer": "^2.4.1",
- "@csstools/media-query-list-parser": "^2.1.13",
- "@csstools/selector-specificity": "^3.1.1",
- "@dual-bundle/import-meta-resolve": "^4.1.0",
+ "@csstools/css-parser-algorithms": "^2.3.1",
+ "@csstools/css-tokenizer": "^2.2.0",
+ "@csstools/media-query-list-parser": "^2.1.4",
+ "@csstools/selector-specificity": "^3.0.0",
"balanced-match": "^2.0.0",
"colord": "^2.9.3",
- "cosmiconfig": "^9.0.0",
- "css-functions-list": "^3.2.2",
+ "cosmiconfig": "^8.2.0",
+ "css-functions-list": "^3.2.1",
"css-tree": "^2.3.1",
- "debug": "^4.3.5",
- "fast-glob": "^3.3.2",
+ "debug": "^4.3.4",
+ "fast-glob": "^3.3.1",
"fastest-levenshtein": "^1.0.16",
- "file-entry-cache": "^9.0.0",
+ "file-entry-cache": "^7.0.0",
"global-modules": "^2.0.0",
"globby": "^11.1.0",
"globjoin": "^0.1.4",
"html-tags": "^3.3.1",
- "ignore": "^5.3.1",
+ "ignore": "^5.2.4",
+ "import-lazy": "^4.0.0",
"imurmurhash": "^0.1.4",
"is-plain-object": "^5.0.0",
- "known-css-properties": "^0.34.0",
+ "known-css-properties": "^0.29.0",
"mathml-tag-names": "^2.1.3",
- "meow": "^13.2.0",
- "micromatch": "^4.0.7",
+ "meow": "^10.1.5",
+ "micromatch": "^4.0.5",
"normalize-path": "^3.0.0",
- "picocolors": "^1.0.1",
- "postcss": "^8.4.39",
+ "picocolors": "^1.0.0",
+ "postcss": "^8.4.28",
"postcss-resolve-nested-selector": "^0.1.1",
- "postcss-safe-parser": "^7.0.0",
- "postcss-selector-parser": "^6.1.0",
+ "postcss-safe-parser": "^6.0.0",
+ "postcss-selector-parser": "^6.0.13",
"postcss-value-parser": "^4.2.0",
"resolve-from": "^5.0.0",
"string-width": "^4.2.3",
- "strip-ansi": "^7.1.0",
+ "strip-ansi": "^6.0.1",
+ "style-search": "^0.1.0",
"supports-hyperlinks": "^3.0.0",
"svg-tags": "^1.0.0",
- "table": "^6.8.2",
+ "table": "^6.8.1",
"write-file-atomic": "^5.0.1"
},
"bin": {
"stylelint": "bin/stylelint.mjs"
},
"engines": {
- "node": ">=18.12.0"
- }
- },
- "node_modules/stylelint/node_modules/ansi-regex": {
- "version": "6.0.1",
- "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
- "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
- "dev": true,
- "engines": {
- "node": ">=12"
+ "node": "^14.13.1 || >=16.0.0"
},
"funding": {
- "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+ "type": "opencollective",
+ "url": "https://opencollective.com/stylelint"
}
},
"node_modules/stylelint/node_modules/balanced-match": {
@@ -10501,28 +10884,16 @@
"dev": true
},
"node_modules/stylelint/node_modules/file-entry-cache": {
- "version": "9.0.0",
- "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-9.0.0.tgz",
- "integrity": "sha512-6MgEugi8p2tiUhqO7GnPsmbCCzj0YRCwwaTbpGRyKZesjRSzkqkAE9fPp7V2yMs5hwfgbQLgdvSSkGNg1s5Uvw==",
- "dev": true,
- "dependencies": {
- "flat-cache": "^5.0.0"
- },
- "engines": {
- "node": ">=18"
- }
- },
- "node_modules/stylelint/node_modules/flat-cache": {
- "version": "5.0.0",
- "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-5.0.0.tgz",
- "integrity": "sha512-JrqFmyUl2PnPi1OvLyTVHnQvwQ0S+e6lGSwu8OkAZlSaNIZciTY2H/cOOROxsBA1m/LZNHDsqAgDZt6akWcjsQ==",
+ "version": "7.0.2",
+ "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-7.0.2.tgz",
+ "integrity": "sha512-TfW7/1iI4Cy7Y8L6iqNdZQVvdXn0f8B4QcIXmkIbtTIe/Okm/nSlHb4IwGzRVOd3WfSieCgvf5cMzEfySAIl0g==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "flatted": "^3.3.1",
- "keyv": "^4.5.4"
+ "flat-cache": "^3.2.0"
},
"engines": {
- "node": ">=18"
+ "node": ">=12.0.0"
}
},
"node_modules/stylelint/node_modules/resolve-from": {
@@ -10534,21 +10905,6 @@
"node": ">=8"
}
},
- "node_modules/stylelint/node_modules/strip-ansi": {
- "version": "7.1.0",
- "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
- "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
- "dev": true,
- "dependencies": {
- "ansi-regex": "^6.0.1"
- },
- "engines": {
- "node": ">=12"
- },
- "funding": {
- "url": "https://github.com/chalk/strip-ansi?sponsor=1"
- }
- },
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -10850,6 +11206,19 @@
"tree-kill": "cli.js"
}
},
+ "node_modules/trim-newlines": {
+ "version": "4.1.1",
+ "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-4.1.1.tgz",
+ "integrity": "sha512-jRKj0n0jXWo6kh62nA5TEh3+4igKDXLvzBJcPpiizP7oOolUrYIxmVBG9TOtHYFHoddUk6YvAkGeGoSVTXfQXQ==",
+ "dev": true,
+ "license": "MIT",
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/sindresorhus"
+ }
+ },
"node_modules/trim-repeated": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/trim-repeated/-/trim-repeated-1.0.0.tgz",
@@ -11445,6 +11814,17 @@
"uuid": "dist/bin/uuid"
}
},
+ "node_modules/validate-npm-package-license": {
+ "version": "3.0.4",
+ "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+ "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+ "dev": true,
+ "license": "Apache-2.0",
+ "dependencies": {
+ "spdx-correct": "^3.0.0",
+ "spdx-expression-parse": "^3.0.0"
+ }
+ },
"node_modules/validator": {
"version": "13.12.0",
"resolved": "https://registry.npmjs.org/validator/-/validator-13.12.0.tgz",
diff --git a/package.json b/package.json
index d07226e81cc..ebe4286518a 100644
--- a/package.json
+++ b/package.json
@@ -47,7 +47,7 @@
"mochawesome-report-generator": "^6.2.0",
"prettier": "^3.3.2",
"sass": "^1.77.8",
- "stylelint": "^16.7.0",
+ "stylelint": "^15.11.0",
"typescript": "^5.2.2",
"typescript-eslint": "^8.58.2",
"vite": "^8.0.9"
diff --git a/public/img/icons/arrow-breadcrumb.svg b/public/img/icons/arrow-breadcrumb.svg
new file mode 100644
index 00000000000..a15457b9ad6
--- /dev/null
+++ b/public/img/icons/arrow-breadcrumb.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/constants/index.ts b/src/constants/index.ts
index df9ab952471..6a8bc03d474 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -8,6 +8,7 @@ export const ICONS = {
FAVOURITES: getImageUrl('/img/icons/Favourites.svg'),
FAVOURITES_ACTIVE: getImageUrl('/img/icons/FavouritesHilight.svg'),
ARROW_DOWN: getImageUrl('/img/icons/arrow-down.svg'),
+ ARROW_BREADCRUMB: getImageUrl('/img/icons/arrow-breadcrumb.svg'),
CLOSE: getImageUrl('/img/icons/Close.svg'),
MENU: getImageUrl('/img/icons/Menu.svg'),
} as const;
diff --git a/src/modules/CartPage/CartPage.module.scss b/src/modules/CartPage/CartPage.module.scss
index ce40b1c9452..afa4389bae9 100644
--- a/src/modules/CartPage/CartPage.module.scss
+++ b/src/modules/CartPage/CartPage.module.scss
@@ -3,12 +3,14 @@
.page {
@include page-container;
+
padding-bottom: 64px;
}
.title {
padding-top: 24px;
- @include h1();
+
+ @include h1;
@include on-tablet {
padding-top: 16px;
@@ -51,6 +53,7 @@
.total {
@include h2;
+
color: $color-primary;
}
@@ -87,6 +90,7 @@
.empty {
@include h2;
+
color: $color-secondary;
text-align: center;
padding: 40px 0;
diff --git a/src/modules/CartPage/components/CartItem/CartItem.module.scss b/src/modules/CartPage/components/CartItem/CartItem.module.scss
index 0047d31b188..a3a96c94666 100644
--- a/src/modules/CartPage/components/CartItem/CartItem.module.scss
+++ b/src/modules/CartPage/components/CartItem/CartItem.module.scss
@@ -28,6 +28,7 @@
display: flex;
align-items: center;
justify-content: center;
+
@include hover-transition(opacity);
&:hover {
@@ -49,12 +50,13 @@
.name {
@include body-text;
+
color: $color-primary;
flex: 1;
- min-width: 120px; // ← wraps on mobile but stays readable
+ min-width: 120px;
}
-// Right side: quantity controls + price
+
.controls {
display: flex;
align-items: center;
@@ -78,28 +80,33 @@
align-items: center;
justify-content: center;
border: 1px solid $color-icons;
+
@include button-text;
+
color: $color-primary;
- @include hover-transition(border-color);
- &:hover:not(:disabled) {
- border-color: $color-primary;
- }
+ @include hover-transition(border-color);
&:disabled {
color: $color-icons;
cursor: not-allowed;
}
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
}
.quantityValue {
@include h4;
+
min-width: 24px;
text-align: center;
}
.price {
@include h3;
+
color: $color-primary;
min-width: 80px;
text-align: right;
diff --git a/src/modules/CategoryPage/CategoryPage.module.scss b/src/modules/CategoryPage/CategoryPage.module.scss
index dd6a60b7580..5baeaf6fb99 100644
--- a/src/modules/CategoryPage/CategoryPage.module.scss
+++ b/src/modules/CategoryPage/CategoryPage.module.scss
@@ -3,6 +3,7 @@
.page {
@include page-container;
+
display: flex;
flex-direction: column;
padding-bottom: 64px;
@@ -14,6 +15,7 @@
.count {
@include button-text;
+
color: $color-secondary;
padding-top: 8px;
}
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.module.scss b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
index 643a6c919ae..56bfaa065aa 100644
--- a/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.module.scss
@@ -18,10 +18,12 @@
// Add 8px extra margin to create 16px total gap (8px base + 8px extra)
&:first-child {
margin-right: 8px;
+ rotate: 90deg;
}
&:last-child {
margin-left: 8px;
+ rotate: -90deg;
}
}
}
@@ -34,11 +36,14 @@
height: 32px;
border: 1px solid $color-elements;
background: $color-white;
+
@include button-text;
+
color: $color-primary;
text-decoration: none;
cursor: pointer;
position: relative;
+
@include hover-transition(border-color);
&:hover {
@@ -48,6 +53,12 @@
}
}
+.disabled .pageLink {
+ opacity: 0.5;
+ cursor: not-allowed;
+ pointer-events: none;
+}
+
.pageItem.active .pageLink {
background: $color-primary;
border-color: $color-primary;
@@ -56,15 +67,3 @@
cursor: default;
pointer-events: none;
}
-
-.pageItem.disabled .pageLink {
- color: $color-icons;
- border-color: $color-elements;
- cursor: default;
- pointer-events: none;
-
- &:hover {
- border-color: $color-elements;
- color: $color-icons;
- }
-}
diff --git a/src/modules/CategoryPage/components/Pagination/Pagination.tsx b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
index cb743e86457..12c647ec4eb 100644
--- a/src/modules/CategoryPage/components/Pagination/Pagination.tsx
+++ b/src/modules/CategoryPage/components/Pagination/Pagination.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import styles from './Pagination.module.scss';
+import { ICONS } from '../../../../constants';
type Props = {
total: number;
@@ -31,11 +32,11 @@ export const Pagination: React.FC = ({
return Array.from({ length: totalPages }, (_, index) => index + 1);
}
- // Keep current page in the middle (position 3 of 5)
+ // Keep the current page in the middle (position 3 of 5)
// but clamp so we never go below 1 or above totalPages
const half = Math.floor(maxVisible / 2); // 2
- let start = currentPage - half; // want current in center
+ let start = currentPage - half; // want current in a center
let end = currentPage + half; // 2 pages on each side
if (start < 1) {
@@ -69,7 +70,7 @@ export const Pagination: React.FC = ({
disabled={currentPage === 1}
onClick={() => handleClick(currentPage - 1)}
>
- «
+
@@ -106,7 +107,7 @@ export const Pagination: React.FC = ({
disabled={currentPage === totalPages}
onClick={() => handleClick(currentPage + 1)}
>
- »
+
diff --git a/src/modules/CategoryPage/components/ProductsList/ProductsList.module.scss b/src/modules/CategoryPage/components/ProductsList/ProductsList.module.scss
index 56e8f572486..df7850faa08 100644
--- a/src/modules/CategoryPage/components/ProductsList/ProductsList.module.scss
+++ b/src/modules/CategoryPage/components/ProductsList/ProductsList.module.scss
@@ -2,18 +2,11 @@
.grid {
display: flex;
- flex-direction: column;
+ flex-flow: row wrap;
gap: 16px;
padding-top: 24px;
- @include on-tablet {
- flex-direction: row;
- flex-wrap: wrap;
- gap: 16px;
-
- & > * {
- width: 272px;
- }
+ & > * {
+ width: 272px;
}
}
-
diff --git a/src/modules/FavouritesPage/FavouritesPage.module.scss b/src/modules/FavouritesPage/FavouritesPage.module.scss
index 4925e10d7dc..f5bdcef9fad 100644
--- a/src/modules/FavouritesPage/FavouritesPage.module.scss
+++ b/src/modules/FavouritesPage/FavouritesPage.module.scss
@@ -3,6 +3,7 @@
.page {
@include page-container;
+
display: flex;
flex-direction: column;
padding-top: 24px;
@@ -12,16 +13,19 @@
.title {
@include h1;
+
padding-top: 24px;
}
.count {
@include button-text;
+
color: $color-secondary;
}
.empty {
@include h2;
+
color: $color-secondary;
text-align: center;
padding: 40px 0;
@@ -44,13 +48,12 @@
}
.grid {
- flex-direction: row;
- flex-wrap: wrap;
+ flex-flow: row wrap;
gap: 16px;
row-gap: 40px;
& > * {
- width: 272px
+ width: 272px;
}
}
}
diff --git a/src/modules/HomePage/HomePage.module.scss b/src/modules/HomePage/HomePage.module.scss
index 4cf1f43d486..dfde0b91186 100644
--- a/src/modules/HomePage/HomePage.module.scss
+++ b/src/modules/HomePage/HomePage.module.scss
@@ -18,10 +18,16 @@
.title {
@include h1;
+
padding-top: 24px;
- @include on-tablet { padding-top: 32px; }
- @include on-desktop { padding-top: 56px; }
+ @include on-tablet {
+ padding-top: 32px;
+ }
+
+ @include on-desktop {
+ padding-top: 56px;
+ }
}
.sections {
@@ -60,12 +66,11 @@
gap: 30px;
@include on-tablet {
- flex-direction: row;
- flex-wrap: wrap;
+ flex-flow: row wrap;
gap: 16px;
& > * {
- width: 272px; // ← card width lives HERE, not in the card
+ width: 272px;
}
}
}
diff --git a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
index e1d5e300eb9..fccd8503617 100644
--- a/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
+++ b/src/modules/HomePage/components/PicturesSlider/PicturesSlider.module.scss
@@ -36,6 +36,7 @@
background: $color-white;
border: 1px solid $color-elements;
cursor: pointer;
+
@include hover-transition(border-color);
&:hover {
@@ -116,6 +117,7 @@
border: none;
cursor: pointer;
padding: 0;
+
@include hover-transition(background-color);
&:hover {
diff --git a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss
index da81682f90a..f103bc26561 100644
--- a/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss
+++ b/src/modules/HomePage/components/ShopByCategory/ShopByCategory.module.scss
@@ -39,11 +39,13 @@
height: 100%;
object-fit: cover;
display: block;
+
@include hover-transition(transform);
}
.title {
@include button-text;
+
font-weight: 600;
color: $color-primary;
padding-bottom: 4px;
@@ -51,6 +53,7 @@
.count {
@include body-text;
+
font-weight: 500;
color: $color-secondary;
}
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
index 4ffba2c47d5..7a8c186827a 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -3,6 +3,7 @@
.page {
@include page-container;
+
padding-bottom: 64px;
}
@@ -24,11 +25,13 @@
.title {
@include h2;
+
margin-bottom: 32px;
}
.notFound {
@include h2;
+
text-align: center;
padding: 80px 0;
}
@@ -236,9 +239,12 @@
font-weight: 700;
transition: background $transition;
- &:hover:not(:disabled) { background: $color-secondary; }
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
- &:disabled { opacity: 0.5; cursor: not-allowed; }
+ &:hover:not(:disabled) { background: $color-secondary; }
}
.cartBtnAdded {
@@ -262,8 +268,14 @@
justify-content: center;
transition: border-color $transition;
- &:hover:not(:disabled) { border-color: $color-primary; }
- &:disabled { opacity: 0.5; cursor: not-allowed; }
+ &:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+ }
+
+ &:hover:not(:disabled) {
+ border-color: $color-primary;
+ }
}
.favBtnActive {
@@ -284,8 +296,14 @@
justify-content: space-between;
font-size: $font-size-small;
- span:first-child { color: $color-secondary; }
- span:last-child { color: $color-primary; font-weight: 700; }
+ span:first-child {
+ color: $color-secondary;
+ }
+
+ span:last-child {
+ color: $color-primary;
+ font-weight: 700;
+ }
}
}
@@ -306,6 +324,7 @@
.sectionTitle {
@include h2;
+
margin-bottom: 16px;
}
@@ -336,7 +355,7 @@
gap: 8px;
@include on-tablet {
- margin-top: 25pxpx;
+ margin-top: 25px;
}
li {
@@ -344,8 +363,15 @@
justify-content: space-between;
font-size: $font-size-body;
- span:first-child { color: $color-secondary; }
- span:last-child { color: $color-primary; font-weight: 700; text-align: right; }
+ span:first-child {
+ color: $color-secondary;
+ }
+
+ span:last-child {
+ color: $color-primary;
+ font-weight: 700;
+ text-align: right;
+ }
}
}
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
index 3812b4ddad0..62feac3f5f9 100644
--- a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.module.scss
@@ -3,6 +3,7 @@
.breadcrumbs {
@include page-container;
+
display: flex;
align-items: center;
gap: 8px;
@@ -18,33 +19,31 @@
.breadcrumbLink {
display: flex;
align-items: center;
- @include small-text;
- color: $color-secondary;
text-decoration: none;
+
+ @include small-text;
+
+ color: $color-primary;
+
@include hover-transition(color);
&:hover {
- color: $color-primary;
+ color: $color-secondary;
}
}
.homeIcon {
width: 16px;
height: 16px;
- @include hover-transition(filter);
-
- .breadcrumbLink:hover & {
- filter: brightness(0) saturate(100%) invert(19%) sepia(8%) saturate(1059%) hue-rotate(202deg) brightness(95%) contrast(89%);
- }
}
.breadcrumbArrow {
width: 16px;
height: 16px;
- transform: rotate(-90deg);
}
.breadcrumbCurrent {
@include small-text;
- color: $color-primary;
+
+ color: $color-secondary;
}
diff --git a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
index c9b522df162..9a5043a9eda 100644
--- a/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/src/modules/shared/components/Breadcrumbs/Breadcrumbs.tsx
@@ -25,7 +25,7 @@ export const Breadcrumbs: React.FC = ({ links }) => {
return (
diff --git a/src/modules/shared/components/Dropdown/Dropdown.module.scss b/src/modules/shared/components/Dropdown/Dropdown.module.scss
index ebed57cd146..c0d731b60eb 100644
--- a/src/modules/shared/components/Dropdown/Dropdown.module.scss
+++ b/src/modules/shared/components/Dropdown/Dropdown.module.scss
@@ -11,6 +11,7 @@
.label {
@include button-text;
+
color: $color-secondary;
}
@@ -29,9 +30,12 @@
background: $color-white;
border: 1px solid $color-elements;
border-radius: 0;
+
@include button-text;
+
color: $color-primary;
cursor: pointer;
+
@include hover-transition(border-color);
&:hover {
@@ -52,6 +56,7 @@
.arrow {
flex-shrink: 0;
color: $color-secondary;
+
@include hover-transition(transform);
}
@@ -77,11 +82,14 @@
background: transparent;
border: none;
border-radius: 0;
+
@include button-text;
+
font-weight: 500;
color: $color-secondary;
cursor: pointer;
text-align: left;
+
@include hover-transition(background-color);
&:hover {
diff --git a/src/modules/shared/components/Footer/Footer.module.scss b/src/modules/shared/components/Footer/Footer.module.scss
index b6f205b4478..1b01403ca0f 100644
--- a/src/modules/shared/components/Footer/Footer.module.scss
+++ b/src/modules/shared/components/Footer/Footer.module.scss
@@ -2,9 +2,8 @@
@use '../../../../styles/variables' as *;
.footer {
- box-shadow: 0px -1px 0px 0px $color-elements;
+ box-shadow: 0 -1px 0 0 $color-elements;
margin-top: auto;
-
}
.container {
@@ -49,7 +48,7 @@
.navList {
list-style: none;
padding: 0;
- margin: 0 0 32px 0;
+ margin: 0 0 32px;
display: flex;
flex-direction: column;
gap: 16px;
@@ -77,14 +76,32 @@
text-transform: uppercase;
color: $color-secondary;
text-decoration: none;
- @include hover-transition(color);
+ @include hover-transition(color);
&:hover {
color: $color-primary;
}
}
+.backToTopArrow {
+ width: 32px;
+ height: 32px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid $color-icons;
+ flex-shrink: 0;
+ transition: border-color $transition, background-color $transition;
+
+ img {
+ width: 16px;
+ height: 16px;
+ transform: rotate(180deg);
+ transition: filter $transition;
+ }
+}
+
.backToTop {
display: flex;
align-items: center;
@@ -100,6 +117,7 @@
letter-spacing: $letter-spacing-uppercase;
text-transform: uppercase;
color: $color-secondary;
+
@include hover-transition(color);
&:hover {
@@ -125,21 +143,3 @@
flex-shrink: 0;
}
}
-
-.backToTopArrow {
- width: 32px;
- height: 32px;
- display: flex;
- align-items: center;
- justify-content: center;
- border: 1px solid $color-icons;
- flex-shrink: 0;
- transition: border-color $transition, background-color $transition;
-
- img {
- width: 16px;
- height: 16px;
- transform: rotate(180deg);
- transition: filter $transition;
- }
-}
diff --git a/src/modules/shared/components/Header/Header.module.scss b/src/modules/shared/components/Header/Header.module.scss
index 6385986f94d..b25fbeca702 100644
--- a/src/modules/shared/components/Header/Header.module.scss
+++ b/src/modules/shared/components/Header/Header.module.scss
@@ -78,6 +78,7 @@
display: flex;
align-items: center;
height: 100%;
+
@include nav-link;
}
@@ -111,6 +112,7 @@
border-bottom: 2px solid transparent;
flex-shrink: 0;
position: relative;
+
@include hover-transition(border-color);
&:hover {
@@ -155,6 +157,7 @@
top: 25%;
right: 25%;
}
+
@include on-desktop {
top: 30%;
right: 25%;
@@ -172,6 +175,7 @@
border: 1px solid $color-elements;
cursor: pointer;
flex-shrink: 0;
+
@include hover-transition(border-color);
&:hover {
@@ -225,6 +229,7 @@
.mobileNavLink {
display: block;
padding-bottom: 8px;
+
@include nav-link;
}
@@ -255,6 +260,7 @@
border: 1px solid $color-elements;
border-bottom: 2px solid transparent;
position: relative;
+
@include hover-transition(border-color);
&:hover {
diff --git a/src/modules/shared/components/ProductCard/ProductCard.module.scss b/src/modules/shared/components/ProductCard/ProductCard.module.scss
index 0b6fe7d3f4f..52283082961 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.module.scss
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -12,6 +12,12 @@
background-color: $color-white;
}
+.name {
+ @include button-text;
+
+ color: $color-primary;
+}
+
.linkContainer {
display: flex;
flex-direction: column;
@@ -19,7 +25,8 @@
text-decoration: none;
color: inherit;
gap: 8px;
- @include hover-scale();
+
+ @include hover-scale;
&:hover .name {
color: $color-secondary;
@@ -44,11 +51,6 @@
}
-.name {
- @include button-text();
- color: $color-primary;
-}
-
.prices {
display: flex;
align-items: center;
@@ -147,11 +149,6 @@
flex-shrink: 0;
@include hover-transition(border-color);
- @include hover-transition(box-shadow);
-
- &:hover {
- box-shadow: 0 3px 13px 0 rgba(23, 32, 49, 0.4);
- }
&:hover {
border-color: $color-primary;
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index cf6ed88124a..e1df55ffd3e 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,21 +1,20 @@
@font-face {
- font-family: 'Mont';
+ font-family: Mont;
src: url('../../public/fonts/Mont-Regular.otf') format('opentype');
font-weight: 400;
font-style: normal;
}
@font-face {
- font-family: 'Mont';
+ font-family: Mont;
src: url('../../public/fonts/Mont-SemiBold.otf') format('opentype');
font-weight: 600;
font-style: normal;
}
@font-face {
- font-family: 'Mont';
+ font-family: Mont;
src: url('../../public/fonts/Mont-Bold.otf') format('opentype');
font-weight: 700;
font-style: normal;
}
-
diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
index 4c80a9c092b..d2a0d513154 100644
--- a/src/styles/_mixins.scss
+++ b/src/styles/_mixins.scss
@@ -129,6 +129,7 @@
color: $color-secondary;
text-decoration: none;
position: relative;
+
@include hover-transition(color);
&::after {
diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss
index a765d370363..cda1afc6942 100644
--- a/src/styles/_variables.scss
+++ b/src/styles/_variables.scss
@@ -3,7 +3,7 @@ $tablet: 640px;
$desktop: 1200px;
// Colors — Original Figma Design
-$color-white: #ffffff;
+$color-white: #fff;
$color-primary: #313237;
$color-secondary: #89939a;
$color-icons: #b4bdc3;
@@ -15,33 +15,26 @@ $color-green: #27ae60;
$color-red: #eb5757;
// Font family
-$font-family: 'Mont', sans-serif;
+$font-family: Mont, sans-serif;
// Desktop/Tablet typography
$font-size-h1: 48px;
$line-height-h1: 56px;
$letter-spacing-h1: -0.01em;
-
$font-size-h2: 32px;
$line-height-h2: 41px;
$letter-spacing-h2: -0.01em;
-
$font-size-h3: 22px;
$line-height-h3: 31px;
-
$font-size-h4: 20px;
$line-height-h4: 26px;
-
$font-size-uppercase: 12px;
$line-height-uppercase: 11px;
$letter-spacing-uppercase: 0.04em;
-
$font-size-button: 14px;
$line-height-button: 21px;
-
$font-size-body: 14px;
$line-height-body: 21px;
-
$font-size-small: 12px;
$line-height-small: 15px;
@@ -49,13 +42,10 @@ $line-height-small: 15px;
$font-size-h1-mobile: 32px;
$line-height-h1-mobile: 41px;
$letter-spacing-h1-mobile: -0.01em;
-
$font-size-h2-mobile: 22px;
$line-height-h2-mobile: 31px;
-
$font-size-h3-mobile: 20px;
$line-height-h3-mobile: 26px;
-
$font-size-h4-mobile: 16px;
$line-height-h4-mobile: 20px;
diff --git a/vite.config.ts b/vite.config.ts
index e2987da10f4..80fbee7e5b6 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -5,4 +5,7 @@ import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
base: '/react_phone-catalog/',
+ server: {
+ port: 3000,
+ },
});
From 4214db3eebb296a0176f74145f95a5cb0e6a80da Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Thu, 7 May 2026 17:03:28 +0300
Subject: [PATCH 27/30] downgrade eslint/js for tests
---
package-lock.json | 31 +++++--------------------------
package.json | 2 +-
2 files changed, 6 insertions(+), 27 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 628d1d034e4..3ee9969588a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20,7 +20,7 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
- "@eslint/js": "^10.0.1",
+ "@eslint/js": "^8.57.1",
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
@@ -744,24 +744,13 @@
}
},
"node_modules/@eslint/js": {
- "version": "10.0.1",
- "resolved": "https://registry.npmjs.org/@eslint/js/-/js-10.0.1.tgz",
- "integrity": "sha512-zeR9k5pd4gxjZ0abRoIaxdc7I3nDktoXZk2qOv9gCNWx3mVwEn32VRhyLaRsDiJjTs0xq/T8mfPtyuXu7GWBcA==",
+ "version": "8.57.1",
+ "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
+ "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
"dev": true,
"license": "MIT",
"engines": {
- "node": "^20.19.0 || ^22.13.0 || >=24"
- },
- "funding": {
- "url": "https://eslint.org/donate"
- },
- "peerDependencies": {
- "eslint": "^10.0.0"
- },
- "peerDependenciesMeta": {
- "eslint": {
- "optional": true
- }
+ "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
}
},
"node_modules/@fortawesome/fontawesome-free": {
@@ -5093,16 +5082,6 @@
"url": "https://opencollective.com/eslint"
}
},
- "node_modules/eslint/node_modules/@eslint/js": {
- "version": "8.57.1",
- "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
- "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
- }
- },
"node_modules/eslint/node_modules/ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
diff --git a/package.json b/package.json
index ebe4286518a..4084d8be32b 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
},
"devDependencies": {
"@cypress/react18": "^2.0.1",
- "@eslint/js": "^10.0.1",
+ "@eslint/js": "^8.57.1",
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
From 6f0cc5a2ca93902a3ecb3a38106371b394142dec Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Thu, 7 May 2026 17:16:12 +0300
Subject: [PATCH 28/30] fix: upgrade @vitejs/plugin-react and @types/node to
support vite 8
---
package-lock.json | 647 +++-------------------------------------------
package.json | 4 +-
2 files changed, 38 insertions(+), 613 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 3ee9969588a..3a723b8a546 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,13 +24,13 @@
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
- "@types/node": "^20.14.10",
+ "@types/node": "^22.19.17",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-transition-group": "^4.4.10",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.16.0",
- "@vitejs/plugin-react": "^4.3.1",
+ "@vitejs/plugin-react": "^6.0.1",
"cypress": "^13.13.0",
"eslint": "^8.57.1",
"eslint-config-airbnb-typescript": "^18.0.0",
@@ -57,19 +57,6 @@
"vite": "^8.0.9"
}
},
- "node_modules/@ampproject/remapping": {
- "version": "2.3.0",
- "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
- "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
- "dev": true,
- "dependencies": {
- "@jridgewell/gen-mapping": "^0.3.5",
- "@jridgewell/trace-mapping": "^0.3.24"
- },
- "engines": {
- "node": ">=6.0.0"
- }
- },
"node_modules/@babel/code-frame": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
@@ -83,206 +70,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@babel/compat-data": {
- "version": "7.24.9",
- "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.24.9.tgz",
- "integrity": "sha512-e701mcfApCJqMMueQI0Fb68Amflj83+dvAvHawoBpAz+GDjCIyGHzNwnefjsWJ3xiYAqqiQFoWbspGYBdb2/ng==",
- "dev": true,
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/core": {
- "version": "7.24.9",
- "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.24.9.tgz",
- "integrity": "sha512-5e3FI4Q3M3Pbr21+5xJwCv6ZT6KmGkI0vw3Tozy5ODAQFTIWe37iT8Cr7Ice2Ntb+M3iSKCEWMB1MBgKrW3whg==",
- "dev": true,
- "dependencies": {
- "@ampproject/remapping": "^2.2.0",
- "@babel/code-frame": "^7.24.7",
- "@babel/generator": "^7.24.9",
- "@babel/helper-compilation-targets": "^7.24.8",
- "@babel/helper-module-transforms": "^7.24.9",
- "@babel/helpers": "^7.24.8",
- "@babel/parser": "^7.24.8",
- "@babel/template": "^7.24.7",
- "@babel/traverse": "^7.24.8",
- "@babel/types": "^7.24.9",
- "convert-source-map": "^2.0.0",
- "debug": "^4.1.0",
- "gensync": "^1.0.0-beta.2",
- "json5": "^2.2.3",
- "semver": "^6.3.1"
- },
- "engines": {
- "node": ">=6.9.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/babel"
- }
- },
- "node_modules/@babel/core/node_modules/semver": {
- "version": "6.3.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
- "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
- "dev": true,
- "bin": {
- "semver": "bin/semver.js"
- }
- },
- "node_modules/@babel/generator": {
- "version": "7.24.9",
- "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.9.tgz",
- "integrity": "sha512-G8v3jRg+z8IwY1jHFxvCNhOPYPterE4XljNgdGTYfSTtzzwjIswIzIaSPSLs3R7yFuqnqNeay5rjICfqVr+/6A==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.24.9",
- "@jridgewell/gen-mapping": "^0.3.5",
- "@jridgewell/trace-mapping": "^0.3.25",
- "jsesc": "^2.5.1"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-compilation-targets": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.8.tgz",
- "integrity": "sha512-oU+UoqCHdp+nWVDkpldqIQL/i/bvAv53tRqLG/s+cOXxe66zOYLU7ar/Xs3LdmBihrUMEUhwu6dMZwbNOYDwvw==",
- "dev": true,
- "dependencies": {
- "@babel/compat-data": "^7.24.8",
- "@babel/helper-validator-option": "^7.24.8",
- "browserslist": "^4.23.1",
- "lru-cache": "^5.1.1",
- "semver": "^6.3.1"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-compilation-targets/node_modules/semver": {
- "version": "6.3.1",
- "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
- "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
- "dev": true,
- "bin": {
- "semver": "bin/semver.js"
- }
- },
- "node_modules/@babel/helper-environment-visitor": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.7.tgz",
- "integrity": "sha512-DoiN84+4Gnd0ncbBOM9AZENV4a5ZiL39HYMyZJGZ/AZEykHYdJw0wW3kdcsh9/Kn+BRXHLkkklZ51ecPKmI1CQ==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-function-name": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.24.7.tgz",
- "integrity": "sha512-FyoJTsj/PEUWu1/TYRiXTIHc8lbw+TDYkZuoE43opPS5TrI7MyONBE1oNvfguEXAD9yhQRrVBnXdXzSLQl9XnA==",
- "dev": true,
- "dependencies": {
- "@babel/template": "^7.24.7",
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-hoist-variables": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.7.tgz",
- "integrity": "sha512-MJJwhkoGy5c4ehfoRyrJ/owKeMl19U54h27YYftT0o2teQ3FJ3nQUf/I3LlJsX4l3qlw7WRXUmiyajvHXoTubQ==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-module-imports": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.24.7.tgz",
- "integrity": "sha512-8AyH3C+74cgCVVXow/myrynrAGv+nTVg5vKu2nZph9x7RcRwzmh0VFallJuFTZ9mx6u4eSdXZfcOzSqTUm0HCA==",
- "dev": true,
- "dependencies": {
- "@babel/traverse": "^7.24.7",
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-module-transforms": {
- "version": "7.24.9",
- "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.24.9.tgz",
- "integrity": "sha512-oYbh+rtFKj/HwBQkFlUzvcybzklmVdVV3UU+mN7n2t/q3yGHbuVdNxyFvSBO1tfvjyArpHNcWMAzsSPdyI46hw==",
- "dev": true,
- "dependencies": {
- "@babel/helper-environment-visitor": "^7.24.7",
- "@babel/helper-module-imports": "^7.24.7",
- "@babel/helper-simple-access": "^7.24.7",
- "@babel/helper-split-export-declaration": "^7.24.7",
- "@babel/helper-validator-identifier": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0"
- }
- },
- "node_modules/@babel/helper-plugin-utils": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.8.tgz",
- "integrity": "sha512-FFWx5142D8h2Mgr/iPVGH5G7w6jDn4jUSpZTyDnQO0Yn7Ks2Kuz6Pci8H6MPCoUJegd/UZQ3tAvfLCxQSnWWwg==",
- "dev": true,
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-simple-access": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.24.7.tgz",
- "integrity": "sha512-zBAIvbCMh5Ts+b86r/CjU+4XGYIs+R1j951gxI3KmmxBMhCg4oQMsv6ZXQ64XOm/cvzfU1FmoCyt6+owc5QMYg==",
- "dev": true,
- "dependencies": {
- "@babel/traverse": "^7.24.7",
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-split-export-declaration": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.7.tgz",
- "integrity": "sha512-oy5V7pD+UvfkEATUKvIjvIAH/xCzfsFVw7ygW2SI6NClZzquT+mwdTfgfdbUiceh6iQO0CHtCPsyze/MZ2YbAA==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helper-string-parser": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.24.8.tgz",
- "integrity": "sha512-pO9KhhRcuUyGnJWwyEgnRJTSIZHiT+vMD0kPeD+so0l7mxkMT19g3pjY9GTnHySck/hDzq+dtW/4VgnMkippsQ==",
- "dev": true,
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/@babel/helper-validator-identifier": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
@@ -292,28 +79,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@babel/helper-validator-option": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.24.8.tgz",
- "integrity": "sha512-xb8t9tD1MHLungh/AIoWYN+gVHaB9kwlu8gffXGSt3FFEIT7RjS+xWbc2vUD1UTZdIpKj/ab3rdqJ7ufngyi2Q==",
- "dev": true,
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/helpers": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.24.8.tgz",
- "integrity": "sha512-gV2265Nkcz7weJJfvDoAEVzC1e2OTDpkGbEsebse8koXUJUXPsCMi7sRo/+SPMuMZ9MtUPnGwITTnQnU5YjyaQ==",
- "dev": true,
- "dependencies": {
- "@babel/template": "^7.24.7",
- "@babel/types": "^7.24.8"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/@babel/highlight": {
"version": "7.24.7",
"resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
@@ -329,48 +94,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@babel/parser": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.24.8.tgz",
- "integrity": "sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==",
- "dev": true,
- "bin": {
- "parser": "bin/babel-parser.js"
- },
- "engines": {
- "node": ">=6.0.0"
- }
- },
- "node_modules/@babel/plugin-transform-react-jsx-self": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.24.7.tgz",
- "integrity": "sha512-fOPQYbGSgH0HUp4UJO4sMBFjY6DuWq+2i8rixyUMb3CdGixs/gccURvYOAhajBdKDoGajFr3mUq5rH3phtkGzw==",
- "dev": true,
- "dependencies": {
- "@babel/helper-plugin-utils": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
- "node_modules/@babel/plugin-transform-react-jsx-source": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.24.7.tgz",
- "integrity": "sha512-J2z+MWzZHVOemyLweMqngXrgGC42jQ//R0KdxqkIz/OrbVIIlhFI3WigZ5fO+nwFvBlncr4MGapd8vTyc7RPNQ==",
- "dev": true,
- "dependencies": {
- "@babel/helper-plugin-utils": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- },
- "peerDependencies": {
- "@babel/core": "^7.0.0-0"
- }
- },
"node_modules/@babel/runtime": {
"version": "7.24.8",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz",
@@ -382,65 +105,6 @@
"node": ">=6.9.0"
}
},
- "node_modules/@babel/template": {
- "version": "7.24.7",
- "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
- "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
- "dev": true,
- "dependencies": {
- "@babel/code-frame": "^7.24.7",
- "@babel/parser": "^7.24.7",
- "@babel/types": "^7.24.7"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/traverse": {
- "version": "7.24.8",
- "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.8.tgz",
- "integrity": "sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==",
- "dev": true,
- "dependencies": {
- "@babel/code-frame": "^7.24.7",
- "@babel/generator": "^7.24.8",
- "@babel/helper-environment-visitor": "^7.24.7",
- "@babel/helper-function-name": "^7.24.7",
- "@babel/helper-hoist-variables": "^7.24.7",
- "@babel/helper-split-export-declaration": "^7.24.7",
- "@babel/parser": "^7.24.8",
- "@babel/types": "^7.24.8",
- "debug": "^4.3.1",
- "globals": "^11.1.0"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
- "node_modules/@babel/traverse/node_modules/globals": {
- "version": "11.12.0",
- "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
- "integrity": "sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==",
- "dev": true,
- "license": "MIT",
- "engines": {
- "node": ">=4"
- }
- },
- "node_modules/@babel/types": {
- "version": "7.24.9",
- "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.24.9.tgz",
- "integrity": "sha512-xm8XrMKz0IlUdocVbYJe0Z9xEgidU7msskG8BbhnTPK/HZ2z/7FP7ykqPgrUH+C+r414mNfNWam1f2vqOjqjYQ==",
- "dev": true,
- "dependencies": {
- "@babel/helper-string-parser": "^7.24.8",
- "@babel/helper-validator-identifier": "^7.24.7",
- "to-fast-properties": "^2.0.0"
- },
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/@colors/colors": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@colors/colors/-/colors-1.5.0.tgz",
@@ -823,54 +487,6 @@
"dev": true,
"license": "BSD-3-Clause"
},
- "node_modules/@jridgewell/gen-mapping": {
- "version": "0.3.5",
- "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
- "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
- "dev": true,
- "dependencies": {
- "@jridgewell/set-array": "^1.2.1",
- "@jridgewell/sourcemap-codec": "^1.4.10",
- "@jridgewell/trace-mapping": "^0.3.24"
- },
- "engines": {
- "node": ">=6.0.0"
- }
- },
- "node_modules/@jridgewell/resolve-uri": {
- "version": "3.1.2",
- "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
- "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
- "dev": true,
- "engines": {
- "node": ">=6.0.0"
- }
- },
- "node_modules/@jridgewell/set-array": {
- "version": "1.2.1",
- "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
- "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
- "dev": true,
- "engines": {
- "node": ">=6.0.0"
- }
- },
- "node_modules/@jridgewell/sourcemap-codec": {
- "version": "1.5.0",
- "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
- "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
- "dev": true
- },
- "node_modules/@jridgewell/trace-mapping": {
- "version": "0.3.25",
- "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
- "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
- "dev": true,
- "dependencies": {
- "@jridgewell/resolve-uri": "^3.1.0",
- "@jridgewell/sourcemap-codec": "^1.4.14"
- }
- },
"node_modules/@mate-academy/scripts": {
"version": "1.8.5",
"resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.5.tgz",
@@ -1657,47 +1273,6 @@
"tslib": "^2.4.0"
}
},
- "node_modules/@types/babel__core": {
- "version": "7.20.5",
- "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
- "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
- "dev": true,
- "dependencies": {
- "@babel/parser": "^7.20.7",
- "@babel/types": "^7.20.7",
- "@types/babel__generator": "*",
- "@types/babel__template": "*",
- "@types/babel__traverse": "*"
- }
- },
- "node_modules/@types/babel__generator": {
- "version": "7.6.8",
- "resolved": "https://registry.npmjs.org/@types/babel__generator/-/babel__generator-7.6.8.tgz",
- "integrity": "sha512-ASsj+tpEDsEiFr1arWrlN6V3mdfjRMZt6LtK/Vp/kreFLnr5QH5+DhvD5nINYZXzwJvXeGq+05iUXcAzVrqWtw==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.0.0"
- }
- },
- "node_modules/@types/babel__template": {
- "version": "7.4.4",
- "resolved": "https://registry.npmjs.org/@types/babel__template/-/babel__template-7.4.4.tgz",
- "integrity": "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A==",
- "dev": true,
- "dependencies": {
- "@babel/parser": "^7.1.0",
- "@babel/types": "^7.0.0"
- }
- },
- "node_modules/@types/babel__traverse": {
- "version": "7.20.6",
- "resolved": "https://registry.npmjs.org/@types/babel__traverse/-/babel__traverse-7.20.6.tgz",
- "integrity": "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg==",
- "dev": true,
- "dependencies": {
- "@babel/types": "^7.20.7"
- }
- },
"node_modules/@types/get-port": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/@types/get-port/-/get-port-4.2.0.tgz",
@@ -1722,12 +1297,13 @@
"license": "MIT"
},
"node_modules/@types/node": {
- "version": "20.14.10",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-20.14.10.tgz",
- "integrity": "sha512-MdiXf+nDuMvY0gJKxyfZ7/6UFsETO7mGKF54MVD/ekJS6HdFtpZFBgrh6Pseu64XTb2MLyFPlbW6hj8HYRQNOQ==",
+ "version": "22.19.17",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.17.tgz",
+ "integrity": "sha512-wGdMcf+vPYM6jikpS/qhg6WiqSV/OhG+jeeHT/KlVqxYfD40iYJf9/AE1uQxVWFvU7MipKRkRv8NSHiCGgPr8Q==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "undici-types": "~5.26.4"
+ "undici-types": "~6.21.0"
}
},
"node_modules/@types/normalize-package-data": {
@@ -2659,24 +2235,38 @@
]
},
"node_modules/@vitejs/plugin-react": {
- "version": "4.3.1",
- "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.1.tgz",
- "integrity": "sha512-m/V2syj5CuVnaxcUJOQRel/Wr31FFXRFlnOoq1TVtkCxsY5veGMTEmpWHndrhB2U8ScHtCQB1e+4hWYExQc6Lg==",
+ "version": "6.0.1",
+ "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-6.0.1.tgz",
+ "integrity": "sha512-l9X/E3cDb+xY3SWzlG1MOGt2usfEHGMNIaegaUGFsLkb3RCn/k8/TOXBcab+OndDI4TBtktT8/9BwwW8Vi9KUQ==",
"dev": true,
+ "license": "MIT",
"dependencies": {
- "@babel/core": "^7.24.5",
- "@babel/plugin-transform-react-jsx-self": "^7.24.5",
- "@babel/plugin-transform-react-jsx-source": "^7.24.1",
- "@types/babel__core": "^7.20.5",
- "react-refresh": "^0.14.2"
+ "@rolldown/pluginutils": "1.0.0-rc.7"
},
"engines": {
- "node": "^14.18.0 || >=16.0.0"
+ "node": "^20.19.0 || >=22.12.0"
},
"peerDependencies": {
- "vite": "^4.2.0 || ^5.0.0"
+ "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
+ "babel-plugin-react-compiler": "^1.0.0",
+ "vite": "^8.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@rolldown/plugin-babel": {
+ "optional": true
+ },
+ "babel-plugin-react-compiler": {
+ "optional": true
+ }
}
},
+ "node_modules/@vitejs/plugin-react/node_modules/@rolldown/pluginutils": {
+ "version": "1.0.0-rc.7",
+ "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-rc.7.tgz",
+ "integrity": "sha512-qujRfC8sFVInYSPPMLQByRh7zhwkGFS4+tyMQ83srV1qrxL4g8E2tyxVVyxd0+8QeBM1mIk9KbWxkegRr76XzA==",
+ "dev": true,
+ "license": "MIT"
+ },
"node_modules/acorn": {
"version": "8.16.0",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
@@ -3214,38 +2804,6 @@
"node": ">=8"
}
},
- "node_modules/browserslist": {
- "version": "4.23.2",
- "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.2.tgz",
- "integrity": "sha512-qkqSyistMYdxAcw+CzbZwlBy8AGmS/eEWs+sEV5TnLRGDOL+C5M2EnH6tlZyg0YoAxGJAFKh61En9BR941GnHA==",
- "dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/browserslist"
- },
- {
- "type": "tidelift",
- "url": "https://tidelift.com/funding/github/npm/browserslist"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/ai"
- }
- ],
- "dependencies": {
- "caniuse-lite": "^1.0.30001640",
- "electron-to-chromium": "^1.4.820",
- "node-releases": "^2.0.14",
- "update-browserslist-db": "^1.1.0"
- },
- "bin": {
- "browserslist": "cli.js"
- },
- "engines": {
- "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
- }
- },
"node_modules/buffer": {
"version": "5.7.1",
"resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
@@ -3397,26 +2955,6 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
- "node_modules/caniuse-lite": {
- "version": "1.0.30001642",
- "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001642.tgz",
- "integrity": "sha512-3XQ0DoRgLijXJErLSl+bLnJ+Et4KqV1PY6JJBGAFlsNsz31zeAIncyeZfLCabHK/jtSh+671RM9YMldxjUPZtA==",
- "dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/browserslist"
- },
- {
- "type": "tidelift",
- "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/ai"
- }
- ]
- },
"node_modules/caseless": {
"version": "0.12.0",
"resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
@@ -3645,12 +3183,6 @@
"dev": true,
"license": "MIT"
},
- "node_modules/convert-source-map": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
- "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
- "dev": true
- },
"node_modules/core-util-is": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -4236,12 +3768,6 @@
"safer-buffer": "^2.1.0"
}
},
- "node_modules/electron-to-chromium": {
- "version": "1.4.827",
- "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.827.tgz",
- "integrity": "sha512-VY+J0e4SFcNfQy19MEoMdaIcZLmDCprqvBtkii1WTCTQHpRvf5N8+3kTYCgL/PcntvwQvmMJWTuDPsq+IlhWKQ==",
- "dev": true
- },
"node_modules/email-addresses": {
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/email-addresses/-/email-addresses-5.0.0.tgz",
@@ -5721,15 +5247,6 @@
"node": ">= 0.4"
}
},
- "node_modules/gensync": {
- "version": "1.0.0-beta.2",
- "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
- "integrity": "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==",
- "dev": true,
- "engines": {
- "node": ">=6.9.0"
- }
- },
"node_modules/get-caller-file": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7047,18 +6564,6 @@
"integrity": "sha512-UVU9dibq2JcFWxQPA6KCqj5O42VOmAY3zQUfEKxU0KpTGXwNoCjkX1e13eHNvw/xPynt6pU0rZ1htjWTNTSXsg==",
"dev": true
},
- "node_modules/jsesc": {
- "version": "2.5.2",
- "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
- "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
- "dev": true,
- "bin": {
- "jsesc": "bin/jsesc"
- },
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/json-buffer": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
@@ -7097,18 +6602,6 @@
"integrity": "sha512-ZClg6AaYvamvYEE82d3Iyd3vSSIjQ+odgjaTzRuO3s7toCdFKczob2i0zCh7JE8kWn17yvAWhUVxvqGwUalsRA==",
"dev": true
},
- "node_modules/json5": {
- "version": "2.2.3",
- "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
- "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
- "dev": true,
- "bin": {
- "json5": "lib/cli.js"
- },
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/jsonfile": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
@@ -8085,15 +7578,6 @@
"loose-envify": "cli.js"
}
},
- "node_modules/lru-cache": {
- "version": "5.1.1",
- "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
- "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
- "dev": true,
- "dependencies": {
- "yallist": "^3.0.2"
- }
- },
"node_modules/macos-release": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/macos-release/-/macos-release-2.5.1.tgz",
@@ -8845,12 +8329,6 @@
}
}
},
- "node_modules/node-releases": {
- "version": "2.0.14",
- "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz",
- "integrity": "sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==",
- "dev": true
- },
"node_modules/normalize-package-data": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
@@ -9694,15 +9172,6 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
- "node_modules/react-refresh": {
- "version": "0.14.2",
- "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
- "integrity": "sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==",
- "dev": true,
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/react-router": {
"version": "6.25.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.25.1.tgz",
@@ -11125,15 +10594,6 @@
"node": ">=14.14"
}
},
- "node_modules/to-fast-properties": {
- "version": "2.0.0",
- "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
- "integrity": "sha512-/OaKK0xYrs3DmxRYqL/yDc+FxFUVYhDlXMhRmv3z915w2HF1tnN1omB354j8VUGO/hbRzyD6Y3sA7v7GS/ceog==",
- "dev": true,
- "engines": {
- "node": ">=4"
- }
- },
"node_modules/to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -11670,10 +11130,11 @@
}
},
"node_modules/undici-types": {
- "version": "5.26.5",
- "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
- "integrity": "sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==",
- "dev": true
+ "version": "6.21.0",
+ "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
+ "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
+ "dev": true,
+ "license": "MIT"
},
"node_modules/universalify": {
"version": "2.0.1",
@@ -11728,36 +11189,6 @@
"node": ">=8"
}
},
- "node_modules/update-browserslist-db": {
- "version": "1.1.0",
- "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.0.tgz",
- "integrity": "sha512-EdRAaAyk2cUE1wOf2DkEhzxqOQvFOoRJFNS6NeyJ01Gp2beMRpBAINjM2iDXE3KCuKhwnvHIQCJm6ThL2Z+HzQ==",
- "dev": true,
- "funding": [
- {
- "type": "opencollective",
- "url": "https://opencollective.com/browserslist"
- },
- {
- "type": "tidelift",
- "url": "https://tidelift.com/funding/github/npm/browserslist"
- },
- {
- "type": "github",
- "url": "https://github.com/sponsors/ai"
- }
- ],
- "dependencies": {
- "escalade": "^3.1.2",
- "picocolors": "^1.0.1"
- },
- "bin": {
- "update-browserslist-db": "cli.js"
- },
- "peerDependencies": {
- "browserslist": ">= 4.21.0"
- }
- },
"node_modules/uri-js": {
"version": "4.4.1",
"resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
@@ -12262,12 +11693,6 @@
"node": ">=10"
}
},
- "node_modules/yallist": {
- "version": "3.1.1",
- "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
- "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
- "dev": true
- },
"node_modules/yaml": {
"version": "2.8.3",
"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.3.tgz",
diff --git a/package.json b/package.json
index 4084d8be32b..2ca6626761a 100644
--- a/package.json
+++ b/package.json
@@ -20,13 +20,13 @@
"@mate-academy/scripts": "^1.8.5",
"@mate-academy/students-ts-config": "*",
"@mate-academy/stylelint-config": "*",
- "@types/node": "^20.14.10",
+ "@types/node": "^22.19.17",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
"@types/react-transition-group": "^4.4.10",
"@typescript-eslint/eslint-plugin": "^7.18.0",
"@typescript-eslint/parser": "^7.16.0",
- "@vitejs/plugin-react": "^4.3.1",
+ "@vitejs/plugin-react": "^6.0.1",
"cypress": "^13.13.0",
"eslint": "^8.57.1",
"eslint-config-airbnb-typescript": "^18.0.0",
From f872ebcb4fa367e5ccfef9b35d20522cc2e06240 Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Fri, 8 May 2026 13:48:35 +0300
Subject: [PATCH 29/30] provided improvements for cartItem added link to
productDetailPage, added showDiscount prop, for different cases, whatever
show discount or not.
---
src/constants/index.ts | 5 +++
.../components/CartItem/CartItem.module.scss | 35 +++++++++++++------
.../CartPage/components/CartItem/CartItem.tsx | 18 ++++++----
.../components/ProductsList/ProductsList.tsx | 9 +++--
src/modules/HomePage/HomePage.tsx | 6 +++-
.../ProductsSlider/ProductsSlider.tsx | 9 +++--
src/modules/NotFoundPage/NotFoundPage.tsx | 4 +--
.../ProductDetailsPage.module.scss | 17 +++++++--
.../ProductDetailsPage/ProductDetailsPage.tsx | 9 +++--
.../shared/components/Header/Header.tsx | 1 +
.../components/ProductCard/ProductCard.tsx | 5 +--
11 files changed, 88 insertions(+), 30 deletions(-)
diff --git a/src/constants/index.ts b/src/constants/index.ts
index 6a8bc03d474..8832f782d05 100644
--- a/src/constants/index.ts
+++ b/src/constants/index.ts
@@ -26,3 +26,8 @@ export const CATEGORY_IMAGES = {
TABLETS: getImageUrl('/img/category-tablets.png'),
ACCESSORIES: getImageUrl('/img/category-accessories.png'),
} as const;
+
+export const NOTFOUND_IMAGES = {
+ PAGE_NOT_FOUND: getImageUrl('/img/page-not-found.png'),
+ PRODUCT_NOT_FOUND: getImageUrl('/img/product-not-found.png'),
+} as const;
diff --git a/src/modules/CartPage/components/CartItem/CartItem.module.scss b/src/modules/CartPage/components/CartItem/CartItem.module.scss
index a3a96c94666..d46c9ce488b 100644
--- a/src/modules/CartPage/components/CartItem/CartItem.module.scss
+++ b/src/modules/CartPage/components/CartItem/CartItem.module.scss
@@ -41,19 +41,32 @@
}
}
-.image {
- width: 80px;
- height: 80px;
- object-fit: contain;
- flex-shrink: 0;
-}
+.link {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ gap: 16px;
+
+ .image {
+ width: 80px;
+ height: 80px;
+ object-fit: contain;
+ flex-shrink: 0;
+ }
-.name {
- @include body-text;
+ .name {
+ @include body-text;
- color: $color-primary;
- flex: 1;
- min-width: 120px;
+ color: $color-primary;
+ flex: 1;
+ min-width: 120px;
+ }
+
+ @include hover-scale;
+
+ &:hover .name {
+ color: $color-secondary;
+ }
}
diff --git a/src/modules/CartPage/components/CartItem/CartItem.tsx b/src/modules/CartPage/components/CartItem/CartItem.tsx
index 3cc09315975..3270dc8b674 100644
--- a/src/modules/CartPage/components/CartItem/CartItem.tsx
+++ b/src/modules/CartPage/components/CartItem/CartItem.tsx
@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
import { CartItem as CartItemType } from '../../../../types';
import { useCart } from '../../../../context';
import { getImageUrl } from '../../../../utils';
@@ -24,13 +25,18 @@ export const CartItem = ({ item }: Props) => {
- })
+
+
- {product.name}
+ {product.name}
+
{/* Quantity controls + price */}
diff --git a/src/modules/CategoryPage/components/ProductsList/ProductsList.tsx b/src/modules/CategoryPage/components/ProductsList/ProductsList.tsx
index 9fcdeafe460..ad24a80486b 100644
--- a/src/modules/CategoryPage/components/ProductsList/ProductsList.tsx
+++ b/src/modules/CategoryPage/components/ProductsList/ProductsList.tsx
@@ -4,12 +4,17 @@ import styles from './ProductsList.module.scss';
type Props = {
products: Product[];
+ showDiscount?: boolean;
};
-export const ProductsList = ({ products }: Props) => (
+export const ProductsList = ({ products, showDiscount = true }: Props) => (
{products.map(product => (
-
+
))}
);
diff --git a/src/modules/HomePage/HomePage.tsx b/src/modules/HomePage/HomePage.tsx
index faaa64d5d08..c9f87368922 100644
--- a/src/modules/HomePage/HomePage.tsx
+++ b/src/modules/HomePage/HomePage.tsx
@@ -78,7 +78,11 @@ export const HomePage = () => {
{loading &&
}
{!loading && error &&
Something went wrong. Please try again.
}
{!loading && !error && (
-
+
)}
diff --git a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
index bd6c3cfc983..6b6cacb2e3c 100644
--- a/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
+++ b/src/modules/HomePage/components/ProductsSlider/ProductsSlider.tsx
@@ -11,9 +11,14 @@ const STEP = CARD_WIDTH + GAP;
interface Props {
title: string;
products: Product[];
+ showDiscount?: boolean;
}
-export const ProductsSlider = ({ title, products }: Props) => {
+export const ProductsSlider = ({
+ title,
+ products,
+ showDiscount = true,
+}: Props) => {
const trackRef = useRef
(null);
const [offset, setOffset] = useState(0);
const [maxOffset, setMaxOffset] = useState(0);
@@ -89,7 +94,7 @@ export const ProductsSlider = ({ title, products }: Props) => {
>
{products.map(product => (
-
-
+
))}
diff --git a/src/modules/NotFoundPage/NotFoundPage.tsx b/src/modules/NotFoundPage/NotFoundPage.tsx
index 06a598d1983..364c7de372a 100644
--- a/src/modules/NotFoundPage/NotFoundPage.tsx
+++ b/src/modules/NotFoundPage/NotFoundPage.tsx
@@ -1,4 +1,4 @@
-import { getImageUrl } from '../../utils';
+import { NOTFOUND_IMAGES } from '../../constants';
import styles from './NotFoundPage.module.scss';
export const NotFoundPage = () => {
@@ -6,7 +6,7 @@ export const NotFoundPage = () => {
Page not found
})
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
index 7a8c186827a..dfa83f20923 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.module.scss
@@ -7,6 +7,15 @@
padding-bottom: 64px;
}
+.pageNotFound {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 24px;
+ padding-top: 56px;
+ text-align: center;
+}
+
// Back button
.back {
display: inline-flex;
@@ -31,9 +40,13 @@
.notFound {
@include h2;
+}
- text-align: center;
- padding: 80px 0;
+.notFoundImage {
+ width: 100%;
+ max-width: 560px;
+ height: auto;
+ object-fit: contain;
}
// Main: gallery + controls side-by-side on tablet+
diff --git a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
index f39364549dc..556df8233f4 100644
--- a/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
+++ b/src/modules/ProductDetailsPage/ProductDetailsPage.tsx
@@ -7,7 +7,7 @@ import {
} from '../../api';
import { Product, ProductDetails } from '../../types';
import { Category, CATEGORIES } from '../../types';
-import { ICONS } from '../../constants';
+import { ICONS, NOTFOUND_IMAGES } from '../../constants';
import { useCart } from '../../context';
import { useProducts } from '../../context';
import { getImageUrl } from '../../utils';
@@ -128,8 +128,13 @@ export const ProductDetailsPage = () => {
if (notFound || !details) {
return (
-
+
Product was not found
+
);
}
diff --git a/src/modules/shared/components/Header/Header.tsx b/src/modules/shared/components/Header/Header.tsx
index f0c97cd2e34..fc632f5c315 100644
--- a/src/modules/shared/components/Header/Header.tsx
+++ b/src/modules/shared/components/Header/Header.tsx
@@ -26,6 +26,7 @@ export const Header = () => {
to={AppRoutes.HOME}
className={styles.logo}
aria-label="Go to home"
+ onClick={() => setMenuOpen(false)}
>
diff --git a/src/modules/shared/components/ProductCard/ProductCard.tsx b/src/modules/shared/components/ProductCard/ProductCard.tsx
index 2fd906b1896..497a84ec531 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.tsx
+++ b/src/modules/shared/components/ProductCard/ProductCard.tsx
@@ -7,9 +7,10 @@ import styles from './ProductCard.module.scss';
interface Props {
product: Product;
+ showDiscount?: boolean;
}
-export const ProductCard = ({ product }: Props) => {
+export const ProductCard = ({ product, showDiscount = true }: Props) => {
const {
name,
price,
@@ -21,7 +22,7 @@ export const ProductCard = ({ product }: Props) => {
category,
itemId,
} = product;
- const hasDiscount = price !== fullPrice;
+ const hasDiscount = showDiscount && price !== fullPrice;
const { isFavorite, toggleFavorite } = useProducts();
const isInFavorites = isFavorite(product.id);
const { isInCart, addToCart } = useCart();
From 039580be12572614f127032e10c826df5277d2b7 Mon Sep 17 00:00:00 2001
From: Mykola Stanzh <149831982+Mykolyan@users.noreply.github.com>
Date: Fri, 8 May 2026 13:57:32 +0300
Subject: [PATCH 30/30] favourite button transition
---
.../shared/components/ProductCard/ProductCard.module.scss | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/modules/shared/components/ProductCard/ProductCard.module.scss b/src/modules/shared/components/ProductCard/ProductCard.module.scss
index 52283082961..8cf8e056dfa 100644
--- a/src/modules/shared/components/ProductCard/ProductCard.module.scss
+++ b/src/modules/shared/components/ProductCard/ProductCard.module.scss
@@ -123,6 +123,7 @@
font-weight: 700;
border: none;
cursor: pointer;
+ transition: box-shadow $transition;
@include hover-transition(box-shadow);
@@ -147,8 +148,10 @@
border: 1px solid $color-icons;
cursor: pointer;
flex-shrink: 0;
+ transition: box-shadow $transition;
+
+ @include hover-transition(box-shadow);
- @include hover-transition(border-color);
&:hover {
border-color: $color-primary;