The new UI is great, but the 2 new toolbar icons for code and checkbox are not so great.
The new toolbar is smaller, which means the icons are smaller as well. Thus Numbered List, Bulleted List, and Checkbox almost look the same. See the screenshot below. I'm on a Retina display, so the images below look exactly as they appear on my screen.
The code icon {;} just looks weird, although I think I can get used to it. But the 3 list items look too much the same and we should fix that. If we made them 200% bigger, then it would make sense to use those icons, but in the current situation I have to actually guess or know which is which.
I've been thinking. I could replace the icons with changes to userchrome.css.
Usually this is not a problem, but I do have SVGs, which I have to inline with CSS somehow. My CSS skills are basically non-existent, so any pointers in that area would be of great help.
e.g. I want to replace the numbered list icon with the following SVG:
Hey – I've never tried this, but it looks like you can add an svg using the content pseudo tag. Note that you will need all the svg metadata. https://stackoverflow.com/a/45691233 Curious if that ends up working, let me know if you run into issues and I can try to hack on it.
If you just want to use the 3 icons I changed, you can copy and paste the entries from my userchrome.css. Since I use a Dark theme I set the fill to white. .... fill='white'></path></svg>");
You will have to change that to a different color when you use a light theme.