oppia: [BUG]: Lack of Hover State Feedback on Topic Viewer Buttons in Oppia Classroom Chapter.
Describe the bug
When hovering over the buttons in the Topic Viewer within Oppia Classroom’s Chapter, there is currently no visual indication or activity, which leads to inadequate visual clarity. Users may expect a visual cue or change to occur upon hovering over the buttons, providing feedback that the element is interactive.
URL of the page where the issue is observed.
https://www.oppia.org/learn/math/addition-subtraction/story
Steps To Reproduce
1)Go to oppia learn tab.
2)Click on see all lessons.
3)click on any of the chapters.
4)And, here is the page.
Expected Behavior
On hovering over the buttons in the Topic Viewer, users should experience a change in appearance, any visual indicator, to signify that the buttons are interactive elements.(for eg-> zooming effect.)
https://github.com/oppia/oppia/assets/136263179/b0caa1bf-05be-4f41-9171-57791efa06bf
Screenshots/Videos
Already given
What device are you using?
Desktop
Operating System
MacOS
What browsers are you seeing the problem on?
Chrome
Browser version
No response
Additional context
No response
Tips for developers
Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).
Also, if this is your first issue, please make sure to follow https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue and https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#setting-things-up before claiming it. Thanks!
About this issue
- Original URL
- State: closed
- Created 5 months ago
- Comments: 22 (3 by maintainers)
Thanks @rahat2134, assigned you.
@rahat2134 Nicely done, looks great.
@rflore and @liwei899 here is the final solution -> changes-> :hover{ 1)change color to light green as @rflore and @liwei899 said 2)rounded corner as @rflore said (by 4px and thats looking good or as per the screenshot you send.) 3)transform:scale so that a small zoomy effect came as per @liwei899 said. i.e The final solution mentions all the things . Kindly check and verify it so that @seanlip can assign me this issue.or if possible then assign me the issue. } @rflore PTAL. screen-capture (1).webm
I like the solution to add a bouncing effect when the cursor hovering on it. It will be more beneficial to add a lighter green color change when hovering to indicate the change.
Hi @rahat2134, I agree the hover state needs an update, but it seems subtle with the zoom.
Maybe could add a highlight in the background to make it more pronounced? This way it’s consistent with hover states on our menu. The hover patterns are either underlined or highlighted.
@seanlip ok ! from now i will focus more on existing issues.And the effect that i showed in video is just an example, we can modify as per design team. Thank You.
@rahat2134 Thanks, let’s get some feedback from the design team on this. @liwei899 @rflore what are your thoughts on the proposed video above?
Also @rahat2134 in general I would suggest that you tackle existing issues rather than open new ones and claim those. That way you can focus on things that the community considers higher-priority. You can find some examples here: https://github.com/orgs/oppia/projects/3/views/8