bug fixed + redesigned profile settings page

components/LinkCard.tsx

@@ -20,6 +20,7 @@ import usePermissions from "@/hooks/usePermissions";
 import { toast } from "react-hot-toast";
 import isValidUrl from "@/lib/client/isValidUrl";
 import Link from "next/link";
+import unescapeString from "@/lib/client/unescapeString";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -161,7 +162,7 @@ export default function LinkCard({ link, count, className }: Props) {
                 {count + 1}
               </p>
               <p className="text-lg text-black dark:text-white truncate capitalize w-full pr-8">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
             <Link

components/PublicPage/LinkCard.tsx

@@ -3,6 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import { Link as LinkType, Tag } from "@prisma/client";
 import isValidUrl from "@/lib/client/isValidUrl";
+import unescapeString from "@/lib/client/unescapeString";
 
 interface LinksIncludingTags extends LinkType {
   tags: Tag[];
@@ -60,12 +61,12 @@ export default function LinkCard({ link, count }: Props) {
             <div className="flex items-baseline gap-1">
               <p className="text-xs text-gray-500">{count + 1}</p>
               <p className="text-lg text-black">
-                {link.name || link.description}
+                {unescapeString(link.name || link.description)}
               </p>
             </div>
 
             <p className="text-gray-500 text-sm font-medium">
-              {link.description}
+              {unescapeString(link.description)}
             </p>
             <div className="flex gap-3 items-center flex-wrap my-3">
               <div className="flex gap-1 items-center flex-wrap mt-1">

components/SettingsSidebar.tsx

@@ -34,7 +34,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 dark:bg-neutral-800 h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-800 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
+      className={`dark:bg-neutral-900 bg-white h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
     >
       <div className="flex flex-col gap-1">
         <Link href="/settings/profile">

components/SubmitButton.tsx

@@ -27,8 +27,8 @@ export default function SubmitButton({
         if (!loading) onClick();
       }}
     >
-      {icon && <FontAwesomeIcon icon={icon} className="h-5" />}
-      <p className="text-center w-full">{label}</p>
+      {icon && <FontAwesomeIcon icon={icon} className="h-5 select-none" />}
+      <p className="text-center w-full select-none">{label}</p>
     </div>
   );
 }