feat: Improved UX for adding multiple advanced style panel properties

[kof]

#4816

Description

• recent proeprties section
• enter or tab in the last value in recent to show adding input again
• close new adding property input on ESC
• show in recent when user ads an existing property
• handle multiple properties insertion

Steps for reproduction

1. click button
2. expect xyz

Code Review

• hi @kof, I need you to do
  • conceptual review (architecture, feature-correctness)
  • detailed review (read every line)
  • test it on preview

Before requesting a review

• made a self-review
• added inline comments where things may be not obvious (the "why", not "what")

Before merging

• tested locally and on preview environment (preview dev login: 0000)
• updated test cases document
• added tests
• if any new env variables are added, added them to .env file

[johnsicili]

Nice UI! Here's some feedback:

This is hard to read because values are either same line or next line and everything is same color, weight, and spacing.

Minor but these two touch

Clicking plus when add field is already there doesn't do anything. Maybe focus it

Pasting CSS puts them below the separator. Reason for this?

[kof]

This is hard to read because values are either same line or next line and everything is same color, weight, and spacing.

Any ideas how to improve? Can't use blue color as its now matching defined styles from the current style source

[kof]

Ok fixed everything you mentioned except of colors of properties. No idea for now what to do with that.

[johnsicili]

It doesn't appear "enter" is working. Only when I select the property via a mouse click does it insert

enter.mp4

[kof]

@johnsicili fixed