Add styling for code blocks in notifications - #817
Conversation
| '& img': { | ||
| maxWidth: '100%', | ||
| }, | ||
| '& code': { |
There was a problem hiding this comment.
I think this should be enough.
'& code': {
display: 'inline-flex',
backgroundColor: 'rgba(0, 0, 0, 0.25)',
padding: theme.spacing(1),
borderRadius: '0.25em',
},
The color breaks when switching to light-theme. The padding should use the standard spacing. fontsize should be set by the parent. wordBreak/whiteSpace shouldn't be set as the code thingy should have a horizontal scrollbar. Boxshadow seems to much.
I'll change this myself, after #818 is done.
There was a problem hiding this comment.
Thanks, I'm not that experienced with coding but I thought I'd make this suggestion.
Have a good day.
Edit: The only thing I would like to say is check if there is enough padding so the text doesn't almost jump out of the box, and also not too much where it pushes other notifications down a lot.
And also, a little faint shadow edge at the top and bottom can't hurt, so the code block looks properly embedded something like this
There was a problem hiding this comment.
The GitHub code styling doesn't have box shadow too. I'd rather not have it.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #817 +/- ##
=========================================
Coverage ? 79.54%
=========================================
Files ? 56
Lines ? 2645
Branches ? 0
=========================================
Hits ? 2104
Misses ? 450
Partials ? 91 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
styling for code blocks