From e944688865c01510c341cdb3e9c4357069739d45 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sat, 8 Jun 2024 16:17:45 +0100 Subject: [PATCH 01/22] first modal --- src/components/AddColumnBtn/AddColumnBtn.jsx | 15 +++++- src/components/CreateColumn/CreateColumn.jsx | 48 +++++++++++++++++++ .../CreateColumn/CreateColumn.module.css | 20 ++++++++ 3 files changed, 82 insertions(+), 1 deletion(-) create mode 100644 src/components/CreateColumn/CreateColumn.jsx create mode 100644 src/components/CreateColumn/CreateColumn.module.css diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx index 60c7154..5f6b2f2 100644 --- a/src/components/AddColumnBtn/AddColumnBtn.jsx +++ b/src/components/AddColumnBtn/AddColumnBtn.jsx @@ -1,9 +1,22 @@ +import { CreateColumn } from "../CreateColumn/CreateColumn"; import css from "./AddColumnBtn.module.css"; +import { useState } from "react"; export const AddColumnBtn = () => { + const [isOpen, setIsOpen] = useState(false); + + function openColumnCreateModal() { + setIsOpen(true) + } + + function closeColumnCreateModal() { + setIsOpen(false) + } + return (
- + +
); }; \ No newline at end of file diff --git a/src/components/CreateColumn/CreateColumn.jsx b/src/components/CreateColumn/CreateColumn.jsx new file mode 100644 index 0000000..2015ab4 --- /dev/null +++ b/src/components/CreateColumn/CreateColumn.jsx @@ -0,0 +1,48 @@ +import Modal from "react-modal"; +import css from "./CreateColumn.module.css"; +import * as Yup from 'yup'; +import { Form, Formik, Field } from "formik"; + +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!') + }); + const createColumnStyle = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + width: '335px', + height: '221px' + }, + }; + + return ( + <> + + +
+

Add column

