fix(systray): use dracula css for systray menus

config/ags/js/bar/systray.js

@@ -28,37 +28,41 @@ export const SysTray = Revealer({
   }]],
   child: Box({
     children: [
-      Widget({
-        type: Gtk.MenuBar,
+      Box({
         className: 'sys-tray',
-        properties: [
-          ['items', new Map()],
-          ['onAdded', (box, id) => {
-            const item = SystemTray.getItem(id);
-            if (box._items.has(id) || !item)
-              return;
+        children: [
+          Widget({
+            type: Gtk.MenuBar,
+            properties: [
+              ['items', new Map()],
+              ['onAdded', (box, id) => {
+                const item = SystemTray.getItem(id);
+                if (box._items.has(id) || !item)
+                  return;
 
-            const widget = SysTrayItem(item);
-            box._items.set(id, widget);
-            box.add(widget);
-            box.show_all();
-            widget.child.revealChild = true;
-          }],
+                const widget = SysTrayItem(item);
+                box._items.set(id, widget);
+                box.add(widget);
+                box.show_all();
+                widget.child.revealChild = true;
+              }],
 
-          ['onRemoved', (box, id) => {
-            if (!box._items.has(id))
-              return;
+              ['onRemoved', (box, id) => {
+                if (!box._items.has(id))
+                  return;
 
-            box._items.get(id).child.revealChild = false;
-            setTimeout(() => {
-              box._items.get(id).destroy();
-              box._items.delete(id);
-            }, 400);
-          }],
-        ],
-        connections: [
-          [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
-          [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
+                box._items.get(id).child.revealChild = false;
+                setTimeout(() => {
+                  box._items.get(id).destroy();
+                  box._items.delete(id);
+                }, 400);
+              }],
+            ],
+            connections: [
+              [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
+              [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
+            ],
+          }),
         ],
       }),
       Separator(12),

config/ags/scss/main.scss

@@ -1,4 +1,9 @@
-* {
+window,
+button,
+eventbox,
+box,
+progressbar,
+trough {
   all: unset;
 }
 

config/ags/scss/widgets/systray.scss

@@ -1,45 +1,25 @@
 .sys-tray {
   padding: 5px;
   background-color: $bg;
-  color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid $bgSecondary;
   transition: background-color 0.5s ease-in-out,
               border 0.5s ease-in-out;
 
   .tray-item {
-    all: unset;
+    image { color: #CBA6F7; }
     padding: 0px 2px 0px 2px;
-    font-size: 25px;
     border-radius: 100%;
-    transition: background-color 0.5s ease-in-out,
-                border 0.5s ease-in-out;
+    transition: all 0.5s ease-in-out;
+
     &:hover {
-      background: rgba(127, 132, 156, 0.4);
       border-radius: 100%;
-      transition: background-color 0.5s ease-in-out,
-                  border 0.5s ease-in-out;
+      transition: all 0.5s ease-in-out;
     }
-  }
 
-  menu {
-    background: $bgfull;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border: 2px solid #1b1b1b;
-    border-radius: 10px;
-
-    check {
-      color: white;
-      margin-left: 2px;
-      margin-right: 5px;
-      min-height: 20px;
-      min-width: 20px;
-      -gtk-icon-source: -gtk-icontheme('checkbox-symbolic');
-
-      &:checked {
-        -gtk-icon-source: -gtk-icontheme('checkbox-checked-symbolic');
-      }
+    * {
+      font-size: 25px;
+      border-radius: 10px;
     }
   }
 

config/ags/style.css

@@ -1,4 +1,9 @@
-* {
+window,
+button,
+eventbox,
+box,
+progressbar,
+trough {
   all: unset; }
 
 .powermenu {
@@ -144,35 +149,21 @@ tooltip {
 .sys-tray {
   padding: 5px;
   background-color: rgba(40, 42, 54, 0.8);
-  color: #CBA6F7;
   border-radius: 80px;
   border: 2px solid rgba(56, 44, 74, 0.8);
   transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
   .sys-tray .tray-item {
-    all: unset;
     padding: 0px 2px 0px 2px;
-    font-size: 25px;
     border-radius: 100%;
-    transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
+    transition: all 0.5s ease-in-out; }
+    .sys-tray .tray-item image {
+      color: #CBA6F7; }
     .sys-tray .tray-item:hover {
-      background: rgba(127, 132, 156, 0.4);
       border-radius: 100%;
-      transition: background-color 0.5s ease-in-out, border 0.5s ease-in-out; }
-  .sys-tray menu {
-    background: #282a36;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    border: 2px solid #1b1b1b;
-    border-radius: 10px; }
-    .sys-tray menu check {
-      color: white;
-      margin-left: 2px;
-      margin-right: 5px;
-      min-height: 20px;
-      min-width: 20px;
-      -gtk-icon-source: -gtk-icontheme("checkbox-symbolic"); }
-      .sys-tray menu check:checked {
-        -gtk-icon-source: -gtk-icontheme("checkbox-checked-symbolic"); }
+      transition: all 0.5s ease-in-out; }
+    .sys-tray .tray-item * {
+      font-size: 25px;
+      border-radius: 10px; }
   .sys-tray menuitem:not(.tray-item) {
     padding: 5px;
     transition: all 0.2s ease-in-out; }