Update toolbar naming / icons to better match docs

[bttf]

Closes https://linear.app/growthbook/issue/GB-101/editor-ui-buttons-and-labels

[linear[bot]]

GB-101 editor UI: buttons and labels

[image.png](https://uploads.linear.app/6d77a64e-b8c4-40e5-8535-390042384f91/981e5eb2-10ee-42ee-8e02-bd5df2d092d7/72366f0d-521b-498e-a266-b036a25a68d8) > One tiny piece of feedback; I found the icon for “Interactive mode” (the name according to the docs) and its tooltip confusing. The arrow makes me think it’s for selecting elements, which it’s not, and “Normal mode” isn’t very informative. How about using “Interactive mode” for the tooltip? And for the element selector, I wonder if an “edit” icon (pencil) might be clearer?

[jdorn]

While we're changing icons, I think the global styles and custom DOM mutation ones could be clearer as well.

For global styles, maybe use one that has the text "css" in it (e.g. MdCss).

For custom DOM mutations, it's such a niche use case, we really only want super advanced technical users who know what they are doing to use it. That makes it hard to think of a good icon. The current icon, I might click thinking it will let me change copy on the page. Using something that says "HTML" might make me click it thinking that's how I edit innerHTML of an element. Almost making me think it shouldn't be one of the 5 options at the top and instead hidden inside the "selection" section as an advanced mode or something.

[bttf]

For custom DOM mutations, it's such a niche use case, we really only want super advanced technical users who know what they are doing to use it. That makes it hard to think of a good icon. The current icon, I might click thinking it will let me change copy on the page. Using something that says "HTML" might make me click it thinking that's how I edit innerHTML of an element. Almost making me think it shouldn't be one of the 5 options at the top and instead hidden inside the "selection" section as an advanced mode or something.

What about moving it to the 'DOM Changes' tab? Placed under the DOM changes list. It will hint the use-case and show their changes added in real-time

[jdorn]

What about moving it to the 'DOM Changes' tab? Placed under the DOM changes list. It will hint the use-case and show their changes added in real-time

Yeah, that could work. Basically, put a "Add custom DOM change" CTA beneath the list that shows the form

[bttf]

Updated