UI feedback

[WhyNotHugo]

Hi! I've a bit of feedback on UI details that I think can be refined a bit to make notifications look a lot more polished.

Notification spacing

The alignment of text in notifications is weird; it's floating near the top, which doesn't really look right:

This would look a lot better is centred vertically inside the available space:

(note: example not pixel-perfect, done with GIMP)

Icon

A lot of scripts and applications don't specify an icon for notifications. I've no idea what the default icon is supposed to represent, but the metaphor isn't coming across. The icon shown here makes me think the notification is related to images somehow (since the icon is very similar to common "photo" icons).

I think it's probably best to respect when an application specifies no icon and show no icon in that case.

Edit: I see this is already reported in https://github.com/ErikReider/SwayNotificationCenter/issues/70.

Notifications in control centre

The single notification here is very odd:

There's A LOT of empty space inside its card/box, but at the same time, the title is cropped (and only 6 letters shown!)

I think there are two good way to address this:

• Vertically centre the text as suggested above, but keep the date on top of the box. This way they'd be on different lines compared to the title, so wouldn't eat up its space.
• Move the date to the bottom of the card (again so it won't overlap with the title's space).

[ErikReider]

https://github.com/ErikReider/SwayNotificationCenter/commit/739781040c74a2b4bf6a5a88a50e43bc43391e56 fixes the vertical centering bug

[ErikReider]

You can always extend the width of the control center. The default width in the latest release is kinda small compared to compiling from source

[ErikReider]

Why is the border-radius of the DND button square and why is the padding messed up in the close button? Are you using the default CSS file?

[WhyNotHugo]

Why is the border-radius of the DND button square and why is the padding messed up in the close button? Are you using the default CSS file?

I don't have any css style. All I have is:

> cat .config/swaync/config.json 
{
  "notification-window-width": 400
}

[ErikReider]

What GTK theme are you running? Might be the theme that's overriding the values?

[WhyNotHugo]

https://github.com/ErikReider/SwayNotificationCenter/commit/739781040c74a2b4bf6a5a88a50e43bc43391e56 fixes the vertical centering bug

Sweet, thanks!

What GTK theme are you running? Might be the theme that's overriding the values?

https://github.com/jnsh/arc-theme/

There's nothing square about it... but given how GTK themes and applications interact, it's definitely possible that it's related.

[ErikReider]

Just tested the Arc theme and it seems like it's the cause...

[ErikReider]

I'll try to fix this when I get off from work

[ErikReider]

@WhyNotHugo 725b80c6 fixes the theming issues :)