Test time announce icon

[somiaj]

Place a small button with a speaker icon next to the remaining time on tests instead of a full button on the second row. This makes the remaining time + button overlay take up less space.

I went with using a "sound wave" icon, but am open to what ever icon is preferred. Here is what the remaining time overlay looks like with this:

I originally tried a megaphone, but the bootstrap one didn't look right to me (maybe a megaphone with some sound waves coming from it would be useful). Here is what the megaphone looks like.

@Alex-Jordan any thoughts? Also is aria-label enough to make this accessible?

[somiaj]

@drgrice1 is there a way to format a single file, vs npm run prettier-format having to search through all files? Specifically format a template file.

[drgrice1]

I use the formatter in vim via the coc.nvim coc-prettier extension.

[drgrice1]

Maybe it is time that we stop using Font Awesome, and switch to using Bootstrap icons. Then we can use their i tag syntax for them instead of pasting the svg as you have done here. Bootstrap's icons are entirely free, and they have a good selection of icons. Font Awesome has become annoying with their very limited free selection. I am sure we could find decent Bootstrap replacements for all of the Font Awesome icons we are using. In some cases, there are probably even better Bootstrap icons available.

[somiaj]

I am using bootstrap icons here, but I copied the svg code for them, not just the <i> code as I wasn't sure if we load the libraries for it or not. I'm okay with whatever change. I mostly go with bootstrap icons as I think they fit in bootstrap better.

[drgrice1]

The Font Awesome icons go well with Bootstrap also. In fact, historically, the Font Awesome icon set was created for usage with Bootstrap.

[Alex-Jordan]

Just one quick thing until I can test for real. Could there be more space between the text and the button?

[drgrice1]

I thought the same thing.

[somiaj]

Added some space, only me-1 (I thought me-2 was too much, but could make it more if you prefer).

[Alex-Jordan]

I'd go more. Also, should it be margin at the beginning of the button, rather than margin at the end of the text?

Does removing the p-1 make the button too small? Asking because presently the button seems large up against the yellowish behind it. I'm not looking at a live build though.

Last nitpick. The icon in the button does not appear to be centered. I see it as slightly to the right of center, as if there is some extra padding to its left.

[somiaj]

The actual SVG I am using was 16x16 (thought it was a bit small) and I increased the size to 20x20, I think the center is due to scaling.

I don't know if it matters where the margin is. I went with putting it at the end of the text, because in most places the margin was applied to the bottom (end) of the previous object, not the object itself. I can update that if preferred.

Padding is worse without p-1, and I think with p-0 it doesn't look good. I instead used some CSS to make the horizontal padding 2px and vertical 1px. Changed the margin of the time span to m-2. This is what it looks like.

[somiaj]

I added align-middle to the time span so it centers vertically better instead of being slightly above vertical.