Here are some visual issues I have identified that can help to make the UI look more clear. I included a mockup of the current status, a list of the issues, and a mockup on how the resulting UI would look after the changes.
- The reply box for wikitext:
- The highlighting of the reply box should go around the whole reply area (including the "wikitext info" label and the "switch to VE" button).
- The top padding needs to be increased. Make the padding be 8px on all the sides (currently it has different values and making it depend on font size, by using em units, helps to misalign stuff). I'll be using the 8px unit to keep space consistent in different elements.
When the focus is on the text, I can see both the highlighted blue and a bit of the grey border behind. Only the highlighted should be visible.(T95512)
- The "wikitext info" text:
- It should be aligned with the text above. For that, an 8px padding could help.
- Since it is a kind of footnote, we want it aligned to the bottom of the text area (with an 8px distance to the bottom border of it).
Links should open in a new window to avoid the user to lose the context.(T97434)
- Switch to wikitext mode.
It should be a regular pressed button. That is, look dark grey, not green.(T94877)It should use the same icon used on the rich text version and it should be in the same location when you interact with it. For that purpose, I reduced the button height to 28px and adjusted the position of the VE version accordingly.(T97451)
- Terms of use text. Move it down keeping a distance of 8px.
- For VE text area. The total height for the text element (what gets surrounded by the blue highlight) needs to be consistent in both versions. I made it 110px.
The placeholder text is not appearing in the VE version. It should be added to keep it consistent.(T97457)- The VE actions should be moved down to be 8px to the bottom and have an 8px separation to each other.
- Terms of use text. Move it down keeping a distance of 8px.
- When summarizing a topic, VE box should not be gray.
