many coloring changes and improvements

components/Modal/User/ProfileSettings.tsx

@@ -102,7 +102,7 @@ export default function ProfileSettings({
     <div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
       <div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
         <div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
-          <p className="text-sm text-sky-700 dark:text-sky-400 mb-2 text-center">
+          <p className="text-sm text-black dark:text-white mb-2 text-center">
             Profile Photo
           </p>
           <div className="w-28 h-28 flex items-center justify-center rounded-full relative">
@@ -129,7 +129,7 @@ export default function ProfileSettings({
               <label
                 htmlFor="upload-photo"
                 title="PNG or JPG (Max: 3MB)"
-                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700"
+                className="border border-slate-200 rounded-md bg-white px-2 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700"
               >
                 Browse...
                 <input
@@ -147,7 +147,7 @@ export default function ProfileSettings({
 
         <div className="flex flex-col gap-3">
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
+            <p className="text-sm text-black dark:text-white mb-2">
               Display Name
             </p>
             <input
@@ -159,9 +159,7 @@ export default function ProfileSettings({
           </div>
 
           <div>
-            <p className="text-sm text-sky-700 dark:text-sky-400 mb-2">
-              Username
-            </p>
+            <p className="text-sm text-black dark:text-white mb-2">Username</p>
             <input
               type="text"
               value={user.username || ""}
@@ -172,7 +170,7 @@ export default function ProfileSettings({
 
           {emailEnabled ? (
             <div>
-              <p className="text-sm text-sky-700 mb-2">Email</p>
+              <p className="text-sm text-black mb-2">Email</p>
               <input
                 type="text"
                 value={user.email || ""}
@@ -192,10 +190,10 @@ export default function ProfileSettings({
 
       {/* <hr /> TODO: Export functionality
 
-      <p className="text-sky-700">Data Settings</p>
+      <p className="text-black">Data Settings</p>
 
       <div className="w-fit">
-        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-sky-900 duration-100 hover:border-sky-700">
+        <div className="border border-sky-100 rounded-md bg-white px-2 py-1 text-center select-none cursor-pointer text-black duration-100 hover:border-sky-700">
           Export Data
         </div>
       </div> */}