Date picker workflow component improvements and alignments

[clarkus]

The recent date picker changes are a great improvement that reduces the friction of selecting a date. During demos today I noticed a few small misalignments that we should fix before shipping to 100% of users.

1. Remove the calendar icon from the grouped by unit selector. This is also using an ant style element which is very different from the time range selector. Both select elements should be using the same control type. Notice the affordance for the drop down - one uses a triangle (lemon) while the other uses a chevron (ant). I can see how this could be out of scope for the work, but it feels like a nice to have change.

2. Change the padding on the dropdown menu to align with other menus. There is almost always 8px of spacing around menu items. This menu is closer to double that value. Can we reduce the padding by half?

3. Non-standard highlight color on the custom rolling period option. On hover / active / focused this is showing a gray background which might cause some users to think it's disallowed or unavailable. This should use the same standard blue highlight as other menu items. Likewise this menu item doesn't use the same rounded corner treatment as other menu items.

4. When selecting a fixed time range, we're showing two months of time, but a full month of that time is non-selectable because it's in the future. Given that the end date defaults to the current date, can we show that in the second month component and optimize for selecting a broader range in the past? With this approach it's forcing the user to navigate back a month to pick a broader range of time. We could save the user that effort by putting the end date in the second month position.

5. The time formatting for a selected range is a bit hard to understand. We're using hyphens to delineate data parameters but also using hyphens to separate values in the range. It just makes it all run together. I think a clearer format would be DD MM YYYY – DD MM YYYY where the month is fully described and not abbreviated. This aligns with how we're translating other date values in the product. See the original designs at https://www.figma.com/file/gQBj9YnNgD8YW4nBwCVLZf/PostHog-App?node-id=11386%3A56521 for an example of this.

6. Add tooltips to the calendar component navigation. We are showing single and double chevrons for navigating by month and year. This would be clearer if there were tooltips to describe what each action does. For example previous month next year. We also allow a user to move forward beyond the current month even though none of that range is selectable. Can we disable those controls when they navigate beyond the current date?

[kappa90]

Thanks @clarkus! As soon as the experiment ends, I'll fix all of these, sweet :)