From c04b909489f8054b667574f578fa94f567a7661a Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Thu, 28 Mar 2024 17:48:00 +0100
Subject: [PATCH] added style for manage media task page

---
 .env                                          |  2 +-
 .env.development                              |  2 +-
 .env.production                               |  2 +-
 .../MyActiveJobs/ActiveJobMessageMedia.jsx    |  2 +-
 .../MyActiveJobs/ActiveJobsMedia.jsx          | 60 ++++++++++---------
 .../JobActions/CurrentTaskAction.jsx          | 30 ++++++----
 src/components/VideoCom/VideoElement.jsx      |  2 +-
 src/views/ManageActiveJobs.jsx                | 14 +++--
 8 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/.env b/.env
index 3532055..405a541 100644
--- a/.env
+++ b/.env
@@ -117,4 +117,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
\ No newline at end of file
diff --git a/.env.development b/.env.development
index 18cf90f..3598525 100644
--- a/.env.development
+++ b/.env.development
@@ -85,4 +85,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com '
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://dev-media.wrenchboard.com'
\ No newline at end of file
diff --git a/.env.production b/.env.production
index 22e5082..851b7a1 100644
--- a/.env.production
+++ b/.env.production
@@ -91,4 +91,4 @@ REACT_APP_SHOW_ACCOUNT_DASH=1
 REACT_APP_SHOW_SLIDER_BANNERS=0
 
 # FOR MEDIA LINK
