Fix notifications css

modules/common/ags/layouts/notifications.js

@@ -10,12 +10,14 @@ const Header = () =>
 		children: [
 			notifications.DNDToggle({
 				className: "surface p10 round",
-				css: "min-width: 24px; min-height: 24px;",
+				css: `
+					min-width: 24px;
+					min-height: 24px;
+				`,
 				hpack: "start",
 				hexpand: true,
 			}),
 			notifications.ClearButton({
-				className: "surface p10 r100",
 				hpack: "end",
 				hexpand: true,
 			}),
@@ -28,10 +30,16 @@ export const Notifications = () =>
 		exclusivity: "exclusive",
 		transition: "slide_down",
 		layout: "top-center",
+		duration: 300,
 		child: Widget.Box({
 			vertical: true,
-			className: "bgcont qs-container",
+			className: "bgcont",
-			css: "min-width: 600px",
+			css: `
+				min-width: 600px;
+				margin: 10px;
+				padding: 12px;
+				border-radius: 40px;
+			`,
 			children:
 				/** @type {any} */
 				(

modules/common/ags/modules/notifications.js

@@ -64,7 +64,7 @@ const NotificationIcon = ({ app_entry, app_icon, image }) => {
 		return Widget.Box({
 			vpack: "start",
 			hexpand: false,
-			class_name: "icon img",
+			className: "r20",
 			css: `
 				background-image: url("${image}");
 				background-size: cover;
@@ -72,6 +72,7 @@ const NotificationIcon = ({ app_entry, app_icon, image }) => {
 				background-position: center;
 				min-width: 78px;
 				min-height: 78px;
+				margin-right: 12px;
 			`,
 		});
 	}
@@ -83,10 +84,11 @@ const NotificationIcon = ({ app_entry, app_icon, image }) => {
 	return Widget.Box({
 		vpack: "start",
 		hexpand: false,
-		class_name: "icon",
+		className: "r20",
 		css: `
 			min-width: 78px;
 			min-height: 78px;
+			margin-right: 12px;
 		`,
 		child: Widget.Icon({
 			icon,
@@ -108,7 +110,6 @@ const time = (time, format = "%H:%M") =>
 /** @param {import("types/service/notifications").Notification} notification */
 export const Notification = (notification) => {
 	const content = Widget.Box({
-		className: "content",
 		children: [
 			NotificationIcon(notification),
 			Widget.Box({
@@ -118,7 +119,10 @@ export const Notification = (notification) => {
 					Widget.Box({
 						children: [
 							Widget.Label({
-								class_name: "title",
+								css: `
+									font-size: 1.1em;
+									margin-right: 12pt;
+								`,
 								xalign: 0,
 								justification: "left",
 								hexpand: true,
@@ -129,12 +133,15 @@ export const Notification = (notification) => {
 								use_markup: true,
 							}),
 							Widget.Label({
-								class_name: "time",
 								vpack: "start",
 								label: time(notification.time),
 							}),
 							Widget.Button({
-								class_name: "close-button",
+								css: `
+									margin-left: 6pt;
+									min-width: 1.2em;
+									min-height: 1.2em;
+								`,
 								vpack: "start",
 								child: Widget.Icon("window-close-symbolic"),
 								on_clicked: notification.close,
@@ -142,7 +149,7 @@ export const Notification = (notification) => {
 						],
 					}),
 					Widget.Label({
-						class_name: "description",
+						css: "font-size: .9em;",
 						hexpand: true,
 						use_markup: true,
 						xalign: 0,
@@ -165,7 +172,7 @@ export const Notification = (notification) => {
 							class_name: "actions horizontal",
 							children: notification.actions.map((action) =>
 								Widget.Button({
-									class_name: "action-button",
+									className: "button",
 									on_clicked: () => notification.invoke(action.id),
 									hexpand: true,
 									child: Widget.Label(action.label),
@@ -194,7 +201,7 @@ export const Notification = (notification) => {
 	});
 
 	return Widget.Box({
-		class_name: `surface r20 p10 notification ${notification.urgency}`,
+		className: "surface r20 p10",
 		css: "margin: 8px 0;",
 		child: eventbox,
 	});
@@ -238,6 +245,7 @@ export const Placeholder = (props) =>
 /** @param {import("types/widgets/button").ButtonProps} props */
 export const ClearButton = (props) =>
 	Widget.Button({
+		className: "button surface",
 		onClicked: () => notifications.clear(),
 		sensitive: notifications.bind("notifications").as((x) => x.length > 0),
 		child: Widget.Box({

modules/common/ags/style.css

@@ -67,6 +67,11 @@
 	min-height: 1px;
 }
 
+.button {
+	border-radius: 20px;
+	padding: 10px;
+}
+
 /* Slider */
 slider {
 	box-shadow: none;
@@ -197,21 +202,3 @@ mark {
 	min-width: 4px;
 	background-color: #fff;
 }
-
-
-.powermenu {
-	padding: 20px;
-	border-radius: 30px;
-}
-
-.powermenu button image {
-	margin: 10px;
-	border-radius: 10px;
-	min-width: 120px;
-	min-height: 120px;
-	font-size: 68px;
-}
-.powermenu button:hover image, .powermenu button:focus image {
-	background-color: #11111B;
-	color: #94e2d5;
-}