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

src/components/FamilyAcc/FamilyManageTabs.jsx

@@ -214,28 +214,28 @@ export default function FamilyManageTabs({
                 browseProfileImg={browseProfileImg}
                 accountDetails={accountDetails}
               />
-              <div className="mt-4 flex justify-center items-center gap-2">
+              <div className="mt-4 flex justify-start items-center gap-2">
                 <button
                   onClick={() => tabHandler("Account")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/account.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Account</p>
+                  <p className="text-lg text-sky-blue">Acc.</p>
                 </button>
                 <button
                   onClick={() => tabHandler("Profile")}
-                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center"
+                  className="family-icon p-2 border-2 border-sky-blue rounded-2xl flex flex-col justify-between items-center max-w-[65px] w-full"
                 >
                   <img
                     src={localImgLoad("images/icons/profile.svg")}
-                    className="w-[70px] h-[70px]"
+                    className="max-w-[30px] w-full"
                     alt="Settings-Icon"
                   />
-                  <p className="mt-2 text-lg text-sky-blue">Profile</p>
+                  <p className="text-lg text-sky-blue">Profile</p>
                 </button>
               </div>
             </div>

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -8,13 +8,13 @@ export default function ProfileInfo({
   accountDetails,
 }) {
   return (
-    <div className="flex flex-col items-center gap-6">
+    <div className="flex flex-col items-center gap-4">
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
             src={profileImg}
             alt=""
-            className="sm:w-[198px] sm:h-[198px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
+            className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />
           <input
             ref={profileImgInput}

src/components/MyWallet/AddFundPop.jsx

@@ -72,11 +72,9 @@ function AddFundPop({ _payment }) {
                 )}
               </div>
             </form>
-            {currency == "US Dollars" && (
-              <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4">
-                Payment Method
-              </h1>
-            )}
+            <h1 className="mb-2 text-xl font-bold text-dark-gray dark:text-white px-4 h-5">
+              {currency == "US Dollars" && "Payment Method"}
+            </h1>
             <hr />
 
             {/* SHOWS THIS IF USER CURRENCY IS DOLLARS */}