feat: enhance user interface with improved styling and responsiveness

- Updated UserAvatar component to accept additional className for better customization.
- Refined ProfilePage layout with responsive avatar styling.
- Enhanced Header component with improved background and text styles.
- Improved PopularTags and TopFriends components with better spacing and text shadows.
- Updated ThoughtCard and ThoughtThread components for better visual hierarchy and responsiveness.
- Enhanced UI components (Button, Badge, Card, DropdownMenu, Input, Popover, Separator, Skeleton, Textarea) with new styles and effects.
- Added a new background image for visual enhancement.

thoughts-frontend/components/user-avatar.tsx

@@ -1,15 +1,23 @@
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { cn } from "@/lib/utils";
 import { User } from "lucide-react";
 
 interface UserAvatarProps {
   src?: string | null;
   alt?: string | null;
+  className?: string;
 }
 
-export function UserAvatar({ src, alt }: UserAvatarProps) {
+export function UserAvatar({ src, alt, className }: UserAvatarProps) {
   return (
-    <Avatar>
-      {src && <AvatarImage src={src} alt={alt ?? "User avatar"} />}
+    <Avatar className={cn("border-2 border-primary/50 shadow-md", className)}>
+      {src && (
+        <AvatarImage
+          className="object-cover object-center"
+          src={src}
+          alt={alt ?? "User avatar"}
+        />
+      )}
       <AvatarFallback>
         <User className="h-5 w-5" />
       </AvatarFallback>