From 19c858578047693d217f78e8060b740834a4d7ec Mon Sep 17 00:00:00 2001 From: denys Date: Sun, 16 Jun 2024 23:01:57 +0300 Subject: [PATCH] solution --- public/icons/svg/view-grid.svg | 10 ++++++++++ public/icons/svg/view-list.svg | 7 +++++++ src/components/NewHeader/NewHeader.scss | 3 +-- src/components/OldHeader/Header.scss | 2 +- src/pages/CartPage/CartItem/CartItem.scss | 23 +++++------------------ src/pages/EmptyCart/EmptyCart.scss | 2 +- src/pages/EmptyFav/EmptyFav.scss | 2 +- src/pages/ProductsPage/ProductsPage.scss | 11 ++++++++++- src/pages/ProductsPage/ProductsPage.tsx | 9 ++++++++- src/styles/utils/_icons.scss | 8 ++++++++ src/styles/utils/_mixins.scss | 2 -- src/utils/httpClient.ts | 11 ----------- 12 files changed, 52 insertions(+), 38 deletions(-) create mode 100644 public/icons/svg/view-grid.svg create mode 100644 public/icons/svg/view-list.svg diff --git a/public/icons/svg/view-grid.svg b/public/icons/svg/view-grid.svg new file mode 100644 index 0000000..2eb0928 --- /dev/null +++ b/public/icons/svg/view-grid.svg @@ -0,0 +1,10 @@ + + + + Layer 1 + + + + + + \ No newline at end of file diff --git a/public/icons/svg/view-list.svg b/public/icons/svg/view-list.svg new file mode 100644 index 0000000..ce6e35c --- /dev/null +++ b/public/icons/svg/view-list.svg @@ -0,0 +1,7 @@ + + + + Layer 1 + + + \ No newline at end of file diff --git a/src/components/NewHeader/NewHeader.scss b/src/components/NewHeader/NewHeader.scss index 3ea3646..3cf13a4 100644 --- a/src/components/NewHeader/NewHeader.scss +++ b/src/components/NewHeader/NewHeader.scss @@ -78,7 +78,6 @@ $button-size-tablet: 48px; left: 0; right: 0; height: 100vh; - // width: 100vw; background-color: var(--page-bg-color); transform: translateX(100%); transition: all $effect-duration; @@ -197,7 +196,7 @@ $button-size-tablet: 48px; width: 12px; border-radius: 50%; background-color: var(--color-red); - filter: var(--icon-filter); //new + filter: var(--icon-filter); position: absolute; bottom: 8px; diff --git a/src/components/OldHeader/Header.scss b/src/components/OldHeader/Header.scss index 120ec78..9b0211c 100644 --- a/src/components/OldHeader/Header.scss +++ b/src/components/OldHeader/Header.scss @@ -185,7 +185,7 @@ width: 12px; border-radius: 50%; background-color: var(--color-red); - filter: var(--icon-filter); //new + filter: var(--icon-filter); position: absolute; bottom: 8px; diff --git a/src/pages/CartPage/CartItem/CartItem.scss b/src/pages/CartPage/CartItem/CartItem.scss index 6aee6db..723ade8 100644 --- a/src/pages/CartPage/CartItem/CartItem.scss +++ b/src/pages/CartPage/CartItem/CartItem.scss @@ -52,44 +52,32 @@ &__product-link { display: flex; - // flex-basis: 25%; text-decoration: none; - - &--name { - // flex-basis: 60%; - - @include on-mobile { - // flex-basis: 45% - } - } } &__name { @include body-text; + font-weight: 600; transition: all $effect-duration; &:hover { text-decoration: underline; } - @include on-mobile { - // flex-basis: 100%; - } } &__count-buttons { - // margin-right: 40px; width: 96px; height: 32px; display: grid; justify-content: space-between; align-items: center; - // gap: 14px; flex-direction: column; grid-template-columns: 1fr 32px 1fr; justify-items: center; + @include body-text; - } + } &__button { min-width: 32px; @@ -113,10 +101,9 @@ justify-content: space-between; align-items: center; gap: 16px; + @include on-mobile { width: 100%; - // gap: 16px; - // justify-content: space-between; } } .gadget { @@ -127,8 +114,8 @@ justify-content: flex-start; align-items: center; gap: 24px; + @include on-mobile { - // width: 100%; gap: 16px; } } diff --git a/src/pages/EmptyCart/EmptyCart.scss b/src/pages/EmptyCart/EmptyCart.scss index 302149c..e3276b2 100644 --- a/src/pages/EmptyCart/EmptyCart.scss +++ b/src/pages/EmptyCart/EmptyCart.scss @@ -23,7 +23,7 @@ &__image-wrapper { display: flex; justify-content: center; - height: 300px; + height: 250px; margin-block: 32px; } diff --git a/src/pages/EmptyFav/EmptyFav.scss b/src/pages/EmptyFav/EmptyFav.scss index 06e3af9..71438d1 100644 --- a/src/pages/EmptyFav/EmptyFav.scss +++ b/src/pages/EmptyFav/EmptyFav.scss @@ -23,7 +23,7 @@ &__image-wrapper { display: flex; justify-content: center; - height: 300px; + height: 250px; margin-block: 32px; } diff --git a/src/pages/ProductsPage/ProductsPage.scss b/src/pages/ProductsPage/ProductsPage.scss index 1ff0ace..e6ebf5e 100644 --- a/src/pages/ProductsPage/ProductsPage.scss +++ b/src/pages/ProductsPage/ProductsPage.scss @@ -138,10 +138,19 @@ @include hover(border, 1px solid #89939a); @include active(scale, 0.95); + display: flex; + justify-content: center; + align-items: center; + height: 40px; + width: 40px; + height: 40px; - color: var(--color-primary); background-color: var(--page-bg-color); border: 1px solid #b4bdc3; cursor: pointer; } + &__view-icon { + height: 32px; + width: 32px; + } } diff --git a/src/pages/ProductsPage/ProductsPage.tsx b/src/pages/ProductsPage/ProductsPage.tsx index d1190ba..4457c35 100644 --- a/src/pages/ProductsPage/ProductsPage.tsx +++ b/src/pages/ProductsPage/ProductsPage.tsx @@ -1,5 +1,6 @@ import { FC, useEffect, useState } from 'react'; import { useSearchParams } from 'react-router-dom'; +import cn from 'classnames'; import { service } from '../../services/getAllProducts'; @@ -150,9 +151,15 @@ export const ProductsPage: FC = ({ category }) => {
diff --git a/src/styles/utils/_icons.scss b/src/styles/utils/_icons.scss index 596f9c3..6b2a6f5 100644 --- a/src/styles/utils/_icons.scss +++ b/src/styles/utils/_icons.scss @@ -119,4 +119,12 @@ border-color: var(--color-primary); } } + + &-list { + background-image: url('../../../public/icons/svg/view-list.svg'); + } + + &-grid { + background-image: url('../../../public/icons/svg/view-grid.svg'); + } } diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss index 33ac3fd..a550c42 100644 --- a/src/styles/utils/_mixins.scss +++ b/src/styles/utils/_mixins.scss @@ -39,8 +39,6 @@ } @mixin content-padding-inline { - // padding-inline: 32px; - @include on-tablet { padding-inline: 24px; } diff --git a/src/utils/httpClient.ts b/src/utils/httpClient.ts index 1091660..5e8e62e 100644 --- a/src/utils/httpClient.ts +++ b/src/utils/httpClient.ts @@ -1,14 +1,3 @@ -// const BASE_URL = `api`; - -// export function getData(url: string): Promise { -// return fetch(BASE_URL + url).then((response) => { -// if (!response.ok) { -// throw new Error(`${response.status} ${response.text}`); -// } -// return response.json(); -// }); -// } - const BASE_URL = `api`; function delay(ms: number): Promise {