feat(desktop): make the drawer notifications readable

Each row shows when the notification appeared ("Sep 15 14:32", from created), sits on its own rounded card with space between rows instead of reading as one list, and uses the balloon's 16/18/16 sizing rather than 13/11. The close target grows to a 32px hit area in the row and the balloon, since a 20px box was hard to hit.

1 files changed, 5 insertions, 4 deletions

diff --git a/notifications/NotificationBalloon.qml b/notifications/NotificationBalloon.qml
index b8ce0f7..c6705e1 100644
--- a/notifications/NotificationBalloon.qml
+++ b/notifications/NotificationBalloon.qml
@@ -79,12 +79,13 @@ Rectangle {
         text: "\uf00d"
         horizontalAlignment: Text.AlignHCenter
         verticalAlignment: Text.AlignVCenter
-        font { family: Theme.iconFamily; pixelSize: 11 }
+        font { family: Theme.iconFamily; pixelSize: 13 }
         color: closeArea.containsMouse ? Theme.red : Theme.subtext
 
         MouseArea {
             id: closeArea
             anchors.fill: parent
+            anchors.margins: -6
             hoverEnabled: true
             cursorShape: Qt.PointingHandCursor
             onClicked: Notify.close(b.notification.id)
@@ -107,7 +108,7 @@ Rectangle {
             width: parent.width
             text: b.notification.app || ""
             elide: Text.ElideRight
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4; bold: true }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize; bold: true }
             color: Theme.subtext
         }
 
@@ -115,7 +116,7 @@ Rectangle {
             width: parent.width
             text: b.notification.summary || ""
             elide: Text.ElideRight
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 2 }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize + 2 }
             color: Theme.text
         }
 
@@ -127,7 +128,7 @@ Rectangle {
             wrapMode: Text.WordWrap
             maximumLineCount: 3
             elide: Text.ElideRight
-            font { family: Theme.fontFamily; pixelSize: Theme.fontSize - 4 }
+            font { family: Theme.fontFamily; pixelSize: Theme.fontSize }
             color: Theme.subtext
         }
     }