refactor: period selector component

[thomasheartman]

Refactors the period selector component now that the design / system is pretty much finished.

Main points are: change from using CSS selectors to using styled components; use props instead of classes. This is in keeping with the general Unleash approach.

There's two very slight visual changes here:

1. There is 4px of added space below the "range" "header" text.
2. The months in the grid are a little closer together and not as wide. This is because we remove the explicit column gap due to the grid having a set width. Previously the width was automatic, but because we want this to line up with the button, we need to set the width explicitly on both items. As such, with the padding, the grid was a little too wide, so there was too little padding on the right. This rectifies that.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
unleash-monorepo-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 4, 2025 9:52am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
unleash-docs	⬜️ Ignored (Inspect)	Visit Preview		Feb 4, 2025 9:52am

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

OpenSSF Scorecard

Package	Version	Score	Details

Scanned Files

[daveleek]

LGTM!