Fix styling issues in FormTextInput and AddProjectModal components

Maakaf · Mar 21, 2024 · 8456dad · 8456dad
1 parent d656d1f
commit 8456dad
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 47 deletions.
diff --git a/components/Common/Inputs/FormTextInput.tsx b/components/Common/Inputs/FormTextInput.tsx
@@ -11,7 +11,7 @@ export const FormTextInput: React.FC<FormTextInputProps> = ({ placeholder, value
   return (
     <div>
       <input
-        className={`mw-[462px] w-[100%] mx-auto h-14 p-2 block rounded-md focus:outline-non bg-gray-700 dark:bg-gray-200 ${error && 'border-red-500'}`}
+        className={`mw-[462px] w-[100%] mx-auto h-14 p-2 block rounded-md focus:outline-non dark:bg-gray-700 bg-gray-200 ${error && 'border-red-500'}`}
         type="text" 
         placeholder={placeholder}
         value={value}

diff --git a/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx b/components/Common/Modals/AddProjectmodal/AddProjectModal.tsx
@@ -1,7 +1,6 @@
-
 import React, { useState } from 'react';
 import Modal from '../Modal';
-import { z, ZodError } from "zod";
+import { z, ZodError } from 'zod';
 import { FormTextInput } from '../../Inputs/FormTextInput';
 import { FileUploader } from './FileUploader';
 import { ProjectDescription } from './ProjectDescription';
@@ -13,10 +12,15 @@ interface AddProjectModalProps {
   closeModal: () => void;
 }
 
-export const AddProjectModal: React.FC<AddProjectModalProps> = ({ isOpen, closeModal }) => {
+export const AddProjectModal: React.FC<AddProjectModalProps> = ({
+  isOpen,
+  closeModal,
+}) => {
   return (
-    <div className='w-4/5'>
-      <Modal isOpen={isOpen} modalContent={<ModalContent closeModal={closeModal} />} />
+    <div className="w-4/5">
+      <Modal isOpen={isOpen} closeModal={closeModal}>
+        <ModalContent closeModal={closeModal} />
+      </Modal>
     </div>
   );
 };
@@ -61,7 +65,9 @@ const ModalContent = ({ closeModal }: ModalContentProps) => {
     setRepoLink(e.target.value);
   };
 
-  const handleProjectDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+  const handleProjectDescriptionChange = (
+    e: React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
     setProjectDescription(e.target.value);
   };
 
@@ -80,9 +86,9 @@ const ModalContent = ({ closeModal }: ModalContentProps) => {
       //TODO Add logic behind this later
     } catch (error: any) {
       if (error instanceof ZodError) {
-        const parsedErrors : { [key: string]: string }  = {};
+        const parsedErrors: { [key: string]: string } = {};
 
-        for (const { path , message } of error.errors) {
+        for (const { path, message } of error.errors) {
           parsedErrors[path[0]] = message;
         }
         setErrors(parsedErrors);
@@ -91,8 +97,13 @@ const ModalContent = ({ closeModal }: ModalContentProps) => {
   };
 
   return (
-    <div className="p-4 mt-24 bg-[#0F1729] text-white dark:bg-gray-100 dark:text-black">
-      <p className="text-xl font-bold mb-4 text-right">בקשה להוספת פרויקט</p>
+    <div className="p-4 mt-24 dark:bg-[#0F1729] bg-gray-100 dark:text-white  text-black rounded-[12px]">
+      <div className="flex justify-between mb-4">
+        <p className="text-xl font-bold text-right items-center">
+          בקשה להוספת פרויקט
+        </p>
+        <button onClick={closeModal}>X</button>
+      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 justify-center gap-4 max-w-[1100px] flex-wrap">
         <FormTextInput
@@ -120,10 +131,12 @@ const ModalContent = ({ closeModal }: ModalContentProps) => {
         />
 
         <FileUploader onChange={handleFileChange} />
-
       </div>
 
-      <ProjectDescription projectDescription={projectDescription} handleProjectDescriptionChange={handleProjectDescriptionChange} />
+      <ProjectDescription
+        projectDescription={projectDescription}
+        handleProjectDescriptionChange={handleProjectDescriptionChange}
+      />
       <TermsAndConditions closeModal={closeModal} handleSubmit={handleSubmit} />
       <MustIncludeMessage />
     </div>

diff --git a/components/Common/Modals/AddProjectmodal/FileUploader.tsx b/components/Common/Modals/AddProjectmodal/FileUploader.tsx
@@ -16,7 +16,7 @@ export const FileUploader: React.FC<FileUploaderProps> = ({ onChange }) => {
   return (
     <div className='flex flex-row items-center'>
       <p className='text-2xl whitespace-nowrap'>לוגו (אם יש)</p>
-      <div className="ml-4 flex items-center bg-gray-700 dark:bg-gray-200 rounded-md m-auto">
+      <div className="ml-4 flex items-center dark:bg-gray-700 bg-gray-200 rounded-md m-auto">
         <label htmlFor="file-input" className="cursor-pointer">
           <input
             id="file-input"

diff --git a/components/Common/Modals/AddProjectmodal/ProjectDescription.tsx b/components/Common/Modals/AddProjectmodal/ProjectDescription.tsx
@@ -10,7 +10,7 @@ export const ProjectDescription: React.FC<ProjectDescriptionProps> = ({ projectD
     <div className='w-[100%]'>
       <p className="text-xl font-bold mb-4 mt-4 text-right">תיאור פרוייקט</p>
       <textarea
-        className='h-56 bg-gray-700 dark:bg-gray-200 w-[100%] rounded-md'
+        className='h-56 dark:bg-gray-700 bg-gray-200 w-[100%] rounded-md'
         placeholder="טקסט חופשי"
         value={projectDescription}
         onChange={handleProjectDescriptionChange}

diff --git a/components/Common/Modals/Modal.tsx b/components/Common/Modals/Modal.tsx
@@ -1,26 +1,27 @@
-'use client'
+'use client';
 
 import React, { ReactNode } from 'react';
 
 interface ModalProps {
   isOpen: boolean;
-  modalContent: ReactNode
+  children: ReactNode;
+  closeModal: () => void;
 }
 
-const Modal = ({ isOpen,modalContent } : ModalProps) => {
+const Modal = ({ isOpen, children, closeModal }: ModalProps) => {
   if (!isOpen) return null;
-
   return (
-    <div className="fixed z-10 inset-0 overflow-y-auto">
+    <div
+      className="fixed z-50 inset-0 overflow-auto bg-[rgba(0,0,0,0.5)]"
+      onClick={closeModal}
+    >
       <div className="flex items-center justify-center min-h-screen">
-        <div className="relative rounded-sm shadow-lg">
-          <div>
-            {modalContent}
-          </div>
+        <div className="relative shadow-lg" onClick={e => e.stopPropagation()}>
+          <>{children}</>
         </div>
       </div>
     </div>
   );
 };
 
-export default Modal;
+export default Modal;
diff --git a/components/Maintainers/MaintainerForm.tsx b/components/Maintainers/MaintainerForm.tsx
@@ -1,18 +1,8 @@
-'use client';
-
 import { useTranslations } from 'next-intl';
-import { AddProjectModal } from '../Common/Modals/AddProjectmodal/AddProjectModal';
-import { useState } from 'react';
+import MaintainersModal from './MaintainersModal';
 
 const MaintainerForm = () => {
   const t = useTranslations('maintainers.maintainerForm');
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const openModal = () => {
-    setIsModalOpen(true);
-  };
-
   return (
     <div className="px-4 mx-auto text-center text-[#020616] dark:text-[#F8FAFC]">
       <h1 className="mb-3 font-black text-4xl mx-auto md:text-5xl">
@@ -29,17 +19,7 @@ const MaintainerForm = () => {
         </p>
       </div>
 
-      <AddProjectModal
-        isOpen={isModalOpen}
-        closeModal={() => setIsModalOpen(false)}
-      />
-
-      <button
-        className="text-xs mx-auto mb-9 btn rounded-full px-7 py-2 flex items-center justify-center gap-2 dark:hover:bg-purple-200 dark:hover:text-darkText transition-all w-48"
-        onClick={openModal}
-      >
-        טופס הצטרפות
-      </button>
+      <MaintainersModal />
     </div>
   );
 };

diff --git a/components/Maintainers/MaintainersModal.tsx b/components/Maintainers/MaintainersModal.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { useState } from 'react';
+import { AddProjectModal } from '../Common/Modals/AddProjectmodal/AddProjectModal';
+
+function MaintainersModal() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const modalOpenHandler = () => {
+    setIsModalOpen(true);
+  };
+
+  return (
+    <>
+      <AddProjectModal
+        isOpen={isModalOpen}
+        closeModal={() => setIsModalOpen(false)}
+      />
+
+      <button
+        className="text-xs mx-auto mb-9 btn rounded-full px-7 py-2 flex items-center justify-center gap-2 dark:hover:bg-purple-200 dark:hover:text-darkText transition-all w-48"
+        onClick={modalOpenHandler}
+      >
+        טופס הצטרפות
+      </button>
+    </>
+  );
+}
+
+export default MaintainersModal;