oppia: [BUG]: Absence of Hovering Effect on About Page Buttons
Describe the bug
When navigating from the homepage (https://www.oppia.org/) to the About page (https://www.oppia.org/about), I observed a slight inconsistency in the hovering behavior. On the homepage, the buttons change colors upon hovering, creating a dynamic and engaging experience. However, on the About page, this interactive feature seems to be absent, leading to a noticeable deviation in the user experience. While exploring the website, this inconsistency caught my attention, prompting me to bring it to your notice for potential improvement.
URL of the page where the issue is observed.
Steps To Reproduce
Go to About page through https://www.oppia.org/about Hover on any button of the webpage (eg Browse our lessons button)
Expected Behavior
The buttons should change the colors on hovering to maintain consistency throught the website.
Screenshots/Videos
On clicking Browse Lessons button on Home page -
On clicking Browse Lessons Buttons on About Page -
As you can see no hover effect is applied on the buttons of about page
What device are you using?
Desktop
Operating System
Linux
What browsers are you seeing the problem on?
Other
Browser version
No response
Additional context
I would be very happy to solve this Issue .
I’ll add some CSS styling to the about page(oppia/core/templates/pages/about-page/about-page.component.css) to apply the hovering effect on About Page buttons.
Here is my approach’s proof
When I tested on my local server it was working perfectly
Here is the proof
Screencast from 12-25-2023 03:51:05 PM.webm
@kevintab95 @seanlip Can you assign this issue to me ? Thanks !
Tips for developers
Before tackling the bug, please use git bisect (see https://git-scm.com/docs/git-bisect) to investigate which PR caused it. If the issue occurred before commit https://github.com/oppia/oppia/commit/c7db0fe, the most effective approach is to utilize the Python setup for conducting a git bisect (You only need to go back as far as commit https://github.com/oppia/oppia/commits/9a334e9). If you need to perform a git bisect for any commit beyond that commit, the Docker setup will be suitable. If you find the PR, leave a comment on this issue pointing to it, or just say that it happened before commit 9a334e9 if you could reproduce it there. This will help us fix the issue by reverting the faulty PR.
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 6 months ago
- Comments: 16 (7 by maintainers)
@Vir-8 Yes, this weekend is fine, thanks.
Good question about the buttons. We should actually figure out what we want and standardize them, I think. For example they should probably be full-width on mobile screens. My suggestion is to try and standardize the size/padding/etc. (trying to make sure that it looks nice overall) and, in your PR, show before/after screenshots of all the relevant pages in both desktop and mobile, then we can get a design team audit on them. Does that work?
I think we can accept this issue, but I don’t want us to be applying the same styles to all buttons manually. Instead, let’s have an approach where we have a standard button component and use that component in all the places we need it (including other pages as well, not just About).
If you’d like to take up the issue please do the usual thing – per the guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide an explanation of what your PR will do (with names of files you’re changing, what you plan to change in each file, etc.). If it looks good, we can assign you to this issue.