Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

619/refactor image upload button #680

Open
wants to merge 13 commits into
base: Development
Choose a base branch
from
Open
Prev Previous commit
Next Next commit
Minor cleanup
  • Loading branch information
andycwilliams committed Oct 9, 2024
commit 252e1bb8f387c4677a1ae72f74b322f8fbbd2dca
8 changes: 2 additions & 6 deletions src/components/Profile/ProfileImageField.jsx
Copy link
Contributor

@leekahung leekahung Sep 21, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Small nitpick, could we have a small text right under the image icon (perhaps in white text) to let users know what it's for? For someone that's not tech-savvy, it's not immediately clear that I would need to click don't the image to change the image.

Original file line number Diff line number Diff line change
@@ -8,7 +8,6 @@ import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import HideImageIcon from '@mui/icons-material/HideImage';
import ImageIcon from '@mui/icons-material/Image';
import { useTheme } from '@mui/material/styles';
// Contexts Imports
import { SignedInUserContext } from '@contexts';
// Component Imports
@@ -36,7 +35,6 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
const [processing, setProcessing] = useState(false);
const [showConfirmationModal, setShowConfirmationModal] = useState(false);
const [hover, setHover] = useState(false);
const theme = useTheme();

const handleProfileImage = async (event) => {
if (event.target.files[0].size > 1 * 1000 * 1024) {
@@ -84,9 +82,9 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
cursor: 'pointer',
border: 'none',
color: '#FFFFFF',
backgroundColor: theme.palette.content,
backgroundColor: '#545454',
'&:hover': {
backgroundColor: theme.palette.content
backgroundColor: '#545454'
}
};

@@ -131,7 +129,6 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
<Button
data-testid="deleteProfilePictureIcon"
aria-label="delete-profile-picture"
// color={theme.palette.secondary.main}
component="label"
variant="contained"
startIcon={<HideImageIcon />}
@@ -144,7 +141,6 @@ const ProfileImageField = ({ loadProfileData, contactProfile }) => {
<Button
data-testid="uploadProfilePictureIcon"
aria-label="upload-profile-picture"
// color="content"
component="label"
variant="contained"
startIcon={<ImageIcon />}
2 changes: 2 additions & 0 deletions test/components/Profile/ProfileImageField.test.jsx
Original file line number Diff line number Diff line change
@@ -57,3 +57,5 @@ describe('ProfileImageField', () => {
expect(screen.getByTestId('deleteProfilePictureIcon')).not.toBeNull();
});
});