feat: integrate Avatar component across various modules for improved user representation and enhance profile page with Gravatar support

src/components/moving-motivators/MotivatorShareModal.tsx

@@ -5,6 +5,7 @@ import { Modal } from '@/components/ui/Modal';
 import { Input } from '@/components/ui/Input';
 import { Button } from '@/components/ui/Button';
 import { Badge } from '@/components/ui/Badge';
+import { Avatar } from '@/components/ui/Avatar';
 import { shareMotivatorSession, removeMotivatorShare } from '@/actions/moving-motivators';
 import type { ShareRole } from '@prisma/client';
 
@@ -120,9 +121,7 @@ export function MotivatorShareModal({
                   className="flex items-center justify-between rounded-lg border border-border bg-card p-3"
                 >
                   <div className="flex items-center gap-3">
-                    <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/10 text-sm font-medium text-primary">
-                      {share.user.name?.[0]?.toUpperCase() || share.user.email[0].toUpperCase()}
-                    </div>
+                    <Avatar email={share.user.email} name={share.user.name} size={32} />
                     <div>
                       <p className="text-sm font-medium text-foreground">
                         {share.user.name || share.user.email}