update example configs

example/notification-center/notification.js

@@ -4,10 +4,10 @@ import { lookUpIcon, timeout } from 'resource:///com/github/Aylur/ags/utils.js';
 const NotificationIcon = ({ appEntry, appIcon, image }) => {
     if (image) {
         return Widget.Box({
-            valign: 'start',
+            vpack: 'start',
             hexpand: false,
             className: 'icon img',
-            style: `
+            css: `
                 background-image: url("${image}");
                 background-size: contain;
                 background-repeat: no-repeat;
@@ -26,17 +26,17 @@ const NotificationIcon = ({ appEntry, appIcon, image }) => {
         icon = appEntry;
 
     return Widget.Box({
-        valign: 'start',
+        vpack: 'start',
         hexpand: false,
         className: 'icon',
-        style: `
+        css: `
             min-width: 78px;
             min-height: 78px;
         `,
         children: [Widget.Icon({
             icon, size: 58,
-            halign: 'center', hexpand: true,
-            valign: 'center', vexpand: true,
+            hpack: 'center', hexpand: true,
+            vpack: 'center', vexpand: true,
         })],
     });
 };
@@ -87,7 +87,7 @@ export const Notification = n => Widget.EventBox({
                                     }),
                                     Widget.Button({
                                         className: 'close-button',
-                                        valign: 'start',
+                                        vpack: 'start',
                                         child: Widget.Icon('window-close-symbolic'),
                                         onClicked: n.close.bind(n),
                                     }),

example/notification-center/widgets.js

@@ -19,7 +19,7 @@ const Placeholder = () => Widget.Box({
     className: 'placeholder',
     vertical: true,
     vexpand: true,
-    valign: 'center',
+    vpack: 'center',
     children: [
         Widget.Icon('notifications-disabled-symbolic'),
         Widget.Label('Your inbox is empty'),
@@ -62,7 +62,7 @@ export const ClearButton = () => Widget.Button({
 
 export const DNDSwitch = () => Widget({
     type: Gtk.Switch,
-    valign: 'center',
+    vpack: 'center',
     connections: [['notify::active', ({ active }) => {
         Notifications.dnd = active;
     }]],
@@ -70,7 +70,7 @@ export const DNDSwitch = () => Widget({
 
 export const PopupList = () => Widget.Box({
     className: 'list',
-    style: 'padding: 1px;', // so it shows up
+    css: 'min-width: 1px;', // so it shows up
     vertical: true,
     binds: [['children', Notifications, 'popups',
         popups => popups.map(Notification)]],

example/simple-bar/config.js

@@ -84,7 +84,7 @@ const Media = () => Widget.Button({
 
 const Volume = () => Widget.Box({
     className: 'volume',
-    style: 'min-width: 180px',
+    css: 'min-width: 180px',
     children: [
         Widget.Stack({
             items: [
@@ -130,7 +130,7 @@ const BatteryLabel = () => Widget.Box({
             }]],
         }),
         Widget.ProgressBar({
-            valign: 'center',
+            vpack: 'center',
             connections: [[Battery, self => {
                 if (Battery.percent < 0)
                     return;
@@ -168,7 +168,7 @@ const Center = () => Widget.Box({
 });
 
 const Right = () => Widget.Box({
-    halign: 'end',
+    hpack: 'end',
     children: [
         Volume(),
         BatteryLabel(),