Merge branch 'my_wallet_layout' of WrenchBoard/Users-Wrench into master

src/components/MyWallet/AddFundDollars.jsx

@@ -144,7 +144,7 @@ function AddFundDollars(props) {
     <>
       <div className="w-full">
         {/* switch button */}
-        <div className="flex justify-between">
+        <div className="flex">
           <form className="add-fund-info flex items-center gap-3">
             <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
               {props.currency == "US Dollars" && "Payment Method"}
@@ -184,26 +184,6 @@ function AddFundDollars(props) {
               </label>
             </div>
           </form>
-          <form className="add-fund-info flex items-center gap-3">
-            <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-              {props.currency == "US Dollars"
-                ? "Amount (USD)"
-                : "Amount (Naira)"}
-            </h1>
-            <div className="field w-full max-w-[8rem]">
-              <InputCom
-                fieldClass="px-6"
-                type="text"
-                name="amount"
-                placeholder="0"
-                value={props.input}
-                inputHandler={props.handleChange}
-              />
-              <p className="text-base text-red-500 h-5">
-                {props.inputError && props.inputError}
-              </p>
-            </div>
-          </form>
         </div>
         <hr />
         {/* END OF switch button */}
@@ -215,7 +195,7 @@ function AddFundDollars(props) {
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
               <select
-                className="my-3 w-full rounded-full p-4 outline-none border-none"
+                className="my-3 w-full rounded-full p-4 outline-none border-none text-base text-black dark:text-gray-100 bg-[#dce2e6] dark:bg-[#5e6278] border"
                 value={prevCardDetails["payment-card"]?.card_uid}
                 id="payment-card"
                 name="payment-card"

src/components/MyWallet/AddFundPop.jsx

@@ -20,7 +20,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
 
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (e) => {
-    e.preventDefault()
+    e.preventDefault();
     setInputError("");
     if (!input || input == "0") {
       setInputError("Please Enter Amount");
@@ -36,7 +36,7 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
       }, 5000);
     }
 
-    if(input)   return;
+    if (input) return;
     // setTimeout(
     //   () =>
     //     setConfirmCredit({
@@ -53,22 +53,40 @@ function AddFundPop({ _payment, input, setInput, onClose, setConfirmCredit }) {
   };
 
   return (
-    <div className="h-[32rem] w-full">
+    <div className="h-[33rem] w-full">
       <div className="content-wrapper w-full lg:flex xl:space-x-8 lg:space-x-4 bottomMargin">
         <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">
             {/*<h2 className='md:p-8 p-4 text-slate-900 dark:text-white text-xl lg:text-2xl font-medium'>Add Credit with Account Deposit</h2>*/}
             {/*<hr />*/}
+            <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">
+                {currency == "US Dollars" ? "Amount (USD)" : "Amount (Naira)"}
+              </h1>
+              <div className="field w-full max-w-[250px]">
+                <InputCom
+                  fieldClass="px-6"
+                  type="text"
+                  name="amount"
+                  placeholder="0"
+                  value={input}
+                  inputHandler={handleChange}
+                />
+                <p className="text-base text-red-500 h-5">
+                  {inputError && inputError}
+                </p>
+              </div>
+            </form>
+
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}
             {currency == "US Dollars" && (
-              <div className="w-full md:p-8 p-4 bg-white dark:bg-dark-white rounded-2xl">
+              <div className="w-full md:px-8 md:pt-4 px-4 pt-2 bg-white dark:bg-dark-white rounded-2xl">
                 <AddFundDollars
                   setInputError={setInputError}
                   input={input}
                   setInput={setInput}
                   currency={currency}
                   onClose={onClose}
-                  handleChange={handleChange}
                   setConfirmCredit={setConfirmCredit}
                 />
               </div>