removed extra classNames

components/CollectionCard.tsx

@@ -66,7 +66,7 @@ export default function CollectionCard({ collection, className }: Props) {
           href={`/collections/${collection.id}`}
           className="flex flex-col gap-2 justify-between min-h-[12rem] h-full select-none p-5"
         >
-          <p className="text-2xl capitalize text-black dark:text-white break-words line-clamp-3 w-4/5">
+          <p className="text-2xl capitalize break-words line-clamp-3 w-4/5">
             {collection.name}
           </p>
           <div className="flex justify-between items-center">
@@ -90,7 +90,7 @@ export default function CollectionCard({ collection, className }: Props) {
               ) : null}
             </div>
             <div className="text-right w-40">
-              <div className="text-black dark:text-white font-bold text-sm flex justify-end gap-1 items-center">
+              <div className="font-bold text-sm flex justify-end gap-1 items-center">
                 {collection.isPublic ? (
                   <FontAwesomeIcon
                     icon={faGlobe}

components/Dropdown.tsx

@@ -84,7 +84,7 @@ export default function Dropdown({
         const inner = e && (
           <div className="cursor-pointer rounded-md">
             <div className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 dark:hover:bg-neutral-700 duration-100">
-              <p className="text-black dark:text-white select-none">{e.name}</p>
+              <p className="select-none">{e.name}</p>
             </div>
           </div>
         );

components/FilterSearchDropdown.tsx

@@ -27,9 +27,7 @@ export default function FilterSearchDropdown({
       }}
       className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-40"
     >
-      <p className="mb-2 text-black dark:text-white text-center font-semibold">
-        Filter by
-      </p>
+      <p className="mb-2 text-center font-semibold">Filter by</p>
       <div className="flex flex-col gap-2">
         <Checkbox
           label="Name"

components/LinkCard.tsx

@@ -188,7 +188,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 <p className="text-sm text-gray-500 dark:text-gray-300">
                   {count + 1}
                 </p>
-                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name || link.description)}
                 </p>
               </div>
@@ -204,9 +204,7 @@ export default function LinkCard({ link, count, className }: Props) {
                   className="w-4 h-4 mt-1 drop-shadow"
                   style={{ color: collection?.color }}
                 />
-                <p className="text-black dark:text-white truncate capitalize w-full">
-                  {collection?.name}
-                </p>
+                <p className="truncate capitalize w-full">{collection?.name}</p>
               </Link>
 
               {/* {link.tags[0] ? (
@@ -219,7 +217,7 @@ export default function LinkCard({ link, count, className }: Props) {
                         onClick={(e) => {
                           e.stopPropagation();
                         }}
-                        className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                        className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                       >
                         {e.name}
                       </Link>

components/LinkPreview.tsx

@@ -75,7 +75,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
             <div className="flex flex-col justify-between w-full">
               <div className="flex items-baseline gap-1">
                 <p className="text-sm text-gray-500 dark:text-gray-300">{1}</p>
-                <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
+                <p className="text-lg truncate capitalize w-full pr-8">
                   {unescapeString(link.name as string)}
                 </p>
               </div>
@@ -84,9 +84,7 @@ export default function LinkPreview({ link, className, settings }: Props) {
                   icon={faFolder}
                   className="w-4 h-4 mt-1 drop-shadow text-sky-400"
                 />
-                <p className="text-black dark:text-white truncate capitalize w-full">
-                  Landing Pages ⚡️
-                </p>
+                <p className="truncate capitalize w-full">Landing Pages ⚡️</p>
               </div>
               <A
                 href={link.url as string}

components/LinkSidebar.tsx

@@ -76,9 +76,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
               className="w-6 h-6 text-gray-500 dark:text-gray-300"
             />
 
-            <p className="text-black dark:text-white truncate w-full lg:hidden">
-              Edit
-            </p>
+            <p className="truncate w-full lg:hidden">Edit</p>
           </div>
         ) : undefined}
 
@@ -102,9 +100,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
             className="w-6 h-6 text-gray-500 dark:text-gray-300"
           />
 
-          <p className="text-black dark:text-white truncate w-full lg:hidden">
-            Preserved Formats
-          </p>
+          <p className="truncate w-full lg:hidden">Preserved Formats</p>
         </div>
 
         {link?.collection.ownerId === userId ||
@@ -127,9 +123,7 @@ export default function LinkSidebar({ className, onClick }: Props) {
               className="w-6 h-6 text-gray-500 dark:text-gray-300"
             />
 
-            <p className="text-black dark:text-white truncate w-full lg:hidden">
-              Delete
-            </p>
+            <p className="truncate w-full lg:hidden">Delete</p>
           </div>
         ) : undefined}
       </div>

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 && (

components/Modal/Link/AddOrEditLink.tsx

@@ -151,7 +151,7 @@ export default function AddOrEditLink({
       {method === "CREATE" ? (
         <div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
           <div className="sm:col-span-3 col-span-5">
-            <p className="text-black dark:text-white mb-2">Address (URL)</p>
+            <p className="mb-2">Address (URL)</p>
             <TextInput
               value={link.url}
               onChange={(e) => setLink({ ...link, url: e.target.value })}
@@ -159,7 +159,7 @@ export default function AddOrEditLink({
             />
           </div>
           <div className="sm:col-span-2 col-span-5">
-            <p className="text-black dark:text-white mb-2">Collection</p>
+            <p className="mb-2">Collection</p>
             {link.collection.name ? (
               <CollectionSelection
                 onChange={setCollection}
@@ -189,7 +189,7 @@ export default function AddOrEditLink({
           {/* <hr className="mb-3 border border-sky-100 dark:border-neutral-700" /> */}
           <div className="grid sm:grid-cols-2 gap-3">
             <div className={`${method === "UPDATE" ? "sm:col-span-2" : ""}`}>
-              <p className="text-black dark:text-white mb-2">Name</p>
+              <p className="mb-2">Name</p>
               <TextInput
                 value={link.name}
                 onChange={(e) => setLink({ ...link, name: e.target.value })}
@@ -199,7 +199,7 @@ export default function AddOrEditLink({
 
             {method === "UPDATE" ? (
               <div>
-                <p className="text-black dark:text-white mb-2">Collection</p>
+                <p className="mb-2">Collection</p>
                 {link.collection.name ? (
                   <CollectionSelection
                     onChange={setCollection}
@@ -220,7 +220,7 @@ export default function AddOrEditLink({
             ) : undefined}
 
             <div>
-              <p className="text-black dark:text-white mb-2">Tags</p>
+              <p className="mb-2">Tags</p>
               <TagSelection
                 onChange={setTags}
                 defaultValue={link.tags.map((e) => {
@@ -230,7 +230,7 @@ export default function AddOrEditLink({
             </div>
 
             <div className="sm:col-span-2">
-              <p className="text-black dark:text-white mb-2">Description</p>
+              <p className="mb-2">Description</p>
               <textarea
                 value={unescapeString(link.description) as string}
                 onChange={(e) =>

components/Modal/Link/PreservedFormats.tsx

@@ -97,10 +97,10 @@ export default function PreservedFormats() {
               <FontAwesomeIcon icon={faFileImage} className="w-6 h-6" />
             </div>
 
-            <p className="text-black dark:text-white">Screenshot</p>
+            <p>Screenshot</p>
           </div>
 
-          <div className="flex text-black dark:text-white gap-1">
+          <div className="flex gap-1">
             <div
               onClick={() => handleDownload(ArchivedFormat.screenshot)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"
@@ -132,10 +132,10 @@ export default function PreservedFormats() {
               <FontAwesomeIcon icon={faFilePdf} className="w-6 h-6" />
             </div>
 
-            <p className="text-black dark:text-white">PDF</p>
+            <p>PDF</p>
           </div>
 
-          <div className="flex text-black dark:text-white gap-1">
+          <div className="flex gap-1">
             <div
               onClick={() => handleDownload(ArchivedFormat.pdf)}
               className="cursor-pointer hover:opacity-60 duration-100 p-2 rounded-md"

components/Navbar.tsx

@@ -93,7 +93,7 @@ export default function Navbar() {
             />
             <p
               id="profile-dropdown"
-              className="text-black dark:text-white leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
+              className="leading-3 hidden sm:block select-none truncate max-w-[8rem] py-1"
             >
               {account.name}
             </p>

components/NoLinksFound.tsx

@@ -12,10 +12,10 @@ export default function NoLinksFound({ text }: Props) {
 
   return (
     <div className="border border-solid border-sky-100 dark:border-neutral-700 w-full h-full flex flex-col justify-center p-10 rounded-2xl bg-gray-50 dark:bg-neutral-800">
-      <p className="text-center text-2xl text-black dark:text-white">
+      <p className="text-center text-2xl">
         {text || "You haven't created any Links Here"}
       </p>
-      <div className="text-center text-black dark:text-white w-full mt-4">
+      <div className="text-center w-full mt-4">
         <div
           onClick={() => {
             setModal({

components/PublicPage/PublicLinkCard.tsx

@@ -57,7 +57,7 @@ export default function LinkCard({ link, count }: Props) {
                 <Link
                   href={"/public/collections/20?q=" + e.name}
                   key={i}
-                  className="px-2 bg-sky-200 text-black dark:text-white dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
+                  className="px-2 bg-sky-200 dark:bg-sky-900 text-xs rounded-3xl cursor-pointer hover:opacity-60 duration-100 truncate max-w-[19rem]"
                 >
                   {e.name}
                 </Link>

components/RadioButton.tsx

@@ -26,9 +26,7 @@ export default function RadioButton({ label, state, onClick }: Props) {
         icon={faCircle}
         className="w-5 h-5 text-sky-500 dark:text-sky-500 peer-checked:hidden block"
       />
-      <span className="text-black dark:text-white rounded select-none">
-        {label}
-      </span>
+      <span className="rounded select-none">{label}</span>
     </label>
   );
 }

components/RequiredBadge.tsx

@@ -1,11 +0,0 @@
-export default function RequiredBadge() {
-  return (
-    <span
-      title="Required Field"
-      className="text-black dark:text-white cursor-help"
-    >
-      {" "}
-      *
-    </span>
-  );
-}

components/SettingsSidebar.tsx

@@ -53,9 +53,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Account
-            </p>
+            <p className="truncate w-full pr-7">Account</p>
           </div>
         </Link>
 
@@ -72,9 +70,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Appearance
-            </p>
+            <p className="truncate w-full pr-7">Appearance</p>
           </div>
         </Link>
 
@@ -91,9 +87,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Archive
-            </p>
+            <p className="truncate w-full pr-7">Archive</p>
           </div>
         </Link>
 
@@ -108,9 +102,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              API Keys
-            </p>
+            <p className="truncate w-full pr-7">API Keys</p>
           </div>
         </Link>
 
@@ -127,9 +119,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Password
-            </p>
+            <p className="truncate w-full pr-7">Password</p>
           </div>
         </Link>
 
@@ -147,9 +137,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
                 className="w-6 h-6 text-sky-500 dark:text-sky-500"
               />
 
-              <p className="text-black dark:text-white truncate w-full pr-7">
-                Billing
-              </p>
+              <p className="truncate w-full pr-7">Billing</p>
             </div>
           </Link>
         ) : undefined}
@@ -172,9 +160,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Help
-            </p>
+            <p className="truncate w-full pr-7">Help</p>
           </div>
         </Link>
 
@@ -187,9 +173,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              GitHub
-            </p>
+            <p className="truncate w-full pr-7">GitHub</p>
           </div>
         </Link>
 
@@ -202,9 +186,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Twitter
-            </p>
+            <p className="truncate w-full pr-7">Twitter</p>
           </div>
         </Link>
 
@@ -217,9 +199,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
               className="w-6 h-6 text-sky-500 dark:text-sky-500"
             />
 
-            <p className="text-black dark:text-white truncate w-full pr-7">
-              Mastodon
-            </p>
+            <p className="truncate w-full pr-7">Mastodon</p>
           </div>
         </Link>
       </div>

components/Sidebar.tsx

@@ -67,9 +67,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faChartSimple}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              Dashboard
-            </p>
+            <p className="truncate w-full">Dashboard</p>
           </div>
         </Link>
 
@@ -83,9 +81,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faLink}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              All Links
-            </p>
+            <p className="truncate w-full">All Links</p>
           </div>
         </Link>
 
@@ -99,9 +95,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faFolder}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              All Collections
-            </p>
+            <p className="truncate w-full">All Collections</p>
           </div>
         </Link>
 
@@ -115,9 +109,7 @@ export default function Sidebar({ className }: { className?: string }) {
               icon={faThumbTack}
               className="w-7 h-7 drop-shadow text-sky-500 dark:text-sky-500"
             />
-            <p className="text-black dark:text-white truncate w-full">
-              Pinned Links
-            </p>
+            <p className="truncate w-full">Pinned Links</p>
           </div>
         </Link>
       </div>
@@ -165,9 +157,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           className="w-6 h-6 drop-shadow"
                           style={{ color: e.color }}
                         />
-                        <p className="text-black dark:text-white truncate w-full">
-                          {e.name}
-                        </p>
+                        <p className="truncate w-full">{e.name}</p>
 
                         {e.isPublic ? (
                           <FontAwesomeIcon
@@ -235,9 +225,7 @@ export default function Sidebar({ className }: { className?: string }) {
                           className="w-4 h-4 text-sky-500 dark:text-sky-500 mt-1"
                         />
 
-                        <p className="text-black dark:text-white truncate w-full pr-7">
-                          {e.name}
-                        </p>
+                        <p className="truncate w-full pr-7">{e.name}</p>
                         <div className="drop-shadow text-gray-500 dark:text-gray-300 text-xs">
                           {e._count?.links}
                         </div>

components/SortDropdown.tsx

@@ -23,9 +23,7 @@ export default function SortDropdown({
       }}
       className="absolute top-8 right-0 border border-sky-100 dark:border-neutral-700 shadow-md bg-gray-50 dark:bg-neutral-800 rounded-md p-2 z-20 w-52"
     >
-      <p className="mb-2 text-black dark:text-white text-center font-semibold">
-        Sort by
-      </p>
+      <p className="mb-2 text-center font-semibold">Sort by</p>
       <div className="flex flex-col gap-2">
         <RadioButton
           label="Date (Newest First)"