panel window

components/StyledRectangle.qml

@@ -1,12 +1,9 @@
 import qs.config
 import QtQuick
-import Quickshell.Widgets
 
-WrapperRectangle {
+Rectangle {
-    id: root
-    margin: 8
     radius: Styling.theme.radiusBox
-    color: Styling.theme.base200
+    color: Styling.theme.base100
     Behavior on color {
         ColorAnimation {
             duration: Styling.animations.speed.normal

components/StyledWrapperRectangle.qml

@@ -3,6 +3,7 @@ import QtQuick
 import Quickshell.Widgets
 
 WrapperRectangle {
+    margin: 8
     radius: Styling.theme.radiusBox
     color: Styling.theme.base100
     Behavior on color {

modules/bar/Bar.qml

@@ -22,6 +22,7 @@ StyledWrapperRectangle {
     border.color: Styling.theme.base200
 
     margin: 4
+    color: Styling.theme.base100
 
     RowLayout {
 

modules/bar/components/Clock.qml

@@ -1,12 +1,10 @@
 import qs.components
 import Quickshell
 
-StyledRectangle {
+StyledText {
-    StyledText {
+    text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
-        text: ` ${Qt.formatDateTime(clock.date, "hh:mm:ss AP")}`
+    SystemClock {
-        SystemClock {
+        id: clock
-            id: clock
+        precision: SystemClock.Seconds
-            precision: SystemClock.Seconds
-        }
     }
 }

modules/bar/components/Memory.qml

@@ -5,20 +5,17 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: SystemInfo
+    }
 
-        Ref {
+    LucideIcon {
-            service: SystemInfo
+        text: Styling.lucide.icons.memoryStick
-        }
+    }
 
-        LucideIcon {
+    StyledText {
-            text: Styling.lucide.icons.memoryStick
+        text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
-        }
-
-        StyledText {
-            text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
-        }
     }
 }

modules/bar/components/Network.qml

@@ -5,51 +5,48 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: NetworkService
+    }
 
-        Ref {
+    LucideIcon {
-            service: NetworkService
+        id: icon
-        }
+        text: Styling.lucide.icons.wifiOff
-
+        states: [
-        LucideIcon {
+            State {
-            id: icon
+                name: "high"
-            text: Styling.lucide.icons.wifiOff
+                when: NetworkService.active?.strength > 50
-            states: [
+                PropertyChanges {
-                State {
+                    icon {
-                    name: "high"
+                        text: Styling.lucide.icons.wifi
-                    when: NetworkService.active?.strength > 50
-                    PropertyChanges {
-                        icon {
-                            text: Styling.lucide.icons.wifi
-                        }
-                    }
-                },
-                State {
-                    name: "medium"
-                    when: NetworkService.active?.strength > 25
-                    PropertyChanges {
-                        icon {
-                            text: Styling.lucide.icons.wifiHigh
-                        }
-                    }
-                },
-                State {
-                    name: "low"
-                    when: NetworkService.active?.strength > 0
-                    PropertyChanges {
-                        icon {
-                            text: Styling.lucide.icons.wifiLow
-                        }
                     }
                 }
-            ]
+            },
-        }
+            State {
+                name: "medium"
+                when: NetworkService.active?.strength > 25
+                PropertyChanges {
+                    icon {
+                        text: Styling.lucide.icons.wifiHigh
+                    }
+                }
+            },
+            State {
+                name: "low"
+                when: NetworkService.active?.strength > 0
+                PropertyChanges {
+                    icon {
+                        text: Styling.lucide.icons.wifiLow
+                    }
+                }
+            }
+        ]
+    }
 
-        StyledText {
+    StyledText {
-            id: text
+        id: text
-            text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
+        text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
-        }
     }
 }

modules/bar/components/Storage.qml

@@ -5,22 +5,19 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-StyledRectangle {
+RowLayout {
 
-    RowLayout {
+    Ref {
+        service: SystemInfo
+    }
 
-        Ref {
+    LucideIcon {
-            service: SystemInfo
+        text: Styling.lucide.icons.hardDrive
-        }
+    }
 
-        LucideIcon {
+    StyledText {
-            text: Styling.lucide.icons.hardDrive
+        id: text
-        }
 
-        StyledText {
+        text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
-            id: text
-
-            text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
-        }
     }
 }

modules/bar/components/bluetooth/AvailableDevice.qml

@@ -1,20 +1,21 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledRectangle {
+StyledWrapperRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: 8
+        spacing: Styling.layout.spacing.base
 
         Loader {
             active: root.modelData?.icon != undefined

modules/bar/components/bluetooth/ConnectedDevice.qml

@@ -8,14 +8,14 @@ import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledRectangle {
+StyledWrapperRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: 8
+        spacing: Styling.layout.spacing.base
 
         Loader {
             active: root.modelData?.icon != undefined

modules/bar/components/bluetooth/PairedDevice.qml

@@ -2,21 +2,20 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.config
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Bluetooth
 import Quickshell.Widgets
 
-StyledRectangle {
+StyledWrapperRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: 8
+        spacing: Styling.layout.spacing.base
 
         Loader {
             active: root.modelData?.icon != undefined

modules/bar/components/notifications/NotificationItem.qml

@@ -1,18 +1,16 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.widgets
 import QtQuick
 import QtQuick.Layouts
 import Quickshell
 import Quickshell.Widgets
 
-StyledRectangle {
+StyledWrapperRectangle {
     id: root
 
     required property var modelData
 
-    margin: 16
     anchors.left: parent.left
     anchors.right: parent.right
 

modules/bar/components/notifications/NotificationMenu.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
-import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Layouts
@@ -25,9 +24,8 @@ StyledPopupWindow {
             onClicked: Notifications.clear()
         }
 
-        StyledRectangle {
+        StyledWrapperRectangle {
             Layout.columnSpan: 2
-            color: Styling.theme.base200
             StyledListView {
                 id: notifications
 

modules/launcher/Launcher.qml

@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledWindow {
+StyledPanelWindow {
     id: root
     name: "launcher"
 

modules/pomodoro/Pomodoro.qml

@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledWindow {
+StyledPanelWindow {
     id: root
     name: "pomodoro"
 

modules/powermenu/PowerMenu.qml

@@ -9,7 +9,7 @@ import Quickshell.Wayland
 import QtQuick
 import QtQuick.Layouts
 
-StyledWindow {
+StyledPanelWindow {
     id: root
     name: "powermenu"
 

modules/storybook/Storybook.qml

@@ -9,7 +9,7 @@ import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
 
-StyledWindow {
+StyledPanelWindow {
     id: root
     name: "storybook"