Merge branch 'change-pwd-update' of WrenchBoard/Users-Wrench into master

src/components/Home/HomeActivities.jsx

@@ -53,7 +53,7 @@ export default function HomeActivities({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
+      className={`update-table w-full bg-white dark:bg-dark-white   overflow-hidden rounded-2xl relative min-h-[520px] ${
         className || ""
       }`}
     >

src/components/Settings/Tabs/ChangePasswordTab.jsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from "react";
 import Icons from "../../Helpers/Icons";
-import PasswordSvg from "../PasswordSvg";
+// import PasswordSvg from "../PasswordSvg";
 import LoadingSpinner from "../../Spinners/LoadingSpinner";
 import usersService from "../../../services/UsersService";
 import { useNavigate } from "react-router-dom";
@@ -113,8 +113,13 @@ export default function ChangePasswordTab() {
   }
   return (
     <div className="changePasswordTab w-full">
-      <div className="w-full flex xxl:flex-row flex-col-reverse space-x-5 xxl:items-start">
-        <div className="flex-1 mb-10">
+      <div className="w-full">
+        <div className="content-heading w-full mb-8">
+          <h1 className="text-2xl font-extrabold text-black dark:text-white antialiased">
+            Reset Password
+          </h1>
+        </div>
+        <div className="w-full md:w-[calc(100%-100px)] md:ml-auto pb-10">
           <div className="input-field mb-6">
             <label
               className="input-label text-dark-gray dark:text-white text-xl font-bold block mb-2.5"
@@ -202,7 +207,7 @@ export default function ChangePasswordTab() {
               </div>
             </div>
           </div>
-          <div className="flex justify-center space-x-4 items-center">
+          <div className="flex w-full md:w-[calc(100%-128px)] md:ml-auto justify-between gap-4 items-center">
             <button
               type="button"
               className="text-light-red text-18 tracking-wide border-b dark:border-[#5356fb29]  border-light-red"
@@ -246,9 +251,9 @@ export default function ChangePasswordTab() {
             ))}
           {/* End of error or success display */}
         </div>
-        <div className="w-[440px] sm:flex hidden justify-end">
+        {/* <div className="w-[440px] sm:flex hidden justify-end">
           <PasswordSvg />
-        </div>
+        </div> */}
       </div>
     </div>
   );

src/components/customTabs/TabButton.jsx

@@ -4,7 +4,7 @@ import Icons from '../Helpers/Icons'
 export default function TabButton({ item='', iconName='', selectedTab='', setSelectedTab=()=>{} }) {
   return (
     <button
-      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
+      className={`flex lg:space-x-4 space-x-2 hover:text-purple transition-all duration-300 ease-in-out items-center cursor-pointer lg:mb-11 mb-2 mr-6 lg:mr-0 float-left lg:float-none overflow-hidden ${
         selectedTab === item ? "text-purple" : " text-thin-light-gray"
       }`}
       value={item}