added color to modal and made the labels same font

src/components/jobPopout/PendingJobsPopout.jsx

@@ -135,13 +135,13 @@ function PendingJobsPopout({ details, onClose, situation }) {
   return (
     <ModalCom action={onClose} situation={situation}>
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-        <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 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">
             Manage Pending Item
           </h1>
           <button
             type="button"
-            className="text-[#374557] dark:text-red-500"
+            className="modal-close-btn"
             onClick={onClose}
           >
             <svg
@@ -170,7 +170,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
             <p className="text-base font-semibold text-slate-900 dark:text-white tracking-wide">
               {details.title}
             </p>
-            <div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300">
+            <div className="my-2 p-2 flex justify-start items-center space-x-2 bg-red-100 border-2 border-red-300 rounded-2xl">
               <span className="w-8 h-8 text-center text-sm rounded-full flex justify-center items-center text-red-300 bg-yellow-100">
                 !
               </span>
@@ -236,7 +236,7 @@ function PendingJobsPopout({ details, onClose, situation }) {
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-1/4 h-full">
-            <p className="mb-6 text-sm dark:text-white">Actions</p>
+            <p className="job-label mb-6 dark:text-white">Actions</p>
 
             <div className="mb-3">
               <p className="px-2 py-1 text-sm bg-slate-100">