Redesign calendar frontend

[adamwoodnz]

Closes #158

Updates the layout and styles of the frontend to satisfy designs for Learn WordPress Online Workshops and Make WordPress meetings calendars.

For the Make team colors used in the calendar, care has been taken to ensure contrast ratios between background and text meet WCAG 2.1.

A notable difference between the Make and Learn designs lies in the calendar/list toggle buttons. See screenshots on the issue. I've opted to use the icon buttons shown in the Learn design.

Lastly an RSS feed has been added to the feed links, which have moved from the filter bar to the bottom of the calendar view.

NOTE: Does not include fixing existing broken unit tests, or styling for past events mentioned in #157. I think these should be done separately.

Screenshots

Make

Desktop	Tablet	Mobile

Learn

Desktop	Tablet	Mobile

Testing

Best tested in sandbox.

1. Load this branch of the plugin
2. Test with Learn and Make
3. For Learn load this branch as well
4. For Make test with both the old theme and the new theme using the theme switcher
5. Regression test all the things! Calendar view and event details modal, list view, team filter, feed links (GCal and ICS should be filtered when a team is selected), prev/next nav
6. Test responsiveness
7. Test a11y

[adamwoodnz]

@WordPress/meta-design your review would be appreciated too 🙏

I'll add more screenshots of the list view tomorrow 🇨🇦

[jasmussen]

Looks great, especially for a first version, contrasts pass and colors look good.

Potentially the cell padding, or the event margin (whichever is in play) can be reduced, so the events are closer together in density, but there's also some value in the separation. Can start here, then tweak if need be.

[adamwoodnz]

eslint caught these problems with comments not being adjacent to translations

[adamwoodnz]

isSecondary is deprecated, variant is the new API, same goes for isLink and isPrimary

[adamwoodnz]

Screenshots

Make list view

Desktop	Tablet	Mobile

Make with old theme

Calendar	List

[jasmussen]

Massive step forward.

[fcoveram]

It looks great 👏 🚀

[ryelle]

Applied on my sandbox and make/meetings looks great with the new theme 🎉

I found the old blue in a few places when previewing the new theme:

As far as a11y, I don't see any regressions. There are definitely things that could be improved, but they're current issues too. For example…

• As you tab through the calendar view, there's no indication of which day you're on. I'm not sure what best practice would be here, and a quick search isn't helping much.
• The list view day headings are not actually headings, so screen reader navigating through the page by heading levels also doesn't say which day things are.
• There are empty links in the list view, since all items are wrapped in <a href={ event.link }> (not just an a11y issue)

But those could be future improvements, not blockers for this style update.

[adamwoodnz]

I found the old blue in a few places when previewing the new theme:

This'll be because I haven't shipped the components color vars in the new theme yet.

[adamwoodnz]

• The list view day headings are not actually headings, so screen reader navigating through the page by heading levels also doesn't say which day things are.

Fixed in 1e2bae1

[adamwoodnz]

• There are empty links in the list view, since all items are wrapped in <a href={ event.link }> (not just an a11y issue)

Fixed in e25bce0

[adelalhkeem2]

• BQ Aquaris X5 Plus (See this post)
• Huawei Mate 9 (See this post)
• Samsung Galaxy S8 and S8+ (See this post and official specs which say "Location (GPS, Galileo, Glonass, BeiDou) *Galileo and BeiDou coverage may be limited.")

[adelalhkeem2]

adb shell sh /storage/emulated/0/Android/data/moe.shizuku.privileged.api/start.sh