-REACT_APP_MEDIA_LINK='https://media.wrenchboard.com '
\ No newline at end of file
+REACT_APP_MEDIA_LINK='https://media.wrenchboard.com'
\ No newline at end of file
diff --git a/src/components/MyActiveJobs/ActiveJobMessageMedia.jsx b/src/components/MyActiveJobs/ActiveJobMessageMedia.jsx
index a156072..23c4e40 100644
--- a/src/components/MyActiveJobs/ActiveJobMessageMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobMessageMedia.jsx
@@ -8,7 +8,7 @@ import SelectBox from "../Helpers/SelectBox";
 export default function ActiveJobMessageMedia({ activeJobMesList }) {
   return (
     <div className='flex flex-col justify-between'>
-        <div className="w-full h-full min-h-[200px] max-h-[200px] overflow-y-auto">
+        <div className="w-full h-full min-h-[250px] max-h-[250px] overflow-y-auto">
             <table className="wallet-activity w-full table-auto border-collapse text-left">
                 <thead className='border-b-2'>
                     <tr className='text-slate-600'>
diff --git a/src/components/MyActiveJobs/ActiveJobsMedia.jsx b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
index ab244a7..d894e64 100644
--- a/src/components/MyActiveJobs/ActiveJobsMedia.jsx
+++ b/src/components/MyActiveJobs/ActiveJobsMedia.jsx
@@ -312,21 +312,23 @@ function ActiveJobsMedia(props) {
             <div className="w-full mb-4 border-b pb-4 lg:pb-0 lg:mb-0 lg:border-b-0">
             
             <div className="mb-4 w-full h-auto">
-                <VideoElement videoId={''} />
+                <VideoElement videoId={props?.details?.media_uid} />
             </div>
 
             <div className="w-full p-4 bg-white dark:bg-black rounded-2xl shadow-md md:flex md:justify-between gap-2">
-                <div className="w-full">
-                    <p className="w-full text-base text-right text-sky-blue">
-                    {props?.details && props.details.job_to}
-                    </p>
-                    <div className="text-base text-slate-700 dark:text-white tracking-wide">
-                    <p className="font-semibold text-black dark:text-white">
-                        Description:{" "}
-                    </p>
-                    <p className="p-2 border border-sky-blue">
-                        {props?.details && props.details.description}
-                    </p>
+                <div className="w-full flex flex-col justify-between">
+                    <div className="w-full">
+                        <p className="w-full text-base text-right text-sky-blue">
+                        {props?.details && props.details.job_to}
+                        </p>
+                        <div className="text-base text-slate-700 dark:text-white tracking-wide">
+                            <p className="font-semibold text-black dark:text-white">
+                                Description:{" "}
+                            </p>
+                            <p className="p-2 border border-sky-blue">
+                                {props?.details && props.details.description}
+                            </p>
+                        </div>
                     </div>
                     <div className="my-2">
                         <IndexJobActions details={props.details} />
@@ -397,13 +399,13 @@ function ActiveJobsMedia(props) {
 
             <div className="w-full lg:w-2/5 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-1">
                 {/* TEXTAREA SECTION */}
-                <div className="mb-5">
+                <div className="w-full mb-3">
                     <div className="w-full">
                         <div className="pl-7 mb-2 flex items-center border-b border-slate-300 gap-3">
                             <button
                                 name="message"
                                 onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 py-1 rounded-t-2xl ${
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                 tab == "message"
                                     ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                     : "bg-white text-[#000] border-t-[2px]"
@@ -414,7 +416,7 @@ function ActiveJobsMedia(props) {
                             <button
                                 name="files"
                                 onClick={(e) => setTab(e.target.name)}
-                                className={`px-4 py-1 rounded-t-2xl ${
+                                className={`px-4 xl:px-1 xxl:px-4 text-sm py-1 rounded-t-2xl ${
                                 tab == "files"
                                     ? "bg-[#4687ba] border-[2px] border-[#4687ba] text-white"
                                     : "bg-white text-[#000] border-t-[2px]"
@@ -438,7 +440,7 @@ function ActiveJobsMedia(props) {
                             <div className="files">
                             <label
                                 htmlFor="file"
-                                className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+                                className="custom-btn btn-gradient text-base text-white"
                             >
                                 Select Files to Upload
                             </label>
@@ -450,7 +452,7 @@ function ActiveJobsMedia(props) {
                                 onChange={handleFileChange}
                             />
                             </div>
-                            <div className="selected_file my-2">
+                            <div className="selected_file my-2 overflow-y-auto">
                             {filesToSend.length > 0 &&
                                 filesToSend.map((item, index) => (
                                 <p key={index} className="flex items-center space-x-2">
@@ -492,12 +494,12 @@ function ActiveJobsMedia(props) {
                     {/* End of error or success display */}
 
                     {/* Buttons Sections */}
-                    <div className="py-2 sm:flex sm:justify-end sm:items-center">
-                        <div className="w-full sm:w-3/4 flex justify-between items-center space-x-2">
+                    <div className="py-1 sm:flex sm:justify-end sm:items-center">
+                        <div className="w-full flex justify-between items-center space-x-2">
                         <button
                             type="button"
                             onClick={handleClearAll}
-                            className="border-gradient text-base tracking-wide px-4 py-2 rounded-full"
+                            className="custom-btn border-gradient"
                         >
                             <span className="text-gradient">Clear</span>
                         </button>
@@ -505,7 +507,7 @@ function ActiveJobsMedia(props) {
                             <button
                             onClick={sendFile}
                             type="button"
-                            className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer flex justify-center items-center"
+                            className="custom-btn btn-gradient text-white"
                             >
                             {requestStatus.loading ? (
                                 <LoadingSpinner size="6" color="sky-blue" />
@@ -514,8 +516,8 @@ function ActiveJobsMedia(props) {
                                 <svg
                                     xmlns="http://www.w3.org/2000/svg"
                                     viewBox="0 0 24 24"
-                                    width="24"
-                                    height="24"
+                                    width="20"
+                                    height="20"
                                     fill="white"
                                 >
                                     <path d="M12 2L2 12h3v8h14v-8h3L12 2zm0 16v-6h-2v6H7l5-5 5 5h-3z" />
@@ -529,7 +531,7 @@ function ActiveJobsMedia(props) {
                             <button
                             onClick={sendTaskMessage}
                             type="button"
-                            className="btn-gradient text-base tracking-wide px-4 py-2 rounded-full text-white cursor-pointer"
+                            className="custom-btn btn-gradient text-white"
                             >
                             {requestStatus.loading ? (
                                 <LoadingSpinner size="6" color="sky-blue" />
@@ -618,13 +620,13 @@ const PopModal = ({
         ref={myRef}
         className="message-modal-wrapper w-11/12 min-w-[350px] max-w-[700px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto"
       >
-        <div className="message-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
-          <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
+        <div className="modal-header-con">
+          <h1 className="modal-title">
             {details?.contract}
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={popUpHandler}
           >
             <svg
@@ -708,14 +710,14 @@ const PopModal = ({
               <button
                 onClick={handlePrint}
                 type="button"
-                className="w-20 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                className="custom-btn btn-gradient text-white"
               >
                 <span className="text-white">Print</span>
               </button>
               <button
                 onClick={popUpHandler}
                 type="button"
-                className="w-20 h-11 flex justify-center items-center border-gradient text-base rounded-full text-white"
+                className="custom-btn border-gradient text-white"
               >
                 <span className="text-gradient">Cancel</span>
               </button>
diff --git a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
index fec474e..eb8b393 100644
--- a/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
+++ b/src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx
@@ -60,20 +60,30 @@ function CurrentTaskAction({jobDetails}) {
     }
 
   return (
-    <div className='job-action  dark:bg-black'>
-
-          <div className="w-full text-sm text-left text-gray-500 active-worker ">
-            <div className="flex space-x-2 items-center w-full task_action_panel">
-                <div>
-                    I completed this task and ready for review and acceptance.
-                </div>
-            </div>
+    <div className='dark:bg-black'>
 
+          <div className="w-full text-sm text-left text-gray-500">
+            {jobDetails.job_type == 'MEDIA' ?
             <div className="flex justify-center items-center">
-                <button onClick={popUpHandler} type="button" className="w-[150px] h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white">
-                    Send for Review
+                <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                    I have completed this task
                 </button>
             </div>
+            :
+            <div className='job-action active-worker'>
+                <div className="flex space-x-2 items-center w-full task_action_panel">
+                    <div>
+                        I completed this task and ready for review and acceptance.
+                    </div>
+                </div>
+
+                <div className="flex justify-center items-center">
+                    <button onClick={popUpHandler} type="button" className="custom-btn btn-gradient text-white">
+                        Send for Review
+                    </button>
+                </div>
+            </div>
+            }
           </div>
 
           {popUp && (
diff --git a/src/components/VideoCom/VideoElement.jsx b/src/components/VideoCom/VideoElement.jsx
index c195ab0..148ea8a 100644
--- a/src/components/VideoCom/VideoElement.jsx
+++ b/src/components/VideoCom/VideoElement.jsx
@@ -14,7 +14,7 @@ export default function VideoElement({videoId}) {
 
   return (
     <video ref={videoRef} className='w-full h-full' controls>
-      <source src={`https://dev-media.wrenchboard.com/videos/${videoId}`} type='video/mp4'></source>
+      <source src={`${process.env.REACT_APP_MEDIA_LINK}/videos/${videoId}`} type='video/mp4'></source>
       Your browser does not support the video tag.
   </video>
   )
diff --git a/src/views/ManageActiveJobs.jsx b/src/views/ManageActiveJobs.jsx
index d2dc4eb..8776f31 100644
--- a/src/views/ManageActiveJobs.jsx
+++ b/src/views/ManageActiveJobs.jsx
@@ -61,22 +61,24 @@ function ManageActiveJobs() {
     setDetails(state);
     getActiveJobMesList();
   }, [activeJobMesListReload, chatMessageList]);
-console.log('Opps', details)
+
   return (
     <>
-    {/* {details.job_type == 'TASK' ? */}
-    <ActiveJobs
+    {details.job_type == 'MEDIA' ?
+    <ActiveJobsMedia
       details={state}
       activeJobMesList={activeJobMesList}
       reloadActiveJobList={setActiveJobMesListReload}
     />
-    {/* :
-    <ActiveJobsMedia 
+    : details.job_type == 'TASK' ?
+    <ActiveJobs 
       details={state}
       activeJobMesList={activeJobMesList}
       reloadActiveJobList={setActiveJobMesListReload}
     />
-    } */}
+    :
+    null
+    }
     </>
   );
 }