Config form usability

Testing with both this MR and #3622982: Remove details element in component form?.

The mechanism of works well bu the form looks odd:

The spacing and the font, mainly, give an uneasy feeling about information hierarchy, with:

• prop label being smaller and lighter than form inputs
• except when input is a switch
• border positioning and vertical rhythm

I will try to check what is wrong more precisely.

Let's have a follow up for css fix proposition. Important here is the feature.

Ok, I will skip those feedbacks for now and move them to the upcoming UI ticket (font, color, spacing... just the basic look, not the UX, the layout, the features...) I am talking about since late July: #3626515: UI consistency and general feeling

I will resume my review in a few hours.

I am a rebasing the ticket to test #3622982: Remove details element in component form?

Following #3562060: Render UI with admin theme , form.css and the altered part of colors.css don't exist anymore.

It looks good so far. Because we don't have the lines of the details element to guide the eye, we just need to adjust the spacing between a selector toggle and its source (to show it belong to the previous source, not the next):

.uip-source-selector-toggle {
  margin: 0;
}

However, this is showing issues in #3622982: Remove details element in component form?, like:

• this little margin issue is already there
• the lack of markup allowing to add a visual delimitation of the inline modal (we don't know where it starts and ends)
• the missing prop title (we don't know which prop we are editing).

Rebasing