Make add file popup more consistent to add senior pop-up (#171)

* Make add file popup more consistent to add senior pop-up * Make screen responsive to reduction in screen width. And also scrolalble. * Update font size * Remove add photo option --------- Co-authored-by: nickbar01234 <[email protected]>
JumboCode · Apr 26, 2024 · d2c9454 · d2c9454
1 parent c66c226
commit d2c9454
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 53 deletions.
diff --git a/public/icons/icon_add_photo.png b/public/icons/icon_add_photo.png
diff --git a/public/icons/icon_audio.png b/public/icons/icon_audio.png
diff --git a/public/icons/icon_doc.png b/public/icons/icon_doc.png
diff --git a/public/icons/icon_pdf.png b/public/icons/icon_pdf.png
diff --git a/public/icons/icon_plus.png b/public/icons/icon_plus.png
diff --git a/public/icons/icon_profile.png b/public/icons/icon_profile.png
diff --git a/src/components/AddSenior.tsx b/src/components/AddSenior.tsx
@@ -5,13 +5,11 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import Image, { StaticImageData } from "next/legacy/image";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm, SubmitHandler } from "react-hook-form";
 import FilterDropdown from "@components/FilterDropdown";
 import { Senior, User } from "@prisma/client";
 
-import ImageIcon from "../../public/icons/icon_add_photo.png";
 import { patchSenior } from "src/app/api/senior/[id]/route.client";
 import { postSenior } from "src/app/api/senior/route.client";
 import z from "zod/lib";
