New toolbar icons hard to differentiate

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.

Old

image

New

image

2 Likes

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:

<svg style="fill: white;" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M2.003 2.5a.5.5 0 00-.723-.447l-1.003.5a.5.5 0 00.446.895l.28-.14V6H.5a.5.5 0 000 1h2.006a.5.5 0 100-1h-.503V2.5zM5 3.25a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 3.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5A.75.75 0 015 8.25zm0 5a.75.75 0 01.75-.75h8.5a.75.75 0 010 1.5h-8.5a.75.75 0 01-.75-.75zM.924 10.32l.003-.004a.851.851 0 01.144-.153A.66.66 0 011.5 10c.195 0 .306.068.374.146a.57.57 0 01.128.376c0 .453-.269.682-.8 1.078l-.035.025C.692 11.98 0 12.495 0 13.5a.5.5 0 00.5.5h2.003a.5.5 0 000-1H1.146c.132-.197.351-.372.654-.597l.047-.035c.47-.35 1.156-.858 1.156-1.845 0-.365-.118-.744-.377-1.038-.268-.303-.658-.484-1.126-.484-.48 0-.84.202-1.068.392a1.858 1.858 0 00-.348.384l-.007.011-.002.004-.001.002-.001.001a.5.5 0 00.851.525zM.5 10.055l-.427-.26.427.26z"></path></svg>

@uxamanda any chance you know how to inline an svg with css?

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.

Wow, that took a while to get it right....

image

1 Like

Could we have a step-by-step how to achieve that, please?

First you have to find the name of the span class for the icon. The Development Tools (inspect elements) can help with that.

Then you add the SVG in a block like this (in userchrome.css):

.spanclass:before {
	display: block;
	content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' .... </svg>");
	background-size: 18px 18px;
	height: 18px;
	width: 18px;
	padding-left: 3px;
}

Depending on the SVG you might have to adjust the padding.

You can find the icons I changed here:

Perhaps that's too much for my old brain but I'm keen to give it a try. Thank you.

Looks nice!

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.

Thanks. I think they look much more recognizable now.