Time Tracking Dashbaord

Built in React. All of the activity data, including the timeframe menu options, are rendered from the json data. There's some fun little formatting util functions for providing the right language based on the selected timeframe.

There are grids on grids on grids in here! The 'grid-template' property was useful for defining a responsive layout whose properties didn't significantly change between mobile and desktop versions.

I'm left with a couple of things that don't feel great:

1. The design files mocked active states for user interaction with both the whole activity card and for the ellipsis svg element. Since the svg element is a nested child of the activity card, both :active pseudoclasses are applied when the svg element is clicked. So, on clicking the ellipsis, both the ellipsis and the whole card background change color. I couldn't find a way to only apply the child :active pseudoclass, and not for the parent, too. What am I missing?
2. The activity card component doesn't rely on any hard-coded data, but I did end up resorting to hard-coding CSS for the banner image margins for each activity in order to match the design files, because each one has unique margins. That didn't feel great, and I'm wondering if there is a better way to approach coding that part of the design.