[$20] - "X" to close Badges pop up is too far to the right

[ajefts]

[talesforce]

This is launched here - https://www.topcoder.com/direct/contest/detail?projectId=30055975

[ajefts]

@talesforce The latest is deployed to prod, but I don't see any change for this one. Can you check?

[birdofpreyru]

I'm not sure, how can I add badges to a test user to see it in the locally deployed app. But as you say it has been deployed to prod, I've checked my profile, and it looks it has not been fixed properly. In fact, I see two cross-controls to close the modal, marked red on the screenshot (one of them is barely visible, as it overlays the modal title):

I also think, it might be better to remove those crosses at all, and to make the modal to close on any click in its empty area?

[talesforce]

@ajefts - Not sure if it's a merge issue but I can ask @iversonLv to look at the fix again.

BTW, I agree with the suggestion from @birdofpreyru to remove the x altogether and make the modal close on clicking anywhere outside - that's the simplest user experience.

[iversonLv]

will take a look

[birdofpreyru]

Expected Fix

Thanks. I've checked both. In the first one I still don't quite like the position of the cross. The second one does not work for me, clicking on the empty space does not close the modal.

I'd like to see the following:

1. Move the cross button to the corner of the badges box, as shown in the screenshot (should still close the modal).
2. Ensure, that clicking outside of the badges also closes the modal.
3. Make the area around the badges box more transparent, so that it is more intuitive that clicking there will close the modal.
4. Also, if you look close at the corners of the screen, you'll see that modal shading background has rounded small corners, we don't need them, the background shading should just fill all the viewport without holes.

P.S.: In case you are not sure how to mock the badges for testing on the locally deployed App, check my last message here: #912

[shizhouxing]

Hi, I'd like to fix this issue. But I don't have the permission currently. Could you please give me the permission?

[birdofpreyru]

@shizhouxing The issue is you to work on it. I don't yet have enough permissions myself to invite you to the repo, so just comment in the issue discussion, to pick it up, or say that it is ready for review.

[shizhouxing]

@birdofpreyru Now it's ready for review.