feat: show avatar of user in the profile page

frontend/lib/screens/pages/profile_page.dart

@@ -234,19 +234,10 @@ class _ProfilePageState extends State<ProfilePage> {
                       ),
                     )
                   else if (userData != null) ...[
-                    CircleAvatar(
+                    UserAvatar(
+                      displayName: userData!['displayName'] ?? 'Unknown User',
+                      avatarUrl: userData!['avatar']?.toString(),
                       radius: 50,
-                      backgroundColor: Color(0xFF6A4C93),
-                      child: Text(
-                        (userData!['displayName'] ?? 'U')
-                            .substring(0, 1)
-                            .toUpperCase(),
-                        style: TextStyle(
-                          color: Colors.white,
-                          fontSize: 36,
-                          fontWeight: FontWeight.bold,
-                        ),
-                      ),
                     ),
                     SizedBox(height: 16),
                     Text(