Implement modal for user name and profile picture update

[Zografska]

Implement logic for issue#1

[andrejsshell]

Remove this console.log

[andrejsshell]

Reformat this code a little so it's more readable.

Suggested change

	const [uploadedPicture, setUploadedPicture] = useState<File>(null);
	const { user, showOnboardingModal, setUser } = useUser();
	const { mutateAsync, isLoading, error, isError } = useMutation(
	['/update-user'],
	async (formData : FormData) => fetcher.put(`/users/${user.id}`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }),
	{ onSuccess: (data: UserUpdatedResponse) => {
	const { data: { firstName, lastName, profilePicture } } = data;
	if (data.data.profilePicture){
	setUser({ ...user, firstName, lastName, profilePicture });
	} else {
	setUser({ ...user, firstName, lastName });
	}
	} },
	);
	const onDrop = useCallback((acceptedFile) => {
	setUploadedPicture(acceptedFile[0]);
	}, []);
	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop,
	maxFiles: 1,
	accept: {
	'image/jpeg': [],
	'image/png': [],
	} });
	const [uploadedPicture, setUploadedPicture] = useState<File>(null);
	const { user, showOnboardingModal, setUser } = useUser();
	const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop,
	maxFiles: 1,
	accept: {
	'image/jpeg': [],
	'image/png': [],
	} });
	const onDrop = useCallback((acceptedFile) => {
	setUploadedPicture(acceptedFile[0]);
	}, []);
	const { mutateAsync, isLoading, error, isError } = useMutation(
	['/update-user'],
	async (formData : FormData) => fetcher.put(`/users/${user.id}`, formData, { headers: { 'Content-Type': 'multipart/form-data' } }),
	{ onSuccess: (data: UserUpdatedResponse) => {
	const { data: { firstName, lastName, profilePicture } } = data;
	if (data.data.profilePicture){
	setUser({ ...user, firstName, lastName, profilePicture });
	} else {
	setUser({ ...user, firstName, lastName });
	}
	} },
	);

[andrejsshell]

Remove the header and the close button.