offer interest page formatted

src/components/OffersInterest/ManageInterestOffer.jsx

@@ -143,13 +143,15 @@ export default function ManageInterestOffer(props) {
                                     {/* info tab */}
                                     {tab == 'info' ?
                                     <div className="info-details w-full border-t">
-                                        <div className="my-3 flex items-center gap-1">
+                                        <div className="my-0 md:my-3 block md:flex items-center gap-10">
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Name</span>
-                                        </div>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_name}</span>
-                                        <div className="my-3 flex items-center gap-1">
+                                            </div>
-                                            <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                            <div className="my-3 md:my-0 flex items-center gap-1">
-                                            <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                                <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Member Since</span>
+                                                <span className="min-w-[100px] text-sm font-bold text-dark-gray dark:text-white tracking-wide">{props.offerDetails?.client_added}</span>
+                                            </div>
                                         </div>
                                         <div className="my-3 flex items-center gap-1">
                                             <span className="w-[200px] text-lg font-bold text-dark-gray dark:text-white tracking-wide">Jobs completed</span>
@@ -226,7 +228,7 @@ export default function ManageInterestOffer(props) {
                             {/* BUTTON section */}
                             <div className="p-4 w-full min-h-full bg-sky-100 dark:bg-dark-gray col-span-1">
                                 <div className="w-full h-full">
-                                    <div className="mt-0 sm:mt-10 flex sm:flex-col justify-center items-center gap-10">
+                                    <div className="h-full flex sm:flex-col justify-center items-center gap-10">
                                         {requestStatus.loading && requestStatus.processType == 'accept' ?
                                             <LoadingSpinner color='sky-blue' size='10' />
                                         :    
@@ -235,9 +237,10 @@ export default function ManageInterestOffer(props) {
                                                 name='accept'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
+                                                className='max-w-[150px] h-[100px] bg-[#57cd89] text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Accept
+                                            Accept this Interest
                                             </button>
                                         }
 
@@ -249,9 +252,10 @@ export default function ManageInterestOffer(props) {
                                                 name='reject'
                                                 disabled={requestStatus.loading}
                                                 onClick={interestOfferProcess}
-                                                className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                // className="px-2 py-1 h-11 flex justify-center items-center border-gradient text-base rounded-full text-black"
+                                                className='max-w-[150px] h-[100px] bg-red-300 text-center text-lg font-semibold text-white py-2 px-4 rounded-md shadow-md'
                                             >
-                                            Reject
+                                            Reject this Interest
                                             </button>
                                         }
                                     </div>