#18 refactor jsx and css in comps for editor functionality

[StephMode]

Briefing

The jsx and css in these components need to be refactored. I'm going to focus on cleaning up the return statements of the Comps for now and leave the logic as is. The logic will be refined at a later stage.

Example ColorForm.jsx

Issues

• There's jsx that's completely unneccesary, like <fieldset> and <legend>
• <label> should have text-content
• the <input> has superflous props like placeholder or commented out code
• css classes which don't adhere to the project's naming convention

Tasks

• [x] Have all comps and respective jsx open so that each task can be executed in every comp one after another
• [x] remove unneccesary jsx from return
• [x] add text-content to label
• [x] remove consolelogs triggered by editing from ColorEditor and App
• [x] remove unneccesary props from input
• [x] simplify htmlFor props where needed
• [x] standardize naming of css classes
• [x] improve styling of form and editor comps as much as needed

[StephMode]

• [ ] improve styling of form and editor comps as much as needed

<label htmlFor="color-role-input">Role</label>
      <input id="color-role-input" name="role" type="text"></input>

misalignment on FE in form might be due to the <input> not being nested withinin <label>.

👍🏻 worked.

Now:

• [x] rework the styling using simple flexbox declarations in the classes .color-form--form
• [x] add a class .color-form--label to align the items horizontally
• [x] implement further classes so that the "containers" arrange their child items neatly