From a176e8e6d51bdc39e644768a8d3475746d5ed2e1 Mon Sep 17 00:00:00 2001
From: victorAnumudu <anumuduchukwuebuka@gmail.com>
Date: Tue, 9 Jan 2024 15:24:14 +0100
Subject: [PATCH] assign job tabs style changed

---
 src/components/jobPopout/JobListPopout.jsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/jobPopout/JobListPopout.jsx b/src/components/jobPopout/JobListPopout.jsx
index 6f42135..20ad844 100644
--- a/src/components/jobPopout/JobListPopout.jsx
+++ b/src/components/jobPopout/JobListPopout.jsx
@@ -294,14 +294,16 @@ const [requestStatus, setRequestStatus] = useState({message:'', status:false})
 
           {/* ACTION SECTION */}
           <div className="p-4 w-full md:w-2/4 h-full">
-            <div className="grid grid-cols-3 my-4 border-b-2">
+            <div className="grid grid-cols-3 mt-4">
               {tabs.map(item => (
                 <button 
-                  className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`} 
+                  // className={`px-4 py-1 rounded-t-2xl ${selectedTab == item ? 'btn-gradient border-[2px] text-white' : 'bg-white text-[#000] border-t-[2px]'}`}
+                  className={`px-4 py-1 rounded-t-2xl border-t-[2px] transition-all duration-200 flex flex-col justify-center items-center ${selectedTab == item ? 'bg-red-50 dark:bg-[#D85A5A] text-slate-600 font-extrabold' : 'bg-white text-[#000]'}`}
                   value={item} 
                   name={item}
                   onClick={()=>setSelectedTab(item)}
                 >
+                  <div className={`mb-[1px] h-6 w-6 border-4 rounded-full transition-all duration-200 ${selectedTab == item ? 'border-white bg-emerald-500' : 'border-red-50 dark:border-[#D85A5A] bg-white'}`}></div>
                   {item[0].toUpperCase() + item.slice(1)}
                 </button>
               ))}
@@ -471,7 +473,7 @@ const JobFieldInput = ({
   data,
 }) => {
   return (
-    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-md">
+    <div className="field w-full p-3 mb-2 bg-red-50 dark:bg-[#D85A5A] rounded-b-2xl">
       {select && (
         <>
           <div className={`input-com ${parentClass}`}>
@@ -480,7 +482,7 @@ const JobFieldInput = ({
             >
               {label && (
                 <label
-                  className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
+                  className="input-label border-2 w-full border-sky-700 py-4 px-2 text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold block tracking-wide"
                   htmlFor={inputName}
                 >
                   {label}
@@ -552,7 +554,7 @@ const JobFieldInput = ({
         <InputCom
           fieldClass="px-6"
           label={label}
-          labelClass="tracking-wide"
+          labelClass="tracking-wide border-2 w-full border-sky-700 py-4 px-2"
           type="email"
           name={inputName}
           placeholder={placeholder}
-- 
2.34.1