sidebar update

.env

@@ -72,7 +72,8 @@ REACT_APP_APPLE_SOCIAL_LOGIN=0
 REACT_APP_LINKEDIN_SOCIAL_LOGIN=0
 
 #File Handling
-REACT_APP_MAX_FILE_SIZE=1000000
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 #Auth Text(s)

.env.development

@@ -43,7 +43,9 @@ REACT_APP_GOOGLE_CLIENT_SECRET=aozK_2G8UjaCmLgPPkv9abIm
 REACT_APP_GOOGLE_CLIENT_SCOPE="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile"
 REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -50,7 +50,9 @@ REACT_APP_FACEBOOK_REDIRECT_URL="https://users.wrenchboard.com/login/auth/flogin
 
 DISABLE_ESLINT_PLUGIN=true
 
-REACT_APP_MAX_FILE_SIZE=1000000
+#File Handling
+REACT_APP_MAX_FILE_SIZE=1048576
+REACT_APP_MAX_VIDEO_FILE_SIZE=31457280
 REACT_APP_TOTAL_NUM_FILE=4
 
 REACT_APP_LOGOUT_TEXT="Sign Out"

src/components/Cards/AvailableJobsCard.jsx

@@ -85,7 +85,7 @@ export default function AvailableJobsCard({
                 //   backgroundImage: `url('${image}')`,
                 // }}
               >
-                <div className="flex flex-col h-full bg-slate-100 p-2 rounded-md">
+                <div className="flex flex-col min-h-full bg-slate-100 p-2 rounded-md">
                   <p>{datas.description}</p>
                 </div>
               </div>
@@ -95,7 +95,7 @@ export default function AvailableJobsCard({
               <div className="flex justify-between">
                 <div className="flex items-center space-x-2">
                   <div>
-                    <p className="font-bold text-xl tracking-wide line-clamp-1   text-dark-gray dark:text-white">
+                    <p className="w-full font-bold text-xl tracking-wide text-dark-gray dark:text-white">
                       {/* {thePrice} | {datas.timeline_days} day(s) */}
                       {thePrice}
                     </p>

src/components/MarketPlace/PopUp/MarketPopUp.jsx

@@ -252,7 +252,7 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
             <div className="mx-auto bg-[#f1f8ff] dark:bg-[#C2C8D3] px-4 rounded-md md:min-h-[420px] flex flex-col justify-between">
               <div className="w-full flex flex-col justify-center pb-4 gap-2">
                 <p className="job-label w-full">
-                  Interested in the task?
+                  Interested?
                 </p>
                 <hr />
                 <button
@@ -262,9 +262,8 @@ const MarketPopUp = ({ details, onClose, situation, marketInt }) => {
                 >
                   {" "}
                   <div className="w-full flex flex-col justify-between gap-2">
-                    <span>Send</span>
-                    <span>Interest</span>
-                    <span>Request</span>
+                    <span>Notify</span>
+                    <span>Owner</span>
                   </div>
                 </button>
                 <>

src/components/MyActiveJobs/ActiveJobs.jsx

@@ -75,11 +75,23 @@ function ActiveJobs(props) {
       // IF NO FILE SELECTED RETURN
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+    let fileType = files[0].type.split('/')[0].toLowerCase()
+    if (fileType == 'video' && files[0].size > Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)) { // return if video file is more than 30mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -69,11 +69,23 @@ function ActiveJobsMedia(props) {
       // IF NO FILE SELECTED RETURN
       return;
     }
-    if (files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) {
+    let fileType = files[0].type.split('/')[0].toLowerCase()
+    if (fileType == 'video' && files[0].size > Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)) {  // return if video file is more than 30mb
       setRequestStatus({
         loading: false,
         status: false,
-        message: "File must be <= 1mb",
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_VIDEO_FILE_SIZE)/1048576} mb`,
+      });
+      setTimeout(() => {
+        setRequestStatus({ loading: false, status: false, message: "" });
+      }, 5000);
+      return;
+    }
+    if (fileType != 'video' && files[0].size > Number(process.env.REACT_APP_MAX_FILE_SIZE)) { // return if other files is more than 1mb
+      setRequestStatus({
+        loading: false,
+        status: false,
+        message: `File must be <= ${Number(process.env.REACT_APP_MAX_FILE_SIZE)/1048576} mb`,
       });
       setTimeout(() => {
         setRequestStatus({ loading: false, status: false, message: "" });

src/components/Partials/Sidebar.jsx

@@ -106,7 +106,7 @@ export default function Sidebar({
           }`}
         >
           <div className="heading mb-5">
-            <h1 className="title text-xl font-bold text-sky-blue">Menu</h1>
+            <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Menu</h1>
           </div>
           <div className="items">
             <ul className="flex flex-col space-y-6">
@@ -141,11 +141,11 @@ export default function Sidebar({
         {userDetails?.account_type !== "FAMILY" && (
           <div
             className={`menu-item transition-all duration-300 ease-in-out ${
-              sidebar ? "my-5" : ""
+              sidebar ? "mb-5" : "mb-2"
             }`}
           >
             <div className="heading mb-5">
-              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
+              <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>Family</h1>
             </div>
             <div className="items">
               <ul className="flex flex-col space-y-6">
@@ -206,8 +206,8 @@ export default function Sidebar({
                 }`}
               >
                 <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
-                    My Jobs
+                  <h1 className={`${!sidebar && 'text-center'} title text-xl font-bold text-sky-blue`}>
+                    Jobs
                   </h1>
                 </div>
                 <div className="items">
@@ -321,7 +321,7 @@ const ListItem = ({ sidebar, route, title, bubble, iconName, popup }) => {
         </span>
         <span
           className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
-            sidebar ? "active flex-1" : "w-0"
+            sidebar ? "active flex-1" : "hidden"
           }`}
         >
           {title && title}