From 18051f37059112718d5d327ec15fcd398b0a58cf Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Mon, 13 Nov 2023 19:05:17 +0300
Subject: [PATCH] fixes

---
 src/components/Footer/footer.scss             |   4 +-
 src/components/Header/header.scss             |   8 +-
 src/components/Modal/Modal.js                 | 106 +++++++++++++
 src/components/Modal/modal.scss               | 145 ++++++++++++++++++
 .../ModalAddAuction/ModalAddAuction.js        |  40 -----
 .../ModalAddAuction/modalAddAuction.scss      |  46 ------
 .../ModalEditAuction/ModalEditAuction.js      |  55 -------
 .../ModalEditAuction/modalEditAuction.scss    |  46 ------
 src/components/SocialItem/socialItem.scss     |   2 +-
 src/pages/Home/Home.js                        |  15 +-
 src/pages/Home/home.scss                      |  10 +-
 11 files changed, 275 insertions(+), 202 deletions(-)
 create mode 100644 src/components/Modal/Modal.js
 create mode 100644 src/components/Modal/modal.scss
 delete mode 100644 src/components/ModalAddAuction/ModalAddAuction.js
 delete mode 100644 src/components/ModalAddAuction/modalAddAuction.scss
 delete mode 100644 src/components/ModalEditAuction/ModalEditAuction.js
 delete mode 100644 src/components/ModalEditAuction/modalEditAuction.scss

diff --git a/src/components/Footer/footer.scss b/src/components/Footer/footer.scss
index 27ef198..0945b2c 100644
--- a/src/components/Footer/footer.scss
+++ b/src/components/Footer/footer.scss
@@ -1,6 +1,6 @@
 .footer {
   padding: 50px 0 35px;
-  background-color: #4d4d4d;
+  background-color: #2f95f2;
   color: white;
   height: 450px;
 
@@ -58,7 +58,7 @@
         max-width: 250px;
         color: white;
         font-weight: 600;
-        background-color: gray;
+        background-color: #00529d;
       }
     }
 
