enhancement: Further popup styling improvements.

[Ezio-Sarthak]

This is a follow-up PR from #849. It aims the following:

• Popup border and title styling.

• Popup color styling.

Fixes #684 (for now) :)
The palettes added with this PR might help in styling of footer notifications in #782

[neiljp]

@Ezio-Sarthak This is a nice self-contained improvement compared to the other PR 👍

There is currently an issue with the popup height, but more importantly I'd really also like to avoid the gaps at the top - perhaps we could just put a linebox around the scrolling content to avoid the difference at the edge of that area and the title. We could also use the top of that linebox to make a slight half-box line above the content to give a small gap at the top between the title and the first line of content.

I also noticed that this looks strange in color-depth=1 at the top.

[neiljp]

@Ezio-Sarthak This looks cleaner now 👍

Layout-wise I think the remaining issue is that the title looks off-center vertically, along with the merging of the title into the background in 1-color mode. Perhaps a half-bar of border color above it?

[Ezio-Sarthak]

Thanks for the suggestions!

I've updated the PR. I've corrected the small mistakes I did 😅

[neiljp]

@Ezio-Sarthak Thanks for addressing my points 👍

While you've made the header higher, the title block looks taller too, ie. a half-line of eg. green below the line of white. Could we move the 'white' half-line down to centre the title text vertically between two white bars? I'm not sure what style to use, maybe a different character with the border style? That may need investigating with respect to 1-color rendering again.

Does this look similar on all themes? I checked 'light' and the title doesn't look quite the same compared to 'default' (zt_light vs zt_dark)

[neiljp]

@Ezio-Sarthak Merged with adjusted commit text as e08fbeb and prior commit 🎉

I also slightly adjusted the 1-bit style in the first commit to match that used later (title -> area), and moved the top border style & character from the second to the first commit. If you haven't already I'd recommend giving git range-diff a try to show this kind of change :)

[Ezio-Sarthak]

git range-diff seems great to distinguish between different commits!