renamed: .history/styles/globals_20220618175549.scss -> .history/styles/globals_20220719150752.scss

modified:   README.md
	modified:   components/customer/pages/index/block/Categories/Categories.tsx
	renamed:    styles/components/block/Categories.scss -> components/customer/pages/index/block/Categories/styles/Categories.scss
	modified:   components/customer/pages/index/modals/cart/cardAdditionally.tsx
	modified:   components/customer/pages/index/modals/cart/cardBasketProduct.tsx
	modified:   components/customer/pages/index/modals/cart/content.tsx
	new file:   components/customer/pages/index/modals/cart/styles/_additionally.scss
	modified:   components/customer/pages/index/modals/cart/styles/index.scss
	modified:   components/customer/pages/index/modals/cart/styles/product_box.scss
	modified:   styles/globals.scss

.history/README_20220719165057.md

@@ -0,0 +1,24 @@
+Сайт для сервиса доставки пиццы.
+
+[Ссылка на сайт](https://pizza.krasnikov.pro/)
+
+### Задания на изменения
+1. [x] Исправить размер модального окна с добавление пиццы в корзину
+2. [x] Перенести кнопку закрытия модального окна в верхний левый угол
+
+### Изменения 11.07.22
+1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
+2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта.
+
+### Изменения 18.07.22
+1. Перенес кнопку закрыть карточку в верхний правый угол.
+2. Настроил автоматическое изменение размеров модального окна с пиццей.
+3. Изменил кнопку закрытия корзины.
+
+### Изменения 19.07.22
+1. Перерисовал корзину под новый дизайн.

.history/README_20220719165140.md

@@ -0,0 +1,24 @@
+Сайт для сервиса доставки пиццы.
+
+[Ссылка на сайт](https://pizza.krasnikov.pro/)
+
+### Задания на изменения
+1. [x] Исправить размер модального окна с добавление пиццы в корзину
+2. [x] Перенести кнопку закрытия модального окна в верхний левый угол
+
+### Изменения 11.07.22
+1. Изменил размеры модального окна с карточкой пиццы под разные расширения экрана.
+2. Изменил внутренни размеры компонентов модального окна, что бы все помещались.
+3. Убрал появление синего цвета при нажатии.
+
+### Изменения 12.07.22
+1. Изменил расположение нижней панели карточки пиццы.
+2. Перенастроил корзину. Но пака не доделал новый дизайн карточки продукта.
+
+### Изменения 18.07.22
+1. Перенес кнопку закрыть карточку в верхний правый угол.
+2. Настроил автоматическое изменение размеров модального окна с пиццей.
+3. Изменил кнопку закрытия корзины.
+
+### Изменения 19.07.22
+1. Перерисовал корзину под новый дизайн только для компьютерной версии.

.history/components/customer/pages/index/block/Categories/Categories_20220528230020.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon')}
+            id={type}>{name}
+        </a>
+    )
+}

.history/components/customer/pages/index/block/Categories/Categories_20220719150640.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon button_border_radius_8')}
+            id={type}>{name}
+        </a>
+    )
+}

.history/components/customer/pages/index/block/Categories/Categories_20220719150935.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon button_border_radius_30')}
+            id={type}>{name}
+        </a>
+    )
+}

.history/components/customer/pages/index/block/Categories/Categories_20220719150957.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon button_border_radius_30')}
+            id={type}>{name}
+        </a>
+    )
+}

