From 8074d7aaf672c5f5c3ab740294ae13e43c83a81d Mon Sep 17 00:00:00 2001
From: Esnobart <offrichterrr@gmail.com>
Date: Wed, 12 Jun 2024 20:07:50 +0100
Subject: [PATCH 1/3] Update TaskColumnName.jsx

---
 src/components/TaskColumnName/TaskColumnName.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx
index b21af12..6c34e84 100644
--- a/src/components/TaskColumnName/TaskColumnName.jsx
+++ b/src/components/TaskColumnName/TaskColumnName.jsx
@@ -1,10 +1,10 @@
 import css from "./TaskColumnName.module.css";
 import svg from "../../img/icons.svg";
-import { useSelector} from "react"
+import { useState } from "react"
 import { EditColumn } from "../EditColumnModal/EditColumnModal";
 
 export const TaskColumnName = () => {
-  const [isOpen, setIsOpen] = useSelector(false);
+  const [isOpen, setIsOpen] = useState(false);
   
   const openModal = () => {
     setIsOpen(true)

From 0bdad83bcb37797f69a95f38cd6b3360b2f1430c Mon Sep 17 00:00:00 2001
From: Esnobart <offrichterrr@gmail.com>
Date: Wed, 12 Jun 2024 22:34:17 +0100
Subject: [PATCH 2/3] fix modals

---
 .../AddAnotherCardBtn/AddAnotherCardBtn.jsx   |  12 +-
 src/components/AddColumnBtn/AddColumnBtn.jsx  |   6 +-
 .../CreateCardModal/CreateCardModal.jsx       | 124 +++++++++---------
 .../CreateColumnModal/CreateColumnModal.jsx   |  84 ++++++------
 .../EditCardModal/EditCardModal.jsx           | 124 +++++++++---------
 .../EditColumnModal/EditColumnModal.jsx       |  84 ++++++------
 .../EditColumnModal.module.css                |  32 +++--
 src/components/TaskCard/TaskCard.jsx          |  13 +-
 .../TaskColumnName/TaskColumnName.jsx         |  12 +-
 9 files changed, 245 insertions(+), 246 deletions(-)

diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
index 2d3f4e7..0779e89 100644
--- a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
+++ b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx
@@ -1,17 +1,17 @@
 import css from "./AddAnotherCardBtn.module.css";
 import svg from "../../img/icons.svg";
 import { useState } from "react";
-// import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"
+import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx"
 
 export const AddAnotherCardBtn = () => {
-    const [isOpen, setIsOpen] = useState(false)
+    const [createCardModal, setCreateCardModal] = useState(false)
     
     const openModal = () => {
-        setIsOpen(true)
+      setCreateCardModal(true)
     }
         
     const closeModal = () => {
-        setIsOpen(false)
+      setCreateCardModal(false)
     }
     
   return (
@@ -24,8 +24,8 @@ export const AddAnotherCardBtn = () => {
         </div>
         Add another card
       </button>
-    {/* {isOpen &&
-        <CreateCard isOpen={isOpen} isClose={closeModal} />} */}
+    {createCardModal &&
+        <CreateCard isOpen={createCardModal} isClose={closeModal} />}
     </div>
   );
 };
diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx
index 091d88b..f3789ff 100644
--- a/src/components/AddColumnBtn/AddColumnBtn.jsx
+++ b/src/components/AddColumnBtn/AddColumnBtn.jsx
@@ -1,4 +1,4 @@
-// import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
+import { CreateColumn } from "../CreateColumnModal/CreateColumnModal";
 import css from "./AddColumnBtn.module.css";
 import { useState } from "react";
 
@@ -16,9 +16,9 @@ export const AddColumnBtn = () => {
   return (
     <div>
       <button className={css.btn} onClick={openColumnCreateModal}>Add another column</button>
-      {/* {isOpen && (
+      {isOpen && (
         <CreateColumn isOpen={isOpen} isClose={closeColumnCreateModal} />
-      )} */}
+      )}
     </div>
   );
 };
\ No newline at end of file
diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
index 88c1637..11c9463 100644
--- a/src/components/CreateCardModal/CreateCardModal.jsx
+++ b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -1,67 +1,67 @@
-// import Modal from "react-modal";
-// import css from "./CreateCardModal.module.css";
-// import * as Yup from 'yup';
-// import { Form, Formik, Field } from "formik";
-// import svg from "../../img/icons.svg";
+import Modal from "react-modal";
+import css from "./CreateCardModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
 
-// Modal.setAppElement('#root');
+Modal.setAppElement('#root');
 
-// export const CreateCard = ({ isOpen, isClose }) => {
-//     const columnModalValidation = Yup.object().shape({
-//         columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
-//     });
+export const CreateCard = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
 
-//     return (
-//     <>
-//     <Modal isOpen={isOpen} onRequestClose={isClose} className={css.createCardModal} overlayClassName={css.createCardModalOverlay}>
-//     <button className={css.createCardModalCloseBtn} type="button" onClick={isClose}>
-//         <svg className={css.createCardModalIcon} width="18px" height="18px">
-//           <use href={svg + "#x-close"}></use>
-//         </svg>
-//       </button>
-//         <div className={css.createCardModalContainer}>
-//             <h1 className={css.createCardModalText}>Add card</h1>
-//             <Formik
-//                 initialValues={{ cardtitle: '', carddescription: ''}}
-//                 validationSchema={columnModalValidation}
-//                 // onSubmit={(values, actions) => {}}
-//                     >
-//                     <Form autoComplete="off" className={css.createCardModalForm}>
-//                         <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
-//                         <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
-//                         <label>Label color
-//                             <div className={css.createCardModalRadioContainer}>
-//                                 <div>
-//                                     <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
-//                                     <label htmlFor="createCardModalRadio1" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" className={css.createCardModalRadio2} id="createCardModalRadio2" name="color" />
-//                                     <label htmlFor="createCardModalRadio2" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" className={css.createCardModalRadio3} id="createCardModalRadio3" name="color" />
-//                                     <label htmlFor="createCardModalRadio3" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" className={css.createCardModalRadio4} id="createCardModalRadio4" name="color" />
-//                                     <label htmlFor="createCardModalRadio4" className="radio-label"></label>
-//                                 </div>
-//                             </div>
-//                         </label>
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={isClose} className={css.createCardModal} overlayClassName={css.createCardModalOverlay}>
+    <button className={css.createCardModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.createCardModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.createCardModalContainer}>
+            <h1 className={css.createCardModalText}>Add card</h1>
+            <Formik
+                initialValues={{ cardtitle: '', carddescription: ''}}
+                validationSchema={columnModalValidation}
+                // onSubmit={(values, actions) => {}}
+                    >
+                    <Form autoComplete="off" className={css.createCardModalForm}>
+                        <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
+                        <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
+                        <label>Label color
+                            <div className={css.createCardModalRadioContainer}>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
+                                    <label htmlFor="createCardModalRadio1" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio2} id="createCardModalRadio2" name="color" />
+                                    <label htmlFor="createCardModalRadio2" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio3} id="createCardModalRadio3" name="color" />
+                                    <label htmlFor="createCardModalRadio3" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" className={css.createCardModalRadio4} id="createCardModalRadio4" name="color" />
+                                    <label htmlFor="createCardModalRadio4" className="radio-label"></label>
+                                </div>
+                            </div>
+                        </label>
                         
