704 add instructor approved i note to playlist screen for each video

[mumbler6]

Fixes #704

Adds I-note button to each video in the watch playlist menu, which links to i-notes created for this video.

First video's i-note button links here:

I was having trouble adjusting the styling to something nicer, so if anyone wants to change things that would be great.

[angrave]

In the first screenshot of the playlist media cards there's insufficient contrast for the buttons ; The new I-Note button text is too dark i.e. brightness is too close to the black background to be legible.

[mumbler6]

In the first screenshot of the playlist media cards there's insufficient contrast for the buttons ; The new I-Note button text is too dark i.e. brightness is too close to the black background to be legible.

What do you think about this? The green is when you are hovering over it.

[angrave]

Green hover. Unfortunately this does not meet accessibility requirements: Contrast must always be sufficient.

Also not everyone uses a mouse (e.g. instead uses tab to move focus) - so hover wouldnt work for that use case.
Also the green still looks very dark against the background - but we'd need to use a color checking tool to confirm if it is too dark. (But to my eyes I think it is)

[mumbler6]

I'm using the same teal green color that is being used currently when hovering over a video:

I can make it this lighter green maybe:

Thanks for pointing out the tab issue I'll try to add something to incorporate that. I also want to add that I-note button is now white when not being hovered over / focused on, so the contrast there is sufficient right?

[angrave]

White when not hover; yes - that will be great.
Re Tab: It's standard to NOT set tab index. More info here
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html