feat: add error handling for key mismatch

src/components/UI/Avatar.tsx

@@ -1,4 +1,5 @@
-import { cn } from "../../core/utils/cn.ts";
+import { cn } from "@core/utils/cn.ts";
+import { LockKeyholeOpenIcon } from 'lucide-react';
 import type React from "react";
 
 type RGBColor = {
@@ -12,6 +13,7 @@ interface AvatarProps {
   text: string;
   size?: "sm" | "lg";
   className?: string;
+  showError?: boolean;
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass: stop being annoying Biome
@@ -43,6 +45,7 @@ class ColorUtils {
 export const Avatar: React.FC<AvatarProps> = ({
   text,
   size = "sm",
+  showError = false,
   className,
 }) => {
   const sizes = {
@@ -73,12 +76,11 @@ export const Avatar: React.FC<AvatarProps> = ({
   return (
     <div
       className={cn(
-        `
+        `flex
+        relative
         rounded-full 
-        flex 
         items-center 
         justify-center 
-        size-11
         font-semibold`,
         sizes[size],
         className,
@@ -88,6 +90,7 @@ export const Avatar: React.FC<AvatarProps> = ({
         color: textColor,
       }}
     >
+      {showError ? <LockKeyholeOpenIcon className="size-4 absolute bottom-0 right-0 z-10 text-red-500 stroke-3" /> : null}
       <p className="p-1">{initials}</p>
     </div>
   );

src/components/UI/Button.tsx

@@ -15,7 +15,7 @@ const buttonVariants = cva(
         success:
           "bg-green-500 text-white hover:bg-green-600 dark:hover:bg-green-600",
         outline:
-          "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500",
+          "bg-transparent border border-slate-400 hover:bg-slate-100 dark:border-slate-400 dark:text-slate-500",
         subtle:
           "bg-slate-100 text-slate-700 hover:bg-slate-200 dark:bg-slate-500 dark:text-white dark:hover:bg-slate-400",
         ghost: