update App.js, src/components/FolderTree/index.js, Input.js and src/components/FormInput/index.js

src/App.js

@@ -120,7 +120,8 @@ function App() {
         <BlogDesign5 />
         <BlogDesign6 /> */}
 
-        {/* <Button /> <ButtonDivTag /> */}
+        {/* <Button />  */}
+        {/* <ButtonDivTag /> */}
 
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ButtonDesign /> */}
@@ -212,7 +213,7 @@ function App() {
 
         {/* <GridListTable /> */}
 
-        {/* <PopupCard /> */}
+        <PopupCard />
 
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CircleInCircle />

src/components/FolderTree/index.js

@@ -12,6 +12,7 @@ import opened from "./images/opened.svg";
 const FolderState = ({ items }) => {
   let [selected, setSelected] = useState(1);
   let [top, setTop] = useState(1);
+
   return (
     <>
       <div
@@ -29,6 +30,7 @@ const FolderState = ({ items }) => {
     </>
   );
 };
+
 const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
   const [expands, setExpand] = useState(
     items.filter((item) => item.exapnd).map((item) => item.id)
@@ -98,6 +100,7 @@ const FolderTree = ({ items, pid, selected, setSelected, setTop }) => {
 };
 
 export default FolderState;
+
 FolderState.defaultProps = {
   items: [
     {

src/components/FormInput/Input.js

@@ -8,29 +8,33 @@ const FormFields = ({
   defaultValue,
   set,
   label,
-  className,
+  borderClassname,
   type,
   maxLength,
   max,
   min,
   register,
+  onClick,
 }) => {
   const [value, setValue] = useState(defaultValue);
 
   return (
     <div
+      onClick={onClick}
       className={
-        "h-full rounded border border-color7 mx-1 relative flex items-center flex-row-reverse bg-color2_5" +
+        "h-full flex flex-row items-center rounded border mx-1 relative " +
-        className +
+        borderClassname +
-        (value ? " border-blue-500 bg-white border rounded" : " bg-transparent")
+        (value
+          ? " border-[#2483E1] bg-white border rounded"
+          : " bg-transparent")
       }
     >
       <div
         className={
-          " text-sm absolute transition-all duration-300 pointer-events-none px-3 PY-2 text-left  transform translate-x-[-10px] " +
+          " text-xs absolute transition-all duration-300 pointer-events-none px-3  transform -translate-x-[7px] " +
           (value
-            ? `text-blue-500 bg-white top-[-10px]`
+            ? `text-[#2483E1] bg-white top-[-10px]`
-            : "text-color19 top-[20px]")
+            : "text-[#0F0543] top-[10px]")
         }
       >
         {label}
@@ -41,7 +45,9 @@ const FormFields = ({
           maxLength={maxLength}
           value={value}
           type={"text"}
-          className={"rtl w-full h-full  px-4 outline-0 "}
+          className={`rtl w-full h-full  px-4 py-2 bg-[#F9F9F9] text-[#F9F9F9] outline-0 text-xs rounded  focus:border-[#2483E1 focus:ring-[#2483E1
+                ${value === "" ? "bg-[#F9F9F9]" : "bg-red-600"}
+              `}
           onChange={(e) => setValue(e.target.value)}
           inputMode={type === "number" ? "numeric" : ""}
           onInput={(e) => {
@@ -69,3 +75,7 @@ const FormFields = ({
 };
 
 export default FormFields;
+
+FormFields.defaultProps = {
+  borderClassname: "border-[#2483E1] bg-indigo-600",
+};

src/components/FormInput/index.js

@@ -1,10 +1,12 @@
-import React from "react";
+import React, { useState } from "react";
 import { useForm } from "react-hook-form";
 
 import Input from "./Input";
 
 const FormInput = () => {
   const { register, getValues } = useForm();
+  const [selectedInput, setSelectedInput] = useState(false);
+
   return (
     <div className="mx-72 mt-20 flex flex-row items-center justify-between divide-x-2 divide-[#F3F3F3]  divide-x-reverse bg-white p-4 py-7 border border-gray-200 rounded-sm shadow-sm">
       <div className="flex-grow px-4">
@@ -12,6 +14,10 @@ const FormInput = () => {
           register={register("firstName")}
           // defaultValue={info?.firstName}
           label="نام "
+          borderClassname={` ${
+            selectedInput === true ? "border-[#E0E0E0]" : "border-[#2483E1]"
+          }`}
+          onClick={() => setSelectedInput(true)}
         />
       </div>
       <div className="flex-grow px-4">