final touch on darkmode

components/Modal/User/BillingPortal.tsx

@@ -17,8 +17,8 @@ export default function PaymentPortal() {
 
   return (
     <div className="mx-auto sm:w-[35rem] w-80">
-      <div className="max-w-[25rem] w-full mx-auto flex flex-col gap-3 justify-between">
-        <p className="text-md text-gray-500 dark:text-gray-400">
+      <div className=" w-full mx-auto flex flex-col gap-3 justify-between">
+        <p className="text-md text-black dark:text-white">
           To manage/cancel your subsciption, visit the billing portal.
         </p>
 
@@ -30,7 +30,7 @@ export default function PaymentPortal() {
           className="mx-auto mt-2"
         />
 
-        <p className="text-md text-gray-500 dark:text-gray-400">
+        <p className="text-md text-black dark:text-white">
           If you still need help or encountered any issues, feel free to reach
           out to us at:{" "}
           <a

components/Modal/User/ProfileSettings.tsx

@@ -170,12 +170,12 @@ export default function ProfileSettings({
 
           {emailEnabled ? (
             <div>
-              <p className="text-sm text-black mb-2">Email</p>
+              <p className="text-sm text-black dark:text-white mb-2">Email</p>
               <input
                 type="text"
                 value={user.email || ""}
                 onChange={(e) => setUser({ ...user, email: e.target.value })}
-                className="w-full rounded-md p-2 border-sky-100 border-solid border outline-none focus:border-sky-700 duration-100"
+                className="w-full rounded-md p-2 border-sky-100 dark:border-neutral-700 dark:bg-neutral-900 border-solid border outline-none focus:border-sky-700 focus:dark:border-sky-600 duration-100"
               />
             </div>
           ) : undefined}