updated style

src/components/MyActiveJobs/ActiveJobsMedia.jsx

@@ -326,17 +326,17 @@ function ActiveJobsMedia(props) {
                         <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">
+                        <div className="text-base tracking-wide">
+                            <p className="font-semibold text-black dark:text-white tracking-wider">
                                 Description:{" "}
                             </p>
-                            <p className="p-2 ml-8 border border-sky-blue">
+                            <p className="p-2 ml-8 border-b border-sky-blue">
                                 {props?.details && props.details.description}
                             </p>
                         </div>
                         <div className="mt-6 w-full lg:flex gap-8">
-                            <div className="w-full text-base dark:text-white tracking-wide">
-                                <p className="font-semibold text-sky-blue dark:text-white">
+                            <div className="w-full text-base tracking-wide">
+                                <p className="font-semibold text-black dark:text-white tracking-wider">
                                     Delivery Detail:{" "}
                                 </p>
                                 <p className="p-2 ml-8">
@@ -352,7 +352,7 @@ function ActiveJobsMedia(props) {
 
                 {/* job details */}
                 <div className="w-full md:w-[200px]">
-                    <p className="text-base text-sky-blue">Delivery Detail</p>
+                    {/* <p className="text-base text-sky-blue">Delivery Detail</p> */}
                     {passDue ? (
                         <div className="my-1">
                             <p className="text-base text-slate-700">
@@ -442,7 +442,7 @@ function ActiveJobsMedia(props) {
                         </div>
                         {tab == "message" ? (
                         <textarea
-                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border border-[#4687ba] outline-none"
+                            className="p-4 w-full h-[150px] text-base text-slate-600 dark:text-white bg-white dark:bg-black border-4 border-[#4687ba] outline-none"
                             // rows="10"
                             style={{ resize: "none" }}
                             name="message"
@@ -451,7 +451,7 @@ function ActiveJobsMedia(props) {
                             autoFocus
                         />
                         ) : (
-                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border border-[#4687ba]">
+                        <div className="p-4 mb-2 h-[150px] text-base text-slate-600 border-4 border-[#4687ba]">
                             <div className="files flex">
                             <label
                                 htmlFor="file"
@@ -509,8 +509,8 @@ function ActiveJobsMedia(props) {
                     {/* End of error or success display */}
 
                     {/* Buttons Sections */}
-                    <div className="py-1 sm:flex sm:justify-end sm:items-center">
-                        <div className="w-full flex justify-center items-center gap-4">
+                    <div className="py-1 grid grid-cols-1 xxs:grid-cols-3">
+                        <div className="w-full col-span-3 col-start-1 xxs:col-span-2 xxs:col-start-2 flex justify-between items-center gap-4">
                             <button
                                 type="button"
                                 onClick={handleClearAll}

src/components/MyActiveJobs/JobActions/CurrentTaskAction.jsx

@@ -65,7 +65,7 @@ function CurrentTaskAction({jobDetails}) {
           <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="p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium text-orange-600 rounded-2xl hover:opacity-80 transition-all duration-300">
+                <button onClick={popUpHandler} type="button" className="btn-gradient text-white p-1 lg:p-2 border-4 border-slate-300 text-lg lg:text-xl font-medium rounded-2xl">
                     I have completed this task
                 </button>
             </div>

src/components/Partials/MediaHeader.jsx

@@ -110,7 +110,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
     <>
       <div className="header-wrapper backdrop-blur-sm bg-[#efedfe5e]/60 dark:bg-transparent w-full h-full flex items-center xl:px-0 md:px-10 px-5">
         <div className="flex justify-between items-center w-full">
-          <button
+          {/* <button
             className="xl:hidden block mr-10"
             type="button"
             onClick={sidebarHandler}
@@ -157,12 +157,12 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 </linearGradient>
               </defs>
             </svg>
-          </button>
+          </button> */}
 
-          <div className="search-bar xl:hidden justify-center items-center w-[376px]">
-            {/* Home */}
+          {/* Home */}
+          {/* <div className="search-bar xl:hidden justify-center items-center w-[376px]">
             <HomeButton />
-          </div>
+          </div> */}
 
           {/* Back BTN AND TITLE */}
           <div className="pl-4 w-full flex justify-start gap-3 items-center">
@@ -199,7 +199,7 @@ export default function MediaHeader({ logoutModalHandler, sidebarHandler, backpa
                 )}
             </div>
 
-            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide">
+            <h1 className="text-base md:text-[20px] font-bold text-dark-gray dark:text-white tracking-wide line-clamp-1">
             {title && title}
             </h1>
           </div>