+ { + + }}> +
+ + + + +
+
+ + + +) +} \ No newline at end of file diff --git a/src/components/CreateColumn/CreateColumn.module.css b/src/components/CreateColumn/CreateColumn.module.css new file mode 100644 index 0000000..518f4cc --- /dev/null +++ b/src/components/CreateColumn/CreateColumn.module.css @@ -0,0 +1,20 @@ +.createColumnModalCloseBtn { + position: fixed; + top: 18px; + left: 18px; +} + +.createColumnModalContainer { + margin: 24px; + background-color: #151515; + border: 1px solid #BEDBB080; + border-radius: 20px; +} + +.createColumnModalText { + font-size: 18px; + font-weight: 500; + line-height: 27px; + letter-spacing: -0.02em; + text-align: left; +} \ No newline at end of file From dfe592e36a492b2d11cd01be01e6606c1fbaabac Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sat, 8 Jun 2024 16:58:58 +0100 Subject: [PATCH 02/22] second modal --- src/components/CreateCard/CreateCard.jsx | 48 +++++++++++++++++++ .../CreateCard/CreateCard.module.css | 20 ++++++++ src/components/CreateColumn/CreateColumn.jsx | 3 +- 3 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 src/components/CreateCard/CreateCard.jsx create mode 100644 src/components/CreateCard/CreateCard.module.css diff --git a/src/components/CreateCard/CreateCard.jsx b/src/components/CreateCard/CreateCard.jsx new file mode 100644 index 0000000..6faf1d2 --- /dev/null +++ b/src/components/CreateCard/CreateCard.jsx @@ -0,0 +1,48 @@ +import Modal from "react-modal"; +import css from "./CreateCard.module.css"; +// import * as Yup from 'yup'; +import { Form, Formik, Field } from "formik"; + +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!') + // }); + const createCardStyle = { + content: { + top: '50%', + left: '50%', + right: 'auto', + bottom: 'auto', + marginRight: '-50%', + transform: 'translate(-50%, -50%)', + width: '335px', + height: '552px' + }, + }; + + return ( + <> + + +
+

Add card

+ { + + }}> +
+ + + + +
+
+ + + +) +} \ No newline at end of file diff --git a/src/components/CreateCard/CreateCard.module.css b/src/components/CreateCard/CreateCard.module.css new file mode 100644 index 0000000..4e3431e --- /dev/null +++ b/src/components/CreateCard/CreateCard.module.css @@ -0,0 +1,20 @@ +.createCardModalCloseBtn { + position: fixed; + top: 18px; + left: 18px; +} + +.createCardModalContainer { + margin: 24px; + background-color: #151515; + border: 1px solid #BEDBB080; + border-radius: 20px; +} + +.createCardModalText { + font-size: 18px; + font-weight: 500; + line-height: 27px; + letter-spacing: -0.02em; + text-align: left; +} \ No newline at end of file diff --git a/src/components/CreateColumn/CreateColumn.jsx b/src/components/CreateColumn/CreateColumn.jsx index 2015ab4..deef821 100644 --- a/src/components/CreateColumn/CreateColumn.jsx +++ b/src/components/CreateColumn/CreateColumn.jsx @@ -36,9 +36,8 @@ export const CreateColumn = (isOpen, isClose) => { }}>
- + - From ce8b527142e3dda8e80ac48ef599b155ba7786b2 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sat, 8 Jun 2024 17:11:01 +0100 Subject: [PATCH 03/22] Update Logo.jsx --- src/components/Logo/Logo.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Logo/Logo.jsx b/src/components/Logo/Logo.jsx index 9c8584d..87b53df 100644 --- a/src/components/Logo/Logo.jsx +++ b/src/components/Logo/Logo.jsx @@ -1,4 +1,4 @@ -import { Link } from "react-router-dom"; +// import { Link } from "react-router-dom"; import svg from "../../img/icons.svg"; import css from "./Logo.module.css"; From 56bddbf898fa709ea0cfd1f15677818ae7ea2b5c Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sun, 9 Jun 2024 17:14:53 +0100 Subject: [PATCH 04/22] test --- src/components/AddColumnBtn/AddColumnBtn.jsx | 6 +- .../CreateBoardBtn/CreateBoardBtn.jsx | 6 +- src/components/CreateCard/CreateCard.jsx | 86 +++++++++---------- src/components/CreateColumn/CreateColumn.jsx | 23 ++--- .../CreateColumn/CreateColumn.module.css | 26 +++++- 5 files changed, 79 insertions(+), 68 deletions(-) diff --git a/src/components/AddColumnBtn/AddColumnBtn.jsx b/src/components/AddColumnBtn/AddColumnBtn.jsx index 5f6b2f2..e721fc9 100644 --- a/src/components/AddColumnBtn/AddColumnBtn.jsx +++ b/src/components/AddColumnBtn/AddColumnBtn.jsx @@ -3,7 +3,7 @@ import css from "./AddColumnBtn.module.css"; import { useState } from "react"; export const AddColumnBtn = () => { - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(true); function openColumnCreateModal() { setIsOpen(true) @@ -16,7 +16,9 @@ export const AddColumnBtn = () => { return (
- + {isOpen && ( + + )}
); }; \ No newline at end of file diff --git a/src/components/CreateBoardBtn/CreateBoardBtn.jsx b/src/components/CreateBoardBtn/CreateBoardBtn.jsx index cc77577..3765931 100644 --- a/src/components/CreateBoardBtn/CreateBoardBtn.jsx +++ b/src/components/CreateBoardBtn/CreateBoardBtn.jsx @@ -1,5 +1,6 @@ import { useState } from "react"; -import CreateBoardModal from "../CreateBoardModal/CreateBoardModal"; +// import CreateBoardModal from "../CreateBoardModal/CreateBoardModal"; +import { CreateColumn } from "../CreateColumn/CreateColumn"; import svg from "../../img/icons.svg"; import css from "./CreateBoardBtn.module.css"; @@ -24,7 +25,8 @@ export default function CreateBoardBtn() { {isModalOpen && ( - + // + )} ); diff --git a/src/components/CreateCard/CreateCard.jsx b/src/components/CreateCard/CreateCard.jsx index 6faf1d2..f8bd8d1 100644 --- a/src/components/CreateCard/CreateCard.jsx +++ b/src/components/CreateCard/CreateCard.jsx @@ -1,48 +1,48 @@ -import Modal from "react-modal"; -import css from "./CreateCard.module.css"; -// import * as Yup from 'yup'; -import { Form, Formik, Field } from "formik"; +// import Modal from "react-modal"; +// import css from "./CreateCard.module.css"; +// // import * as Yup from 'yup'; +// import { Form, Formik, Field } from "formik"; -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!') - // }); - const createCardStyle = { - content: { - top: '50%', - left: '50%', - right: 'auto', - bottom: 'auto', - marginRight: '-50%', - transform: 'translate(-50%, -50%)', - width: '335px', - height: '552px' - }, - }; +// export const CreateColumn = (isOpen, isClose) => { +// // const columnModalValidation = Yup.object.shape({ +// // columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') +// // }); +// const createCardStyle = { +// content: { +// top: '50%', +// left: '50%', +// right: 'auto', +// bottom: 'auto', +// marginRight: '-50%', +// transform: 'translate(-50%, -50%)', +// width: '335px', +// height: '552px' +// }, +// }; - return ( - <> - - -
-

Add card

- { +// return ( +// <> +// +// +//
+//

Add card

+// { - }}> -
- - - - -
-
+// }}> +//
+// +// +// +// +//
+//
- - -) -} \ No newline at end of file +// +// +// ) +// } \ No newline at end of file diff --git a/src/components/CreateColumn/CreateColumn.jsx b/src/components/CreateColumn/CreateColumn.jsx index deef821..76ce567 100644 --- a/src/components/CreateColumn/CreateColumn.jsx +++ b/src/components/CreateColumn/CreateColumn.jsx @@ -6,34 +6,23 @@ import { Form, Formik, Field } from "formik"; Modal.setAppElement('#root'); export const CreateColumn = (isOpen, isClose) => { - const columnModalValidation = Yup.object.shape({ + const columnModalValidation = Yup.object().shape({ columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') }); - const createColumnStyle = { - content: { - top: '50%', - left: '50%', - right: 'auto', - bottom: 'auto', - marginRight: '-50%', - transform: 'translate(-50%, -50%)', - width: '335px', - height: '221px' - }, - }; + return ( <> - +

