diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx index 0779e89..530a2f4 100644 --- a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx +++ b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx @@ -24,8 +24,8 @@ export const AddAnotherCardBtn = () => { Add another card - {createCardModal && - } + {createCardModal && ( + )} ); }; diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx index 82bbdb1..51ddd92 100644 --- 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 ( -
+ <> + {isOpen && ( - + )} -
+ ); }; \ No newline at end of file diff --git a/src/components/AddColumnBtn/AddColumnBtn.module.css b/src/components/AddColumnBtn/AddColumnBtn.module.css index cfd6d25..3418124 100644 --- 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 index fa432c2..b295531 100644 --- 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 ( <> isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}> @@ -30,7 +29,7 @@ export const CreateColumn = ({ isOpen, isClose }) => { >
-