index: In Progress meeting status has low contrast

[jrchamp]

When a meeting is in progress, the .zoom-info CSS class is applied:

moodle-mod_zoom/index.php

Line 159 in 37b958b

$label = html_writer::tag('span', $strmeetingstarted, ['class' => 'label label-info zoom-info']);

The CSS file applies some padding, a rounded border and makes the text white:

moodle-mod_zoom/styles.css

Lines 1 to 5 in 37b958b

	.zoom-info {
	padding: 0.2em 0.6em 0.3em;
	color: #fff;
	border-radius: 0.25em;
	}

In most themes, this will result in white text on a white (or slightly gray) background, which is completely invisible and far from the minimum levels of contrast necessary for accessible content.

This was discovered by @sgrandh3 while testing #250

[sgrandh3]

Add a screenshot for reference. When highlighted the screen, the text "In progress" can be seen

[jrchamp]

Okay, the "label" and "label-info" CSS classes were from Bootstrap 3. The "zoom-info" CSS class modified it to be a little different. But now, it's just breaking things. Moodle 3.7 - 4.5 have Bootstrap 4. Moodle 4.5+ will have Bootstrap 5.

The documentation for bootstrap versions says:

• Bootstrap 4.x: badge badge-info
• Bootstrap 5.0, 5.1: badge bg-info text-dark
• Bootstrap 5.2+: badge text-bg-info

While "badge-info" and "text-bg-info" are both helpers that combine two classes into one, "bg-info" and "text-dark" exist in all of the supported versions. Thus, for Bootstrap 4.0 - Bootstrap 5.3: badge bg-info text-dark. Let's switch to this and remove the custom CSS class from our file.

We don't support earlier versions, but if we decided to try, it seems that "label badge bg-info text-dark" might even work for Bootstrap 3.x.