make toasts pretty

wlx-overlay-s/src/assets/gui/toast.xml

@@ -1,14 +1,27 @@
 <layout>
   <elements>
-    <div interactable="0" >
-      <rectangle max_width="500" max_height="400" padding="4" box_sizing="content_box" flex_wrap="wrap" flex_direction="row" gap="4" color="#000000c0" border_color="~color_accent" border="2" round="8" justify_content="space_between">
-        <div width="100%" padding="4">
-          <label text="toast title" id="toast_title" weight="bold" />
+    <div interactable="0">
+      <rectangle
+        max_width="500"
+        padding="16"
+        flex_direction="column"
+        gap="8"
+        color="#000000c0" border_color="~color_accent" border="2" round="8">
+
+        <!-- Toast title -->
+        <div flex_direction="row" align_items="center" gap="8">
+          <sprite src="icons/bell.svg" min_width="32" min_height="32" max_width="32" max_height="32" flex_grow="1" />
+          <label wrap="1" id="toast_title" weight="bold" size="25" padding_left="16" padding_right="16" />
         </div>
-        <div width="100%" height="100%" padding="4" flex_wrap="wrap">
-          <label text="toast body goes here" id="toast_body" wrap="1" />
+
+        <!-- A simple separator -->
+        <rectangle width="100%" height="2" color="~color_accent" />
+
+        <div>
+          <!-- Toast message -->
+          <label id="toast_body" wrap="1" size="20" padding_left="16" padding_right="16" />
         </div>
       </rectangle>
     </div>
   </elements>
-</layout>
+</layout>

wlx-overlay-s/src/assets/icons/bell.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><!-- Icon from Material Symbols by Google - https://github.com/google/material-design-icons/blob/master/LICENSE -->
+  <path fill="white" d="M12 18.5q.625 0 1.063-.437T13.5 17h-3q0 .625.438 1.063T12 18.5M7 16h10v-2h-1v-2.6q0-1.525-.788-2.787T13 7V5.5h-2V7q-1.425.35-2.212 1.613T8 11.4V14H7zm5 6q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22" />
+</svg>