components/StyledRectangle.qml

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

components/StyledWrapperRectangle.qml

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

modules/bar/Bar.qml

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

modules/bar/components/Clock.qml

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

modules/bar/components/Memory.qml

@@ -5,7 +5,9 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
+
+    RowLayout {
 
         Ref {
             service: SystemInfo
@@ -18,4 +20,5 @@ RowLayout {
         StyledText {
             text: ` ${(SystemInfo.memPerc * 100).toFixed()}%`
         }
+    }
 }

modules/bar/components/Network.qml

@@ -5,7 +5,9 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
+
+    RowLayout {
 
         Ref {
             service: NetworkService
@@ -49,4 +51,5 @@ RowLayout {
             id: text
             text: ` ${(NetworkService.active?.strength ?? 0).toFixed()}%`
         }
+    }
 }

modules/bar/components/Storage.qml

@@ -5,7 +5,9 @@ import qs.utils
 import QtQuick
 import QtQuick.Layouts
 
-RowLayout {
+StyledRectangle {
+
+    RowLayout {
 
         Ref {
             service: SystemInfo
@@ -20,4 +22,5 @@ RowLayout {
 
             text: ` ${(SystemInfo.storagePerc * 100).toFixed()}%`
         }
+    }
 }

modules/bar/components/bluetooth/AvailableDevice.qml

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

modules/bar/components/bluetooth/ConnectedDevice.qml

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

modules/bar/components/bluetooth/PairedDevice.qml

@@ -2,20 +2,21 @@ 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
 
-StyledWrapperRectangle {
+StyledRectangle {
     id: root
     required property BluetoothDevice modelData
 
     RowLayout {
         id: row
 
-        spacing: Styling.layout.spacing.base
+        spacing: 8
 
         Loader {
             active: root.modelData?.icon != undefined

modules/bar/components/notifications/NotificationItem.qml

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

modules/bar/components/notifications/NotificationMenu.qml

@@ -1,6 +1,7 @@
 pragma ComponentBehavior: Bound
 
 import qs.components
+import qs.config
 import qs.services
 import QtQuick
 import QtQuick.Layouts
@@ -24,8 +25,9 @@ StyledPopupWindow {
             onClicked: Notifications.clear()
         }
 
-        StyledWrapperRectangle {
+        StyledRectangle {
             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
 
-StyledPanelWindow {
+StyledWindow {
     id: root
     name: "launcher"
 

modules/pomodoro/Pomodoro.qml

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

modules/powermenu/PowerMenu.qml

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

modules/storybook/Storybook.qml

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