failed credit top up style adjusted

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -9,7 +9,7 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
   return (
     <div className="logout-modal-body w-full">
-      <div className="content-wrapper w-full h-[32rem]">
+      <div className="content-wrapper w-full h-[32rem] flex flex-col justify-center">
         <div className="w-full mb-10">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <div className="px-4 md:p-8 py-4 add-fund-info">
@@ -59,12 +59,12 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
 
                   {data?.internal_return >= 0 &&
                     data?.result !== "Charge failed" && (
-                      <div className="w-full md:w-[60%] mx-auto">
-                        <div className="grid grid-cols-2 gap-8 my-2">
-                          <h1 className="job-label">
+                      <div className="w-full max-w-[300px] mx-auto">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Amount({data?.currency || ""})
                           </h1>
-                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {`${data?.symbol || ""} ${
                               Number(data?.amount * 0.01).toFixed(2) || ""
                             }`}
@@ -72,22 +72,22 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                         </div>
                         
                         {data?.curr_balance &&
-                        <div className="grid grid-cols-2 gap-8 my-2">
-                          <h1 className="job-label">
+                        <div className="flex gap-8 my-2">
+                          <h1 className="w-full job-label">
                             Wallet Balance
                           </h1>
-                          <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                          <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                             {(data?.curr_balance * 0.01).toFixed(2)}
                           </span>
                         </div>
                         }
 
                         {isSuccess && (
-                          <div className="grid grid-cols-2 gap-8 my-2">
-                            <h1 className="job-label">
+                          <div className="flex gap-8 my-2">
+                            <h1 className="w-full job-label">
                               Confirmation Number
                             </h1>
-                            <span className="w-full text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
+                            <span className="text-base text-dark-gray dark:text-white tracking-tighter flex justify-end items-end">
                               {data?.confirmation}
                             </span>
                           </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -34,7 +34,6 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
     <ModalCom
       action={onClose}
       situation={situation}
-      className="assign-task-popup"
     >
       <div className="logout-modal-wrapper w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="modal-header-con">

src/components/MyWallet/WalletAction.jsx

@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
             });
           }}
         >
-          <span className="">Add Credit</span>
+          Add Credit
         </button>
       </div>
 

src/index.css

@@ -1103,6 +1103,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.assign-task-popup {
+/* .assign-task-popup {
   top: 75px;
-}
+} */