wallet btn style adjusted

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -260,13 +260,13 @@ function AddFundDollars(props) {
         {/* switch button */}
         <div className="flex">
           <form className="add-fund-info flex items-center gap-3 md:px-8 md:pt-4 px-4 pt-2">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+            <h1 className="job-label my-1">
               {countryWallet == "US" && "Payment Method"}
             </h1>
             <div className="my-1 flex items-center gap-2">
               <label
                 htmlFor="previous"
-                className="cursor-pointer flex items-center gap-1"
+                className="flex items-center gap-1"
               >
                 <input
                   type="radio"
@@ -283,7 +283,7 @@ function AddFundDollars(props) {
               </label>
               <label
                 htmlFor="new"
-                className={`cursor-pointer flex items-center gap-1 ${
+                className={`flex items-center gap-1 ${
                   payListCards.data.length >= MaxNoOfCards
                     ? "pointer-events-none"
                     : ""
@@ -388,7 +388,7 @@ function AddFundDollars(props) {
                               {/* Inputs */}
                               {/* Name */}
                               <div className="flex items-center field w-full my-2 flex-[0.4] gap-3">
-                                <label className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
+                                <label className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold flex items-center gap-1">
                                   Name:
                                 </label>
                                 <p className="input-label text-[#181c32] dark:text-white text-[16px] leading-[20.9625px] font-semibold flex items-center gap-1">{`${firstname} ${lastname}`}</p>
@@ -423,7 +423,7 @@ function AddFundDollars(props) {
                                         className={`flex items-center justify-between mb-2.5`}
                                       >
                                         <label
-                                          className="input-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
+                                          className="job-label text-[#181c32] dark:text-white text-[13.975px] leading-[20.9625px] font-semibold line-clamp-3 flex items-center"
                                           htmlFor="expiration"
                                         >
                                           Exp Month{" "}

src/components/MyWallet/Popup/AddFundPop.jsx

@@ -131,7 +131,7 @@ function AddFundPop({
         <div className="lg:w-2/2 w-full mb-10 lg:mb-0">
           <div className="add-fund w-full bg-white dark:bg-dark-white rounded-2xl">
             <form className="md:px-8 md:pt-4 px-4 pt-2 add-fund-info flex items-center gap-[2.1rem]">
-              <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+              <h1 className="job-label my-1">
                 Amount({currency})
               </h1>
               <div className="field w-full max-w-[250px]">

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/ConfirmAddFund.jsx

@@ -29,10 +29,10 @@ function ThePaymentText({ value, type }) {
   return (
     <div className="my-2 flex items-center gap-5">
       <div className="card-details flex items-center gap-3">
-        <h1 className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1 space-x-1">
+        <h1 className="text-base">
           {description} Card
         </h1>
-        <p className="text-xl font-normal text-dark-gray dark:text-white tracking-wide">
+        <p className="text-base font-normal text-dark-gray dark:text-white tracking-wide">
           Bank **************{digits}
         </p>
       </div>
@@ -49,10 +49,11 @@ function AmountSection({ currency, amount, country }) {
 
   return (
     <div className={`flex items-center gap-8`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      {/* text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1 */}
+      <h1 className="min-w-[150px] job-label">
         Amount({currency})
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedAmount}
       </span>
     </div>
@@ -68,10 +69,10 @@ function TransactionFeeSection({ currency, fee, country }) {
 
   return (
     <div className={`flex items-center gap-8 border-b border-gray-600`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <h1 className="min-w-[150px] job-label">
         Transaction Fee
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedFee}
       </span>
     </div>
@@ -89,10 +90,10 @@ function TotalSection({ currency, amount, fee, country }) {
 
   return (
     <div className={`flex items-center gap-8`}>
-      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+      <h1 className="min-w-[150px] job-label">
         Total
       </h1>
-      <span className="min-w-[100px] text-xl text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+      <span className="min-w-[100px] text-base text-right font-normal text-dark-gray dark:text-white tracking-tighter my-1">
         {formattedTotal}
       </span>
     </div>
@@ -380,7 +381,7 @@ function ConfirmAddFund({
                       <div className="flex items-center gap-8">
                         <label
                           htmlFor="payment"
-                          className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1"
+                          className="min-w-[150px] job-label"
                         >
                           Payment Method
                         </label>
@@ -395,11 +396,12 @@ function ConfirmAddFund({
                     <div
                       className={`gap-8 flex items-center`}
                     >
-                      <h1 className="min-w-[150px] text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                      <h1 className="min-w-[150px] job-label">
                         Reference No
                       </h1>
-                      <span className="text-xl font-normal text-dark-gray dark:text-white tracking-tighter my-1">
-                        {__confirmData?.credit_reference}
+                      <span className="text-base font-normal text-dark-gray dark:text-white tracking-tighter my-1">
+                        {/* Displays only half of the string */}
+                        {__confirmData?.credit_reference.slice(0, (Math.floor(__confirmData?.credit_reference.length/2)))}
                       </span>
                     </div>
                   </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

@@ -16,7 +16,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
 
   return (
     <div className="counters w-full flex justify-between gap-2">
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-start items-center">
         <button
           onClick={() => {
             setShowNairaWithdraw((prev) => ({ ...prev, show: true }));
@@ -28,7 +28,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
           Spend
         </button>
       </div>
-      <div className="w-1/2 flex justify-center items-center">
+      <div className="w-1/2 flex justify-end items-center">
         <button
           className="logout-btn btn-gradient text-white"
           onClick={() => {
@@ -38,7 +38,7 @@ function WalletAction({ walletItem, payment, openPopUp }) {
             });
           }}
         >
-          <span className="">Add Credit</span>
+          Add Credit
         </button>
       </div>
 

src/components/MyWallet/WalletItemCard.jsx

@@ -44,7 +44,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
   return (
     <>
       <div
-        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-2 p-8 justify-between"
+        className="current-balance-widget w-full h-full rounded-2xl overflow-hidden flex flex-col items-center gap-4 p-4 justify-between"
         style={{
           background: `url(${background}) 0% 0% / cover no-repeat`,
         }}
@@ -86,7 +86,7 @@ export default function WalletItemCard({ walletItem, payment, countries }) {
           </span>
         </p>
 
-        <div className="my-2 w-full h-[1px] bg-white"></div>
+        <div className="w-full h-[1px] bg-white"></div>
 
         <WalletAction
           walletItem={{ ...walletItem, walletCountry: currentWalletCurrency }}

src/index.css

@@ -183,7 +183,7 @@
     @apply px-2 min-w-[80px] h-11 flex justify-center items-center text-base rounded-full cursor-pointer
   }
   .logout-btn {
-    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-base rounded-full cursor-pointer
+    @apply px-4 min-w-[80px] h-[52px] flex justify-center items-center text-xl font-bold rounded-full cursor-pointer
   }
 }
 
@@ -1103,6 +1103,6 @@ TODO: Responsive ===========================
   margin: 0;
 }
 
-.assign-task-popup {
+/* .assign-task-popup {
   top: 75px;
-}
+} */