diff --git a/style/_notification.scss b/style/_notification.scss index 3f126b9..90991ff 100644 --- a/style/_notification.scss +++ b/style/_notification.scss @@ -10,16 +10,35 @@ window.notifications { padding: 20px; border-radius: $rounded; min-width: 20rem; - border: 1px solid transparent; + + .header { + .app-icon { + -gtk-icon-size: 2rem; + } + } + + .content { + .image { + -gtk-icon-size: 4rem; + } + } + + .actions { + button { + background: $inactive-color; + padding: 10px; + border-radius: $rounded; + + &:hover { + background: $bg-color; + } + } + } &.critical { border: 1px solid rgba(red, 0.5); } - &.normal { - border: 1px solid rgba(yellow, 0.5); - } - .text { color: rgba($fg-color, 0.8); diff --git a/widgets/notifications/notification.tsx b/widgets/notifications/notification.tsx index 81a3b1a..a980691 100644 --- a/widgets/notifications/notification.tsx +++ b/widgets/notifications/notification.tsx @@ -30,15 +30,19 @@ const urgency = (n: AstalNotifd.Notification) => { } }; +const { VERTICAL } = Gtk.Orientation; +const { START, END, CENTER } = Gtk.Align; + export const Notification = ({ n }: { n: AstalNotifd.Notification }) => { return ( - + {(n.appIcon || isIcon(n.desktopEntry)) && ( { )} - - + {n.image && fileExists(n.image) && ( - + )} {n.image && isIcon(n.image) && ( - - + + )} - + {n.actions.length > 0 && ( - + {n.actions.map(({ label, id }) => ( - ))}