Add column

{ - - }}> + portalClassName="createColumnModalContainer" + // onSubmit={(values, actions) => {}} + >
diff --git a/src/components/CreateColumn/CreateColumn.module.css b/src/components/CreateColumn/CreateColumn.module.css index 518f4cc..3cd8fa0 100644 --- a/src/components/CreateColumn/CreateColumn.module.css +++ b/src/components/CreateColumn/CreateColumn.module.css @@ -1,14 +1,32 @@ .createColumnModalCloseBtn { position: fixed; top: 18px; - left: 18px; + right: 18px; +} + +.createColumnModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 335px; + height: 221px; + background: #000000; + border: 1px solid #bedbb080; + border-radius: 20px; +} + +.createColumnModalOverlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.419); + display: flex; + justify-content: center; + align-items: center; } .createColumnModalContainer { margin: 24px; - background-color: #151515; - border: 1px solid #BEDBB080; - border-radius: 20px; } .createColumnModalText { From aac1509a63fc4f9db71456d3a9a6ce1ee4103024 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sun, 9 Jun 2024 18:09:41 +0100 Subject: [PATCH 05/22] test 2 --- src/EditColumn/EditColumn.jsx | 46 ++++++++++ src/components/CreateColumn/CreateColumn.jsx | 24 +++-- .../CreateColumn/CreateColumn.module.css | 88 ++++++++++++++++++- 3 files changed, 149 insertions(+), 9 deletions(-) create mode 100644 src/EditColumn/EditColumn.jsx diff --git a/src/EditColumn/EditColumn.jsx b/src/EditColumn/EditColumn.jsx new file mode 100644 index 0000000..1ca99fb --- /dev/null +++ b/src/EditColumn/EditColumn.jsx @@ -0,0 +1,46 @@ +import Modal from "react-modal"; +import css from "./CreateColumn.module.css"; +import * as Yup from 'yup'; +import { Form, Formik, Field } from "formik"; +import svg from "../../img/icons.svg"; + +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!') + }); + + + return ( + <> + isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}> + +
+

Add column

