-
-
Notifications
You must be signed in to change notification settings - Fork 766
Add styling for code blocks in notifications #817
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add styling for code blocks in notifications #817
Conversation
ui/src/message/Message.tsx
Outdated
'& img': { | ||
maxWidth: '100%', | ||
}, | ||
'& code': { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The GitHub code styling doesn't have box shadow too. I'd rather not have it.
4a44822
to
83fb538
Compare
83fb538
to
364cd71
Compare
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