search

thamara / time-to-leave

Log work hours and get notified when it's time to leave the office and start to live.
http://timetoleave.app
GNU General Public License v3.0
463 stars 272 forks source link

Fix punch button and scroll bar styling #965

Closed anthonyshibitov closed 1 year ago

anthonyshibitov commented 1 year ago

Set punch button width to fill screen and opaque. Scrollbar will not leave a gap anymore.

TTL button fix

Context / Background

Originally the 'Punch time' button did not fill the entire screen, and it was also transparent.

What change is being introduced by this PR?

The css/styles.css file is modified to remove the background color of the webkit scroll track, and change the overflow behavior of the body so that the scroll bar now overlaps the punch button, instead of leaving a gap.

I believe this looks much cleaner. I'm not sure why the button was originally transparent and smaller than the width of the screen, but it was visually confusing. The scrollbar being visible indicates there is more content below, and the button occluding a small portion of the screen shouldn't be an issue. Also, having transparent texts on top of each just doesn't look legible.

How will this be tested?

I did not introduce any tests to this change.

I've just begun contributing to open source, so please give me any and all critiques! :)

araujoarthur0 commented 1 year ago

@anthonyshibitov Please open a bug/enhancement before submitting a PR. That way we can discuss improvements before starting the work.

I believe the punch button was not occupying the complete width so that it still looked like a piece of the UI, and a button within the page. What do you think @thamara ?