+ {}} + > + + + + + +
+ + +) +} \ No newline at end of file diff --git a/src/components/CreateColumn/CreateColumn.jsx b/src/components/CreateColumn/CreateColumn.jsx index 76ce567..1ca99fb 100644 --- a/src/components/CreateColumn/CreateColumn.jsx +++ b/src/components/CreateColumn/CreateColumn.jsx @@ -2,10 +2,11 @@ import Modal from "react-modal"; import css from "./CreateColumn.module.css"; import * as Yup from 'yup'; import { Form, Formik, Field } from "formik"; +import svg from "../../img/icons.svg"; Modal.setAppElement('#root'); -export const CreateColumn = (isOpen, isClose) => { +export const CreateColumn = ({ isOpen, isClose }) => { const columnModalValidation = Yup.object().shape({ columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') }); @@ -13,8 +14,12 @@ export const CreateColumn = (isOpen, isClose) => { return ( <> - - + isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}> +

Add column

{ portalClassName="createColumnModalContainer" // onSubmit={(values, actions) => {}} > -
- - + + +
- ) diff --git a/src/components/CreateColumn/CreateColumn.module.css b/src/components/CreateColumn/CreateColumn.module.css index 3cd8fa0..0316610 100644 --- a/src/components/CreateColumn/CreateColumn.module.css +++ b/src/components/CreateColumn/CreateColumn.module.css @@ -1,7 +1,16 @@ .createColumnModalCloseBtn { position: fixed; - top: 18px; - right: 18px; + top: 14px; + right: 14px; + background-color: #000000; + border: none; + padding: 0; +} + +.createColumnModalIcon { + fill: none; + cursor: pointer; + stroke: rgba(255, 255, 255, 1); } .createColumnModal { @@ -29,10 +38,85 @@ margin: 24px; } +.createColumnModalForm { + display: flex; + flex-direction: column; +} + +.createColumnModalInput { + background: #1F1F1F; + border: 1px solid #BEDBB0; + width: 287px; + height: 49px; + top: 75px; + left: 24px; + padding: 14px; + gap: 0px; + border-radius: 8px; + margin-bottom: 24px; + outline: none; + opacity: 40%; + color: #fff; +} + +.createColumnModalInput:hover, +.createColumnModalInput:focus { + opacity: 100%; +} + .createColumnModalText { font-size: 18px; font-weight: 500; line-height: 27px; letter-spacing: -0.02em; text-align: left; + font-family: "Poppins", sans-serif; +} + +.createColumnModalSubmit { + 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; +} + +.createColumnModalSubmitAddBtn { + 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; +} + + .createColumnModalSpan { + width: 28px; + height: 28px; + background-color: #121212; + position: relative; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; +} + +.createColumnModalAddIcon { + stroke: white; } \ No newline at end of file From 5fd3c1091c763e6f33fd310cc37028ed2abb4289 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sun, 9 Jun 2024 21:24:25 +0100 Subject: [PATCH 06/22] Card modal update --- .../EditColumnModal.jsx} | 26 +-- .../EditColumnModal.module.css | 122 ++++++++++++ src/components/AddColumnBtn/AddColumnBtn.jsx | 2 +- .../CreateBoardBtn/CreateBoardBtn.jsx | 4 +- src/components/CreateCard/CreateCard.jsx | 98 +++++----- .../CreateCard/CreateCard.module.css | 182 +++++++++++++++++- .../CreateColumnModal/CreateColumnModal.jsx} | 2 +- .../CreateColumnModal.module.css} | 18 +- 8 files changed, 372 insertions(+), 82 deletions(-) rename src/{components/CreateColumn/CreateColumn.jsx => EditColumnModal/EditColumnModal.jsx} (52%) create mode 100644 src/EditColumnModal/EditColumnModal.module.css rename src/{EditColumn/EditColumn.jsx => components/CreateColumnModal/CreateColumnModal.jsx} (97%) rename src/components/{CreateColumn/CreateColumn.module.css => CreateColumnModal/CreateColumnModal.module.css} (84%) diff --git a/src/components/CreateColumn/CreateColumn.jsx b/src/EditColumnModal/EditColumnModal.jsx similarity index 52% rename from src/components/CreateColumn/CreateColumn.jsx rename to src/EditColumnModal/EditColumnModal.jsx index 1ca99fb..ac1842e 100644 --- a/src/components/CreateColumn/CreateColumn.jsx +++ b/src/EditColumnModal/EditColumnModal.jsx @@ -1,12 +1,12 @@ import Modal from "react-modal"; -import css from "./CreateColumn.module.css"; +import css from "EditColumn.module.css"; import * as Yup from 'yup'; import { Form, Formik, Field } from "formik"; import svg from "../../img/icons.svg"; Modal.setAppElement('#root'); -export const CreateColumn = ({ isOpen, isClose }) => { +export const EditColumn = ({ isOpen, isClose, modalName }) => { const columnModalValidation = Yup.object().shape({ columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') }); @@ -14,25 +14,25 @@ export const CreateColumn = ({ isOpen, isClose }) => { return ( <> - isClose()} className={css.createColumnModal} overlayClassName={css.createColumnModalOverlay}> -
); diff --git a/src/components/CreateCard/CreateCard.jsx b/src/components/CreateCard/CreateCard.jsx index f8bd8d1..f77d605 100644 --- a/src/components/CreateCard/CreateCard.jsx +++ b/src/components/CreateCard/CreateCard.jsx @@ -1,48 +1,60 @@ -// import Modal from "react-modal"; -// import css from "./CreateCard.module.css"; -// // import * as Yup from 'yup'; -// import { Form, Formik, Field } from "formik"; +import Modal from "react-modal"; +import css from "./CreateCard.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!') -// // }); -// const createCardStyle = { -// content: { -// top: '50%', -// left: '50%', -// right: 'auto', -// bottom: 'auto', -// marginRight: '-50%', -// transform: 'translate(-50%, -50%)', -// width: '335px', -// height: '552px' -// }, -// }; +export const CreateCard = ({ isOpen, isClose }) => { + const columnModalValidation = Yup.object().shape({ + columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') + }); -// return ( -// <> -// -// -//
-//

Add card

-// { + return ( + <> + + +
+

Add card

+ {}} + > + + + + -// }}> -// -// -// -// -// -// -//
+ + + + +
-// -// -// ) -// } \ No newline at end of file + + +) +} \ No newline at end of file diff --git a/src/components/CreateCard/CreateCard.module.css b/src/components/CreateCard/CreateCard.module.css index 4e3431e..672733d 100644 --- a/src/components/CreateCard/CreateCard.module.css +++ b/src/components/CreateCard/CreateCard.module.css @@ -1,14 +1,106 @@ +.createCardModalRadioContainer { + display: flex; + gap: 10px; + width: 80px; +} + +.createCardModalRadio1, +.createCardModalRadio2, +.createCardModalRadio3, +.createCardModalRadio4 { + position: absolute; + opacity: 0; + cursor: pointer; +} + +.createCardModalRadio1 + label::before, +.createCardModalRadio2 + label::before, +.createCardModalRadio3 + label::before, +.createCardModalRadio4 + label::before { + content: ''; + display: inline-block; + width: 16px; + height: 16px; + border-radius: 50%; + background-color: #1f1f1f; + transition: border-color 0.3s, background-color 0.3s; +} + +.createCardModalRadio1 + label::before { + background-color: #8FA1D0; +} + +.createCardModalRadio2 + label::before { + background-color: #A1D08F; +} + +.createCardModalRadio3 + label::before { + background-color: #D08FA1; +} + +.createCardModalRadio4 + label::before { + background-color: #D0A18F; +} + +.createCardModalRadio1:checked + label::after, +.createCardModalRadio2:checked + label::after, +.createCardModalRadio3:checked + label::after, +.createCardModalRadio4:checked + label::after { + content: ''; + position: absolute; + left: 4px; + top: 4px; + width: 8px; + height: 8px; + border-radius: 50%; + background-color: #fff; +} + +.createCardModalRadio1:focus + label::before, +.createCardModalRadio2:focus + label::before, +.createCardModalRadio3:focus + label::before, +.createCardModalRadio4:focus + label::before { + box-shadow: 0 0 0 3px rgba(190, 219, 176, 0.5); +} + .createCardModalCloseBtn { position: fixed; - top: 18px; - left: 18px; + top: 14px; + right: 14px; + background-color: #000000; + border: none; + padding: 0; +} + +.createCardModalIcon { + fill: none; + cursor: pointer; + stroke: rgba(255, 255, 255, 1); +} + +.createCardModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 335px; + height: 522px; + background: #000000; + border: 1px solid #bedbb080; + border-radius: 20px; +} + +.createCardModalOverlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.419); + display: flex; + justify-content: center; + align-items: center; } .createCardModalContainer { margin: 24px; - background-color: #151515; - border: 1px solid #BEDBB080; - border-radius: 20px; } .createCardModalText { @@ -17,4 +109,84 @@ line-height: 27px; letter-spacing: -0.02em; text-align: left; + margin-bottom: 24px; +} + +.createCardModalForm { + display: flex; + flex-direction: column; +} + +.createCardModalInput1 { + background: #1F1F1F; + border: 1px solid #BEDBB0; + width: 287px; + height: 49px; + padding: 14px; + border-radius: 8px; + margin-bottom: 24px; + outline: none; + opacity: 40%; + color: #fff; +} + +.createCardModalInput2 { + background: #1F1F1F; + border: 1px solid #BEDBB0; + width: 287px; + height: 154px; + padding: 14px; + border-radius: 8px; + margin-bottom: 24px; + outline: none; + opacity: 40%; + color: #fff; + resize: none; + box-sizing: border-box; + vertical-align: top; + word-wrap: break-word; +} + +.createCardModalInput1:hover, +.createCardModalInput1:focus, +.createCardModalInput2:hover, +.createCardModalInput2:focus { + opacity: 100%; +} + +.createCardModalRadio1 { + margin-right: 5px; + color: #8FA1D0; +} + +.createCardModalSubmit { + 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; +} + +.createCardModalSpan { + width: 28px; + height: 28px; + background-color: #121212; + position: relative; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; +} + +.createCardModalAddIcon { + stroke: white; } \ No newline at end of file diff --git a/src/EditColumn/EditColumn.jsx b/src/components/CreateColumnModal/CreateColumnModal.jsx similarity index 97% rename from src/EditColumn/EditColumn.jsx rename to src/components/CreateColumnModal/CreateColumnModal.jsx index 1ca99fb..fa432c2 100644 --- a/src/EditColumn/EditColumn.jsx +++ b/src/components/CreateColumnModal/CreateColumnModal.jsx @@ -1,5 +1,5 @@ import Modal from "react-modal"; -import css from "./CreateColumn.module.css"; +import css from "./CreateColumnModal.module.css"; import * as Yup from 'yup'; import { Form, Formik, Field } from "formik"; import svg from "../../img/icons.svg"; diff --git a/src/components/CreateColumn/CreateColumn.module.css b/src/components/CreateColumnModal/CreateColumnModal.module.css similarity index 84% rename from src/components/CreateColumn/CreateColumn.module.css rename to src/components/CreateColumnModal/CreateColumnModal.module.css index 0316610..0378e8c 100644 --- a/src/components/CreateColumn/CreateColumn.module.css +++ b/src/components/CreateColumnModal/CreateColumnModal.module.css @@ -89,23 +89,7 @@ cursor: pointer; } -.createColumnModalSubmitAddBtn { - 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; -} - - .createColumnModalSpan { +.createColumnModalSpan { width: 28px; height: 28px; background-color: #121212; From 1c994e9faf004c552695c6be2bd238810f81a3a9 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Sun, 9 Jun 2024 21:29:49 +0100 Subject: [PATCH 07/22] update logic --- src/components/CreateCard/CreateCard.jsx | 25 ++++++++++++------- .../CreateCard/CreateCard.module.css | 1 + 2 files changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/CreateCard/CreateCard.jsx b/src/components/CreateCard/CreateCard.jsx index f77d605..a307d33 100644 --- a/src/components/CreateCard/CreateCard.jsx +++ b/src/components/CreateCard/CreateCard.jsx @@ -31,17 +31,24 @@ export const CreateCard = ({ isOpen, isClose }) => { - + ); }; From 16992f695f536bb3807d754e2640fc4842091864 Mon Sep 17 00:00:00 2001 From: Esnobart <122377780+Esnobart@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:19:34 +0100 Subject: [PATCH 11/22] Update EditColumnModal.jsx --- src/EditColumnModal/EditColumnModal.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/EditColumnModal/EditColumnModal.jsx b/src/EditColumnModal/EditColumnModal.jsx index ac1842e..3e13869 100644 --- a/src/EditColumnModal/EditColumnModal.jsx +++ b/src/EditColumnModal/EditColumnModal.jsx @@ -6,7 +6,7 @@ import svg from "../../img/icons.svg"; Modal.setAppElement('#root'); -export const EditColumn = ({ isOpen, isClose, modalName }) => { +export const EditColumn = ({ isOpen, isClose, title }) => { const columnModalValidation = Yup.object().shape({ columnname: Yup.string().min(3, 'Too short!').max(20, 'Too long!').required('Required!') }); From ca85a02f55f4846c9e04826e47428f00b6c04161 Mon Sep 17 00:00:00 2001 From: Esnobart <122377780+Esnobart@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:21:07 +0100 Subject: [PATCH 12/22] Update CreateBoardBtn.jsx --- src/components/CreateBoardBtn/CreateBoardBtn.jsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/CreateBoardBtn/CreateBoardBtn.jsx b/src/components/CreateBoardBtn/CreateBoardBtn.jsx index b694e2e..2b256d8 100644 --- a/src/components/CreateBoardBtn/CreateBoardBtn.jsx +++ b/src/components/CreateBoardBtn/CreateBoardBtn.jsx @@ -1,6 +1,6 @@ import { useState } from "react"; -// import CreateBoardModal from "../CreateBoardModal/CreateBoardModal"; -import { CreateCard } from "../CreateCard/CreateCard"; +import CreateBoardModal from "../CreateBoardModal/CreateBoardModal"; +imp import svg from "../../img/icons.svg"; import css from "./CreateBoardBtn.module.css"; @@ -25,8 +25,7 @@ export default function CreateBoardBtn() { {isModalOpen && ( - // - + )} ); From a9857a8b8a5b354b82538227d8218eeb45c8220a Mon Sep 17 00:00:00 2001 From: Esnobart <122377780+Esnobart@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:24:54 +0100 Subject: [PATCH 13/22] Update TaskColumnName.jsx --- src/components/TaskColumnName/TaskColumnName.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx index 5c2ff3f..696b470 100644 --- a/src/components/TaskColumnName/TaskColumnName.jsx +++ b/src/components/TaskColumnName/TaskColumnName.jsx @@ -1,6 +1,7 @@ import css from "./TaskColumnName.module.css"; import svg from "../../img/icons.svg"; import { useSelector} from "react" +import { EditColumn } from "../../EditColumnModal/EditColumnModal.jsx" export const TaskColumnName = () => { const [isOpen, setIsOpen] = useSelector(false); @@ -28,7 +29,8 @@ export const TaskColumnName = () => { - + {isOpen && + } ); }; From 30b5cf413febbf21e3362e449e68697b0eef558d Mon Sep 17 00:00:00 2001 From: Esnobart <122377780+Esnobart@users.noreply.github.com> Date: Tue, 11 Jun 2024 16:32:09 +0100 Subject: [PATCH 14/22] Update AddAnotherCardBtn.jsx --- .../AddAnotherCardBtn/AddAnotherCardBtn.jsx | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx index f5a26e2..5790304 100644 --- a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx +++ b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx @@ -1,10 +1,22 @@ import css from "./AddAnotherCardBtn.module.css"; import svg from "../../img/icons.svg"; +import { useState } from "react"; +import { CreateCard } from "../CreateCard/CreateCard.jsx" export const AddAnotherCardBtn = () => { + const [isOpen, setIsOpen] = useState(false) + + const openModal = () => { + setIsOpen = true + } + + const closeModal = () => { + setIsOpen = false + } + return (
-
Add another card + {isOpen && + ); }; From aba393a69d06907272f7dc284aebb5d62e1ccfe3 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Tue, 11 Jun 2024 21:54:20 +0100 Subject: [PATCH 15/22] replace folder --- src/{ => components}/EditColumnModal/EditColumnModal.jsx | 0 src/{ => components}/EditColumnModal/EditColumnModal.module.css | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename src/{ => components}/EditColumnModal/EditColumnModal.jsx (100%) rename src/{ => components}/EditColumnModal/EditColumnModal.module.css (100%) diff --git a/src/EditColumnModal/EditColumnModal.jsx b/src/components/EditColumnModal/EditColumnModal.jsx similarity index 100% rename from src/EditColumnModal/EditColumnModal.jsx rename to src/components/EditColumnModal/EditColumnModal.jsx diff --git a/src/EditColumnModal/EditColumnModal.module.css b/src/components/EditColumnModal/EditColumnModal.module.css similarity index 100% rename from src/EditColumnModal/EditColumnModal.module.css rename to src/components/EditColumnModal/EditColumnModal.module.css From b87fb42e293ba11fb2cafd948ed1b4a2ce2fa241 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 14:53:37 +0100 Subject: [PATCH 16/22] editCardModal --- .../AddAnotherCardBtn/AddAnotherCardBtn.jsx | 10 +- .../CreateCardModal.jsx} | 0 .../CreateCardModal.module.css} | 0 .../EditCardModal/EditCardModal.jsx | 67 +++++++ .../EditCardModal/EditCardModal.module.css | 185 ++++++++++++++++++ .../EditColumnModal/EditColumnModal.jsx | 2 +- .../TaskColumnName/TaskColumnName.jsx | 8 +- 7 files changed, 262 insertions(+), 10 deletions(-) rename src/components/{CreateCard/CreateCard.jsx => CreateCardModal/CreateCardModal.jsx} (100%) rename src/components/{CreateCard/CreateCard.module.css => CreateCardModal/CreateCardModal.module.css} (100%) create mode 100644 src/components/EditCardModal/EditCardModal.jsx create mode 100644 src/components/EditCardModal/EditCardModal.module.css diff --git a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx index 5790304..e44c4fe 100644 --- a/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx +++ b/src/components/AddAnotherCardBtn/AddAnotherCardBtn.jsx @@ -1,22 +1,22 @@ import css from "./AddAnotherCardBtn.module.css"; import svg from "../../img/icons.svg"; import { useState } from "react"; -import { CreateCard } from "../CreateCard/CreateCard.jsx" +import { CreateCard } from "../CreateCardModal/CreateCardModal.jsx" export const AddAnotherCardBtn = () => { const [isOpen, setIsOpen] = useState(false) const openModal = () => { - setIsOpen = true + setIsOpen(true) } const closeModal = () => { - setIsOpen = false + setIsOpen(false) } return (
- {isOpen && - + }
); }; diff --git a/src/components/CreateCard/CreateCard.jsx b/src/components/CreateCardModal/CreateCardModal.jsx similarity index 100% rename from src/components/CreateCard/CreateCard.jsx rename to src/components/CreateCardModal/CreateCardModal.jsx diff --git a/src/components/CreateCard/CreateCard.module.css b/src/components/CreateCardModal/CreateCardModal.module.css similarity index 100% rename from src/components/CreateCard/CreateCard.module.css rename to src/components/CreateCardModal/CreateCardModal.module.css diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx new file mode 100644 index 0000000..a61a16d --- /dev/null +++ b/src/components/EditCardModal/EditCardModal.jsx @@ -0,0 +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"; + +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!') + }); + + return ( + <> + + +
+

