replace tw colors with semantic colors [WIP]

components/Modal/Collection/CollectionInfo.tsx

@@ -98,7 +98,7 @@ export default function CollectionInfo({
         <div className="w-full">
           <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"
+            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-neutral-content focus:border-sky-300 dark:focus:border-sky-600"
             placeholder="The purpose of this Collection..."
             value={collection.description}
             onChange={(e) =>

components/Modal/Collection/TeamManagement.tsx

@@ -131,7 +131,7 @@ export default function TeamManagement({
                 console.log(err);
               }
             }}
-            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-sky-100 dark:border-neutral-700 border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
+            className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 dark:bg-neutral-950 border-neutral-content border-solid border outline-none hover:border-sky-300 dark:hover:border-sky-600 duration-100 cursor-text"
           >
             {publicCollectionURL}
           </div>
@@ -139,7 +139,7 @@ export default function TeamManagement({
       ) : null}
 
       {permissions !== true && collection.isPublic && (
-        <hr className="mb-3 border border-sky-100 dark:border-neutral-700" />
+        <hr className="mb-3 border border-neutral-content" />
       )}
 
       {permissions === true && (
@@ -191,7 +191,7 @@ export default function TeamManagement({
                 return (
                   <div
                     key={i}
-                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     {permissions === true && (
                       <FontAwesomeIcon
@@ -393,7 +393,7 @@ export default function TeamManagement({
       )}
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-neutral-content flex min-h-[7rem] sm:min-h-[5rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2">

components/Modal/Collection/ViewTeam.tsx

@@ -33,7 +33,7 @@ export default function ViewTeam({ collection }: Props) {
       <p>Here are all the members who are collaborating on this collection.</p>
 
       <div
-        className="relative border px-2 rounded-md border-sky-100 dark:border-neutral-700 flex min-h-[4rem] gap-2 justify-between"
+        className="relative border px-2 rounded-md border-neutral flex min-h-[4rem] gap-2 justify-between"
         title={`'@${collectionOwner.username}' is the owner of this collection.`}
       >
         <div className="flex items-center gap-2 w-full">
@@ -68,7 +68,7 @@ export default function ViewTeam({ collection }: Props) {
                 return (
                   <div
                     key={i}
-                    className="relative border p-2 rounded-md border-sky-100 dark:border-neutral-700 flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
+                    className="relative border p-2 rounded-md border-neutral flex flex-col sm:flex-row sm:items-center gap-2 justify-between"
                   >
                     <div className="flex items-center gap-2">
                       <ProfilePhoto

components/Modal/Link/AddOrEditLink.tsx

@@ -186,7 +186,7 @@ export default function AddOrEditLink({
 
       {optionsExpanded ? (
         <div>
-          {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
+          {/* <hr className="mb-3 border border-neutral-content" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
               <p className="mb-2">Name</p>
@@ -241,7 +241,7 @@ export default function AddOrEditLink({
                     ? "Will be auto generated if nothing is provided."
                     : ""
                 }
-                className="resize-none w-full rounded-md p-2 border-sky-100 bg-gray-50 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
+                className="resize-none w-full rounded-md p-2 border-neutral-content bg-gray-50 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100 dark:bg-neutral-950"
               />
             </div>
           </div>

components/Modal/Link/PreservedFormats.tsx

@@ -91,7 +91,7 @@ export default function PreservedFormats() {
   return (
     <div className={`flex flex-col gap-3 sm:w-[35rem] w-80 pt-3`}>
       {link?.screenshotPath && link?.screenshotPath !== "pending" ? (
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
@@ -126,7 +126,7 @@ export default function PreservedFormats() {
       ) : undefined}
 
       {link?.pdfPath && link.pdfPath !== "pending" ? (
-        <div className="flex justify-between items-center pr-1 border border-sky-100 dark:border-neutral-700 rounded-md">
+        <div className="flex justify-between items-center pr-1 border border-neutral-content rounded-md">
           <div className="flex gap-2 items-center">
             <div className="text-white bg-sky-300 dark:bg-sky-600 p-2 rounded-l-md">
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />

components/Modal/index.tsx

@@ -16,7 +16,7 @@ export default function Modal({ toggleModal, className, children }: Props) {
         onClickOutside={toggleModal}
         className={`m-auto ${className || ""}`}
       >
-        <div className="slide-up relative border-sky-100 dark:border-neutral-700 rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
+        <div className="slide-up relative border-neutral-content rounded-2xl border-solid border shadow-lg p-5 bg-white dark:bg-neutral-900">
           <div
             onClick={toggleModal as MouseEventHandler<HTMLDivElement>}
             className="absolute top-5 left-5 inline-flex rounded-md cursor-pointer hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 z-20 p-2"