Added nonfunctional profile picture edit and delete icons#265
Added nonfunctional profile picture edit and delete icons#265
Conversation
HackYourFutures
temporarily deployed
to
dojo-frontend-profile-p-fcc4jt
| width: 180, | ||
| }} | ||
| > | ||
| <Fade in={isHovering}> |
There was a problem hiding this comment.
Do you think this can be made much simple with only a CSS hover rule? What is the added benefit of using Fade?
There was a problem hiding this comment.
Yes it is also possible to do it via CSS, the benefit of using Fade is that it is a part of the MUI that we use.
There was a problem hiding this comment.
Pull request overview
This PR adds non-functional edit and delete icon buttons that appear when hovering over a trainee's profile picture. The implementation uses Material-UI components with fade animations and hover effects, setting the groundwork for future functionality including confirmation modals, upload dialogs, and API integration.
Key Changes:
- Added hover state management using React useState to show/hide edit and delete icons
- Implemented visual feedback with brightness filter on avatar and scale transforms on icons
- Used Material-UI Fade component for smooth icon transitions
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
HackYourFutures
temporarily deployed
to
dojo-frontend-profile-p-4qhhbx
spearated profile picture modal for better readablity
sirQuail
force-pushed
the
frontend/profile-picture-editor-buttons
branch
from
1c6eea1 to
cec6faa
Compare
HackYourFutures
had a problem deploying
to
dojo-frontend-profile-p-4qhhbx
It is now found in profile-> components
HackYourFutures
had a problem deploying
to
dojo-frontend-profile-p-4qhhbx
said file did not have the seperate ProfilePictureModal
zalexa19
left a comment
zalexa19
left a comment
There was a problem hiding this comment.
Hi!
I looked at your pr, really happy that you extracted some code to a new component!
I left a comment about passing the Trainee to this component, other than that it looks cool :)
| * @returns {ReactNode} A React element that renders profile page sidebar information and profile image. | ||
| */ | ||
| const ProfileSidebar = ({ traineeId }: ProfileSidebarProps) => { | ||
| export const ProfileSidebar = ({ traineeId }: ProfileSidebarProps) => { |
There was a problem hiding this comment.
This component also has a default export at the bottom of this file.
Could you please delete the default export?
| import { Trainee } from '../../../../data/types/Trainee'; | ||
|
|
||
| interface ProfilePictureModalProps { | ||
| data: Trainee | undefined; |
There was a problem hiding this comment.
I think that instead of the whole Trainee object, it would be better to pass the properties that are used in this component - imageUrl and displayName.
Then this component wont be rerendered when something unrelated to the profile changes in Trainee
| position="relative" | ||
| > | ||
| <Avatar | ||
| src={data?.imageURL} |
There was a problem hiding this comment.
I'm not sure, can Avatar component handle undefined as a src?
Description
Adds nonfunctional edit and delete buttons only visible when hovering over a trainee profile picture.
Will be expanded to include confirmation and upload modals and finally api implementation.
Showcase