removed extra classNames

components/Modal/Collection/CollectionInfo.tsx

@@ -60,7 +60,7 @@ export default function CollectionInfo({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       <div className="flex flex-col sm:flex-row gap-3">
         <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Name</p>
+          <p className="mb-2">Name</p>
           <div className="flex flex-col gap-3">
             <TextInput
               value={collection.name}
@@ -71,7 +71,7 @@ export default function CollectionInfo({
             />
             <div className="color-picker flex justify-between">
               <div className="flex flex-col justify-between items-center w-32">
-                <p className="w-full text-black dark:text-white mb-2">Color</p>
+                <p className="w-full mb-2">Color</p>
                 <div style={{ color: collection.color }}>
                   <FontAwesomeIcon
                     icon={faFolder}
@@ -79,7 +79,7 @@ export default function CollectionInfo({
                   />
                 </div>
                 <div
-                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer text-black dark:text-white hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
+                  className="py-1 px-2 rounded-md text-xs font-semibold cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                   onClick={() =>
                     setCollection({ ...collection, color: "#0ea5e9" })
                   }
@@ -96,7 +96,7 @@ export default function CollectionInfo({
         </div>
 
         <div className="w-full">
-          <p className="text-black dark:text-white mb-2">Description</p>
+          <p className="mb-2">Description</p>
           <textarea
             className="w-full h-[11.4rem] resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."

components/Modal/Collection/DeleteCollection.tsx

@@ -51,7 +51,7 @@ export default function DeleteCollection({
           <p className="text-red-500 font-bold text-center">Warning!</p>
 
           <div className="max-h-[20rem] overflow-y-auto">
-            <div className="text-black dark:text-white">
+            <div>
               <p>
                 Please note that deleting the collection will permanently remove
                 all its contents, including the following:
@@ -82,7 +82,7 @@ export default function DeleteCollection({
           </div>
 
           <div className="flex flex-col gap-3">
-            <p className="text-black dark:text-white text-center">
+            <p className="text-center">
               To confirm, type &quot;
               <span className="font-bold">{collection.name}</span>
               &quot; in the box below:
@@ -98,9 +98,7 @@ export default function DeleteCollection({
           </div>
         </>
       ) : (
-        <p className="text-black dark:text-white">
-          Click the button below to leave the current collection.
-        </p>
+        <p>Click the button below to leave the current collection.</p>
       )}
 
       <div

components/Modal/Collection/TeamManagement.tsx

@@ -102,7 +102,7 @@ export default function TeamManagement({
     <div className="flex flex-col gap-3 sm:w-[35rem] w-80">
       {permissions === true && (
         <>
-          <p className="text-black dark:text-white">Make Public</p>
+          <p>Make Public</p>
 
           <Checkbox
             label="Make this a public collection."
@@ -120,9 +120,7 @@ export default function TeamManagement({
 
       {collection.isPublic ? (
         <div>
-          <p className="text-black dark:text-white mb-2">
-            Public Link (Click to copy)
-          </p>
+          <p className="mb-2">Public Link (Click to copy)</p>
           <div
             onClick={() => {
               try {
@@ -146,7 +144,7 @@ export default function TeamManagement({
 
       {permissions === true && (
         <>
-          <p className="text-black dark:text-white">Member Management</p>
+          <p>Member Management</p>
 
           <div className="flex items-center gap-2">
             <TextInput
@@ -219,9 +217,7 @@ export default function TeamManagement({
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-black dark:text-white">
-                          {e.user.name}
-                        </p>
+                        <p className="text-sm font-bold">{e.user.name}</p>
                         <p className="text-gray-500 dark:text-gray-300">
                           @{e.user.username}
                         </p>
@@ -230,7 +226,7 @@ export default function TeamManagement({
                     <div className="flex sm:block items-center justify-between gap-5 min-w-[10rem]">
                       <div>
                         <p
-                          className={`font-bold text-sm text-black dark:text-white ${
+                          className={`font-bold text-sm ${
                             permissions === true ? "" : "mb-2"
                           }`}
                         >
@@ -287,7 +283,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -332,7 +328,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -377,7 +373,7 @@ export default function TeamManagement({
                               }}
                             />
                             <span
-                              className={`text-black dark:text-white peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
+                              className={`peer-checked:bg-sky-200 dark:peer-checked:bg-sky-600 text-sm ${
                                 permissions === true
                                   ? "hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100"
                                   : ""
@@ -407,9 +403,7 @@ export default function TeamManagement({
           />
           <div>
             <div className="flex items-center gap-1">
-              <p className="text-sm font-bold text-black dark:text-white">
-                {collectionOwner.name}
-              </p>
+              <p className="text-sm font-bold">{collectionOwner.name}</p>
               <FontAwesomeIcon
                 icon={faCrown}
                 className="w-3 h-3 text-yellow-500"
@@ -421,7 +415,7 @@ export default function TeamManagement({
           </div>
         </div>
 
-        <div className="flex flex-col justify-center min-w-[10rem] text-black dark:text-white">
+        <div className="flex flex-col justify-center min-w-[10rem]">
           <p className={`font-bold text-sm`}>Permissions</p>
           <p>Full Access (Owner)</p>
         </div>

components/Modal/Collection/ViewTeam.tsx

@@ -43,9 +43,7 @@ export default function ViewTeam({ collection }: Props) {
           />
           <div className="w-full">
             <div className="flex items-center gap-1 w-full justify-between">
-              <p className="text-sm font-bold text-black dark:text-white">
-                {collectionOwner.name}
-              </p>
+              <p className="text-sm font-bold">{collectionOwner.name}</p>
               <div className="flex text-xs gap-1 items-center">
                 <FontAwesomeIcon
                   icon={faCrown}
@@ -78,9 +76,7 @@ export default function ViewTeam({ collection }: Props) {
                         className="border-[3px]"
                       />
                       <div>
-                        <p className="text-sm font-bold text-black dark:text-white">
-                          {e.user.name}
-                        </p>
+                        <p className="text-sm font-bold">{e.user.name}</p>
                         <p className="text-gray-500 dark:text-gray-300">
                           @{e.user.username}
                         </p>

components/Modal/Collection/index.tsx

@@ -60,7 +60,7 @@ export default function CollectionModal({
           </p>
         )}
         {method !== "VIEW_TEAM" && (
-          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
+          <Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5">
             {method === "UPDATE" && (
               <>
                 {isOwner && (