use new styled popup window for tray item menu

modules/bar/Bar.qml

@@ -59,9 +59,9 @@ Scope {
                     anchors.verticalCenter: parent.verticalCenter
                 }
 
-                // Tray {
+                Tray {
-                //     anchors.verticalCenter: parent.verticalCenter
+                    anchors.verticalCenter: parent.verticalCenter
-                // }
+                }
             }
 
             Row {

modules/bar/components/tray/menu/Menu.qml

@@ -6,72 +6,15 @@ import Quickshell
 import "../../../../../config/"
 import "../../../../../styled/"
 
-PopupWindow {
+StyledPopupWindow {
     id: window
 
-    property QsMenuOpener menuOpener
+    backgroundColor: Theme.palette.base300
-    property bool opened: false
-
-    color: 'transparent'
-
-    implicitWidth: menu.width
-    implicitHeight: menu.height
-
-    Rectangle {
-        id: background
-
-        anchors.fill: menu
-        color: Theme.palette.base300
-        border.color: Theme.palette.base200
-        border.width: 2
     radius: 8
 
-        opacity: 0
+    property QsMenuOpener menuOpener
 
-        states: State {
+    content: ColumnLayout {
-            name: "opened"
-            when: window.opened
-            PropertyChanges {
-                background {
-                    opacity: 1
-                }
-            }
-        }
-
-        transitions: [
-            Transition {
-                from: ""
-                to: "opened"
-                SequentialAnimation {
-                    ScriptAction {
-                        script: window.visible = true
-                    }
-                    NumberAnimation {
-                        property: "background.opacity"
-                        duration: 200
-                    }
-                }
-            },
-            Transition {
-                from: "opened"
-                to: ""
-                SequentialAnimation {
-                    PauseAnimation {
-                        duration: repeater.count * 15
-                    }
-                    NumberAnimation {
-                        property: "background.opacity"
-                        duration: 200
-                    }
-                    ScriptAction {
-                        script: window.visible = false
-                    }
-                }
-            }
-        ]
-    }
-
-    ColumnLayout {
         id: menu
 
         anchors.margins: 30
@@ -118,7 +61,7 @@ PopupWindow {
                         to: "opened"
                         SequentialAnimation {
                             PauseAnimation {
-                                duration: 15 * loader.index
+                                duration: (repeater.count / root.animationDuration) * loader.index
                             }
                             NumberAnimation {
                                 property: "opacity"