diff --git a/src/components/Header/header.scss b/src/components/Header/header.scss
index 3e39013..5bb0533 100644
--- a/src/components/Header/header.scss
+++ b/src/components/Header/header.scss
@@ -1,6 +1,8 @@
 .header {
-  background: gray;
+  background: #2f95f2;
+  padding: 10px 0;
   position: relative;
+  color: white;
 
   &__logo {
     font-size: 30px;
@@ -45,7 +47,7 @@
       border-radius: 50px;
       width: 30px;
       height: 30px;
-      background-color: #b0aeae;
+      background-color: #0d8afb;
 
       img {
         width: 28px;
@@ -82,7 +84,7 @@
     display: none;
     flex-direction: column;
     border-radius: 8px;
-    background-color: #d9d9d9;
+    background-color: #0270d5;
     padding: 10px;
     position: absolute;
     right: 10px;
diff --git a/src/components/Modal/Modal.js b/src/components/Modal/Modal.js
new file mode 100644
index 0000000..05c801e
--- /dev/null
+++ b/src/components/Modal/Modal.js
@@ -0,0 +1,106 @@
+import React, {useState, useEffect} from "react";
+
+import ModalLayout from "../ModalLayout/ModalLayout";
+
+import closeImg from "../../assets/images/closeBurger.png"
+
+import "./modal.scss";
+
+export const Modal = ({
+    active,
+    close,
+    currentAuction,
+    setAuctionItems,
+    type
+}) => {
+    const [newAuctionName, setNewAuctionName] = useState('')
+    const [addAuctionName, setAddNewAuctionName] = useState('')
+    useEffect(() => {
+        currentAuction ? setNewAuctionName(currentAuction.name) : setNewAuctionName('')
+    }, [currentAuction])
+
+    const onChangeHandler = (e) => {
+        setNewAuctionName(e.target.value)
+    }
+
+    const editAuction = () => {
+        setAuctionItems((prevValue) => {
+            return prevValue.map((item) => {
+                if (item.number === currentAuction.number) {
+                    return {...item, name: newAuctionName}
+                }
+                return item
+            })
+        })
+        close(false)
+    }
+
+    const addNewAuction = () => {
+        setAuctionItems((prevValue) => [...prevValue, {
+            number: prevValue.length + 1,
+            name: addAuctionName,
+            receptionDate: '17.04.23-18.04.23',
+            startDate: '18.04.23',
+            status: 'Сбор заявок'
+        }])
+        setAddNewAuctionName('')
+        close(false)
+    }
+
+    return (
+        <ModalLayout active={active} close={close}>
+            <div className='modal__wrapper'>
+                <img className='modal__close' src={closeImg} alt='close' onClick={() => close(false)} />
+                {type === 'edit' &&
+                    <div className='modalEditAuction'>
+                        <h3 className='modalEditAuction__title'>Редактировать аукцион </h3>
+                        <div className='modalEditAuction__inputWrapper'>
+                            <span>Название аукциона*</span>
+                            <input
+                                value={newAuctionName}
+                                type='text'
+                                placeholder='Название аукциона'
+                                onChange={onChangeHandler}
+                            />
+                        </div>
+                        <div className='modalEditAuction__inputWrapper'>
+                            <span>Комментарий к аукциону*</span>
+                            <textarea placeholder='Комментарий к аукциону' />
+                        </div>
+                        <button onClick={editAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
+                            Сохранить изменения
+                        </button>
+                        <div className='modalEditAuction__warning'>
+                            <span>Внимание</span>
+                            <p>Если аукцион опубликован, участники будут оповещены о изменениях автоматически.</p>
+                        </div>
+                    </div>
+                }
+                {type === 'add' &&
+                    <div className='modalAddAuction'>
+                        <h3 className='modalAddAuction__title'>Добавить новый аукцион</h3>
+                        <div className='modalAddAuction__inputWrapper'>
+                            <span>Название аукциона*</span>
+                            <input value={addAuctionName} placeholder='Название аукциона' onChange={(e) => setAddNewAuctionName(e.target.value)}/>
+                        </div>
+                        <div className='modalAddAuction__inputWrapper'>
+                            <span>Комментарий к аукциону*</span>
+                            <textarea placeholder='Комментарий к аукциону' />
+                        </div>
+                        <div className='modalAddAuction__bottom'>
+                            <button onClick={addNewAuction} className={addAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
+                                Добавить новый аукцион
+                            </button>
+                            <div className='modalAddAuction__addFile'>
+                                <span>Документы аукциона:</span>
+                                <p>Прикрепить файл</p>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        </ModalLayout>
+    );
+};
+
+export default Modal;
diff --git a/src/components/Modal/modal.scss b/src/components/Modal/modal.scss
new file mode 100644
index 0000000..ceb7f64
--- /dev/null
+++ b/src/components/Modal/modal.scss
@@ -0,0 +1,145 @@
+.modal {
+  &__wrapper {
+    padding: 20px;
+    background-color: white;
+    position: relative;
+    border-radius: 8px;
+  }
+
+  &__close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
+    cursor: pointer;
+    width: 15px;
+    height: 15px;
+  }
+}
+
+.modalEditAuction {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  &__title {
+    font-size: 35px;
+    font-weight: 700;
+  }
+
+  &__inputWrapper {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    span {
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    input {
+      border-radius: 8px;
+      padding: 10px;
+      outline: none;
+    }
+
+    textarea {
+      height: 150px;
+      border-radius: 8px;
+      padding: 10px;
+      outline: none;
+      resize: none;
+      font-size: 15px;
+      border: 2px solid gray;
+    }
+  }
+
+  &__warning {
+    padding: 10px;
+    border-radius: 8px;
+    border: 2px solid #0101a9;
+
+    span {
+      font-weight: 700;
+      font-size: 18px;
+    }
+
+    p {
+      color: gray;
+      font-size: 12px;
+    }
+  }
+}
+
+.modalAddAuction {
+  display: flex;
+  flex-direction: column;
+  row-gap: 10px;
+
+  &__title {
+    font-size: 35px;
+    font-weight: 700;
+  }
+
+  &__inputWrapper {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+
+    span {
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    input {
+      border-radius: 8px;
+      padding: 10px;
+    }
+
+    textarea {
+      height: 150px;
+      border-radius: 8px;
+      padding: 10px;
+      outline: none;
+      resize: none;
+      font-size: 15px;
+      border: 2px solid gray;
+    }
+  }
+
+  &__create {
+    cursor: pointer;
+    color: white;
+    font-size: 15px;
+    background-color: #0255ff;
+    max-width: 215px;
+    border: none;
+    border-radius: 8px;
+    padding: 10px 20px;
+  }
+
+  &__bottom {
+    display: flex;
+    column-gap: 15px;
+  }
+
+  &__addFile {
+    display: flex;
+    flex-direction: column;
+
+    span {
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    p {
+      cursor: pointer;
+      font-size: 12px;
+      color: gray;
+    }
+  }
+}
+
+.disable {
+  opacity: 0.5;
+  pointer-events: none;
+}
diff --git a/src/components/ModalAddAuction/ModalAddAuction.js b/src/components/ModalAddAuction/ModalAddAuction.js
deleted file mode 100644
index 447c8be..0000000
--- a/src/components/ModalAddAuction/ModalAddAuction.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React, {useState} from "react";
-
-import ModalLayout from "../ModalLayout/ModalLayout";
-
-import "./modalAddAuction.scss";
-
-export const ModalAddAuction = ({
-    active,
-    close,
-    setAuctionItems
-}) => {
-    const [newAuctionName, setNewAuctionName] = useState('')
-    const addNewAuction = () => {
-        setAuctionItems((prevValue) => [...prevValue, {
-            number: prevValue.length + 1,
-            name: newAuctionName,
-            receptionDate: '17.04.23-18.04.23',
-            startDate: '18.04.23',
-            status: 'Сбор заявок'
-        }])
-        setNewAuctionName('')
-        close(false)
-    }
-    return (
-        <ModalLayout active={active} close={close}>
-            <div className='modalAddAuction'>
-                <h3 className='modalAddAuction__title'>Добавить новый аукцион</h3>
-                <div className='modalAddAuction__inputWrapper'>
-                    <span>Название аукциона*</span>
-                    <input value={newAuctionName} placeholder='Название аукциона' onChange={(e) => setNewAuctionName(e.target.value)}/>
-                </div>
-                <button onClick={addNewAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
-                    Добавить новый аукцион
-                </button>
-            </div>
-        </ModalLayout>
-    );
-};
-
-export default ModalAddAuction;
diff --git a/src/components/ModalAddAuction/modalAddAuction.scss b/src/components/ModalAddAuction/modalAddAuction.scss
deleted file mode 100644
index 20455a9..0000000
--- a/src/components/ModalAddAuction/modalAddAuction.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.modalAddAuction {
-  padding: 20px;
-  background-color: white;
-  position: relative;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  row-gap: 10px;
-
-  &__title {
-    font-size: 35px;
-    font-weight: 700;
-  }
-
-  &__inputWrapper {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-
-    span {
-      font-weight: 600;
-      font-size: 15px;
-    }
-    input {
-      border-radius: 8px;
-      padding: 10px;
-    }
-  }
-
-  &__create {
-    cursor: pointer;
-    margin: 0 auto;
-    color: white;
-    font-size: 15px;
-    background-color: gray;
-    max-width: 300px;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 20px;
-  }
-}
-
-.disable {
-  opacity: 0.5;
-  pointer-events: none;
-}
diff --git a/src/components/ModalEditAuction/ModalEditAuction.js b/src/components/ModalEditAuction/ModalEditAuction.js
deleted file mode 100644
index f977a11..0000000
--- a/src/components/ModalEditAuction/ModalEditAuction.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import React, {useState, useEffect} from "react";
-
-import ModalLayout from "../ModalLayout/ModalLayout";
-
-import "./modalEditAuction.scss";
-
-export const ModalEditAuction = ({
-    active,
-    close,
-    currentAuction,
-    setAuctionItems
-}) => {
-    const [newAuctionName, setNewAuctionName] = useState('')
-    useEffect(() => {
-        setNewAuctionName(currentAuction.name)
-    }, [currentAuction])
-
-    const onChangeHandler = (e) => {
-        setNewAuctionName(e.target.value)
-    }
-
-    const editAuction = () => {
-        setAuctionItems((prevValue) => {
-            return prevValue.map((item) => {
-                if (item.number === currentAuction.number) {
-                    return {...item, name: newAuctionName}
-                }
-                return item
-            })
-        })
-        close(false)
-    }
-
-    return (
-        <ModalLayout active={active} close={close}>
-            <div className='modalEditAuction'>
-                <h3 className='modalEditAuction__title'>Редактировать аукцион </h3>
-                <div className='modalEditAuction__inputWrapper'>
-                    <span>Название аукциона*</span>
-                    <input
-                        value={newAuctionName}
-                        type='text'
-                        placeholder='Название аукциона'
-                        onChange={onChangeHandler}
-                    />
-                </div>
-                <button onClick={editAuction} className={newAuctionName ? "modalAddAuction__create" : "modalAddAuction__create disable"}>
-                    Сохранить изменения
-                </button>
-            </div>
-        </ModalLayout>
-    );
-};
-
-export default ModalEditAuction;
diff --git a/src/components/ModalEditAuction/modalEditAuction.scss b/src/components/ModalEditAuction/modalEditAuction.scss
deleted file mode 100644
index ab9c6f2..0000000
--- a/src/components/ModalEditAuction/modalEditAuction.scss
+++ /dev/null
@@ -1,46 +0,0 @@
-.modalEditAuction {
-  padding: 20px;
-  background-color: white;
-  position: relative;
-  border-radius: 8px;
-  display: flex;
-  flex-direction: column;
-  row-gap: 10px;
-
-  &__title {
-    font-size: 35px;
-    font-weight: 700;
-  }
-
-  &__inputWrapper {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-
-    span {
-      font-weight: 600;
-      font-size: 15px;
-    }
-    input {
-      border-radius: 8px;
-      padding: 10px;
-    }
-  }
-
-  &__create {
-    cursor: pointer;
-    margin: 0 auto;
-    color: white;
-    font-size: 15px;
-    background-color: gray;
-    max-width: 300px;
-    border: none;
-    border-radius: 8px;
-    padding: 10px 20px;
-  }
-}
-
-.disable {
-  opacity: 0.5;
-  pointer-events: none;
-}
diff --git a/src/components/SocialItem/socialItem.scss b/src/components/SocialItem/socialItem.scss
index 74cc155..6a3567b 100644
--- a/src/components/SocialItem/socialItem.scss
+++ b/src/components/SocialItem/socialItem.scss
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: center;
   border-radius: 50px;
-  background-color: #b6b6b6;
+  background-color: #0d8afb;
   width: 30px;
   height: 30px;
 
diff --git a/src/pages/Home/Home.js b/src/pages/Home/Home.js
index f997cc0..5cf988b 100644
--- a/src/pages/Home/Home.js
+++ b/src/pages/Home/Home.js
@@ -2,8 +2,7 @@ import React, {useState} from "react";
 
 import BreadCrumbs from "../../components/BreadCrumbs/BreadCrumbs";
 import FilterItem from "../../components/FilterItem/FilterItem";
-import ModalAddAuction from "../../components/ModalAddAuction/ModalAddAuction";
-import ModalEditAuction from "../../components/ModalEditAuction/ModalEditAuction";
+import Modal from "../../components/Modal/Modal";
 
 import loupe from "../../assets/images/loupe.png"
 import filterImg from "../../assets/images/filter.png"
@@ -122,9 +121,17 @@ const Home = () => {
                     </div>
                 </div>
             </div>
-            <ModalAddAuction active={openAddModal} close={setOpenAddModal} setAuctionItems={setAuctionItems} />
+            {openAddModal &&
+                <Modal
+                    type='add'
+                    active={openAddModal}
+                    close={setOpenAddModal}
+                    setAuctionItems={setAuctionItems}
+                />
+            }
             {currentEditAuction &&
-                <ModalEditAuction
+                <Modal
+                    type='edit'
                     active={openEditModal}
                     close={setOpenEditModal}
                     currentAuction={currentEditAuction}
diff --git a/src/pages/Home/home.scss b/src/pages/Home/home.scss
index beb1bce..83211cf 100644
--- a/src/pages/Home/home.scss
+++ b/src/pages/Home/home.scss
@@ -14,7 +14,7 @@
     overflow: auto;
 
     &::-webkit-scrollbar-thumb {
-      background: #333333;
+      background: #0255ff;
       border-radius: 5px;
     }
 
@@ -32,7 +32,7 @@
         min-width: 1213px;
 
         button {
-          background-color: #b6b6b6;
+          background-color: #00529d;
           color: white;
           cursor: pointer;
           padding: 10px 20px;
@@ -65,7 +65,7 @@
       &__filters {
         display: flex;
         padding: 10px 15px;
-        background-color: #e6e6e6;
+        background-color: #2f95f2;
         align-items: center;
         justify-content: space-between;
         min-width: 1213px;
@@ -103,11 +103,11 @@
 
         .filter {
           &__reset {
-            background-color: darkgrey;
+            background-color: #0668c2;
           }
 
           &__confirm {
-            background-color: gray;
+            background-color: #00529d;
           }
         }
       }