fix addColumnButton

Author: Esnobart

src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx

@@ -24,8 +24,8 @@ export const AddAnotherCardBtn = () => {
         </div>
         Add another card
       </button>
-    {createCardModal &&
-        <CreateCard isOpen={createCardModal} isClose={closeModal} />}
+    {createCardModal && (
+        <CreateCard isOpen={createCardModal} isClose={closeModal} />)}
     </div>
   );
 };

src/components/AddColumnBtn/AddColumnBtn.jsx

@@ -6,25 +6,27 @@ import { useState } from "react";
 export const AddColumnBtn = () => {
   const [isOpen, setIsOpen] = useState(false);
 
-  function openColumnCreateModal() {
+  const openModal = () => {
     setIsOpen(true)
   }
-
-  function closeColumnCreateModal() {
+      
+  const closeModal = () => {
     setIsOpen(false)
   }
 
   return (
-    <div className={css.btn} onClick={openColumnCreateModal}>
+    <>
+      <button onClick={openModal} className={css.openModalBtn}>
       <div className={css.iconBox}>
           <svg className={css.icon} width="14px" height="14px">
             <use href={svg + "#icon-plus"}></use>
           </svg>
       </div>
       <p className={css.text}>Add another column</p>
+      </button>
       {isOpen && (
-        <CreateColumn isOpen={isOpen} isClose={closeColumnCreateModal} />
+        <CreateColumn isOpen={isOpen} isClose={closeModal} />
       )}
-    </div>
+    </>
   );
 };

src/components/AddColumnBtn/AddColumnBtn.module.css

@@ -1,14 +1,13 @@
-.btn { 
-  padding: 14px 78px;
-  background-color: #121212;
-  border-radius: 8px;
-  border: none;
+.openModalBtn {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  max-width: 335px;
   gap: 8px;
+  border: none;
+  border-radius: 8px;
+  background: #121212;
+  min-width: 334px;
   height: 56px;
 }
 
@@ -27,6 +26,7 @@
   font-size: 14px;
   letter-spacing: -0.02em;
   color: #fff;
+  width: 141px;
 }
 
 .icon {

src/components/CreateColumnModal/CreateColumnModal.jsx

@@ -11,11 +11,10 @@ export const CreateColumn = ({ isOpen, isClose }) => {
         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()}>
+    <button className={css.createColumnModalCloseBtn} type="button" onClick={isClose}>
         <svg className={css.createColumnModalIcon} width="18px" height="18px">
           <use href={svg + "#x-close"}></use>
         </svg>
@@ -30,7 +29,7 @@ export const CreateColumn = ({ isOpen, isClose }) => {
                 >
                     <Form autoComplete="off" className={css.createColumnModalForm}>
                         <Field type='text' name='columnname' className={css.createColumnModalInput} placeholder="Title" />
-                        <button type="submit" className={css.createColumnModalSubmit} onClick={() => isClose()}>
+                        <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>

src/components/EditColumnModal/EditColumnModal.jsx

@@ -15,7 +15,7 @@ export const EditColumn = ({ isOpen, isClose, title }) => {
     return (
     <>
     <Modal isOpen={isOpen} onRequestClose={() => isClose()} className={css.editColumnModal} overlayClassName={css.editColumnModalOverlay}>
-    <button className={css.editColumnModalCloseBtn} type="button" onClick={isClose}>
+    <button className={css.editColumnModalCloseBtn} type="button" onClick={() => isClose()}>
         <svg className={css.editColumnModalIcon} width="18px" height="18px">
           <use href={svg + "#x-close"}></use>
         </svg>
@@ -26,11 +26,13 @@ export const EditColumn = ({ isOpen, isClose, title }) => {
                 initialValues={{ columnname: title }}
                 validationSchema={columnModalValidation}
                 portalClassName="createColumnModalContainer"
-                // onSubmit={(values, actions) => {}}
+                onSubmit={(values, actions) => {
+                    isClose()
+                }}
                 >
                     <Form autoComplete="off" className={css.editColumnModalForm}>
                         <Field type='text' name='columnname' className={css.editColumnModalInput} placeholder="Title" />
-                        <button type="submit" className={css.editColumnModalSubmit} onClick={() => isClose()}>
+                        <button type="submit" className={css.editColumnModalSubmit}>
                             <span className={css.editColumnModalSpan}>
                                 <svg className={css.editColumnModalAddIcon} width="14px" height="14px">
                                     <use href={svg + "#icon-plus"}></use>