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

Changed the success toast to reflect Lazim's design #512

Open
wants to merge 7 commits into
base: master
Choose a base branch
from

Conversation

namanhboi
Copy link
Contributor

@namanhboi namanhboi commented Apr 14, 2024

Summary

Changed the design of the success toast to match this design. You click on continue or the X to close the toast.

Locations.-.Carriage.-.Google.Chrome.2024-04-14.12-41-08.mp4

image

image

image

I just changed the design of the toast, so to make a toast appear, you just need to use showToast from useToast in toastContext just like before.

Note that the success modal will stay open even if you switch into a different page. I don't know if this is the intended behavior, but I can change it upon request.

Also, in the file AuthManager.tsx, Toast was used directly, which I don't think is correct since we have toastContext which manages all the calling of the toasts. I changed the code to use toastContext and it compiled but I don't know how to see the changes made in the frontend.

Test Plan

I tested the success modal when adding new employees and locations, but I wasn't able to add students for some reason so I haven't been able to test it on that.

I tried it on different screen sizes and on small screens:
image

The modal is too big, so I would need to do a media export in the future.

@namanhboi namanhboi requested a review from a team as a code owner April 14, 2024 16:56
@dti-github-bot
Copy link
Member

dti-github-bot commented Apr 14, 2024

[diff-counting] Significant lines: 185.

Copy link
Collaborator

@Atikpui007 Atikpui007 left a comment

Choose a reason for hiding this comment

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

Overall a pretty good PR. I left a couple of comments that should be addressed. Also the expected behavior of modals and by extension this success/ failure toast should be that when any other part of the page is clicked it goes away.

frontend/src/context/toastContext.tsx Show resolved Hide resolved
frontend/src/context/toastContext.tsx Show resolved Hide resolved
frontend/src/context/toastContext.tsx Show resolved Hide resolved
frontend/src/context/toastContext.tsx Show resolved Hide resolved
frontend/src/context/toastContext.tsx Show resolved Hide resolved
@namanhboi
Copy link
Contributor Author

namanhboi commented May 6, 2024

I was able to implement what you suggested and now everthing outside the success modal is unclickable. However, I couldn't figure out a way to make the outside unscrollable.
image

Atikpui007
Atikpui007 previously approved these changes Sep 20, 2024
@raissaji raissaji self-assigned this Sep 23, 2024
@namanhboi
Copy link
Contributor Author

I merged it with the main branch and the success modal works as intended.
Cheese_Wed-02Oct24_15 53
Cheese_Wed-02Oct24_15 54
Cheese_Wed-02Oct24_15 54

However, I discovered a few bugs with the master branch which I will point out in a separate pr

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants