Merge pull request #64 from AnWhiteM/column-modals

Fix ColumnModalBtn
AnWhiteM · Jun 14, 2024 · 1d12714 · 1d12714
2 parents 7de830d + 89b911d
commit 1d12714
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 21 deletions.
diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/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>
   );
 };
diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/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>
+    </>
   );
 };
diff --git a/src/components/AddColumnBtn/AddColumnBtn.module.css b/src/components/AddColumnBtn/AddColumnBtn.module.css
@@ -1,14 +1,14 @@
-.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;
 }
 
 .iconBox {
@@ -26,6 +26,7 @@
   font-size: 14px;
   letter-spacing: -0.02em;
   color: #fff;
+  width: 141px;
 }
 
 .icon {

diff --git a/src/components/CreateColumnModal/CreateColumnModal.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx
@@ -11,7 +11,6 @@ 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}>
@@ -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>

diff --git a/src/components/EditColumnModal/EditColumnModal.jsx b/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>

diff --git a/src/components/MainDashboard/MainDashboard.jsx b/src/components/MainDashboard/MainDashboard.jsx
@@ -7,8 +7,10 @@ export const MainDashboard = () => {
   return (
     <div className={css.container}>
       {/* <DashboardMessage /> */}
-      {/* <AddColumnBtn/> */}
-      <TaskColumn />
+      <div className={css.dashContainer}>
+        <TaskColumn />
+        <AddColumnBtn/>
+      </div>
     </div>
   );
 };
diff --git a/src/components/MainDashboard/MainDashboard.module.css b/src/components/MainDashboard/MainDashboard.module.css
@@ -1,4 +1,10 @@
 .container {
     background-color: #1F1F1F;
     min-height: 85vh;
+}
+
+.dashContainer {
+    background-color: #1F1F1F;
+    display: flex;
+    min-height: 85vh;
 }