Reuseable button

frontend/src/components/modals/admin/editDeadline/editDeadline.jsx

@@ -1,10 +1,12 @@
-import React, { useState } from 'react'
+import React, { useState, useContext } from 'react'
 import ColTitleDes from '../../component/columnTitleDes'
 import TextField from '../../component/textField'
 import DatePicker from '../../component/datePicker2'
 import RadioButton from '../../component/radioButton/radioButton'
 import Priority from '../../component/priority'
 import ModalBase from '../../modalBase/index'
+import ModalButton from '../../component/button'
+import { ModalContext } from '../../../../context/ModalContext'
 
 // prop value format= {
 // 	title: 'fuck',
@@ -15,6 +17,9 @@ import ModalBase from '../../modalBase/index'
 //  assignTo: "#marketing"
 // }
 const EditDeadline = ({ details }) => {
+	const { modalData, setModalData } = useContext(ModalContext)
+	const closeModal = () => setModalData({ ...modalData, modalShow: false })
+
 	let data = {
 		description: details.description,
 		title: details.title,
@@ -128,14 +133,11 @@ const EditDeadline = ({ details }) => {
 						}}
 					/>
 				</div>
-				<div className="flex justify-end gap-4">
-					<button className="h-11 px-5 text-sm text-brand-primary font-semibold">
-						Cancel
-					</button>
-					<button className="h-11 px-5 text-sm bg-brand-primary font-semibold text-brand-bg-white">
-						Update
-					</button>
-				</div>
+				<ModalButton
+					actionName="Update"
+					actionFunc={() => {}}
+					cancelFunc={closeModal}
+				/>
 			</div>
 		</ModalBase>
 	)

frontend/src/components/modals/component/button.jsx

@@ -0,0 +1,21 @@
+import React from 'react'
+
+const ModalButton = ({ cancelFunc, actionFunc, actionName }) => {
+	return (
+		<div className="flex justify-end gap-4">
+			<button
+				className="h-11 px-5 text-sm text-brand-primary font-semibold"
+				onClick={cancelFunc}
+			>
+				Cancel
+			</button>
+			<button
+				className="h-11 px-5 text-sm bg-brand-primary font-semibold text-brand-bg-white"
+				onClick={actionFunc}
+			>
+				{actionName}
+			</button>
+		</div>
+	)
+}
+export default ModalButton

frontend/src/components/modals/component/checkbox/checkbox.jsx

@@ -25,7 +25,7 @@ const Checkbox = ({ id, label, check, onChange }) => {
 			)}
 			<label
 				htmlFor={id}
-				className="text-sm leading-none self-center flex items-center gap-x-2"
+				className="text-sm cursor-pointer leading-none self-center flex items-center gap-x-2"
 			>
 				<div className="inline-block h-5 w-5 border-solid border border-black p-px">
 					<div className={`${style.interior} bg-brand-primary h-full`}></div>

frontend/src/components/modals/component/radioButton/radioButton.jsx

@@ -16,7 +16,7 @@ const RadioButton = ({ id, label, selected, onChange }) => {
 			}
 			<label
 				htmlFor={id}
-				className="text-sm leading-none self-center flex items-center gap-x-2"
+				className="text-sm cursor-pointer leading-none self-center flex items-center gap-x-2"
 			>
 				<div className="inline-block h-4 w-4 rounded-1/2 border-solid border border-black p-px">
 					<div

frontend/src/components/modals/user/userViewDeadline/userView.jsx

@@ -1,11 +1,13 @@
-import React from 'react'
+import React, { useContext } from 'react'
 
 import ColTitleDes from '../../component/columnTitleDes'
 import RowTitleDes from '../../component/rowTitleDes'
 import Avatar from '../../component/avatar'
 import RemindMeCheckBox from '../../component/remindMeCheckBox'
 import ModalBase from '../../modalBase/index'
 import Priority from '../../component/priority'
+import ModalButton from '../../component/button'
+import { ModalContext } from '../../../../context/ModalContext'
 
 // const props = {
 // 	priority: 'high',
@@ -41,6 +43,9 @@ export default function UserViewDeadline({
 	checkbox,
 	assigneeOnline,
 }) {
+	const { modalData, setModalData } = useContext(ModalContext)
+	const closeModal = () => setModalData({ ...modalData, modalShow: false })
+
 	const DeadlineTitle = (
 		<div className="flex gap-4">
 			{title} <Priority status={priority} forTitle />
@@ -88,6 +93,11 @@ export default function UserViewDeadline({
 						<RemindMeCheckBox checkBoxObj labels={labels} change={onchange} />
 					}
 				/>
+				<ModalButton
+					actionName="Save"
+					actionFunc={() => {}}
+					cancelFunc={closeModal}
+				/>
 			</div>
 		</ModalBase>
 	)