.history/components/customer/pages/index/block/Categories/Categories_20220719154850.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+    type: string;
+    name: string;
+  };
+
+  export const CategoriesButton: React.FC<Props> = ({type, name}) => {
+    return(
+        <a
+            href={"#"+type}
+            className={classNames('button melon button_border_radius_8')}
+            id={type}>{name}
+        </a>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162727.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+
+        <div className={'card_additionally'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162736.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {''}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162738.tsx

@@ -8,6 +8,7 @@ type Props = {
 
 export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
     return(
+        
         <div className={'card_additionally_box'}>
             <Image
                 className = {'pictureText_img'}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162830.tsx

@@ -8,6 +8,7 @@ type Props = {
 
 export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
     return(
+        
         <div className={'card_additionally_box'}>
             <Image
                 className = {'pictureText_img'}
@@ -16,8 +17,7 @@ export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
                 width={106}
                 height={106}
             />
+            <p className={'text'}></p>
         </div>
     )
 }
-
-export default CardAdditionally;

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719162851.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {'pictureText_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+            <p className={'text'}>Coca-Cola</p>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164146.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        
+        <div className={'card_additionally_box'}>
+            <Image
+                className = {'additionally_img'}
+                src={src}
+                alt={alt}
+                width={106}
+                height={106}
+            />
+            <p className={'text'}>Coca-Cola</p>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardAdditionally_20220719164420.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Image from 'next/image';
+
+type Props = {
+    src: string,
+    alt: string,
+};
+
+export const CardAdditionally: React.FC<Props> = ({src, alt}) => {
+    return(
+        
+        <div className={'card_additionally_box'}>
+            <div className={'card_additionally_img_box'}>
+                <Image
+                    className = {'additionally_img'}
+                    src={src}
+                    alt={alt}
+                    width={106}
+                    height={106}
+                />
+            </div>
+            <p className={'text'}>Coca-Cola</p>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065139.tsx

@@ -1,44 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Image from 'next/image';
-
-type Props = {  src: string,
-                alt: string,
-                title_name: string,
-                title_size: string,
-                sum: number,
-            };
-
-export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
-    const [countProduct, setcountProduct] = useState(1);
-    const [price, setPrice] = useState(sum);
-
-    return(
-        <div className={'card_basket_product_main'}>
-            <div className = {'card_basket_product_img'}>
-                <Image
-                    className = {'pictureText_img'}
-                    src={src}
-                    alt={alt}
-                    width={63}
-                    height={60}
-                />
-            </div>
-            <div className={'card_basket_product_box_title'}>
-                <p className={'card_basket_product_title'}>{title_name}</p>
-                <p className={'card_basket_product_size'}>{title_size}</p>
-            </div>
-
-           <div className={'card_basket_product_sale_box_button'}>
-                <button className='card_basket_product_button'>-</button>
-                <p className='card_basket_product_count'>{countProduct}</p>
-                <button className='card_basket_product_button'>+</button>
-           </div>
-
-           <div className={'card_basket_product_sale_box_price'}>
-                <p className='card_basket_product_price'>{price} ₽</p>
-           </div>
-        </div>
-    )
-}
-
-export default CardBasketProduct;

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618065724.tsx

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Image from 'next/image';
-
-type Props = {  src: string,
-                alt: string,
-                title_name: string,
-                title_size: string,
-                sum: number,
-            };
-
-export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
-    const [countProduct, setcountProduct] = useState(1);
-    const [price, setPrice] = useState(sum);
-
-    return(
-        <div className={'card_basket_product_main'}>
-            <div className = {'card_basket_product_img'}>
-                <Image
-                    className = {'pictureText_img'}
-                    src={src}
-                    alt={alt}
-                    width={63}
-                    height={60}
-                />
-            </div>
-            <div className={'card_basket_product_box_title'}>
-                <p className={'card_basket_product_title'}>{title_name}</p>
-                <p className={'card_basket_product_size'}>{title_size}</p>
-            </div>
-
-           <div className={'card_basket_product_sale_box_button'}>
-                <button className='card_basket_product_button'>-</button>
-                <p className='card_basket_product_count'>{countProduct}</p>
-                <button className='card_basket_product_button'>+</button>
-           </div>
-
-           <div className={'card_basket_product_sale_box_price'}>
-                <p className='card_basket_product_price'>{price} ₽</p>
-           </div>
-        </div>
-    )
-}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220618083211.tsx

@@ -1,42 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import Image from 'next/image';
-
-type Props = {  src: string,
-                alt: string,
-                title_name: string,
-                title_size: string,
-                sum: number,
-            };
-
-export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
-    const [countProduct, setcountProduct] = useState(1);
-    const [price, setPrice] = useState(sum);
-
-    return(
-        <div className={'card_basket_product_main'}>
-            <div className = {'card_basket_product_img'}>
-                <Image
-                    className = {'pictureText_img'}
-                    src={src}
-                    alt={alt}
-                    width={63}
-                    height={60}
-                />
-            </div>
-            <div className={'card_basket_product_box_title'}>
-                <p className={'card_basket_product_title'}>{title_name}</p>
-                <p className={'card_basket_product_size'}>{title_size}</p>
-            </div>
-
-           <div className={'card_basket_product_sale_box_button'}>
-                <button className='card_basket_product_button'>-</button>
-                <p className='card_basket_product_count'>{countProduct}</p>
-                <button className='card_basket_product_button'>+</button>
-           </div>
-
-           <div className={'card_basket_product_sale_box_price'}>
-                <p className='card_basket_product_price'>{price} ₽</p>
-           </div>
-        </div>
-    )
-}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152308.tsx

@@ -13,7 +13,7 @@ export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_
     const [price, setPrice] = useState(sum);
 
     return(
-        <div className={'product_main'}>
+        <div className={'card_basket_product_main'}>
             <div className = {'product_img'}>
                 <Image
                     className = {'pictureText_img'}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152550.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="card_basket_product_head">
+                <div className = {'product_img'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'card_basket_product_box_title'}>
+                    <p className={'card_basket_product_title'}>{title_name}</p>
+                    <p className={'card_basket_product_size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}> 
+                <div className={'card_basket_product_sale_box_button'}>
+                    <button className='card_basket_product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='card_basket_product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152649.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'card_basket_product_box_title'}>
+                    <p className={'card_basket_product_title'}>{title_name}</p>
+                    <p className={'card_basket_product_size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}>
+                <div className={'card_basket_product_sale_box_button'}>
+                    <button className='card_basket_product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='card_basket_product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152711.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'product_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'card_basket_product_box_title'}>
+                    <p className={'card_basket_product_title'}>{title_name}</p>
+                    <p className={'card_basket_product_size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}>
+                <div className={'card_basket_product_sale_box_button'}>
+                    <button className='card_basket_product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='card_basket_product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719152808.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'card_basket_product_box_title'}>
+                    <p className={'card_basket_product_title'}>{title_name}</p>
+                    <p className={'card_basket_product_size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}>
+                <div className={'card_basket_product_sale_box_button'}>
+                    <button className='card_basket_product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='card_basket_product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719153128.tsx

@@ -0,0 +1,35 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+            
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719154935.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}>
+                <div className={'card_basket_product_sale_box_button'}>
+                    <button className='card_basket_product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='card_basket_product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155231.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'card_basket_product_footer'}>
+                <div className={'sale_button_box'}>
+                    <button className='product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155323.tsx

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+            <div className={'product_footer'}>
+                <div className={'sale_button_box'}>
+                    <button className='product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719155451.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+
+            <div className={'product_footer'}>
+                <div className={'sale_button_box'}>
+                    <button className='product_button'>-</button>
+                    <p className='card_basket_product_count'>{countProduct}</p>
+                    <button className='product_button'>+</button>
+                </div>
+
+                <div className={'card_basket_product_sale_box_price'}>
+                    <p className='card_basket_product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719161854.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+
+            <div className={'product_footer'}>
+                <div className={'sale_button_box'}>
+                    <button className='product_button'>-</button>
+                    <p className='product_count'>{countProduct}</p>
+                    <button className='product_button'>+</button>
+                </div>
+
+                <div className={'sale_box_price'}>
+                    <p className='product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/cardBasketProduct_20220719162106.tsx

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+
+type Props = {  src: string,
+                alt: string,
+                title_name: string,
+                title_size: string,
+                sum: number,
+            };
+
+export const CardBasketProduct: React.FC<Props> = ({src, alt, title_name, title_size, sum}) => {
+    const [countProduct, setcountProduct] = useState(1);
+    const [price, setPrice] = useState(sum);
+
+    return(
+        <div className={'card_basket_product_main'}>
+            <div className="product_head">
+                <div className = {'product_img_box'}>
+                    <Image
+                        className = {'pictureText_img'}
+                        src={src}
+                        alt={alt}
+                        width={63}
+                        height={60}
+                    />
+                </div>
+                <div className={'title_box'}>
+                    <p className={'title'}>{title_name}</p>
+                    <p className={'size'}>{title_size}</p>
+                </div>
+            </div>
+
+            <div className={'product_footer'}>
+                <div className={'sale_button_box'}>
+                    <button className='product_button'>-</button>
+                    <p className='product_count'>{countProduct}</p>
+                    <button className='product_button'>+</button>
+                </div>
+
+                <div className={'sale_box_price'}>
+                    <p className='product_price'>{price} ₽</p>
+                </div>
+            </div>
+        </div>
+    )
+}

.history/components/customer/pages/index/modals/cart/content_20220719150122.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719150904.tsx

@@ -0,0 +1,110 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([{name:'Ggg', size:'30 ffv', sum:345}, {name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345},{name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719151106.tsx

@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+                <button className='button' type="submit">Применить</button>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719151152.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719151252.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >Итого </p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719152036.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p><b>Итого</b></p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719152124.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар(а)</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p><b>Итого</b> </p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719152205.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345},
+                                            {name:'Ggg', size:'30 ffv', sum:345}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар на {sum} р</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p><b>Итого</b> </p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719153318.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
+                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
+                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар на {sum} р</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p><b>Итого</b> </p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_8'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/content_20220719154858.tsx

@@ -0,0 +1,114 @@
+import React, { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from "next/link";
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { HiMinus, HiPlus } from "react-icons/hi";
+import { CardBasketProduct, CardAdditionally } from './'
+import {  BoxScroll, Box } from '../../../../../../components/customer/containers';
+import {ButtonImg, Button } from '../../../../../UI';
+
+type PizzaProps = {
+  id: number;
+  title: string;
+  heft: string[];
+  description: string;
+  img: string[];
+  price: string[];
+  size: string[];
+};
+
+const types=[0,1], sizes=[30,40,50], sum=0, typeNames = ['традиционное тесто','тонкое тесто'] ;
+
+export const PizzaModalsContentCart: React.FC<PizzaProps> = ({
+  id,
+  title,
+  img,
+  heft,
+  description,
+  price,
+  size,
+}) => {
+    //const { totalPrice, totalCount } = useSelector(({ cart }) => cart);
+    const totalCount =0;
+    const [basket, setBasket] = useState([  {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
+                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500},
+                                            {name:'Пипперони', size:'Середняя 30 см, традиционное тесто', sum:500}]);
+    const [quantityGoods, setQuantityGoods] = useState(basket.length);
+    const [additionally, setAdditionally] = useState([{src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},
+                                                    {src:'/assets/img/coca.png', name: 'Coca', price: 100},]);
+
+    const [delivery, setDelivery] = useState(0);
+
+    const [sum, setSum] = useState<number>(0);
+
+    const addBasket = () => {
+        console.log('add');
+    }
+
+
+
+  return (
+    <>
+        <Link href={"/"} as={"/"}>
+            <i className={classNames('button_close')}>
+                <svg className='svg' width="25" height="25" viewBox="0 0 25 25" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M9.84606 12.4986L0.552631 3.20519C-0.1806 2.47196 -0.1806 1.28315 0.552631 0.549923C1.28586 -0.183308 2.47466 -0.183308 3.20789 0.549923L12.5013 9.84335L21.792 0.552631C22.5253 -0.1806 23.7141 -0.1806 24.4473 0.552631C25.1805 1.28586 25.1805 2.47466 24.4473 3.20789L15.1566 12.4986L24.45 21.792C25.1832 22.5253 25.1832 23.7141 24.45 24.4473C23.7168 25.1805 22.528 25.1805 21.7947 24.4473L12.5013 15.1539L3.20519 24.45C2.47196 25.1832 1.28315 25.1832 0.549923 24.45C-0.183308 23.7168 -0.183308 22.528 0.549923 21.7947L9.84606 12.4986Z" ></path>
+                </svg>
+            </i>
+        </Link>
+        <div className='header'>
+            <p>{totalCount} товар на {sum} р</p>
+        </div>
+        <div className='body'>
+            <div className='body_order'>
+                {Object.keys(basket).length > 0 ? basket.map((rows, count) =>
+                    <CardBasketProduct
+                        key={count}
+                        src={'/assets/img/smal_pizza.png'}
+                        alt={'pizza'}
+                        title_name={rows.name}
+                        title_size={rows.size}
+                        sum={rows.sum}/>
+                    ): ' Корзина пуста'}
+            </div>
+            <div className='body_additionally'>
+                <p className='body_additionally_text'>Добавить к заказу?</p>
+                    <BoxScroll>
+                        {additionally.map((name, count) =>
+                            <CardAdditionally key={count} alt={'pizza'} src={name.src}/>)
+                        }
+                    </BoxScroll>
+            </div>
+        </div>
+        <div className='basket_footer'>
+            <div className='promo_code_box'>
+                <input className='input' type="text" name="promo_code" id="promo_code" placeholder="Промокод"/>
+            </div>
+            <div className='check'>
+                <div className='box'>
+                    <p >Доставка </p> <p className='text'>{delivery} ₽</p>
+                </div>
+                <div className='box'>
+                    <p >{quantityGoods} товар(а) </p>
+                    <p className='text'>{sum} ₽</p>
+                </div>
+                <div className='box'>
+                    <p><b>Итого</b> </p> <p className='text'>{delivery} ₽</p>
+                </div>
+            </div>
+            <Link href={"/"} as={"/"}>
+                <Button styles={'yellow button_size_48 button_border_radius_30'}
+                        align={'button_align_center'}
+                        onClick={() => console.log('add')}>Оформить заказ {sum} ₽
+                </Button>
+            </Link>
+        </div>
+    </>
+  );
+};
+
+

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719162906.scss

@@ -0,0 +1,3 @@
+.card_additionally_box{
+    
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719163328.scss

@@ -0,0 +1,5 @@
+.card_additionally_box{
+    height: 110px;
+    width: 110px;
+    background: white;
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164142.scss

@@ -0,0 +1,10 @@
+.card_additionally_box{
+    height: 110px;
+    width: 110px;
+    background: white;
+
+    .additionally_img {
+        height: 80px;
+        width: 80px;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164239.scss

@@ -0,0 +1,14 @@
+.card_additionally_box{
+    min-width: 110px;
+    height: 80px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display: inline-block;
+    background: white;
+
+    .additionally_img {
+        height: 80px;
+        width: 80px;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164423.scss

@@ -0,0 +1,14 @@
+.card_additionally_box{
+    min-width: 110px;
+    height: 80px;
+    border-radius: 14px;
+    margin: 10px 10px 10px 0;
+    position: relative;
+    display: inline-block;
+    background: white;
+
+    .card_additionally_img_box {
+        height: 80px;
+        width: 80px;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164711.scss

@@ -0,0 +1,14 @@
+.card_additionally_box{
+    min-width: 100px;
+    height: 105px;
+    border-radius: 14px;
+    margin-left: 10px;
+    position: relative;
+    display: inline-block;
+    background: white;
+
+    .card_additionally_img_box {
+        height: 80px;
+        width: 80px;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164736.scss

@@ -0,0 +1,16 @@
+.card_additionally_box{
+    min-width: 100px;
+    height: 105px;
+    border-radius: 14px;
+    margin-left: 10px;
+    position: relative;
+    display: inline-block;
+    background: white;
+    text-align: center;
+
+    .card_additionally_img_box {
+        height: 80px;
+        width: 80px;
+        text-align: center;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164855.scss

@@ -0,0 +1,19 @@
+.card_additionally_box{
+    min-width: 100px;
+    height: 105px;
+    border-radius: 14px;
+    margin-left: 10px;
+    position: relative;
+    display: inline-block;
+    background: white;
+    text-align: center;
+
+    .card_additionally_img_box {
+        height: 80px;
+        width: 80px;
+        text-align: center;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/_additionally_20220719164953.scss

@@ -0,0 +1,19 @@
+.card_additionally_box{
+    min-width: 100px;
+    height: 105px;
+    border-radius: 14px;
+    margin-left: 10px;
+    position: relative;
+    display: inline-block;
+    background: white;
+    text-align: center;
+
+    .card_additionally_img_box {
+        height: 80px;
+        width: 80px;
+        text-align: center;
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/additionally_20220719162907.scss

@@ -0,0 +1,3 @@
+.card_additionally_box{
+    
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151653.scss

@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+
+                    .box{
+                        border-bottom: 1px dashed #8E8E93;
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151720.scss

@@ -0,0 +1,140 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151802.scss

@@ -0,0 +1,140 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151854.scss

@@ -0,0 +1,140 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 15px 0px 0px 0px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151908.scss

@@ -0,0 +1,140 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151948.scss

@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 5px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719151951.scss

@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 10px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719152000.scss

@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background-color: #fefefe;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719154354.scss

@@ -0,0 +1,141 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background: #F7F7F7;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719163005.scss

@@ -0,0 +1,142 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background: #F7F7F7;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+                @import 'ingredients';
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/index_20220719163027.scss

@@ -0,0 +1,142 @@
+.pizza_modal_cart {
+    display: block; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 100; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+
+    .dialog {
+        /* Modal Content */
+        .content {
+            background: #F7F7F7;
+            margin: auto;
+            @media (max-width:760px) {
+                height: 533px;
+                width: 400px;
+                margin: 0 auto;
+            }
+
+            @media (min-width:780px) {
+                height: 100vh;
+                min-height: 600px;
+                width: 430px;
+                position: absolute;
+                right: 0;
+                left: unset !important;
+            }
+
+            .button_close{
+                right: 450px;
+                position: absolute;
+                font-size: 40px;
+                top: 45%;
+                border: 0px solid #fff;
+                color: #FFFFFF;
+                background-color: rgba(255, 255, 255, 0);
+
+                svg{
+                    fill: #fff;
+                }
+                svg:hover{
+                    transform: scale(1.2);
+                }
+            }
+
+            .header{
+                width: 430px;
+                height: 49px;
+                padding: 15px;
+                background-color: #FFFFFF;
+            }
+
+            .body{
+                height: calc(100vh - 690px);
+                width: 100%;
+            }
+
+            .body_order{
+                width: 100%;
+                height: 200%;
+                position: relative;
+                overflow-y: scroll;
+
+                @import './product_box.scss';
+            }
+
+            .body_additionally{
+                width: 100%;
+                position: relative;
+                @import './additionally.scss';
+            }
+
+            .body_additionally_text{
+                font-size: 18px;
+                line-height: 21px;
+                letter-spacing: 0.02em;
+                padding: 10px;
+            }
+
+            .basket_footer{
+                position: inherit;
+                bottom: 0;
+                width: 430px;
+                background-color: #FFFFFF;
+                margin-bottom: 10px;
+
+                .promo_code_box{
+                    flex: none;
+                    padding: 5px;
+                    order: 0;
+                    flex-grow: 1;
+                    margin: 0px 12px;
+                    border-bottom: 1px dashed #8E8E93;
+
+                    .input{
+                        border: none;
+                        margin: 0;
+                        outline: none;
+                        -webkit-appearance: none;
+                        color: #252A48;
+                        font-size: 18px;
+                        height: 38px;
+                    }
+
+                    .button{
+                        border: none;
+                        margin: 0;
+                        padding: 0;
+                        font-size: 18px;
+                        line-height: 30px;
+                        color: #1C80E3;
+                        cursor: pointer;
+                        transition: color .2s;
+
+                        &:hover{
+                            color: lighten(#000000, 10%);
+                        }
+                    }
+                }
+
+                .check{
+                    font-size: 18px;
+                    line-height: 28px;
+                    padding: 0px 0px 0px 15px;
+                    margin-bottom: 15px;
+                    border-bottom: 1px dashed #8E8E93;
+                    .box{
+                        display: flex;
+                        margin-top: 6px;;
+                        .text{
+                            right: 30px;
+                            position: absolute;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152329.scss

@@ -0,0 +1,55 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_img{
+        margin: 10px;
+    }
+}
+
+
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152644.scss

@@ -0,0 +1,58 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        .product_img{
+            margin: 10px;
+        }
+    }
+   
+}
+
+
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152806.scss

@@ -0,0 +1,58 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+         .product_img_box{
+        margin: 10px;
+    }
+    }
+   
+}
+
+
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152820.scss

@@ -0,0 +1,57 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        .product_img_box{
+            margin: 10px;
+        }
+    }
+}
+
+
+
+.card_basket_product_box_title{
+    margin: 10px;
+}
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152901.scss

@@ -0,0 +1,60 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+        }
+    }
+}
+
+
+
+
+
+.card_basket_product_title{
+   /* font-size: 20px; */
+    line-height: 24px;
+}
+
+.card_basket_product_size{
+    font-weight: 400;
+    font-size: 16px;
+    background: #FED11E;
+    border-radius: 8px;
+    width: 60px;
+    padding: 5px;
+    text-align: center;
+}
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719152948.scss

@@ -0,0 +1,63 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                /* font-size: 20px; */
+                 line-height: 24px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+                 background: #FED11E;
+                 border-radius: 8px;
+                 width: 60px;
+                 padding: 5px;
+                 text-align: center;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153356.scss

@@ -0,0 +1,58 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                /* font-size: 20px; */
+                 line-height: 24px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153427.scss

@@ -0,0 +1,64 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                /* font-size: 20px; */
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                /* identical to box height */
+
+                letter-spacing: 0.02em;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153439.scss

@@ -0,0 +1,61 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153628.scss

@@ -0,0 +1,62 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+
+        .product_img_box{
+            margin: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719153809.scss

@@ -0,0 +1,62 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 0px 10px 10px 10px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154245.scss

@@ -0,0 +1,64 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719154804.scss

@@ -0,0 +1,64 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+}
+
+
+
+
+
+
+.card_basket_product_sale_box_button{
+    display: flex;
+    margin-left: 5px;
+}
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155053.scss

@@ -0,0 +1,68 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .card_basket_product_footer{
+        .sale_button_box{
+            display: flex;
+            margin-left: 5px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155141.scss

@@ -0,0 +1,78 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .card_basket_product_footer{
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_button{
+    font-size: 35px;
+}
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155417.scss

@@ -0,0 +1,90 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0px;
+        gap: 238px;
+
+        width: 398px;
+        height: 32px;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            .product_button{
+                font-size: 3px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719155533.scss

@@ -0,0 +1,82 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: inline-flex;
+
+    .product_head{
+        display: contents;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+     
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            .product_button{
+                font-size: 3px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160559.scss

@@ -0,0 +1,82 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 80px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            .product_button{
+                font-size: 3px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160705.scss

@@ -0,0 +1,82 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            .product_button{
+                font-size: 3px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+.card_basket_product_count{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719160816.scss

@@ -0,0 +1,84 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            .product_button{
+                font-size: 3px;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161037.scss

@@ -0,0 +1,87 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 0px;
+            position: absolute;
+
+            .product_button{
+                font-size: 3px;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161216.scss

@@ -0,0 +1,89 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 5px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 3px;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161221.scss

@@ -0,0 +1,89 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 10px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 3px;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161226.scss

@@ -0,0 +1,89 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 3px;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161436.scss

@@ -0,0 +1,92 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 20px;
+                padding: 0;
+                border: none;
+                background: none;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161454.scss

@@ -0,0 +1,93 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 20px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161540.scss

@@ -0,0 +1,93 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 24px;
+                padding: 28px 5px 3px 5px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161648.scss

@@ -0,0 +1,93 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 24px;
+                margin-top: 11px;
+            }
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+.card_basket_product_price{
+    font-size: 24px;
+    padding: 28px 5px 3px 5px;
+}
+
+.card_basket_product_sale_box_price{
+    margin-left: 10px;
+}

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161855.scss

@@ -0,0 +1,94 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 24px;
+                margin-top: 11px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+        
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161858.scss

@@ -0,0 +1,94 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 24px;
+                margin-top: 11px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161930.scss

@@ -0,0 +1,94 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 20px;
+                margin-top: 11px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719161954.scss

@@ -0,0 +1,93 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 20px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162213.scss

@@ -0,0 +1,94 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+                color: #8E8E93;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 20px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/components/customer/pages/index/modals/cart/styles/product_box_20220719162221.scss

@@ -0,0 +1,94 @@
+.card_basket_product_main{
+    width:  95%;
+    height: 133px;
+    margin: 10px 10px 10px 10px;
+    padding: 10px 10px 10px 0px;
+    background: #FFFFFF;
+    border-radius: 10px;
+    display: grid;
+
+    .product_head{
+        display: flex;
+        border-bottom: 1px dashed #8E8E93;
+        .product_img_box{
+            margin-left: 10px;
+        }
+
+        .title_box{
+            margin: 10px;
+
+            .title{
+                line-height: 24px;
+                font-weight: 400;
+                font-size: 20px;
+                line-height: 24px;
+                letter-spacing: 0.02em;
+                margin-bottom: 5px;
+             }
+
+             .size{
+                 font-weight: 400;
+                 font-size: 16px;
+                 color: #8E8E93;
+             }
+        }
+
+    }
+
+    .product_footer{
+        display: flex;
+
+        .sale_button_box{
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            padding: 0px 12px;
+            gap: 12px;
+
+            width: 101px;
+            height: 32px;
+
+            background: #F7F7F7;
+            border-radius: 15px;
+
+            right: 20px;
+            position: absolute;
+
+            margin-top: 11px;
+
+            .product_button{
+                font-size: 30px;
+                padding: 0;
+                border: none;
+                background: none;
+                cursor: pointer;
+            }
+
+            .product_count{
+                font-size: 20px;
+            }
+        }
+
+        .product_price{
+            font-size: 24px;
+            margin-top: 11px;
+        }
+
+        .sale_box_price{
+            margin-left: 10px;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+

.history/styles/components/UX/Button_20220520132911.scss

@@ -1,85 +0,0 @@
-$color_melon: #F5F1E1;
-$color_hover: #ac9437;
-$color_yellow: #FED11E;
-$color_none: #dad9d8;
-
-.melon{
-  background-color: $color_melon;
-  height: 50px;
-  padding: 14px 22px;
-  min-width: 120px;
-}
-
-.button_size_32{
-  height: 32px;
-}
-
-.button_size_48{
-  height: 48px;
-  width: 325px;
-  font-size: 18px;
-}
-
-.yellow{
-  background-color: $color_yellow;
-  padding: 5px 15px 5px 15px;
-}
-
-.none{
-  background-color: $color_none;
-  height: 32px;
-  padding: 5px 15px 5px 15px;
-}
-
-.button_align_right{
-  text-align: right;
-}
-
-.button_align_center{
-  text-align: center;
-}
-
-
-.button {
-  border-radius: 8px;
-  border-style: none;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: rgb(0, 0, 0);
-  cursor: pointer;
-  display: inline-block;
-  font-weight: 500;
-  letter-spacing: normal;
-  line-height: 1.5;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transform: translate3d(0, 0, 0);
-  touch-action: manipulation;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.button:hover {
-  background-color: $color_hover;
-  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
-  opacity: 1;
-  transform: translateY(0);
-  transition-duration: .35s;
-}
-
-.button:hover:after {
-  opacity: .5;
-}
-
-.button:active {
-  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
-  transform: translateY(2px);
-  transition-duration: .35s;
-}
-
-.button:active:after {
-  opacity: 1;
-}

.history/styles/components/UX/Button_20220520133451.scss

@@ -1,86 +0,0 @@
-$color_melon: #F5F1E1;
-$color_hover: #ac9437;
-$color_yellow: #FED11E;
-$color_none: #dad9d8;
-
-.melon{
-  background-color: $color_melon;
-  height: 50px;
-  padding: 14px 22px;
-  min-width: 120px;
-}
-
-.button_size_32{
-  height: 32px;
-}
-
-.button_size_48{
-  height: 48px;
-  width: 325px;
-  font-size: 18px;
-}
-
-.yellow{
-  background-color: $color_yellow;
-  padding: 5px 15px 5px 15px;
-}
-
-.none{
-  background-color: $color_none;
-  height: 32px;
-  padding: 5px 15px 5px 15px;
-}
-
-.button_align_right{
-  text-align: right;
-}
-
-.button_align_center{
-  text-align: center;
-}
-
-.
-
-.button {
-  border-radius: 8px;
-  border-style: none;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: rgb(0, 0, 0);
-  cursor: pointer;
-  display: inline-block;
-  font-weight: 500;
-  letter-spacing: normal;
-  line-height: 1.5;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transform: translate3d(0, 0, 0);
-  touch-action: manipulation;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.button:hover {
-  background-color: $color_hover;
-  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
-  opacity: 1;
-  transform: translateY(0);
-  transition-duration: .35s;
-}
-
-.button:hover:after {
-  opacity: .5;
-}
-
-.button:active {
-  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
-  transform: translateY(2px);
-  transition-duration: .35s;
-}
-
-.button:active:after {
-  opacity: 1;
-}

.history/styles/components/UX/Button_20220520133502.scss

@@ -1,88 +0,0 @@
-$color_melon: #F5F1E1;
-$color_hover: #ac9437;
-$color_yellow: #FED11E;
-$color_none: #dad9d8;
-
-.melon{
-  background-color: $color_melon;
-  height: 50px;
-  padding: 14px 22px;
-  min-width: 120px;
-}
-
-.button_size_32{
-  height: 32px;
-}
-
-.button_size_48{
-  height: 48px;
-  width: 325px;
-  font-size: 18px;
-}
-
-.yellow{
-  background-color: $color_yellow;
-  padding: 5px 15px 5px 15px;
-}
-
-.none{
-  background-color: $color_none;
-  height: 32px;
-  padding: 5px 15px 5px 15px;
-}
-
-.button_align_right{
-  text-align: right;
-}
-
-.button_align_center{
-  text-align: center;
-}
-
-.button_box{
-    
-}
-
-.button {
-  border-radius: 8px;
-  border-style: none;
-  box-shadow: none;
-  box-sizing: border-box;
-  color: rgb(0, 0, 0);
-  cursor: pointer;
-  display: inline-block;
-  font-weight: 500;
-  letter-spacing: normal;
-  line-height: 1.5;
-  outline: none;
-  overflow: hidden;
-  position: relative;
-  text-align: center;
-  text-decoration: none;
-  transform: translate3d(0, 0, 0);
-  touch-action: manipulation;
-  vertical-align: top;
-  white-space: nowrap;
-}
-
-.button:hover {
-  background-color: $color_hover;
-  box-shadow: rgba(0, 0, 0, .05) 0 5px 30px, rgba(0, 0, 0, .05) 0 1px 4px;
-  opacity: 1;
-  transform: translateY(0);
-  transition-duration: .35s;
-}
-
-.button:hover:after {
-  opacity: .5;
-}
-
-.button:active {
-  box-shadow: rgba(0, 0, 0, .1) 0 3px 6px 0, rgba(0, 0, 0, .1) 0 0 10px 0, rgba(0, 0, 0, .1) 0 1px 4px -1px;
-  transform: translateY(2px);
-  transition-duration: .35s;
-}
-
-.button:active:after {
-  opacity: 1;
-}