-//                         <button type="submit" className={css.createCardModalSubmit} onClick={() => isClose()}>
-//                             <span className={css.createCardModalSpan}>
-//                                 <svg className={css.createCardModalAddIcon} width="14px" height="14px">
-//                                     <use href={svg + "#icon-plus"}></use>
-//                                 </svg>
-//                             </span>
-//                         Add</button>
-//                     </Form>
-//             </Formik>
-//         </div>
+                        <button type="submit" className={css.createCardModalSubmit} onClick={() => isClose()}>
+                            <span className={css.createCardModalSpan}>
+                                <svg className={css.createCardModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
 
-//     </Modal>
-//     </>
-// )
-// }
\ No newline at end of file
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/CreateColumnModal/CreateColumnModal.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx
index 9ad94b3..fa432c2 100644
--- a/src/components/CreateColumnModal/CreateColumnModal.jsx
+++ b/src/components/CreateColumnModal/CreateColumnModal.jsx
@@ -1,46 +1,46 @@
-// import Modal from "react-modal";
-// import css from "./CreateColumnModal.module.css";
-// import * as Yup from 'yup';
-// import { Form, Formik, Field } from "formik";
-// import svg from "../../img/icons.svg";
+import Modal from "react-modal";
+import css from "./CreateColumnModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
 
-// Modal.setAppElement('#root');
+Modal.setAppElement('#root');
 
-// export const CreateColumn = ({ isOpen, isClose }) => {
-//     const columnModalValidation = Yup.object().shape({
-//         columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
-//     });
+export const CreateColumn = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
 
 
-//     return (
-//     <>
-//     <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}>
-//     <button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
-//         <svg className={css.createColumnModalIcon} width="18px" height="18px">
-//           <use href={svg + "#x-close"}></use>
-//         </svg>
-//       </button>
-//         <div className={css.createColumnModalContainer}>
-//             <h1 className={css.createColumnModalText}>Add column</h1>
-//             <Formik
-//                 initialValues={{ columnname: ''}}
-//                 validationSchema={columnModalValidation}
-//                 portalClassName="createColumnModalContainer"
-//                 // onSubmit={(values, actions) => {}}
-//                 >
-//                     <Form autoComplete="off" className={css.createColumnModalForm}>
-//                         <Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
-//                         <button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
-//                             <span className={css.createColumnModalSpan}>
-//                                 <svg className={css.createColumnModalAddIcon} width="14px" height="14px">
-//                                     <use href={svg + "#icon-plus"}></use>
-//                                 </svg>
-//                             </span>
-//                         Add</button>
-//                     </Form>
-//             </Formik>
-//         </div>
-//     </Modal>
-//     </>
-// )
-// }
\ No newline at end of file
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}>
+    <button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.createColumnModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.createColumnModalContainer}>
+            <h1 className={css.createColumnModalText}>Add column</h1>
+            <Formik
+                initialValues={{ columnname: ''}}
+                validationSchema={columnModalValidation}
+                portalClassName="createColumnModalContainer"
+                // onSubmit={(values, actions) => {}}
+                >
+                    <Form autoComplete="off" className={css.createColumnModalForm}>
+                        <Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
+                        <button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
+                            <span className={css.createColumnModalSpan}>
+                                <svg className={css.createColumnModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx
index f4db18e..80db8b3 100644
--- a/src/components/EditCardModal/EditCardModal.jsx
+++ b/src/components/EditCardModal/EditCardModal.jsx
@@ -1,67 +1,67 @@
-// import Modal from "react-modal";
-// import css from "./EditCardModal.module.css";
-// import * as Yup from 'yup';
-// import { Form, Formik, Field } from "formik";
-// import svg from "../../img/icons.svg";
+import Modal from "react-modal";
+import css from "./EditCardModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
 
-// Modal.setAppElement('#root');
+Modal.setAppElement('#root');
 
-// export const EditCard = ({ isOpen, isClose }) => {
-//     const columnModalValidation = Yup.object().shape({
-//         columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
-//     });
+export const EditCard = ({ isOpen, isClose }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
 
-//     return (
-//     <>
-//     <Modal isOpen={isOpen} onRequestClose={isClose} className={css.editCardModal} overlayClassName={css.editCardModalOverlay}>
-//     <button className={css.editCardModalCloseBtn} type="button" onClick={isClose}>
-//         <svg className={css.editCardModalIcon} width="18px" height="18px">
-//           <use href={svg + "#x-close"}></use>
-//         </svg>
-//       </button>
-//         <div className={css.editCardModalContainer}>
-//             <h1 className={css.editCardModalText}>Edit card</h1>
-//             <Formik
-//                 initialValues={{ cardtitle: '', carddescription: ''}}
-//                 validationSchema={columnModalValidation}
-//                 // onSubmit={(values, actions) => {}}
-//                     >
-//                     <Form autoComplete="off" className={css.editCardModalForm}>
-//                         <Field type='text' name='cardtitle' className={css.editCardModalInput1} placeholder="Title" />
-//                         <Field as='textarea' name='carddescription' className={css.editCardModalInput2} placeholder="Description" />
-//                         <label>Label color
-//                             <div className={css.editCardModalRadioContainer}>
-//                                 <div>
-//                                     <Field type="radio" value="Low" className={css.editCardModalRadio1} id="editCardModalRadio1" name="color" />
-//                                     <label htmlFor="editCardModalRadio1" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" value="Medium" className={css.editCardModalRadio2} id="editCardModalRadio2" name="color" />
-//                                     <label htmlFor="editCardModalRadio2" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" value="High" className={css.editCardModalRadio3} id="editCardModalRadio3" name="color" />
-//                                     <label htmlFor="editCardModalRadio3" className="radio-label"></label>
-//                                 </div>
-//                                 <div>
-//                                     <Field type="radio" value="Without priority" className={css.editCardModalRadio4} id="editCardModalRadio4" name="color" />
-//                                     <label htmlFor="editCardModalRadio4" className="radio-label"></label>
-//                                 </div>
-//                             </div>
-//                         </label>
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={isClose} className={css.editCardModal} overlayClassName={css.editCardModalOverlay}>
+    <button className={css.editCardModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.editCardModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.editCardModalContainer}>
+            <h1 className={css.editCardModalText}>Edit card</h1>
+            <Formik
+                initialValues={{ cardtitle: '', carddescription: ''}}
+                validationSchema={columnModalValidation}
+                // onSubmit={(values, actions) => {}}
+                    >
+                    <Form autoComplete="off" className={css.editCardModalForm}>
+                        <Field type='text' name='cardtitle' className={css.editCardModalInput1} placeholder="Title" />
+                        <Field as='textarea' name='carddescription' className={css.editCardModalInput2} placeholder="Description" />
+                        <label>Label color
+                            <div className={css.editCardModalRadioContainer}>
+                                <div>
+                                    <Field type="radio" value="Low" className={css.editCardModalRadio1} id="editCardModalRadio1" name="color" />
+                                    <label htmlFor="editCardModalRadio1" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="Medium" className={css.editCardModalRadio2} id="editCardModalRadio2" name="color" />
+                                    <label htmlFor="editCardModalRadio2" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="High" className={css.editCardModalRadio3} id="editCardModalRadio3" name="color" />
+                                    <label htmlFor="editCardModalRadio3" className="radio-label"></label>
+                                </div>
+                                <div>
+                                    <Field type="radio" value="Without priority" className={css.editCardModalRadio4} id="editCardModalRadio4" name="color" />
+                                    <label htmlFor="editCardModalRadio4" className="radio-label"></label>
+                                </div>
+                            </div>
+                        </label>
                         
-//                         <button type="submit" className={css.editCardModalSubmit} onClick={() => isClose()}>
-//                             <span className={css.editCardModalSpan}>
-//                                 <svg className={css.editCardModalAddIcon} width="14px" height="14px">
-//                                     <use href={svg + "#icon-plus"}></use>
-//                                 </svg>
-//                             </span>
-//                         Edit</button>
-//                     </Form>
-//             </Formik>
-//         </div>
+                        <button type="submit" className={css.editCardModalSubmit} onClick={() => isClose()}>
+                            <span className={css.editCardModalSpan}>
+                                <svg className={css.editCardModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Edit</button>
+                    </Form>
+            </Formik>
+        </div>
 
-//     </Modal>
-//     </>
-// )
-// }
\ No newline at end of file
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/EditColumnModal/EditColumnModal.jsx b/src/components/EditColumnModal/EditColumnModal.jsx
index add98a5..25033d3 100644
--- a/src/components/EditColumnModal/EditColumnModal.jsx
+++ b/src/components/EditColumnModal/EditColumnModal.jsx
@@ -1,46 +1,46 @@
-// import Modal from "react-modal";
-// import css from "./EditColumnModal.module.css";
-// import * as Yup from 'yup';
-// import { Form, Formik, Field } from "formik";
-// import svg from "../../img/icons.svg";
+import Modal from "react-modal";
+import css from "./EditColumnModal.module.css";
+import * as Yup from 'yup';
+import { Form, Formik, Field } from "formik";
+import svg from "../../img/icons.svg";
 
-// Modal.setAppElement('#root');
+Modal.setAppElement('#root');
 
-// export const EditColumn = ({ isOpen, isClose, title }) => {
-//     const columnModalValidation = Yup.object().shape({
-//         columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
-//     });
+export const EditColumn = ({ isOpen, isClose, title }) => {
+    const columnModalValidation = Yup.object().shape({
+        columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!')
+    });
 
 
-//     return (
-//     <>
-//     <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.editColumnModal} overlayClassName={css.editColumnModalOverlay}>
-//     <button className={css.editColumnModalCloseBtn} type="button" onClick={isClose}>
-//         <svg className={css.editColumnModalIcon} width="18px" height="18px">
-//           <use href={svg + "#x-close"}></use>
-//         </svg>
-//       </button>
-//         <div className={css.editColumnModalContainer}>
-//             <h1 className={css.editColumnModalText}>Edit column</h1>
-//             <Formik
-//                 initialValues={{ columnname: title }}
-//                 validationSchema={columnModalValidation}
-//                 portalClassName="createColumnModalContainer"
-//                 // onSubmit={(values, actions) => {}}
-//                 >
-//                     <Form autoComplete="off" className={css.editColumnModalForm}>
-//                         <Field type='text' name='columnname' className={css.editColumnModalInput} placeholder="Title" />
-//                         <button type="submit" className={css.editColumnModalSubmit} onClick={() => isClose()}>
-//                             <span className={css.editColumnModalSpan}>
-//                                 <svg className={css.editColumnModalAddIcon} width="14px" height="14px">
-//                                     <use href={svg + "#icon-plus"}></use>
-//                                 </svg>
-//                             </span>
-//                         Add</button>
-//                     </Form>
-//             </Formik>
-//         </div>
-//     </Modal>
-//     </>
-// )
-// }
\ No newline at end of file
+    return (
+    <>
+    <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.editColumnModal} overlayClassName={css.editColumnModalOverlay}>
+    <button className={css.editColumnModalCloseBtn} type="button" onClick={isClose}>
+        <svg className={css.editColumnModalIcon} width="18px" height="18px">
+          <use href={svg + "#x-close"}></use>
+        </svg>
+      </button>
+        <div className={css.editColumnModalContainer}>
+            <h1 className={css.editColumnModalText}>Edit column</h1>
+            <Formik
+                initialValues={{ columnname: title }}
+                validationSchema={columnModalValidation}
+                portalClassName="createColumnModalContainer"
+                // onSubmit={(values, actions) => {}}
+                >
+                    <Form autoComplete="off" className={css.editColumnModalForm}>
+                        <Field type='text' name='columnname' className={css.editColumnModalInput} placeholder="Title" />
+                        <button type="submit" className={css.editColumnModalSubmit} onClick={() => isClose()}>
+                            <span className={css.editColumnModalSpan}>
+                                <svg className={css.editColumnModalAddIcon} width="14px" height="14px">
+                                    <use href={svg + "#icon-plus"}></use>
+                                </svg>
+                            </span>
+                        Add</button>
+                    </Form>
+            </Formik>
+        </div>
+    </Modal>
+    </>
+)
+}
\ No newline at end of file
diff --git a/src/components/EditColumnModal/EditColumnModal.module.css b/src/components/EditColumnModal/EditColumnModal.module.css
index e32431a..21e8d04 100644
--- a/src/components/EditColumnModal/EditColumnModal.module.css
+++ b/src/components/EditColumnModal/EditColumnModal.module.css
@@ -89,22 +89,6 @@
     cursor: pointer;
 }
 
-.editColumnModalSubmitAddBtn {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 8px 16px;
-    font-size: 14px;
-    font-weight: 500;
-    background-color: #bedbb0;
-    color: rgba(22, 22, 22, 1);
-    border: none;
-    width: 287px;
-    height: 49px;
-    border-radius: 8px;
-    cursor: pointer;
-}
-
   .editColumnModalSpan {
     width: 28px;
     height: 28px;
@@ -119,4 +103,18 @@
 
 .editColumnModalAddIcon {
     stroke: white;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+    .editColumnModal {
+        width: 350px;
+    }
+
+    .editColumnModalInput {
+        width: 302px;
+    }
+    
+    .editColumnModalSubmit {
+        width: 302px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx
index ef3e4d8..80d0ab9 100644
--- a/src/components/TaskCard/TaskCard.jsx
+++ b/src/components/TaskCard/TaskCard.jsx
@@ -1,17 +1,17 @@
 import css from "./TaskCard.module.css"
 import svg from "../../img/icons.svg";
-// import { EditCard } from "../EditCardModal/EditCardModal";
+import { EditCard } from "../EditCardModal/EditCardModal";
 import { useState } from "react";
 
 export const Card = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [editCardModal, setEditCardModal] = useState(false);
   
   const openModal = () => {
-    setIsOpen(true)
+    setEditCardModal(true)
   }
     
   const closeModal = () => {
-    setIsOpen(false)
+    setEditCardModal(false)
   }
 
     return (
@@ -53,7 +53,7 @@ export const Card = () => {
                 <use href={svg + "#icon-arrow-circle"}></use>
             </svg>
             <button className={css.editModalBtn} 
-            // onClick={openModal()}
+            onClick={() => openModal()}
             >
               <svg className={css.icon} width="16" height="16">
                   <use href={svg + "#icon-pencil"}></use>
@@ -67,7 +67,8 @@ export const Card = () => {
           </div>
 
         </div>
-        {/* <EditCard isOpen={isOpen} isClose={closeModal} /> */}
+        {editCardModal &&
+        <EditCard isOpen={editCardModal} isClose={closeModal} />}
       </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx
index 4f947c7..c12dcfe 100644
--- a/src/components/TaskColumnName/TaskColumnName.jsx
+++ b/src/components/TaskColumnName/TaskColumnName.jsx
@@ -1,17 +1,17 @@
 import css from "./TaskColumnName.module.css";
 import svg from "../../img/icons.svg";
 import { useState} from "react"
-// import { EditColumn } from "../EditColumnModal/EditColumnModal";
+import { EditColumn } from "../EditColumnModal/EditColumnModal";
 
 export const TaskColumnName = () => {
-  const [isOpen, setIsOpen] = useState(false);
+  const [taskColumnModal, setTaskColumnModal] = useState(false);
   
   const openModal = () => {
-    setIsOpen(true)
+    setTaskColumnModal(true)
   }
     
   const closeModal = () => {
-    setIsOpen(false)
+    setTaskColumnModal(false)
   }
   
   return (
@@ -29,8 +29,8 @@ export const TaskColumnName = () => {
         </svg>
         </button>
       </div>
-      {/* {isOpen &&
-        <EditColumn isOpen={openModal} isClose={closeModal} title={"To Do"} />} */}
+      {taskColumnModal &&
+        <EditColumn isOpen={taskColumnModal} isClose={closeModal} title={"To Do"} />}
     </div>
   );
 };

From de70865ec9a524d7f2e3bddb4116dfbfcc26484f Mon Sep 17 00:00:00 2001
From: Esnobart <offrichterrr@gmail.com>
Date: Thu, 13 Jun 2024 18:14:31 +0100
Subject: [PATCH 3/3] final modals

---
 .../CreateCardModal/CreateCardModal.jsx       |   2 +-
 .../CreateCardModal.module.css                |  31 +++-
 .../CreateColumnModal.module.css              |  16 +-
 .../EditCardModal/EditCardModal.jsx           |  14 +-
 .../EditCardModal/EditCardModal.module.css    | 146 ++++++++++++++++--
 .../MainDashboard/MainDashboard.jsx           |   2 +-
 src/components/TaskCard/TaskCard.module.css   |   2 +-
 7 files changed, 188 insertions(+), 25 deletions(-)

diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
index 11c9463..c1fadef 100644
--- a/src/components/CreateCardModal/CreateCardModal.jsx
+++ b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -29,7 +29,7 @@ export const CreateCard = ({ isOpen, isClose }) => {
                     <Form autoComplete="off" className={css.createCardModalForm}>
                         <Field type='text' name='cardtitle' className={css.createCardModalInput1} placeholder="Title" />
                         <Field as='textarea' name='carddescription' className={css.createCardModalInput2} placeholder="Description" />
-                        <label>Label color
+                        <label className={css.createCardModalLabel}>Label color
                             <div className={css.createCardModalRadioContainer}>
                                 <div>
                                     <Field type="radio" className={css.createCardModalRadio1} id="createCardModalRadio1" name="color" />
diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
index f6075b1..588bad3 100644
--- a/src/components/CreateCardModal/CreateCardModal.module.css
+++ b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -1,7 +1,8 @@
 .createCardModalRadioContainer {
     display: flex;
-    gap: 10px;
+    gap: 8px;
     width: 80px;
+    margin-top: 5px;
 }
 
 .createCardModalRadio1,
@@ -147,6 +148,17 @@
     opacity: 100%;
 }
 
+.createCardModalLabel {
+    margin-bottom: 14px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    color: #FFFFFF80;
+}
+
 .createCardModalRadio1 {
     margin-right: 5px;
     color: #8FA1D0;
@@ -182,4 +194,19 @@
 
 .createCardModalAddIcon {
     stroke: white;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+    .createCardModal {
+        width: 350px;
+    }
+
+    .createCardModalInput1,
+    .createCardModalInput2 {
+        width: 302px;
+    }
+    
+    .createCardModalSubmit {
+        width: 302px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/CreateColumnModal/CreateColumnModal.module.css b/src/components/CreateColumnModal/CreateColumnModal.module.css
index 0378e8c..91ddc6a 100644
--- a/src/components/CreateColumnModal/CreateColumnModal.module.css
+++ b/src/components/CreateColumnModal/CreateColumnModal.module.css
@@ -103,4 +103,18 @@
 
 .createColumnModalAddIcon {
     stroke: white;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 768px) {
+    .createColumnModal {
+        width: 350px;
+    }
+
+    .createColumnModalInput {
+        width: 302px;
+    }
+    
+    .createColumnModalSubmit {
+        width: 302px;
+    }
+  }
\ No newline at end of file
diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx
index 80db8b3..2e67a88 100644
--- a/src/components/EditCardModal/EditCardModal.jsx
+++ b/src/components/EditCardModal/EditCardModal.jsx
@@ -29,23 +29,19 @@ export const EditCard = ({ isOpen, isClose }) => {
                     <Form autoComplete="off" className={css.editCardModalForm}>
                         <Field type='text' name='cardtitle' className={css.editCardModalInput1} placeholder="Title" />
                         <Field as='textarea' name='carddescription' className={css.editCardModalInput2} placeholder="Description" />
-                        <label>Label color
+                        <label className={css.editCardModalLabel}>Label color
                             <div className={css.editCardModalRadioContainer}>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Low" className={css.editCardModalRadio1} id="editCardModalRadio1" name="color" />
-                                    <label htmlFor="editCardModalRadio1" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Medium" className={css.editCardModalRadio2} id="editCardModalRadio2" name="color" />
-                                    <label htmlFor="editCardModalRadio2" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="High" className={css.editCardModalRadio3} id="editCardModalRadio3" name="color" />
-                                    <label htmlFor="editCardModalRadio3" className="radio-label"></label>
                                 </div>
-                                <div>
+                                <div className={css.editCardModalRadioContainerRadio}>
                                     <Field type="radio" value="Without priority" className={css.editCardModalRadio4} id="editCardModalRadio4" name="color" />
-                                    <label htmlFor="editCardModalRadio4" className="radio-label"></label>
                                 </div>
                             </div>
                         </label>
diff --git a/src/components/EditCardModal/EditCardModal.module.css b/src/components/EditCardModal/EditCardModal.module.css
index 37f3891..85cb08f 100644
--- a/src/components/EditCardModal/EditCardModal.module.css
+++ b/src/components/EditCardModal/EditCardModal.module.css
@@ -1,10 +1,126 @@
 .editCardModalRadioContainer {
     display: flex;
-    gap: 10px;
+    gap: 8px;
     width: 80px;
+    margin-top: 5px;
 }
 
-.editCardModalRadio1,
+.editCardModalRadioContainerRadio {
+    height: 14px;
+    width: 14px;
+    margin: 0;
+}
+
+/* input[type=radio] {
+    --s: 14px;     
+    --c: #009688; 
+    
+    height: var(--s);
+    aspect-ratio: 1;
+    border: calc(var(--s)/8) solid #939393;
+    padding: calc(var(--s)/8);
+    background: 
+       radial-gradient(farthest-side,var(--c) 94%,#0000) 
+       50%/0 0 no-repeat content-box;
+    border-radius: 50%;
+    outline-offset: calc(var(--s)/10);
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    transition: .3s;
+    margin: 0;
+  } */
+
+  input[type=radio] {
+    --s: 14px;     /* control the size */
+    --c: #009688; /* the active color */
+    
+    height: var(--s);
+    aspect-ratio: 1;
+    border: 2px solid #939393;
+    padding: 1px;
+    background: 
+       radial-gradient(farthest-side, var(--c) 100%,#0000) 
+       50%/0 0 no-repeat content-box;
+    border-radius: 50%;
+    outline-offset: 2px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    cursor: pointer;
+    font-size: inherit;
+    transition: .3s;
+  }
+
+  input[type=radio]:checked {
+    border-color: var(--c);
+    background-size: 100% 100%;
+  }
+  
+  @media print {
+    input[type=radio] {
+      -webkit-appearance: auto;
+      -moz-appearance: auto;
+      appearance: auto;
+      background: none;
+    }
+  }
+
+/* .editCardModalRadio1 {
+    color: #8FA1D0;
+    border: 2px solid #8FA1D0;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#8FA1D0) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio2 {
+    color: #E09CB5;
+    border: 2px solid #E09CB5;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#E09CB5) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio3 {
+    color: #BEDBB0;
+    border: 2px solid #BEDBB0;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#BEDBB0) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio4 {
+    color: #FFFFFF4D;
+    border: 2px solid #FFFFFF4D;
+    background: 
+     radial-gradient(farthest-side,var(--c) 94%,#FFFFFF4D) 
+     50%/0 0 no-repeat content-box;
+}
+
+.editCardModalRadio1:checked {
+    border-color: #8FA1D0;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio2:checked {
+    border-color: #E09CB5;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio3:checked {
+    border-color: #BEDBB0;
+    background-size: 100% 100%;
+}
+
+.editCardModalRadio4:checked {
+    border-color: #FFFFFF4D;
+    background-size: 100% 100%;
+} */
+
+/* .editCardModalRadio1,
 .editCardModalRadio2,
 .editCardModalRadio3,
 .editCardModalRadio4 {
@@ -44,17 +160,21 @@
 }
 
 .editCardModalRadio1:focus + label::before {
-    border: 1px solid #8FA1D0;
+    border: 2px solid #8FA1D0;
+    padding: 2px;
 }
 .editCardModalRadio2:focus + label::before {
-    border: 1px solid #E09CB5;
+    border: 2px solid #E09CB5;
+    padding: 2px;
 }
 .editCardModalRadio3:focus + label::before {
-    border: 1px solid #BEDBB0;
+    border: 2px solid #BEDBB0;
+    padding: 2px;
 }
 .editCardModalRadio4:focus + label::before {
-    border: 1px solid #FFFFFF4D;
-}  
+    border: 2px solid #FFFFFF4D;
+    padding: 2px;
+} */
  
 .editCardModalCloseBtn {
     position: fixed;
@@ -147,9 +267,15 @@
     opacity: 100%;
 }
 
-.editCardModalRadio1 {
-    margin-right: 5px;
-    color: #8FA1D0;
+.editCardModalLabel {
+    margin-bottom: 14px;
+    font-family: 'Poppins', sans-serif;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+    color: #FFFFFF80;
 }
 
 .editCardModalSubmit {
diff --git a/src/components/MainDashboard/MainDashboard.jsx b/src/components/MainDashboard/MainDashboard.jsx
index f4c5b5a..9966585 100644
--- a/src/components/MainDashboard/MainDashboard.jsx
+++ b/src/components/MainDashboard/MainDashboard.jsx
@@ -7,7 +7,7 @@ export const MainDashboard = () => {
   return (
     <div className={css.container}>
       {/* <DashboardMessage /> */}
-      {/* <AddColumnBtn/> */}
+      <AddColumnBtn/>
       <TaskColumn />
     </div>
   );
diff --git a/src/components/TaskCard/TaskCard.module.css b/src/components/TaskCard/TaskCard.module.css
index 6d3c8cf..83ec5ae 100644
--- a/src/components/TaskCard/TaskCard.module.css
+++ b/src/components/TaskCard/TaskCard.module.css
@@ -113,11 +113,11 @@
 
 
 .editModalBtn {
-    position: fixed;
     background: #121212;
     border: none;
     padding: 0;
 }
+
 .icon {
     cursor: pointer;
 }