The CodeMirror editors on the new rollout page (full targeting expression, recipe JSON, feature values, and the feature value editor) use a hardcoded #ccc border, square corners and CodeMirror's default gutter, so they read as a different style from the rounded grey tiles and form controls around them. Read-only blocks also highlight line 1 as if it were selected, and the outlined primary "Show more" button is louder than the content it expands.
Proposed change, scoped to .rollout-page in style.scss so the old UI is unchanged:
- Read-only blocks render as grey tiles (tertiary background, the same radius as the value tiles, no hard border), keeping line numbers and fold markers, with no active-line highlight and a quieter copy button and Show more.
- Editable editors render like a form control (form border colour, same radius, the form focus ring), with the active-line highlight only while focused.
Acceptance criteria:
- Read-only and editable editors on the new rollout page match the above in light and dark mode.
- Line numbers and fold markers are kept.
- Editors in the old UI are unchanged.
┆Issue is synchronized with this Jira Task
The CodeMirror editors on the new rollout page (full targeting expression, recipe JSON, feature values, and the feature value editor) use a hardcoded
#cccborder, square corners and CodeMirror's default gutter, so they read as a different style from the rounded grey tiles and form controls around them. Read-only blocks also highlight line 1 as if it were selected, and the outlined primary "Show more" button is louder than the content it expands.Proposed change, scoped to
.rollout-pageinstyle.scssso the old UI is unchanged:Acceptance criteria:
┆Issue is synchronized with this Jira Task