Edit card

+ {}} + > +
+ + + + + + +
+
+ + + +) +} \ No newline at end of file diff --git a/src/components/EditCardModal/EditCardModal.module.css b/src/components/EditCardModal/EditCardModal.module.css new file mode 100644 index 0000000..37f3891 --- /dev/null +++ b/src/components/EditCardModal/EditCardModal.module.css @@ -0,0 +1,185 @@ +.editCardModalRadioContainer { + display: flex; + gap: 10px; + width: 80px; +} + +.editCardModalRadio1, +.editCardModalRadio2, +.editCardModalRadio3, +.editCardModalRadio4 { + position: absolute; + opacity: 0; + cursor: pointer; +} + +.editCardModalRadio1 + label::before, +.editCardModalRadio2 + label::before, +.editCardModalRadio3 + label::before, +.editCardModalRadio4 + label::before { + content: ''; + display: inline-block; + width: 14px; + height: 14px; + border-radius: 50%; + background-color: #000000; + transition: border-color 0.3s, background-color 0.3s; + cursor: pointer; +} + +.editCardModalRadio1 + label::before { + background-color: #8FA1D0; +} + +.editCardModalRadio2 + label::before { + background-color: #E09CB5; +} + +.editCardModalRadio3 + label::before { + background-color: #BEDBB0; +} + +.editCardModalRadio4 + label::before { + background-color: #FFFFFF4D; +} + +.editCardModalRadio1:focus + label::before { + border: 1px solid #8FA1D0; +} +.editCardModalRadio2:focus + label::before { + border: 1px solid #E09CB5; +} +.editCardModalRadio3:focus + label::before { + border: 1px solid #BEDBB0; +} +.editCardModalRadio4:focus + label::before { + border: 1px solid #FFFFFF4D; +} + +.editCardModalCloseBtn { + position: fixed; + top: 14px; + right: 14px; + background-color: #000000; + border: none; + padding: 0; +} + +.editCardModalIcon { + fill: none; + cursor: pointer; + stroke: rgba(255, 255, 255, 1); +} + +.editCardModal { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 335px; + height: 522px; + background: #000000; + border: 1px solid #bedbb080; + border-radius: 20px; +} + +.editCardModalOverlay { + position: fixed; + inset: 0; + background-color: rgba(0, 0, 0, 0.419); + display: flex; + justify-content: center; + align-items: center; +} + +.editCardModalContainer { + margin: 24px; +} + +.editCardModalText { + font-size: 18px; + font-weight: 500; + line-height: 27px; + letter-spacing: -0.02em; + text-align: left; + margin-bottom: 24px; +} + +.editCardModalForm { + display: flex; + flex-direction: column; +} + +.editCardModalInput1 { + background: #1F1F1F; + border: 1px solid #BEDBB0; + width: 287px; + height: 49px; + padding: 14px; + border-radius: 8px; + margin-bottom: 24px; + outline: none; + opacity: 40%; + color: #fff; +} + +.editCardModalInput2 { + background: #1F1F1F; + border: 1px solid #BEDBB0; + width: 287px; + height: 154px; + padding: 14px; + border-radius: 8px; + margin-bottom: 24px; + outline: none; + opacity: 40%; + color: #fff; + resize: none; + box-sizing: border-box; + vertical-align: top; + word-wrap: break-word; +} + +.editCardModalInput1:hover, +.editCardModalInput1:focus, +.editCardModalInput2:hover, +.editCardModalInput2:focus { + opacity: 100%; +} + +.editCardModalRadio1 { + margin-right: 5px; + color: #8FA1D0; +} + +.editCardModalSubmit { + 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; +} + +.editCardModalSpan { + width: 28px; + height: 28px; + background-color: #121212; + position: relative; + border-radius: 6px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 8px; +} + +.editCardModalAddIcon { + stroke: white; +} \ No newline at end of file diff --git a/src/components/EditColumnModal/EditColumnModal.jsx b/src/components/EditColumnModal/EditColumnModal.jsx index 3e13869..1f193d2 100644 --- a/src/components/EditColumnModal/EditColumnModal.jsx +++ b/src/components/EditColumnModal/EditColumnModal.jsx @@ -23,7 +23,7 @@ export const EditColumn = ({ isOpen, isClose, title }) => {

Edit column

{}} diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx index 696b470..212091b 100644 --- a/src/components/TaskColumnName/TaskColumnName.jsx +++ b/src/components/TaskColumnName/TaskColumnName.jsx @@ -1,18 +1,18 @@ import css from "./TaskColumnName.module.css"; import svg from "../../img/icons.svg"; import { useSelector} from "react" -import { EditColumn } from "../../EditColumnModal/EditColumnModal.jsx" +import { EditColumn } from "../EditColumnModal/EditColumnModal"; export const TaskColumnName = () => { const [isOpen, setIsOpen] = useSelector(false); const openModal = () => { setIsOpen(true) - } + } const closeModal = () => { setIsOpen(false) - } + } return (
@@ -30,7 +30,7 @@ export const TaskColumnName = () => {
{isOpen && - } + }
); }; From 65ba35593bfaf315740a78cda56d69b321a80cef Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 15:23:14 +0100 Subject: [PATCH 17/22] Update TaskCard.jsx --- src/components/TaskCard/TaskCard.jsx | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/components/TaskCard/TaskCard.jsx b/src/components/TaskCard/TaskCard.jsx index c97ab3e..badb949 100644 --- a/src/components/TaskCard/TaskCard.jsx +++ b/src/components/TaskCard/TaskCard.jsx @@ -1,7 +1,19 @@ import css from "./TaskCard.module.css" import svg from "../../img/icons.svg"; +import { useSelector } from "react-redux"; +import { EditCard } from "../EditCardModal/EditCardModal"; export const Card = () => { + const [isOpen, setIsOpen] = useSelector(false); + + const openModal = () => { + setIsOpen(true) + } + + const closeModal = () => { + setIsOpen(false) + } + return (
@@ -40,9 +52,11 @@ export const Card = () => { - - - + @@ -51,6 +65,7 @@ export const Card = () => {
+ ); } \ No newline at end of file From e9b9577b3029c2d246bf3d74d39a7ba960073933 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 18:13:15 +0100 Subject: [PATCH 18/22] Update TaskColumnName.jsx --- src/components/TaskColumnName/TaskColumnName.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TaskColumnName/TaskColumnName.jsx b/src/components/TaskColumnName/TaskColumnName.jsx index 212091b..b645aed 100644 --- a/src/components/TaskColumnName/TaskColumnName.jsx +++ b/src/components/TaskColumnName/TaskColumnName.jsx @@ -12,7 +12,7 @@ export const TaskColumnName = () => { const closeModal = () => { setIsOpen(false) - } + } return (
From 96d1769b782409ffaf5e06429cc6dbdf1431aeb0 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 18:13:22 +0100 Subject: [PATCH 19/22] 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 b645aed..b21af12 100644 --- a/src/components/TaskColumnName/TaskColumnName.jsx +++ b/src/components/TaskColumnName/TaskColumnName.jsx @@ -10,8 +10,8 @@ export const TaskColumnName = () => { setIsOpen(true) } - const closeModal = () => { - setIsOpen(false) + const closeModal = () => { + setIsOpen(false) } return ( From 32b8dbba6487e1d38be53241cc712f4212cb9606 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 18:16:46 +0100 Subject: [PATCH 20/22] Update TaskCard.module.css --- src/components/TaskCard/TaskCard.module.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/components/TaskCard/TaskCard.module.css b/src/components/TaskCard/TaskCard.module.css index dd985df..e55ccab 100644 --- a/src/components/TaskCard/TaskCard.module.css +++ b/src/components/TaskCard/TaskCard.module.css @@ -109,4 +109,11 @@ fill: none; stroke: #bedbb0; filter: drop-shadow(0 0 5px #bedbb0); +} + +.editModalBtn { + position: fixed; + background: #121212; + border: none; + padding: 0; } \ No newline at end of file From 23892e289623a0df44e4cd904d148ce56cbb1f10 Mon Sep 17 00:00:00 2001 From: Esnobart Date: Wed, 12 Jun 2024 18:33:07 +0100 Subject: [PATCH 21/22] Update EditCardModal.jsx --- src/components/EditCardModal/EditCardModal.jsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/EditCardModal/EditCardModal.jsx b/src/components/EditCardModal/EditCardModal.jsx index a61a16d..80db8b3 100644 --- a/src/components/EditCardModal/EditCardModal.jsx +++ b/src/components/EditCardModal/EditCardModal.jsx @@ -32,19 +32,19 @@ export const EditCard = ({ isOpen, isClose }) => {