Update border color of hints and validation feedback in instructions area

[fisher-alice]

This PR updates the border (color and dashed -> solid) of hint and validation feedback chat bubbles in the Instructions area. I opted to add the isDashed prop to keep the option of having a dashed border for a ChatBubble since it is a reusable component.

Note that this PR updates hints and feedback in all labs that use the InstructionsCsfMiddleCol component. Slack thread discussion

This PR also makes a small UI update to the ChatBubbleTip now that the border can be solid and not dashed. Before the update, the tip goes beyond the main chat bubble border at the top and bottom of the tip. After the update, the tip goes beyond the main chat bubble border at the top only.

Before update with solid border	After update with solid border	After update with solid border RTL

Note that the ChatBubbleTip background covers up the blue border from the main ChatBubble. You can see if the ChatBubbleTip is flush with the ChatBubble (this is what I tried first for the polyline points: '23,23 5,23 23,5'), the border from the ChatBubble can be seen. Thus I updated only the bottom of the ChatBubbleTip.

Type	Before	After
Hint	dashed, yellow, 1px	solid, blue, 2px
Validation Feedback	dashed, gray, 1px	solid, yellow, 2px

Before update:

(Instructions and Hints)

(Hints and Feedback)

After update:

(Instructions and Hints)

(Hints and Feedback)

Links

Trello

Testing story

I tested locally in the 2023 HoC progression and also checked in a non-dance 2023 levels (Dance 2019 and Poetry 2023) to make sure hints and feedback look as expected.
Here are a couple screenshots of a poetry 2023 level:

Deployment strategy

Follow-up work

Privacy

Security

Caching

PR Checklist:

• Tests provide adequate coverage
• Privacy and Security impacts have been assessed
• Code is well-commented
• New features are translatable or updates will not break translations
• Relevant documentation has been added or updated
• User impact is well-understood and desirable
• Pull Request is labeled appropriately
• Follow-up work items (including potential tech debt) are tracked and linked

[bencodeorg]

To clarify, we're not using a dashed outline anywhere? Seems like a lot of plumbing for something we don't use, do we have some imminent need?

[samantha-code]

I think if we didn't complete this change this week, the tutorial would still be good to ship so in that sense it is not imminent. We WOULD have to update the videos once this change goes live (which is why we are trying to get it in). Curriculum has been asking for improvements on the visibility of feedback strings for a while and this seemed like a good opportunity to get it prioritized for ALL labs, and we are planning on updating those sprite lab videos as well - not sure if that answered the question.

[fisher-alice]

To clarify, we're not using a dashed outline anywhere? Seems like a lot of plumbing for something we don't use, do we have some imminent need?

Good point. Removed the 'plumbing' from the hints and feedback. But left for the ChatBubble since it seems like a reusable component and having the solid/dashed option may be useful.
Update: touched base with Mark and he said that he would prefer having solid/dashed option for ChatBubble.

[bencodeorg]

Looks great!