Final changes to UI

frontend/src/components/profile/ProfileHeader.jsx

@@ -1,21 +1,19 @@
 /* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
-// frontend/src/components/profile/ProfileHeader.jsx
 import React, { useState } from 'react';
 import { Box, Avatar, IconButton } from '@mui/material';
 import EditIcon from '@mui/icons-material/Edit';
 
 const ProfileHeader = ({
   coverLink,
   photoLink,
-  professorName, // Assuming name is passed for initials fallback
+  professorName,
   onEditCover,
   onViewCover,
   onEditPhoto,
   onViewPhoto,
 }) => {
   const [coverHover, setCoverHover] = useState(false);
-  const [photoHover, setPhotoHover] = useState(false);
 
   const getInitials = () => {
     if (!professorName) return '?';
@@ -25,126 +23,141 @@ const ProfileHeader = ({
 
   const initials = getInitials();
 
-  const handleCoverMouseEnter = () => setCoverHover(true);
-  const handleCoverMouseLeave = () => setCoverHover(false);
-  const handlePhotoMouseEnter = () => setPhotoHover(true);
-  const handlePhotoMouseLeave = () => setPhotoHover(false);
-
   const handleCoverClick = () => {
-    if (coverLink) { onViewCover(); }
-    else { onEditCover(); }
+    if (coverLink && onViewCover) {
+      onViewCover();
+    } else if (onEditCover) {
+      onEditCover();
+    }
   };
 
-  // --- Modify handlePhotoClick ---
-  const handlePhotoClick = (e) => { // Accept event 'e'
-    e.stopPropagation(); // <<< ADD THIS LINE to stop bubbling
-    if (photoLink) {
+  const handlePhotoClick = (e) => {
+    e.stopPropagation();
+    if (photoLink && onViewPhoto) {
       onViewPhoto();
-    } else {
+    } else if (onEditPhoto) {
       onEditPhoto();
     }
   };
-  // --- End modification ---
 
-  const handleCoverEditButtonClick = (e) => { e.stopPropagation(); onEditCover(); };
-  const handlePhotoEditButtonClick = (e) => { e.stopPropagation(); onEditPhoto(); };
+  const handleCoverEditButtonClick = (e) => {
+    e.stopPropagation();
+    if (onEditCover) {
+      onEditCover();
+    }
+  };
+
+  const handlePhotoEditButtonClick = (e) => {
+    e.stopPropagation();
+    if (onEditPhoto) {
+      onEditPhoto();
+    }
+  };
 
   return (
     <Box
       sx={{
         position: 'relative',
         height: { xs: 300, sm: 300 },
-        mb: { xs: 8, sm: 10 }, // Adjusted margin based on avatar size
-        // --- THEME BACKGROUND ---
-        // Use coverLink if available, otherwise use theme secondary color
-        backgroundImage: coverLink ? `url('${coverLink}')` : 'none', // Remove gradient
-        // Use theme's secondary color (Steel Gray) as default background
+        mb: { xs: 8, sm: 10 },
+        backgroundImage: coverLink ? `url('${coverLink}')` : 'none',
         bgcolor: coverLink ? 'transparent' : 'secondary.main',
-        // --- END THEME BACKGROUND ---
         backgroundSize: 'cover',
         backgroundPosition: 'center',
-        borderRadius: 1, // Use theme's border radius? theme.shape.borderRadius
-        cursor: 'pointer',
+        borderRadius: 1,
+        cursor: onEditCover || onViewCover ? 'pointer' : 'default',
         '&:hover .cover-hover-edit': { opacity: 1 },
       }}
       onClick={handleCoverClick}
-      onMouseEnter={handleCoverMouseEnter}
-      onMouseLeave={handleCoverMouseLeave}
+      onMouseEnter={() => setCoverHover(true)}
+      onMouseLeave={() => setCoverHover(false)}
     >
-      {/* Edit Cover Button (style should still work on dark bg) */}
-      <IconButton
-        className="cover-hover-edit"
-        size="small"
-        sx={{
-          position: 'absolute', top: 8, right: 8, color: 'white',
-          backgroundColor: 'rgba(0, 0, 0, 0.4)',
-          opacity: coverHover ? 1 : 0,
-          transition: 'opacity 0.2s',
-          '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.7)' },
-        }}
-        onClick={handleCoverEditButtonClick}
-        aria-label="Edit cover photo"
-      >
-        <EditIcon fontSize="small"/>
-      </IconButton>
+      {/* Edit Cover Button */}
+      {onEditCover && (
+        <IconButton
+          className="cover-hover-edit"
+          size="small"
+          sx={{
+            position: 'absolute',
+            top: 8,
+            right: 8,
+            color: 'white',
+            backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            opacity: coverHover ? 1 : 0,
+            transition: 'opacity 0.2s',
+            '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.7)' },
+          }}
+          onClick={handleCoverEditButtonClick}
+          aria-label="Edit cover photo"
+        >
+          <EditIcon fontSize="small" />
+        </IconButton>
+      )}
 
