collapse-icon fixed, family icon fixed

.env

@@ -68,6 +68,8 @@ REACT_APP_APPLE_REDIRECT_URL='http://localhost:9082/login/auth/apple'
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
 
+REACT_APP_LOGOUT_TEXT="Sign Out"
+
 
 #apigate.lotus.g1.wrenchboard.com:76.209.103.227
 #apigate.orion.g1.wrenchboard.com:76.209.103.227

.env.development

@@ -42,3 +42,5 @@ REACT_APP_GOOGLE_REDIRECT_URL=http://localhost:9082/login/auth/
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

.env.production

@@ -49,3 +49,5 @@ DISABLE_ESLINT_PLUGIN=true
 
 REACT_APP_MAX_FILE_SIZE=1000000
 REACT_APP_TOTAL_NUM_FILE=4
+
+REACT_APP_LOGOUT_TEXT="Sign Out"

src/components/AuthPages/Login/index.jsx

@@ -275,8 +275,8 @@ export default function Login() {
                     <div className="input-item mb-5">
                       <InputCom
                         labelClass="tracking-wider"
-                        fieldClass="sm:px-6 px-2"
+                        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-                        value={password}
+                        value={password.replace(/./g, "●")}
                         inputHandler={handlePassword}
                         placeholder="● ● ● ● ● ●"
                         label="Password"

src/components/AuthPages/SignUp/index.jsx

@@ -205,7 +205,7 @@ export default function SignUp() {
                 </div>
                 <div className="input-item mb-5">
                   <InputCom
-                    fieldClass="px-6"
+                    fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
                     placeholder="● ● ● ● ● ●"
                     label="Password"
                     name="password"
@@ -214,7 +214,7 @@ export default function SignUp() {
                     passIcon={
                       showPassword ? "show-password" : "hide-password"
                     }
-                    value={formData.password}
+                    value={formData.password.replace(/./g, "●")}
                     inputHandler={handleInputChange}
                   />
                 </div>

src/components/AuthPages/VerifyPassword/index.jsx

@@ -158,8 +158,8 @@ const SuccessfulComponent = ({
     {/* INPUT */}
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={password}
+        value={password?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Password"
@@ -171,8 +171,8 @@ const SuccessfulComponent = ({
     </div>
     <div className="mb-5">
       <InputCom
-        fieldClass="px-6"
+        fieldClass="sm:px-6 px-2 tracking-[0.25em] text-2xl"
-        value={confirmPassword}
+        value={confirmPassword?.replace(/./g, "●")}
         inputHandler={handlePassword}
         placeholder="● ● ● ● ● ●"
         label="Confirm Password"

src/components/FamilyAcc/FamilyTable.jsx

@@ -6,6 +6,7 @@ import { handlePagingFunc } from "../Pagination/HandlePagination";
 import PaginatedList from "../Pagination/PaginatedList";
 
 import familyImage from '../../assets/images/no-family-side.png'
+import localImgLoad from "../../lib/localImgLoad";
 
 export default function FamilyTable({ className, familyList, loader, popUpHandler }) {
   const navigate = useNavigate();
@@ -54,6 +55,7 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                         last_login,
                         task_count,
                         family_uid,
+                        banner
                       } = props;
                       let addedDate = added?.split(" ")[0];
                       let LoginDate = last_login?.split(" ")[0];
@@ -64,9 +66,10 @@ export default function FamilyTable({ className, familyList, loader, popUpHandle
                         >
                           <td className=" py-4">
                             <div className="flex space-x-2 items-center w-full">
-                              <div className="w-full h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1] min-w-[60px]">
+                              <div className="w-[60px] h-[60px] rounded-full overflow-hidden flex justify-center items-center flex-[0.1]">
                                 <img
-                                  src={dataImage1}
+                                  // src={dataImage1}
+                                  src={localImgLoad(`images/icons/${banner}`)}
                                   alt="data"
                                   className="w-full h-full"
                                 />

src/components/FamilyAcc/Tabs/ProfileInfo.jsx

@@ -1,4 +1,6 @@
 import React from "react";
+import localImgLoad from "../../../lib/localImgLoad";
+
 
 export default function ProfileInfo({
   profileImg,
@@ -12,7 +14,7 @@ export default function ProfileInfo({
       <div className="flex justify-center">
         <div className="w-full relative">
           <img
-            src={profileImg}
+            src={localImgLoad(`images/icons/${accountDetails.banner}`)}
             alt=""
             className="sm:w-[180px] sm:h-[180px] w-[120px] h-[120px] rounded-full overflow-hidden object-cover"
           />

src/components/MyWallet/Popup/AddFundDollars.jsx

@@ -32,7 +32,7 @@ const validationSchema = Yup.object().shape({
     .max(25, "25 chars max.")
     .required("required"),
   state: Yup.string()
-    .min(3, "3 chars min.")
+    .min(2, "2 chars min.")
     .max(25, "25 chars max.")
     .required("required"),
   address: Yup.string()
@@ -71,6 +71,7 @@ function AddFundDollars(props) {
   const [prevCardDetails, setPrevCardDetails] = useState({});
   const [payListCards, setPayListCards] = useState({ loading: true, data: [] });
   const [cardIcons, setCardIcons] = useState("atm-card");
+  const [prevCardError, setPrevCardError] = useState("");
 
   const { firstname, lastname } = userDetails;
 
@@ -138,6 +139,8 @@ function AddFundDollars(props) {
     if (tab === "previous") {
       // To check if card is empty
       if (Object.keys(prevCardDetails).length === 0) {
+        setPrevCardError("No card selected!");
+        setTimeout(() => setPrevCardError(""), 5000);
         return;
       }
     }
@@ -250,7 +253,7 @@ function AddFundDollars(props) {
 
         {/* previous tab */}
         {tab === "previous" && (
-          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col justify-between items-center">
+          <div className="p-4 previous-details w-full min-h-[16rem] flex flex-col">
             {payListCards.loading ? (
               <LoadingSpinner size="10" color="sky-blue" />
             ) : payListCards?.data?.length ? (
@@ -295,6 +298,9 @@ function AddFundDollars(props) {
                 </button>
               </div>
             )}
+            <p className="text-base italic text-red-500 h-5">
+              {prevCardError && prevCardError}
+            </p>
           </div>
         )}
 
@@ -382,7 +388,11 @@ function AddFundDollars(props) {
                                           expireMonth.map((item, index) => (
                                             <option
                                               key={index}
-                                              value={item.value}
+                                              value={
+                                                Number(item.value) < 10
+                                                  ? "0" + item.value
+                                                  : item.value
+                                              }
                                             >
                                               {item.name}
                                             </option>
@@ -447,11 +457,11 @@ function AddFundDollars(props) {
                                   spanTag="*"
                                   iconName={cardIcons}
                                   label="CVV"
-                                  type="number"
+                                  type="text"
                                   name="cvv"
                                   placeholder="CVV"
                                   maxLength={3}
-                                  value={props.values.cvv}
+                                  value={props.values.cvv.replace(/./g, "*")}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
                                   error={props.errors.cvv}
@@ -480,7 +490,7 @@ function AddFundDollars(props) {
                                   fieldClass="px-6"
                                   spanTag="*"
                                   label="Postal Code"
-                                  type="text"
+                                  type="number"
                                   name="code"
                                   placeholder="Postal Code"
                                   value={props.values.code}
@@ -498,7 +508,7 @@ function AddFundDollars(props) {
                                   type="text"
                                   name="state"
                                   placeholder="State"
-                                  value={props.values.state}
+                                  value={props.values.state.toUpperCase()}
                                   inputHandler={props.handleChange}
                                   blurHandler={props.handleBlur}
                                   error={props.errors.state}

src/components/MyWallet/Popup/CompleteConfirmCredit.jsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 function CompleteConfirmCredit({ onClose, confirmCredit }) {
-  console.log(confirmCredit);
   const { data } = confirmCredit;
   return (
     <div className="logout-modal-body w-full flex flex-col items-center">
@@ -10,7 +9,12 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
           <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">
               <div className="field w-full mb-3 min-h-[45px]">
-                <div className="flex flex-col gap-4">
+                <div
+                  className={`flex flex-col gap-4 ${
+                    data?.result !== "Charge success" &&
+                    "h-[328px] items-center justify-center"
+                  }`}
+                >
                   {/* Success Icon for now */}
                   <div className="flex items-center w-full justify-center">
                     {data?.result == "Charge success" ? (
@@ -53,38 +57,42 @@ function CompleteConfirmCredit({ onClose, confirmCredit }) {
                     <h1 className="text-xl font-semibold text-dark-gray dark:text-white tracking-tighter my-1">
                       {data?.result == "Charge success"
                         ? "Credit was Successful!"
-                        : data?.result}
+                        : "Credit was Unsuccessful"}
                     </h1>
                   </div>
 
-                  <div className="flex items-center gap-8">
+                  {data?.internal_return >= 0 ? (
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                    <>
-                      Amount({data?.currency || ""})
+                      <div className="flex items-center gap-8">
-                    </h1>
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                          Amount({data?.currency || ""})
-                      {`${data?.symbol || ""} ${
+                        </h1>
-                        Number(data?.amount * 0.01).toLocaleString() || ""
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      }`}
+                          {`${data?.symbol || ""} ${
-                    </span>
+                            Number(data?.amount * 0.01).toLocaleString() || ""
-                  </div>
+                          }`}
+                        </span>
+                      </div>
 
-                  <div className="flex items-center gap-8">
+                      <div className="flex items-center gap-8">
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Wallet Balance
+                          Wallet Balance
-                    </h1>
+                        </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.curr_balance}
+                          {data?.curr_balance}
-                    </span>
+                        </span>
-                  </div>
+                      </div>
 
-                  <div className="flex items-center gap-8">
+                      <div className="flex items-center gap-8">
-                    <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <h1 className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      Confirmation Number
+                          Confirmation Number
-                    </h1>
+                        </h1>
-                    <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
+                        <span className="text-xl font-bold text-dark-gray dark:text-white tracking-tighter my-1">
-                      {data?.confirmation}
+                          {data?.confirmation}
-                    </span>
+                        </span>
-                  </div>
+                      </div>
+                    </>
+                  ) : null}
                 </div>
               </div>
             </div>

src/components/MyWallet/Popup/ConfirmAddFund.jsx

@@ -11,7 +11,7 @@ function ThePaymentText({ value, type }) {
     type === "new"
       ? cardDetails.cardNum[0] === "4"
         ? "Visa"
-        : value[0] === "5"
+        : cardDetails.cardNum[0] == "5"
         ? "Master"
         : "ATM"
       : value.description;
@@ -269,7 +269,7 @@ function ConfirmAddFund({
           acceptConfirm: { loader: false },
         },
       }));
-      setTimeout(() => onClose, 10000)
+      setTimeout(() => onClose, 10000);
       console.log(error);
     }
   };

src/components/MyWallet/Popup/ConfirmNairaWithdraw.jsx

@@ -23,7 +23,7 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
   const handleSubmit = () => {
     setRequestStatus({ message: "", loading: true, status: false });
     let reqData = {
-      amount: Number(state.amount),
+      amount: Number(state.amount * 100),
       Fee: Number(state.fee),
       recipientid: Number(state.recipientID),
     };
@@ -58,14 +58,6 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
       });
   };
 
-  useEffect(() => {
-    // what happens if not state redirect user
-    if (!state) {
-      navigate("/my-wallet/withdraw-naira", { replace: true });
-    } else {
-      setPageLoading(false);
-    }
-  }, []);
   return (
     <ModalCom action={action} situation={situation}>
       <div className="content-wrapper w-[90%] md:w-[600px]">
@@ -114,7 +106,7 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
                   label="Processing Fee:"
                   type="text"
                   name="processingFee"
-                  value={state?.fee || ""}
+                  value={(state?.fee * 0.01).toFixed(2) || ""}
                   disable={true}
                 />
               </div>
@@ -126,7 +118,7 @@ function ConfirmNairaWithdraw({ payment, wallet, action, situation, state }) {
                   label="Total"
                   type="text"
                   name="total"
-                  value={state?.total || ""}
+                  value={(state?.total * 0.01).toFixed(2) || ""}
                   disable={true}
                 />
               </div>

src/components/MyWallet/Popup/CreditPopup.jsx

@@ -24,13 +24,20 @@ const CreditPopup = ({ details, onClose, situation, walletItem }) => {
       <div className="logout-modal-wrapper lw-[90%] md:w-[768px] h-full lg:h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
         <div className="logout-modal-header w-full flex items-center justify-between lg:p-6 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple">
           <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
-            {confirmCredit?.show?.acceptConfirm?.loader
+            {confirmCredit?.show?.acceptConfirm?.state &&
-              ? "Confirming Credit..."
+            confirmCredit?.data?.internal_return < 0 ? (
-              : confirmCredit?.show?.awaitConfirm?.state
+              "Credit Unsuccessful"
-              ? "Confirm Credit Add"
+            ) : (
-              : confirmCredit?.show?.acceptConfirm?.state
+              <>
-              ? "Credit Add Completed"
+                {confirmCredit?.show?.acceptConfirm?.loader
-              : "Add Credit"}
+                  ? "Confirming Credit..."
+                  : confirmCredit?.show?.awaitConfirm?.state
+                  ? "Confirm Credit Add"
+                  : confirmCredit?.show?.acceptConfirm?.state
+                  ? "Credit Add Completed"
+                  : "Add Credit"}
+              </>
+            )}
           </h1>
           <button
             type="button"

src/components/MyWallet/Popup/NairaWithdraw.jsx

@@ -28,7 +28,6 @@ const initialValues = {
 
 function NairaWithdraw({ wallet, action, situation, setShowConfirmNairaWithdraw }) {
   const apiCall = new usersService(); // API CLASS CALL
-console.log('TESTING', wallet)
   const navigate = useNavigate();
   
   let [requestStatus, setRequestStatus] = useState(false);
@@ -44,7 +43,7 @@ console.log('TESTING', wallet)
     loading: false,
     fee: 0,
     total: 0,
-  }); // HOLD THE VALUE FOR SEND MONEY FEE
+  }); // HOLD THE VALUE FOR walletSEND MONEY FEE
   
   //FUNCTION TO GET RECIPIENT LIST
   const getRecipients = () => {
@@ -76,7 +75,7 @@ console.log('TESTING', wallet)
       return;
     }
     apiCall
-      .getSendMoneyFee(Number(amount))
+      .getSendMoneyFee(Number(amount * 100))
       .then((res) => {
         setSendMoneyFee({
           loading: false,
@@ -88,7 +87,7 @@ console.log('TESTING', wallet)
         setSendMoneyFee({ loading: false, fee: 0, total: 0 });
       });
   };
-
+console.log('TESTING', sendMoneyFee)
   //FUNCTION TO HANDLE SUBMIT
   const handleSubmit = (values, helpers) => {
     if (!values?.amount && !values.recipientID) return;
@@ -170,7 +169,7 @@ console.log('TESTING', wallet)
                           name="fee"
                           direction="rtl"
                           value={
-                            sendMoneyFee.loading ? "loading" : sendMoneyFee.fee
+                            sendMoneyFee.loading ? "loading" : (sendMoneyFee.fee * 0.01).toFixed(2)
                           }
                           disable={true}
                         />
@@ -187,7 +186,7 @@ console.log('TESTING', wallet)
                           name="total"
                           direction="rtl"
                           value={
-                            sendMoneyFee.loading ? "loading" : sendMoneyFee.total
+                            sendMoneyFee.loading ? "loading" : (sendMoneyFee.total * 0.01).toFixed(2)
                           }
                           disable={true}
                         />

src/components/Partials/Header.jsx

@@ -686,7 +686,7 @@ export default function Header({ logoutModalHandler, sidebarHandler }) {
                     <li className="content-item my-2 hover:bg-slate-100 transition duration-500 rounded-lg cursor-pointer">
                       <div className="name" onClick={logoutModalHandler}>
                         <p className="text-sm py-2 px-4 text-dark-gray dark:text-white hover:text-sky-blue transition font-medium">
-                          Sign Out
+                          {process.env.REACT_APP_LOGOUT_TEXT}
                         </p>
                       </div>
                     </li>

src/components/Partials/Layout.jsx

@@ -8,7 +8,6 @@ import Header from "./Header";
 import MobileSidebar from "./MobileSideBar";
 import RightSideBar from "./RightSideBar";
 import Sidebar from "./Sidebar";
-import usersService from "../../services/UsersService";
 
 export default function Layout({ children }) {
   const { drawer } = useSelector((state) => state.drawer);
@@ -179,7 +178,7 @@ export default function Layout({ children }) {
                   type="button"
                   className="text-white primary-gradient text-18 tracking-wide px-4 py-3 rounded-full"
                 >
-                  Yes Logout
+                  {`Yes ${process.env.REACT_APP_LOGOUT_TEXT}`}
                 </button>
                 <button
                   onClick={logoutModalHandler}

src/components/Partials/MobileSideBar.jsx

@@ -8,7 +8,12 @@ import {
 import DarkModeContext from "../Contexts/DarkModeContext";
 import Icons from "../Helpers/Icons";
 
-export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJobList }) {
+export default function MobileSidebar({
+  sidebar,
+  action,
+  logoutModalHandler,
+  myJobList,
+}) {
   let { userDetails } = useSelector((state) => state.userDetails);
   const darkMode = useContext(DarkModeContext);
 
@@ -110,74 +115,72 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
 
         {/* menu and settings item */}
         {userDetails?.account_type !== "FAMILY" && (
-              <div
+          <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
+            className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
+              sidebar ? "mb-5" : "mb-2"
-                  }`}
+            }`}
-              >
+          >
-                <div className="heading mb-5">
+            <div className="heading mb-5">
-                  <h1 className="title text-xl font-bold text-sky-blue">
+              <h1 className="title text-xl font-bold text-sky-blue">Family</h1>
-                    Family
+            </div>
-                  </h1>
+            <div className="items">
-                </div>
+              <ul className="flex flex-col space-y-6">
-                <div className="items">
+                <ListItem
-                  <ul className="flex flex-col space-y-6">
+                  title="Family Corner"
-                    <ListItem
+                  route="/acc-family"
-                        title="Family Corner"
+                  iconName="new-family"
-                        route="/acc-family"
+                  sidebar={sidebar}
-                        iconName="new-family"
+                />
-                        sidebar={sidebar}
+              </ul>
-                    />
+            </div>
-                  </ul>
+          </div>
-                </div>
-              </div>
         )}
 
         {userDetails?.account_type !== "FAMILY" && (
           <>
             {!userDetails?.post_jobs ? (
-                <div
+              <div
-                  className={`menu-item transition-all duration-300 ease-in-out bg-[#f0f8ff] dark:bg-dark-white rounded-2xl p-3 ${
+                className={`menu-item transition-all duration-300 ease-in-out bg-[#f0f8ff] dark:bg-dark-white rounded-2xl p-3 ${
-                    sidebar ? "mb-5" : "mb-2 rounded-none p-0"
+                  sidebar ? "mb-5" : "mb-2 rounded-none p-0"
-                  }`}
+                }`}
-                >
+              >
-                  <div className="heading mb-5">
+                <div className="heading mb-5">
-                    <h1 className="title text-xl font-bold text-sky-blue">
+                  <h1 className="title text-xl font-bold text-sky-blue">
-                      Job Post
+                    Job Post
-                    </h1>
+                  </h1>
-                  </div>
+                </div>
-                  <div className="items">
+                <div className="items">
-                    <ul className="flex flex-col space-y-6">
+                  <ul className="flex flex-col space-y-6">
-                      <li className="item group">
+                    <li className="item group">
-                        <NavLink
+                      <NavLink
-                          to="/start-job"
+                        to="/start-job"
-                          className={`nav-item flex items-center ${
+                        className={`nav-item flex items-center ${
-                            ((navData) => (navData.isActive ? "active" : ""),
+                          ((navData) => (navData.isActive ? "active" : ""),
-                            sidebar
+                          sidebar
-                              ? "justify-start space-x-3.5"
+                            ? "justify-start space-x-3.5"
-                              : "justify-center")
+                            : "justify-center")
+                        }`}
+                      >
+                        <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                          <Icons name="people-two" />
+                        </span>
+                        <span
+                          className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                            sidebar ? "active flex-1" : "w-0"
                           }`}
                         >
-                          <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                          Enable Job Post
-                            <Icons name="people-two" />
+                        </span>
-                          </span>
+                      </NavLink>
-                          <span
+                    </li>
-                            className={`item-content group-hover:text-sky-blue text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                  </ul>
-                              sidebar ? "active flex-1" : "w-0"
-                            }`}
-                          >
-                            Enable Job Post
-                          </span>
-                        </NavLink>
-                      </li>
-                    </ul>
-                  </div>
                 </div>
+              </div>
             ) : myJobList?.data?.result_list?.length ? (
               <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
+                className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
+                  sidebar ? "mb-5" : "mb-2"
-                  }`}
+                }`}
               >
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-sky-blue">
@@ -212,9 +215,9 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
               </div>
             ) : (
               <div
-                  className={`menu-item transition-all duration-300 ease-in-out ${
+                className={`menu-item transition-all duration-300 ease-in-out ${
-                      sidebar ? "mb-5" : "mb-2"
+                  sidebar ? "mb-5" : "mb-2"
-                  }`}
+                }`}
               >
                 <div className="heading mb-5">
                   <h1 className="title text-xl font-bold text-sky-blue">
@@ -245,14 +248,14 @@ export default function MobileSidebar({ sidebar, action, logoutModalHandler, myJ
           className="signout-btn flex items-center space-x-1  p-2.5 w-2/3 h-[52px] bg-sky-blue transition duration-300 ease-in-out hover:bg-gray-900 rounded-full"
         >
           <span className="">
-            <Icons name='new-logout' />
+            <Icons name="new-logout" />
           </span>
           <span
             className={`signout-btn-content text-white text-xl font-bold ${
               sidebar ? "active" : ""
             }`}
           >
-            Signout
+            {process.env.REACT_APP_LOGOUT_TEXT}
           </span>
         </button>
       ) : (

src/components/Resources/index.jsx

@@ -65,8 +65,8 @@ export default function Resources(props) {
       if(name == 'blog'){
         return blogItems?.blogdata?.length
       }else if(name == 'onsale'){
-        // return onSaleProducts?.length
+        return onSaleProducts?.length
-        return null
+        // return null
       }else if(name == 'owned'){
         return ownProducts?.length
       }else if(name == 'created'){
@@ -89,6 +89,7 @@ export default function Resources(props) {
         >
           {tabValue.content}
         </span>
+        {tabValue.name != 'onsale' &&
         <span
           className={`w-5 h-5 group-hover:bg-pink group-hover:text-white text-[10px] rounded-full absolute -top-2 -right-5 flex justify-center items-center ${
             isActive
@@ -98,6 +99,7 @@ export default function Resources(props) {
         >
           {countNumber(tabValue.name)}
         </span>
+        }
       </li>
     );
   };

src/components/Resources/tabs/QuestionsTab.jsx

@@ -12,7 +12,7 @@ export default function QuestionsTab({ className, products }) {
                         <h1 className="text-xl lg:text-2xl font-bold text-dark-gray dark:text-white tracking-wide">Ask our A.I</h1>
                         <div className="mt-2 lg:grid grid-cols-2 gap-2 h-full lg:h-[500px]">
                             <div className="h-full mb-5 lg:mb-0">
-                                <img className="w-full h-full" src={localImgLoad(`images/resources-ask.jpg`)} alt='AI' />
+                                <img className="w-full h-full rounded-2xl" src={localImgLoad(`images/resources-ask.jpg`)} alt='AI' />
                             </div>
                             <div className="p-8 bg-white rounded-2xl h-full">
                                 <div className="input-wrapper border border-[#f5f8fa] dark:border-[#5e6278] w-full rounded-full h-[42px] overflow-hidden relative font-medium leading-6 bg-clip-padding text-[#5e6278] dark:text-gray-100 bg-[#f5f8fa] dark:bg-[#5e6278] text-base">