track-extension
track-extension copied to clipboard
#issue number 1934 Fix "first-child" pseudo class error
:star2: What does this PR do?
Fix the error thrown by Emotion JS when using :first-child pseudo class selector.
The error stems from the RunningTimerDescription component inside the Timer component.

The RunningTimerDescription component, denoted by the smaller rectangle with orange stroke, is targeted via >div:first-child. However, this component uses Emotion JS, which sometimes inject a <style> element as the first child of an element, making the :first-child rule vulnerable to break.
Hence, I removed the >div::first-child rule and applied CSS properties directly to the RunningTimerDescription.
:bug: Recommendations for testing
- Install the extension in development mode following the README file.
- Leave the Chrome and Firefox Extension Management page open.
- Click the extension button to open the popup.
- Go back to each Extension Management page and you should see no error warning regarding
:first-childselector. - In the popup, type anything in the Input field of the
Timercomponent and press Enter key or click the Stop button next to it. The input field will turn into theRunningTimerDescriptionand all the styling remain the same as before.
:memo: Links to relevant issues or information
https://github.com/toggl/toggl-button/issues/1934
Fixes #1934