work in(css)

src/components/BasicModalWindow/BasicModalWindow.jsx

@@ -0,0 +1,54 @@
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import PropTypes from "prop-types";
+
+import { BasicWindow, Modal, ButtonClouse, SvgClouse } from "./BasicModalWindow.styles";
+
+import symbolDefs from "../../../src/images/sprite.svg";
+
+
+
+const BasicModalWindow = ({ children, isOpenModalToggle }) => {
+
+
+  useEffect(() => {
+    const closeESC = (e) => {
+      if (e.code === "Escape") {
+        isOpenModalToggle();
+      }
+    };
+    document.addEventListener("keydown", closeESC);
+    return () => {
+      document.removeEventListener("keydown", closeESC);
+    };
+  }, [isOpenModalToggle]);
+
+  const handleClickBackground = (e) => {
+    if (e.currentTarget === e.target) {
+      isOpenModalToggle();
+    }
+  };
+
+  const modal = (
+    <BasicWindow onClick={handleClickBackground}>
+      <Modal>
+        <ButtonClouse onClick={() => isOpenModalToggle()}>
+          <SvgClouse >
+            <use href={symbolDefs + "#icon-x"}></use>
+          </SvgClouse>
+        </ButtonClouse>
+
+        {children}
+      </Modal>
+    </BasicWindow>
+  );
+
+  return createPortal(modal, document.querySelector("#root_modal"));
+};
+
+export default BasicModalWindow;
+
+BasicModalWindow.propTypes = {
+  children: PropTypes.any,
+  isOpenModaltoggle: PropTypes.func,
+};

src/components/BasicModalWindow/BasicModalWindow.styles.jsx

@@ -0,0 +1,37 @@
+import styled from 'styled-components';
+
+export const BasicWindow = styled.div`
+  width: 100%;
+  height: 100%;
+  background: rgba(04, 04, 04, 0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const Modal = styled.div`
+ border-radius: 12px;
+  border: 1px solid rgba(239, 237, 232, 0.2);
+  background: #10100f;
+  position: relative;
+`;
+export const ButtonClouse = styled.button`
+  width: 22px;
+  height: 22px;
+
+  border: none;
+  background: inherit;
+  position: absolute;
+  top: 14px;
+  right: 14px;
+`;
+
+export const SvgClouse = styled.button`
+  width: 20px;
+  height: 20px;
+
+  stroke: var(--white-color);
+`;

src/components/products/AddProductSuccess/AddProductSuccess.jsx

@@ -0,0 +1,32 @@
+// import { Link } from "react-router-dom";
+
+// export const AddProductSuccess = ({ calories, closeModal }) => {
+//   return (
+//     <div >
+//       <div >
+//         <div >
+//           <img
+//             src={avocado}
+//             alt="avocado"
+//           />
+//           <p >Well done</p>
+//           <p >
+//             Calories:{" "}
+//             <span >{calories}</span>
+//           </p>
+//         </div>
+//         <Link to="/products" onClick={closeModal}>
+//           <button >Next product</button>
+//         </Link>
+//         <Link to="/diary" onClick={closeModal}>
+//           <p >
+//             To the diary
+//             <svg >
+//               <use > </use>
+//             </svg>
+//           </p>
+//         </Link>
+//       </div>
+//     </div>
+//   );
+// };

src/components/products/ProductsFilter/ProductsFilter.styles.jsx

@@ -1,13 +1,58 @@
 import styled from 'styled-components';
 
-
 export const ProductsFilterLabel = styled.label`
   position: relative;
 `;
 
 export const ProductsFilterSearch = styled.input`
+  /* background-color: inherit;
+  width: 100%;
+  
+
+  padding: 14px;
+  border-radius: 12px;
   top: calc(50% - 16px / 2);
-  right: 14px;
+  right: 14px; */
+  width: 320px;
+  background-color: transparent;
+  color: var(--white-color);
+  border-radius: 12px;
+  border: 1px solid rgba(239, 237, 232, 0.3);
+  font-size: 14px;
+  @media screen and (min-width: 375px) {
+    box-sizing: border-box;
+    width: 335px;
+    height: 46px;
+    padding: 14px;
+    padding-right: 68px;
+    background-color: transparent;
+    color: var(--white-color);
+    font-size: 14px;
+    line-height: 18px;
+    border-radius: 12px;
+    border: 1px solid rgba(239, 237, 232, 0.3);
+  }
+  @media screen and (min-width: 768px) {
+    width: 236px;
+
+  }
+  @media screen and (min-width: 1440px) {
+    width: 236px;
+    height: 52px;
+
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &:hover,
+  &:focus {
+    outline: none;
+    border-color: #e6533c;
+  }
+
+  &::placeholder {
+    color: var(--white-color);
+  }
 `;
 
 export const ProductsBtnClouse = styled.button`
@@ -24,17 +69,21 @@ export const ProductsBtnSearch = styled.button`
 `;
 
 export const ProductsSvgClouse = styled.svg`
-  fill: #e6533c;
-  width: 32px;
-  height: 32px;
+  stroke: #e6533c;
+  width: 18px;
+  height: 18px;
 `;
 export const ProductsSvgSearch = styled.svg`
-  fill: #e6533c;
-  width: 32px;
-  height: 32px;
+  stroke: #e6533c;
+  width: 18px;
+  height: 18px;
 `;
 
 export const ProductsFilterList = styled.ul`
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin-bottom: 40px;
   @media screen and (min-width: 375px) {
     margin-bottom: 40px;
     display: flex;
@@ -54,6 +103,9 @@ export const ProductsFilterList = styled.ul`
 
 export const SelectWrapper = styled.div`
   @media screen and (min-width: 375px) {
+    width: 158px;
+  }
+  @media screen and (min-width: 768px) {
     width: 173px;
   }
   @media screen and (min-width: 1440px) {