Update ResultsCard to visually enhance the quiz summary

[SierraTran]

Changed title to "Summary & Feedback" and added an icon for hints and affirmations

[ZZwatermelon]

I think the icons look great, maybe to just add a little more emphasis to the hints, we could make them alerts with severity warning with the custom lightbulb emoji, just to really make them stand out. I don't think the affirmations need anything extra though, just the emoji looks good.

[SierraTran]

I think the icons look great, maybe to just add a little more emphasis to the hints, we could make them alerts with severity warning with the custom lightbulb emoji, just to really make them stand out. I don't think the affirmations need anything extra though, just the emoji looks good.

I was able to implement this easily but I hit a small snag. The ThemedMarkdown component adds some extra vertical space to the message and makes the light bulb icon vertically off-center.

My code for testing:

The result:

Should I leave this alone or remove ThemedMarkdown from around the message? Or is there something else I can do? @ZZwatermelon

[ZZwatermelon]

@SierraTran sorry, didn't see this

I would believe it's something that could potentially be fixed with something in the sx props on the alert component. My intuition would be something with the alignItems or justifyContent fields, but I'm not looking at the HTML right now, so I'm not 100% sure.

It could also be something we need to tweak in the <ThemedMarkdown> component. I would offer to take a look at it but I know I'll be very busy in the short term, so idk if I'll get a chance.

Presumably we don't want to remove the Markdown support because I would guess it was something jim wanted.

A couple style requests:

• I think you could use an <AlertTitle> that says 'Hint'
• I personally am a big fan of variant={"filled"} on the alert, but if you feel differently, implement whatever you think looks best