Add user message styles

[P-Gill97]

No description provided.

[rnathuji]

Some quick comments on this:

1. Let's make sure to include doc changes similar to here for these new styles so CM has clear examples + corresponding screenshots for reference.
2. I'm not sure that the CSS as defined here aligns with the usage pattern established by .os-raise-familysupport, but I think it'd be nice if the schema was the same for these two new boxes but just a different class name:

<div class="os-raise-{something}">

</div>

3. Can we confirm / clarify whether the lightbulb box is going to have links? (the mockup in the issue doesn't seem to have one, but I'm not sure if it's a sometimes or always thing)

[P-Gill97]

@rnathuji thoughts on this schema?

<div class="os-raise-usermessage-link">

</div>
<div class="os-raise-usermessage-lightbulb">

</div>

[rnathuji]

I think that works / the class names seem reasonable to me. Tying back to the examples in the mockups they'd look something like:

<div class="os-raise-usermessage-link">
  <p>Use this link to access the activity: <a href="">Desmos Activity: RAISE 3.5.1 Using Bivariate Data in Context</a></p>
</div>
<div class="os-raise-usermessage-lightbulb">
  <p>If you're having trouble seeing the x-intercept, try resizing the graphing window by pressing the '-' button in the upper right hand corner</p>
</div>

[P-Gill97]

3. Can we confirm/clarify whether the lightbulb box is going to have links? (the mockup in the issue doesn't seem to have one, but I'm not sure if it's a sometimes or always thing)

@madisonschear said although rare links could end up in the lightbulb message box. I'll give <a> tags in both message boxes the same style.

.os-raise-usermessage-link a, .os-raise-usermessage-lightbulb a {
  text-decoration: underline;
}

[P-Gill97]

@madisonschear I tried to make it look as close as I could to the images in the issue description. Let me know if something seems off.

[rnathuji]

We're introducing a bit of asymmetry here as it relates to styling links in these boxes:

Can we confirm with UX whether ☝️ is intentional, or if we should be adding .os-raise-familysupport here like:

.os-raise-usermessage-link a,
.os-raise-usermessage-lightbulb a,
.os-raise-familysupport a {
  text-decoration: underline;
}

[P-Gill97]

@madisonschear Do we want to add the underline text decoration to the links in the family support box?

[madisonschear]

Yes they should be underlined. Thank you @rnathuji good catch!