feat: update product page and product card

Made changes to the design and content of the product page, and also updated the product card. The changes include an improved appearance, bug fixes, and updated product information.
healthy-food-and-dietary-products · Nov 17, 2023 · c398245 · c398245
1 parent 1dd1011
commit c398245
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 33 deletions.
diff --git a/src/assets/images/like-icon.svg b/src/assets/images/like-icon.svg
diff --git a/src/assets/images/review-star.svg b/src/assets/images/review-star.svg
diff --git a/src/components/Button/button.module.scss b/src/components/Button/button.module.scss
@@ -122,12 +122,12 @@
 	display: flex;
 	background-color: white;
 	align-items: center;
-	border: 1px solid $accent-color-bright-green;
+	border: 1px solid #59bf35;
 	border-radius: 16px;
-	padding: 16px;
-	max-width: 300px;
-	width: fit-content;
-	height: 40px;
+	padding: 8px 13px;
+	max-width: 140px;
+	width: 100%;
+	height: 49px;
 	cursor: pointer;
 
 	&:not(.green-border-button__active):hover {
@@ -161,12 +161,13 @@
 	display: flex;
 	background-color: $accent-color-bright-green;
 	align-items: center;
+	justify-content: center;
 	border: none;
 	border-radius: 16px;
-	padding: 16px;
+	padding: 8px 16px;
 	max-width: 140px;
-	width: fit-content;
-	height: 40px;
+	width: 100%;
+	height: 50px;
 	cursor: pointer;
 
 	&:not(.green-border-button__active):hover {

diff --git a/src/components/product-card/product-card.module.scss b/src/components/product-card/product-card.module.scss
@@ -66,21 +66,29 @@
 
 .card__cart-button {
 	background: #eaeaea;
-	padding: 8px 32px;
+	padding: 11px 32px;
 	border: none;
 	cursor: pointer;
-	color: $active-text-color;
+	color: #1a1a1a;
 	font-family: Ubuntu, Arial, sans-serif;
 	font-size: 18px;
 	font-weight: 400;
 	line-height: 140%;
 	border-radius: 16px;
+	max-width: 153px;
+
+	&:hover {
+		color: white;
+		background-color: $accent-color-bright-green;
+	}
+
+	transition: 0.3s;
 }
 
 .card__like-button {
 	background-image: url('@images/like-icon.svg');
-	width: 24px;
-	height: 24px;
+	width: 28px;
+	height: 28px;
 	object-fit: cover;
 	object-position: center;
 	border: none;

diff --git a/src/pages/category/index.tsx b/src/pages/category/index.tsx
@@ -14,6 +14,9 @@ type CategoryType = {
 	amount: string;
 	photo: string;
 	top_three_products: Record<string, unknown>[];
+	category: {
+		category_name: string;
+	};
 };
 
 const Category: React.FC = () => {
@@ -34,6 +37,8 @@ const Category: React.FC = () => {
 			});
 	}, [category]);
 
+	console.log(categoryItem);
+
 	useEffect(() => {
 		window.scrollTo(0, 0);
 	}, []);
@@ -55,7 +60,9 @@ const Category: React.FC = () => {
 							<p>↑это картинка заглушка↑</p>
 						</div>
 						<div className={styles['category__product']}>
-							<h1 className={styles['category__product-title']}>Овощи</h1>
+							<h1 className={styles['category__product-title']}>
+								{categoryItem[0].category.category_name}
+							</h1>
 							<ul className={styles['product__product-container']}>
 								{categoryItem.map((item) => (
 									<li key={item.id}>

diff --git a/src/pages/product/index.tsx b/src/pages/product/index.tsx
@@ -4,6 +4,7 @@ import Button from '@components/Button';
 import { useParams } from 'react-router';
 import api from '@services/api.ts';
 import Preloader from '@components/preloader';
+import ReviewStar from '@images/review-star.svg';
 
 type ProductItem = {
 	id: number;
@@ -80,12 +81,17 @@ const Product: React.FC = () => {
 						<div className={styles.product__info}>
 							<div className={styles.product__container}>
 								<h2 className={styles.product__title}>{productItem.name}</h2>
-
-								<p className={`text_type_u ${styles.product__text}`}>
-									Арт. {productItem.id}
-								</p>
+								<div className={styles.product__details}>
+									<p className={`text_type_u ${styles.product__text}`}>
+										Арт. {productItem.id}
+									</p>
+									<div className={styles.product__rating}>
+										<img src={ReviewStar} alt="Иконка для отзывов" />
+										<p className={styles.product__ratingValue}>4</p>
+									</div>
+									<p className={styles.product__reviews}>2 отзыва</p>
+								</div>
 							</div>
-
 							<h2 className={styles.product__price}>{productItem.price} руб. / кг</h2>
 							<div className={styles.product__btns}>
 								<Button
@@ -113,32 +119,36 @@ const Product: React.FC = () => {
 							{productItem.description}
 						</p>
 						<div className={`${styles.product__addition}`}>
-							<p className="text-m">Производитель</p>
+							<p className="text-xl">Срок годности</p>
+							<p className={`text_type_u ${styles.product__description}`}>5 суток</p>
+						</div>
+						<div className={`${styles.product__addition}`}>
+							<p className="text-xl">Производитель</p>
 							<p className={`text_type_u ${styles.product__description}`}>
-								{productItem.producer.producer_name}
+								{`«${productItem.producer.producer_name}»`}
 							</p>
 						</div>
 						<div className={`${styles.product__addition}`}>
-							<p className="text-m">Энергетическая ценность (на 100гр.)</p>
+							<p className="text-xl">Энергетическая ценность (на 100гр.)</p>
 							<div className={styles.product__table}>
 								<div className={styles.product__container}>
-									<p className="text">белки</p>
-									<p className="text">{productItem.proteins}г</p>
+									<p className="text-x">белки</p>
+									<p className="text-x">{productItem.proteins}г</p>
 								</div>
 								<div className={styles.border_vertical}></div>
 								<div className={styles.product__container}>
-									<p className="text">жиры</p>
-									<p className="text">{productItem.fats}г</p>
+									<p className="text-x">жиры</p>
+									<p className="text-x">{productItem.fats}г</p>
 								</div>
 								<div className={styles.border_vertical}></div>
 								<div className={styles.product__container}>
-									<p className="text">углеводы</p>
-									<p className="text">{productItem.carbohydrates}г</p>
+									<p className="text-x">углеводы</p>
+									<p className="text-x">{productItem.carbohydrates}г</p>
 								</div>
 								<div className={styles.border_vertical}></div>
 								<div className={styles.product__container}>
-									<p className="text">калорийность</p>
-									<p className="text">{productItem.kcal}г</p>
+									<p className="text-x">калорийность</p>
+									<p className="text-x">{productItem.kcal}г</p>
 								</div>
 							</div>
 						</div>

diff --git a/src/pages/product/product.module.scss b/src/pages/product/product.module.scss
@@ -41,6 +41,8 @@
 }
 
 .product__info {
+	max-width: 500px;
+	width: 100%;
 	display: flex;
 	flex-direction: column;
 	gap: 28px;
@@ -50,6 +52,33 @@
 	font-size: 36px;
 }
 
+.product__details {
+	display: flex;
+	align-items: center;
+	gap: 20px;
+	color: var(--active, #1a1a1a);
+	font-family: $ubuntu-font;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 140%;
+}
+
+.product__rating {
+	display: flex;
+	align-items: center;
+}
+
+.product__ratingValue {
+	font-size: 20px;
+	margin: 0 0 0 5px;
+}
+
+.product__reviews {
+	color: var(--hint, #2180b6);
+	font-size: 18px;
+	margin: 0;
+}
+
 .product__container {
 	display: flex;
 	flex-direction: column;
@@ -75,14 +104,19 @@
 }
 
 .product__image {
+	max-width: 415px;
+	width: 100%;
+	max-height: 232px;
+	height: 100%;
 	border-radius: 20px;
 	object-fit: cover;
 	object-position: center;
 	background-repeat: no-repeat;
-	max-width: 100%;
+	box-shadow: 2px 2px 20px 0 rgb(0 0 0 / 51%);
 }
 
 .product__subinfo {
+	margin-top: 28px;
 	display: flex;
 	flex-direction: column;
 	gap: 32px;
@@ -103,7 +137,7 @@
 	border: 1px solid $unactive-text-color;
 	justify-content: center;
 	align-items: center;
-	padding: 6px 12px;
+	padding: 16px 12px;
 	text-align: center;
 }
 

diff --git a/src/scss/base.scss b/src/scss/base.scss
@@ -42,6 +42,21 @@ h3 {
 	line-height: 140%;
 }
 
+.text-xl {
+	@extend %text;
+
+	font-family: $ubuntu-font;
+	font-size: 22px;
+	font-weight: 500;
+}
+
+.text-x {
+	@extend %text;
+
+	font-family: $ubuntu-font;
+	font-size: 20px;
+}
+
 .text-s {
 	@extend %text;