[Discussions] Adjust highlight display around newly posted reply in Discussions

[rmartini]

Problem statement:

In the Discussion Redesign, newly posted comments include a temporary light blue background to highlight the new post. The highlight does not appear to be "even" with the rest of the interface and generally doesn't look right. The top of the box appears exactly in line with the poster's profile picture (instead of nicely above it) and the bottom of the box extends below the divider line and then "touches" the top of the profile image from the next post. This highlight may also eventually display in SpeedGrader (not just temporarily) for teachers/TAs/graders, based on the preview video about upcoming Checkpoints. While this does not prevent work from being done, it makes the interface just look unpolished and unfinished and should be improved. I reported this issue to Instrucuture's Support (case 11193991) and was asked to submit this as an idea.

Proposed solution:

Review all padding/margins around the blue highlight (at a minimum); though I highly recommend reviewing the padding/margins in the entire Discussion Redesign interface to ensure all components appear as expected because there are other areas that also look unpolished like this.

User role(s):

admin,instructor,student,ta,observer

[rmartini]

Highlighted discussion post that doesn't include padding/margin

You'll see the blue highlight extends to both profile pictures in the discussion. It makes the interface look unfinished. There should be an even amount of space/padding surrounding these different areas.

I'm less concerned about the divider line, but I would expect the outer bounds of the highlight to basically be where the dotted blue line appears (note: the right side could be extended farther right to be more in line with the discussion topic box).

[rmartini]

Examples of other padding/margin issues in the Discussion Redesign:

In instructor view, notice how the "View as Student" button has no space on the right side (it goes right to the edge of the browser) and the container with the publish, subscribe, and kebab button doesn't leave enough space for the focus indicator to fully display:

Instructor View

In student view, the focus indicator issue is also present for the subscribe and kebab button (the square around the kebab only displays 1 side; the 3 others appear hidden because there isn't enough margin/padding):

Student View