Website Redesign: "Learn" Page 4- Call Catalog Section- UI

[hgordon6634]

User Story
AS a New Orcahome user I WANT to see an easy to read webpage when I navigate to the Orcasound "Learn" page SO THAT I can easily learn about Orcas.

Description
The intent of this story is to implement the UI finalized design from the Orcasound UX/UI team for the website redesign of the "Learn" Page. This Issue covers ONLY the Call Catalog portion of the page (see image below).

NOTES:

• This is the UI only, the sounds can be linked in a later iteration.
• Header/Footer already completed on different pull request Update header and footer to use MUI #14
• Use Material UI for the styling
• Call catalog source files: https://orcasound.net/data/product/SRKW/call-catalog/no-narration_flac+mp3+ogg+spectrograms/mp3/
  • There are some calls with multiple versions- please review and choose the best call to use using your best judgement

Acceptance Criteria
GIVEN I open the Orcasound Learn page WHEN I look at the page THEN I see a UI that matches the attached UX/UI design.

https://www.figma.com/file/YdvbAjHETokV2x1LBHaElj/Orcasound-Website-Redesign-2021?node-id=298%3A290

[UXBrendan]

@NayoBaez

Just checking in with you- how is dev work going for this issue? Anything you need from me?

[NayoBaez]

@UXBrendan UI is done!

[UXBrendan]

Awesome!

[UXBrendan]

@NayoBaez

I've updated the notes above, but here is the link for the call catalog source files: https://orcasound.net/data/product/SRKW/call-catalog/no-narration_flac+mp3+ogg+spectrograms/mp3/. There are some calls with multiple versions- please review and choose the best call to use using your best judgement.

[UXBrendan]

@NayoBaez

I would like to discuss how to best write issues and assign to Orcasound devs to do some clean up production work for Orcahome. We're in the home stretch!

Orcasound: Dev discussion for Orcahome
Thursday, September 14 · 10:00 – 11:00am
Time zone: America/Los_Angeles
Google Meet joining info
Video call link: https://meet.google.com/vxp-aeto-zev

[UXBrendan]

@NayoBaez @Zekrom-7780

• When the call ends, the pause button should automatically change back to the play button
• Each spectrogram should be customized to the labeled call- assets can be found here: https://github.com/orcasound/orcadata/tree/master/Spectrogram/Plots

Overall, nice work! It's coming together, and looks great!

[NayoBaez]

@UXBrendan I replaced the image with the spectrograms for each corresponding call
@Zekrom-7780 will take care of the playbutton function