Removed next due task countdown and modified my page format

src/components/YourPage/LoadedPage.jsx

@@ -6,7 +6,7 @@ const LoadedPage = ({reloader}) => {
   const { loading, data, error } = GetMyPageLoad(reloader);
 
   return (
-    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto">
+    <div className="w-full border border-gray-400 rounded-md p-4 flex flex-col h-72 gap-2 overflow-y-auto dark:text-white">
       {loading ? (
         <>
           <h1 className="text-xl font-bold tracking-wide">...</h1>

src/components/YourPage/YourPageForm.jsx

@@ -8,6 +8,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
         fieldClass="px-4"
         parentClass="flex items-center gap-1 justify-between"
         labelClass="flex-[0.2] mb-0 font-semibold"
+        labalClass="dark:text-white"
         inputClass="flex-[0.8]"
         inputBg="bg-slate-100"
         label="Introduction: "
@@ -24,7 +25,7 @@ const YourPageForm = ({ values, onChange, onSubmit, loading, msg }) => (
       </label>
       <textarea
         style={{ resize: "none" }}
-        className="text-base px-4 py-2 rounded-md min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 dark:bg-[#11131F]  focus:ring-0 focus:outline-none flex-[0.8]"
+        className="text-base px-4 py-2 rounded-[36px] min-h-[100px] text-dark-gray dark:text-white w-full bg-slate-100 focus:ring-0 focus:outline-none flex-[0.8]"
         name="description"
         cols="30"
         rows="2"

src/components/YourPage/index.jsx

@@ -13,12 +13,39 @@ const YourPage = () => {
   const handleChange = ({ target: { name, value } }) =>
     setPageValues((prev) => ({ ...prev, [name]: value }));
 
-  const updateYourPageDetails = updateYourPage(
-    pageValues,
-    setResponse,
-    setPageValues,
-    setReloader
-  );
+  const updateYourPageDetails = async () => {
+    if (!pageValues.intro || !pageValues.description) return;
+
+    try {
+      setResponse({ loading: true, error: "", msg: "" });
+
+      let api = new usersService();
+      const res = await api.MyPageIntro(pageValues);
+
+      setTimeout(() => {
+        setResponse({
+          loading: false,
+          data: res.data,
+          msg: "Update Complete",
+        });
+
+        setReloader((prev) => !prev);
+      }, 1000);
+
+      setTimeout(() => {
+        setResponse({ msg: "" });
+        // Clear form after successful update
+        setPageValues({ intro: "", description: "" });
+      }, 3000);
+    } catch (error) {
+      return setResponse({
+        loading: false,
+        data: {},
+        error: "Error updating page",
+        msg: "",
+      });
+    }
+  };
 
   return (
     <Layout>
@@ -57,39 +84,3 @@ const responseInitialValues = {
   error: "",
   msg: "",
 };
-
-function updateYourPage(pageValues, setResponse, setPageValues, setReloader) {
-  return async () => {
-    if (!pageValues.intro || !pageValues.description) return;
-
-    try {
-      setResponse({ loading: true, error: "", msg: "" });
-
-      let api = new usersService();
-      const res = await api.MyPageIntro(pageValues);
-
-      setTimeout(() => {
-        setResponse({
-          loading: false,
-          data: res.data,
-          msg: "Update Complete",
-        });
-
-        setReloader((prev) => !prev);
-      }, 1000);
-
-      setTimeout(() => {
-        setResponse({ msg: "" });
-        // Clear form after successful update
-        setPageValues({ intro: "", description: "" });
-      }, 3000);
-    } catch (error) {
-      return setResponse({
-        loading: false,
-        data: {},
-        error: "Error updating page",
-        msg: "",
-      });
-    }
-  };
-}