fix(setting_page): improved more on setting page

client/src/components/SettingPage/ChangeDisplayName.jsx

@@ -41,9 +41,12 @@ const ChangeDisplayName = () => {
   return (
     <>
       <div className="Setting_Container_With_Input_Field">
-        <h1>Change display name</h1>
+        <label htmlFor="setting-page-change-display-name">
+          Change display name
+        </label>
         <form>
           <input
+            id="setting-page-change-display-name"
             type="text"
             placeholder="Display Name"
             name="name"

client/src/components/SettingPage/ChangePassword.jsx

@@ -57,7 +57,7 @@ const ChangePassword = () => {
   return (
     <>
       <div className="Setting_Container_With_Input_Field">
-        <h1>Change Password</h1>
+        <label htmlFor="setting-page-change-password">Change Password</label>
         <input
           type="password"
           placeholder="Old password"
@@ -74,6 +74,7 @@ const ChangePassword = () => {
         />
         <form>
           <input
+            id="setting-page-change-password"
             type="password"
             placeholder="Conform password"
             name="cNewPassword"

client/src/components/SettingPage/ChangeProfilePicture.jsx

@@ -102,7 +102,9 @@ const ChangeProfilePicture = () => {
   return (
     <>
       <div className="Setting_Page_Change_Profile_Picture_Container">
-        <h1>Change Profile Picture</h1>
+        <label htmlFor="setting-page-change-profile-picture">
+          Change Profile Picture
+        </label>
         <div className="Setting_Page_Change_Profile_Picture_Container_Top_Part">
           <label htmlFor="user-profile-input">
             <img
@@ -130,6 +132,7 @@ const ChangeProfilePicture = () => {
           />
           <div className="Setting_Page_Change_Profile_Input_and_Button_Container">
             <input
+              id="setting-page-change-profile-picture"
               type="text"
               placeholder="image url"
               className="Setting_Page_Change_Profile_Url_Image_Input_Field"

client/src/components/SettingPage/ChangeUserID.jsx

@@ -42,9 +42,10 @@ const ChangeUserID = () => {
   return (
     <>
       <div className="Setting_Container_With_Input_Field">
-        <h1>Change UserID</h1>
+        <label htmlFor="setting-page-change-userID">Change UserID</label>
         <form>
           <input
+            id="setting-page-change-userID"
             type="text"
             placeholder="UserID"
             name="userID"

client/src/components/SettingPage/DeleteProfile.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { toastInfo } from "../../services/toast";
+
+const DeleteProfile = () => {
+  const deleteUser = (e) => {
+    e.preventDefault();
+    toastInfo("Sorry!! this feature is not available right now");
+  };
+  return (
+    <>
+      <div className="Setting_Page_Delete_User_Profile_Container">
+        <h1>Delete User Profile</h1>
+        <p>
+          NOTE : You can be able to recover after you delete your user profile
+        </p>
+        <button onClick={deleteUser}>Delete Profile</button>
+      </div>
+    </>
+  );
+};
+
+export default DeleteProfile;

client/src/pages/Setting.js

@@ -1,33 +1,21 @@
-import React, { useState } from "react";
+import React from "react";
 import { Helmet } from "react-helmet";
 import "../styles/pages/settingPage.css";
-import { useDispatch } from "react-redux";
-import { startProgressBar, stopProgressBar } from "../services/redux-actions";
 import LoadingSpinner from "../components/LoadingSpinner";
-import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import Api from "../services/api/pages/settingPageApi";
-import { toastError, toastInfo, toastSuccess } from "../services/toast";
 import OpenRightPartDrawerButton from "../components/OpenRightPartDrawerButton";
 import OpenSideBarDrawerButton from "../components/OpenSideBarDrawerButton";
 import ChangeProfilePicture from "../components/SettingPage/ChangeProfilePicture";
 import ChangeUserID from "../components/SettingPage/ChangeUserID";
 import ChangeDisplayName from "../components/SettingPage/ChangeDisplayName";
 import ChangePassword from "../components/SettingPage/ChangePassword";
+import DeleteProfile from "../components/SettingPage/DeleteProfile";
 
 const Setting = () => {
-  const dispatch = useDispatch();
-
-  const deleteUser = (e) => {
-    e.preventDefault();
-    toastInfo("Sorry!! this feature is not available right now");
-  };
-
   return (
     <>
       <LoadingSpinner />
       <main className="SettingPage_Container">
-        <ToastContainer />
         <Helmet>
           <title>Setting</title>
         </Helmet>
@@ -37,13 +25,7 @@ const Setting = () => {
         <ChangeUserID />
         <ChangeDisplayName />
         <ChangePassword />
-        <div className="Setting_Page_Delete_User_Profile_Container">
-          <h1>Delete User Profile</h1>
-          <p>
-            NOTE : You can be able to recover after you delete your user profile
-          </p>
-          <button onClick={deleteUser}>Delete Profile</button>
-        </div>
+        <DeleteProfile />
       </main>
     </>
   );

client/src/styles/pages/settingPage.css

@@ -17,7 +17,7 @@
   margin-top: 10px;
   border-radius: 10px;
 }
-.Setting_Page_Change_Profile_Picture_Container h1 {
+.Setting_Page_Change_Profile_Picture_Container label {
   font-size: 0.9rem;
   font-family: var(--primary-font-family);
   margin: 10px 0px 0px 10px;
@@ -118,7 +118,7 @@
   align-items: flex-start;
   /* box-shadow: 0px 0px 10px rgb(204, 204, 204); */
 }
-.Setting_Container_With_Input_Field h1,
+.Setting_Container_With_Input_Field label,
 .Setting_Page_Delete_User_Profile_Container h1,
 .Setting_Page_Change_Profile_Picture_Container_Top_Part label h1 {
   font-family: var(--primary-font-family);