General styling improvements

[benenright]

Here I am collating various stying updates/issues. Hopefully one day a kind soul can whizz through these.

---

• [x] Remove background hover effect (dark mode) – for example in page listings (e.g. dashboard)
• [x] Listing row border-top should use: --w-color-border-furniture (global change light and dark mode)

---

• [x] Increase space between primary label and child field label (Thibaud review PR, Ben further context there)

---

• [x] Increase top/bottom padding a bit in block-chooser buttons (I would increase to 0.5rem padding (top, right, bottom and left):
• [x] on hover change to: text-link-default and border-button-outline-default

See design:

---

• [ ] Adjust the position of the block chooser flyout menu:

...So that it appears more like this to the right of the '+' :

Vertically align trigger button with search field within the flyout menu

---

• [ ] Update the styling of the '+' on the inline add block to match the regular streamfield '+':
• [ ] Perhaps consider using the svg icon to completely match the design: (ss below) (@thibaudcolas to review what’s up)
• [ ] I have also noticed we have implemented yet another inconsistent version of the + button in the new universal header (screenshot added below)

---

• [ ] The icons are not vertically aligned in the middle on the rich text toolbar icons. please fix!:

---

• [ ] We seem to have lost the state in the toolbar icons where it shows which rich text formatting has been applied (I will supply the design for this...)

...it is still present in the unpinned toolbar actually: So I suggest we mimick the same style in the white pinned version - use a sublter border and a light grey background

---

• [ ] Tweak the size of the 'pin' icon to match the design: ie a bit smaller and therefore more nicely centered in the box
• [ ] Also note the light grey bg on the box in the design
• [ ] Also need to tweak it smaller on the unpinned version and add more space after the comment button ~40px) so that it doesn't run into the pin button (screenshot below)

Build:

Design:

Issue with space to the side of the 'pin' button on the unpinned toolbar:

---

• [ ] Update the style and position of the close button on general dialog modals - currently it appears confusing that it might mean it dismisses the notifcation that sometimes appears across the top of the modal, so we have redesigned this, see attached design.

Build:

Design update:

---

• [ ] Change the font-weight of the listing item titles from 700 to 600 (semi-bold) to match designs:

[meli-imelda]

@benenright @thibaudcolas I will start working on a PR to solve this.

Increase space between primary label and child field label

By how much should I increase it ?

Increase top/bottom padding a bit in block-chooser buttons

By how much should I increase ?

Thanks

[benenright]

Hi, thats great!

Increase space between primary label and child field label By how much should I increase it ?

I suggest 1.5 rem - see screenshot. I suspect this is the incorrect element to add the extra bottom-margin too though, as it will cause the margin elsewhere to become too big.

For example, here the same element is used as a streamfield title, with the '+' below it, so we wouldn't need to increase it;'s bottom margin here:

And the same here:

And here: (we dont want to push help text away from it)

So perhaps in the instance I have flagged we need to find a custom way to increase the space:

[benenright]

And this one:

Increase top/bottom padding a bit in block-chooser buttons By how much should I increase ?

I would increase to 0.5rem padding (top, right, bottom and left):

[meli-imelda]

And this one:

Increase top/bottom padding a bit in block-chooser buttons By how much should I increase ?

I would increase to 0.5rem padding (top, right, bottom and left):

Thanks @benenright , very helpful

[meli-imelda]

Hello @benenright Please check out my pull request if it solves the initial set of issues created?

Planning on preparing another PR to address the next issues once that has been merged since I don't think it would be great to have all in one PR

[lb-]

Partial progress on this has been merged via #11097

1. Listing background/border changes
2. Combobox (block chooser) padding
3. Accounts settings panels padding

[benenright]

I see we fixed the space here between the section title and first field title on the account page (as mentioned above):

But we still have this problem elsewhere eg in the promote tab (under 'For search engines' and 'For site menus') and poss elsewhere? :

@helenb could you investigate this?