-      {/* Avatar */}
+      {/* Avatar with Edit Button */}
       <Box
         sx={{
-          width: { xs: 100, sm: 120, md: 140 }, // Slightly adjusted sizes
+          width: { xs: 100, sm: 120, md: 140 },
           height: { xs: 100, sm: 120, md: 140 },
           position: 'absolute',
-          bottom: { xs: -50, sm: -60, md: -70 }, // Adjust overlap based on size
-          left: { xs: '50%', sm: 24 }, // Indent more on larger screens
+          bottom: { xs: -50, sm: -60, md: -70 },
+          left: { xs: '50%', sm: 24 },
           transform: { xs: 'translateX(-50%)', sm: 'none' },
-          border: '4px solid', // Use theme paper color for border
-          borderColor: 'background.paper', // Ensure good contrast
+          border: '4px solid',
+          borderColor: 'background.paper',
           borderRadius: '50%',
-          bgcolor: 'grey.300', // Fallback bg for avatar itself
-          overflow: 'hidden',
+          bgcolor: 'grey.300',
+          overflow: 'visible',
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          cursor: 'pointer',
+          cursor: onEditPhoto || onViewPhoto ? 'pointer' : 'default',
           boxShadow: 3,
-          '&:hover .photo-hover-edit': { opacity: 1 },
         }}
         onClick={handlePhotoClick}
-        onMouseEnter={handlePhotoMouseEnter}
-        onMouseLeave={handlePhotoMouseLeave}
       >
         <Avatar
           src={photoLink || ''}
-          alt={professorName || 'User'} // Generic alt
+          alt={professorName || 'User'}
           sx={{
-            width: '100%', height: '100%',
-            fontSize: { xs: '2.5rem', sm: '3rem', md: '3.5rem' }, // Adjust font size
-            // Use theme primary colors for Avatar fallback
+            width: '100%',
+            height: '100%',
+            fontSize: { xs: '2.5rem', sm: '3rem', md: '3.5rem' },
             bgcolor: 'primary.main',
-            color: 'primary.contrastText'
+            color: 'primary.contrastText',
           }}
         >
           {!photoLink && initials}
         </Avatar>
-        {/* Edit Photo Button (style should still work) */}
-        <IconButton
-          className="photo-hover-edit"
-          size="small"
-          sx={{
-            position: 'absolute', bottom: 5, right: 5,
-            color: 'white', backgroundColor: 'rgba(0, 0, 0, 0.4)',
-            opacity: photoHover ? 1 : 0,
-            transition: 'opacity 0.2s',
-            '&:hover': { backgroundColor: 'rgba(0, 0, 0, 0.7)' },
-          }}
-          onClick={handlePhotoEditButtonClick}
-          aria-label="Edit profile photo"
-        >
-          <EditIcon fontSize="small"/>
-        </IconButton>
+
+        {/* Edit Icon on Avatar */}
+        {onEditPhoto && (
+          <IconButton
+            size="small"
+            sx={{
+              position: 'absolute',
+              bottom: 0,
+              right: 0,
+              backgroundColor: 'white',
+              color: 'text.secondary',
+              border: '1px solid lightgrey',
+              width: 32,
+              height: 32,
+              transition: 'background-color 0.2s, transform 0.2s',
+              '&:hover': {
+                backgroundColor: 'grey.200',
+                transform: 'scale(1.15)',
+              },
+            }}
+            onClick={handlePhotoEditButtonClick}
+            aria-label="Edit profile photo"
+          >
+            <EditIcon fontSize="small" />
+          </IconButton>
+        )}
       </Box>
     </Box>
   );
 };
 
-export default ProfileHeader;
+export default ProfileHeader;

frontend/src/pages/UserProfilePage.jsx

@@ -220,9 +220,8 @@ const groupedDetailedExperiences = groupExperiencesByType(detailedExperiences);
                     coverLink={profileData.coverLink || null}
                     photoLink={profileData.photoLink || null}
                     professorName={profileData.name}
-                    onEditCover={() => {}} onViewCover={() => {}}
-                    onEditPhoto={() => {}} onViewPhoto={() => {}}
                 />
+
                   {/* --- Tabs for Profile Sections --- */}
                 <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                 <Tabs value={tabValue} onChange={handleTabChange} aria-label="User profile sections">