@@ -117,9 +115,6 @@ const AddSenior = ({
   setSeniorPatch,
 }: AddSeniorProps) => {
   const [selectedStudents, setSelectedStudents] = useState<User[]>([]);
-  const [currentImage, setCurrentImage] = useState<string | StaticImageData>(
-    ImageIcon
-  );
   const [confirm, setConfirm] = useState<boolean>(false);
   const [error, setError] = useState<boolean>(false);
 
@@ -209,7 +204,6 @@ const AddSenior = ({
   const handlePopUp = () => {
     setShowAddSeniorPopUp(!showAddSeniorPopUp);
     setSelectedStudents([]);
-    setCurrentImage(ImageIcon);
     setSeniorPatch(""); // empty string used as falsey value to indicate update or patch
     reset();
   };
@@ -220,46 +214,18 @@ const AddSenior = ({
     setError(false);
   };
 
-  const handleImageReplace = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-
-    if (!files || files.length === 0) return;
-
-    const selectedFile = files[0];
-    if (!selectedFile) return;
-    const reader = new FileReader();
-
-    reader.onload = (loadEvent: ProgressEvent<FileReader>) => {
-      const dataUrl = loadEvent.target?.result;
-      if (typeof dataUrl === "string") {
-        setCurrentImage(dataUrl);
-      }
-    };
-
-    reader.readAsDataURL(selectedFile);
-  };
   return (
     <>
       {showAddSeniorPopUp && (
-        <Popup className="h-fit w-[36rem]">
+        <Popup className="h-fit w-full overflow-auto sm:w-[36rem]">
           {!confirm && !error ? (
-            <form className="text-white" onSubmit={handleSubmit(onSubmit)}>
-              <div className="mb-5 text-xl font-extrabold sm:text-center md:text-left">
+            <form className=" text-white" onSubmit={handleSubmit(onSubmit)}>
+              <div className="mb-5 text-2xl font-extrabold sm:text-center md:text-left">
                 {seniorPatch ? "Update" : "Add New"} Senior
               </div>
-              <div>
-                <div className=" relative mb-4 flex h-2 w-2 flex-col items-center justify-center gap-10 rounded bg-white p-10">
-                  <Image src={currentImage} alt="Description" layout="fill" />
-                  <input
-                    type="file"
-                    className="absolute left-0 top-0 h-full w-full cursor-pointer opacity-0"
-                    onChange={handleImageReplace}
-                  />
-                </div>
-              </div>
-              <div className="flex">
-                <div className="mr-2 flex-1 flex-col">
-                  <div className=" mb-2 h-[19px] w-full text-base text-white">
+              <div className="flex flex-col sm:flex-row">
+                <div className="mr-0 flex-1 flex-col sm:mr-2">
+                  <div className="mb-2 h-[19px] w-full text-base text-white">
                     First name
                   </div>
                   <input
@@ -274,13 +240,13 @@ const AddSenior = ({
                     autoComplete="off"
                   />
                   {errors?.firstname && (
-                    <div className="text-s mb-1 text-sunset-orange">
+                    <div className="mb-1 text-sm text-sunset-orange">
                       {errors.firstname.message}
                     </div>
                   )}
                 </div>
 
-                <div className="ml-2 flex-1 flex-col">
+                <div className="ml-0 flex-1 flex-col sm:ml-2">
                   <div className="mb-2 h-[19px] w-full text-base text-white">
                     Last name
                   </div>

diff --git a/src/components/user/AddFile.tsx b/src/components/user/AddFile.tsx
@@ -53,7 +53,7 @@ const TagOptions = ({
                 ? "bg-white text-[#22555A]"
                 : "hover:bg-white hover:text-[#22555A]"
             } m-2 ml-[-2px] inline-block rounded-full border-2 
-            p-2`}
+            p-2 text-base`}
           >
             {tag.name}
           </label>
@@ -72,10 +72,10 @@ const TagSelector = ({
 }) => {
   return (
     <div>
-      <div className="text-neutral-600 mb-1 h-[34px] w-full font-['merriweather'] text-2xl">
+      <div className="text-neutral-600 h-[30px] w-full font-['merriweather'] text-xl">
         Tags
       </div>
-      <div className="text-lg font-thin">
+      <div className="text-sm font-thin">
         Select min of 1, max of 3 <span className="text-red-400">*</span>
       </div>
       <TagOptions
@@ -154,22 +154,23 @@ const AddFile = ({
   }
 
   return !error ? (
-    <Popup className="h-[32rem] w-full overflow-y-auto sm:h-[44rem] sm:w-[36rem]">
+    // <Popup className="h-[32rem] w-full overflow-y-auto sm:h-[44rem] sm:w-[36rem]">
+    <Popup className="h-fit w-full overflow-y-auto sm:w-[36rem]">
       <div className="flex-col justify-between rounded-[16px] text-white">
-        <div className="mb-5 mt-4 text-3xl font-bold"> Create New File</div>
-        <div className="text-neutral-600 mb-3 h-[34px] w-full text-2xl font-thin">
+        <div className="mb-5 text-2xl font-bold">Create New File</div>
+        <div className="text-neutral-600 h-[30px] w-full text-xl">
           Select Date
         </div>
         <div className="inline-bl w-full">
-          <div className="text-2xl text-[#22555A]">
+          <div className="text-base text-[#22555A]">
             <DatePicker
               showIcon
               icon={
                 <FontAwesomeIcon icon={faCalendar} className="text-dark-teal" />
               }
               wrapperClassName="w-full relative"
-              calendarIconClassname="text-3xl text-blue-600 mt-[7px] absolute right-2"
-              className="mb-4 h-16 w-full cursor-pointer rounded-lg pl-4"
+              calendarIconClassname="text-2xl text-blue-600 mt-[3px] absolute right-2"
+              className="mb-4 h-12 w-full cursor-pointer rounded-lg pl-4"
               selected={startDate}
               onChange={(date) => date && setStartDate(date)}
               dateFormat="dd MMMM yyyy"
@@ -188,13 +189,15 @@ const AddFile = ({
         />
         <div className="flex w-full flex-row justify-center">
           <button
-            className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] bg-white p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white"
+            className=" mx-2 mt-7 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
+                                  px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white"
             onClick={handleResetState}
           >
             Cancel
           </button>
           <button
-            className="mx-2 my-4 w-full max-w-[9rem] rounded-[16px] p-3 text-2xl font-medium text-[#22555A] drop-shadow-md hover:bg-offer-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
+            className="mx-2 mt-7 flex max-h-[36px] w-24 items-center justify-center rounded-xl bg-white 
+                                  px-4 py-2 text-[18px] font-normal text-dark-teal drop-shadow-md hover:bg-off-white enabled:bg-white disabled:bg-gray-500 disabled:text-gray-700"
             disabled={
               selectedTags.length == 0 ||
               excludedDatesString.includes(startDate.toDateString())