update App.js, Input.js, src/components/PopupCard/index.js and src/components/UploadFile/index.js

src/App.js

@@ -207,7 +207,7 @@ function App() {
         {/* <ProfilePicNextToEachOther />  */}
         {/* ----------------------------$$$ end---------------------------- */}
 
-        <FileManager />
+        {/* <FileManager /> */}
 
         {/* <GridListTable /> */}
 

src/components/AnimatedInput/Input.js

@@ -4,7 +4,7 @@ import { useState } from "react";
 
 import fixNumbers from "./fixNumbers";
 
-const FormFields = ({
+const Input = ({
   defaultValue,
   set,
   label,
@@ -23,7 +23,7 @@ const FormFields = ({
     <div
       onClick={onClick}
       className={
-        "h-full flex flex-row items-center rounded border mx-1 relative  " +
+        "h-full w-full flex flex-row items-center rounded border mx-1 relative  " +
         borderClassname +
         (value ? "bg-white border rounded" : "bg-transparent")
       }
@@ -72,8 +72,8 @@ const FormFields = ({
   );
 };
 
-export default FormFields;
+export default Input;
 
-FormFields.defaultProps = {
+Input.defaultProps = {
   // borderClassname: "border-[#E0E0E0]",
 };

src/components/PopupCard/index.js

@@ -13,9 +13,11 @@ import OutlineInput from "../OutlineInput";
 import OutlineTextarea from "../OutlineTextarea";
 import ButtonNewDesign from "../ButtonNewDesign";
 import ProfilePicNextToEachOther from "../ProfilePicNextToEachOther";
+import Input from "../AnimatedInput/Input";
 
 const PopupCard = ({ selectedChecklist }) => {
-  const [activeInput, setActiveInput] = useState(false);
+  // const [activeInput, setActiveInput] = useState(false);
+
   const [checklist, setChecklist] = useState(0);
 
   return (
@@ -35,17 +37,18 @@ const PopupCard = ({ selectedChecklist }) => {
         className="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full justify-center items-center"
       >
         <div className="relative p-4 w-full h-full md:h-auto">
-          <div className="w-7/12 mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
+          <div className="max-w-[920px] mx-auto relative bg-white rounded-lg shadow dark:bg-gray-700">
             <div className="flex justify-between items-start p-5 rounded-t">
               {/* cancle icon */}
               <CancleIcon backgroundColor={"bg-[#F8F8F8]"} icon={cancleIcon} />
             </div>
             {/* modalBody */}
-            <div className="w-11/12 mx-auto">
+            <div className="mx-5">
               {/* top */}
-              <div className="flex flex-row ">
+              <div className="flex flex-row">
                 {/* right */}
-                <OutlineInput
+                <Input />
+                {/* <OutlineInput
                   divWidth="w-1/2"
                   textClr={activeInput ? "text-[#22577E]" : "text-[#06BACE]"}
                   borderClr={activeInput ? "#22577E" : "#06BACE"}
@@ -53,26 +56,11 @@ const PopupCard = ({ selectedChecklist }) => {
                   outlineTitleClr={activeInput ? "#22577E" : "#06BACE"}
                   onFocus={() => setActiveInput(true)}
                   onBlur={() => setActiveInput(false)}
-                />
+                /> */}
                 {/* divider */}
                 <div className="border border-[#DBDBDB77] rounded mx-5"></div>
                 {/* left */}
-                <div date-rangepicker className="flex items-center  w-1/2">
+                <Input />
-                  <div className="relative w-full">
-                    <img
-                      src={calender}
-                      className="absolute top-3 left-2"
-                      alt=""
-                    />
-                    <input
-                      name="start"
-                      type="text"
-                      className="w-full border-2 border-blue-400 rounded-md text-sm h-12
-                      focus:outline-none focus:border-[#22577E] focus:ring-1 focus:ring-[#22577E]"
-                      placeholder="چهارشنبه 10 فروردین 1401 بماند به یادگار"
-                    />
-                  </div>
-                </div>
               </div>
               {/* divider */}
               <div className="border border-[#DBDBDB77] rounded my-5"></div>

src/components/UploadFile/index.js

@@ -48,7 +48,7 @@ export default class UploadFile extends Component {
         {/* ? upload input File  */}
         <div className="relative bg-white w-full flex flex-col items-center px-4 py-7 rounded-lg border-2 border-dashed border-blue-300 mt-5">
           <div className=" ">
-            <img src={file} className="" />
+            <img src={file} className="" alt="" />
             <input
               onChange={this.uploadFile}
               type="file"