shell/bar/Bar.qml

@@ -62,7 +62,7 @@ Variants {
 
             // Right side of bar
             RowLayout {
-                spacing: 5
+                spacing: 10
                 Layout.fillWidth: true
                 Layout.fillHeight: true
                 Layout.alignment: Qt.AlignRight
@@ -81,10 +81,10 @@ Variants {
                 //     Layout.bottomMargin: 2
                 // }
 
-                PowerMenu {
-                    bar: root
-                    Layout.fillHeight: true
-                }
+                // PowerMenu {
+                //     bar: root
+                //     Layout.fillHeight: true
+                // }
 
                 // Widgets.Separator {
                 //     Layout.leftMargin: 5

shell/bar/power/PowerMenu.qml

@@ -1,7 +1,6 @@
 pragma ComponentBehavior: Bound
 
 import QtQuick
-import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 import Quickshell.Widgets
 import Quickshell.Services.UPower
@@ -39,7 +38,7 @@ StyledMouseArea {
 
         Rectangle {
             id: batteryBackground
-            color: Qt.color(ShellSettings.colors.inactive_translucent).lighter(4)
+            color: Qt.color(ShellSettings.colors["surface"]).lighter(4)
             opacity: 0.75
             anchors {
                 fill: parent
@@ -50,7 +49,7 @@ StyledMouseArea {
         Rectangle {
             id: batteryPercentage
             width: (parent.width - 4) * UPower.displayDevice.percentage
-            color: ShellSettings.colors.surface
+            color: ShellSettings.colors["inverse_surface"]
 
             anchors {
                 left: batteryBackground.left
@@ -65,22 +64,9 @@ StyledMouseArea {
         popup: root.bar.popup
         show: root.showMenu
         onClosed: root.showMenu = false
+        centered: true
 
-        implicitWidth: 300
-        implicitHeight: 50
-
-        ColumnLayout {
-            anchors {
-                fill: parent
-                margins: 8
-            }
-
-            OptionSlider {
-                Layout.fillWidth: true
-                values: ["Power Save", "Balanced", "Performance"]
-                index: PowerProfiles.profile
-                onIndexChanged: PowerProfiles.profile = this.index
-            }
-        }
+        implicitWidth: 250 
+        implicitHeight: 250 
     }
 }

shell/bar/systray/SysTray.qml

@@ -10,7 +10,7 @@ import ".."
 
 // TODO:
 // 1. Get rid of leftItem/rightItem properties on menu
-// 2. Animate height of subTrayMenu's on expand 
+// 2. Load menu properly, right now its pretty buggy
 // 3. Fix bug that causes close on update (nm-applet wifi networks updating)
 
 RowLayout {

shell/screencapture/Controller.qml

@@ -5,6 +5,7 @@ import Quickshell
 import Quickshell.Io
 import Quickshell.Wayland
 import QtQuick
+import ".."
 
 Singleton {
     id: root

shell/screencapture/Screenshot.qml

@@ -0,0 +1,3 @@
+import QtQuick
+
+Image {}

shell/screencapture/SelectionRectangle.qml

@@ -1,105 +1,54 @@
 import QtQuick
-import qs
+import ".."
 
-Item {
+Canvas {
     id: root
-    width: 800
-    height: 600
 
     property color overlayColor: "#80000000"
-    property rect selectionRect: Qt.rect(0, 0, 0, 0)
-    property point startPosition: Qt.point(0, 0)
+    property color outlineColor: ShellSettings.colors["primary"]
+    property rect selectionRect
+    property point startPosition
     signal areaSelected(rect selection)
- 
-    // only send signal when selection rectangle has finished 
-    onVisibleChanged: areaSelected(selectionRect)
+
+    onPaint: {
+        var ctx = getContext("2d");
+        ctx.clearRect(0, 0, width, height);
+
+        // grey overlay
+        ctx.fillStyle = overlayColor;
+        ctx.fillRect(0, 0, width, height);
+
+        // cut out the selection rectangle
+        ctx.globalCompositeOperation = "destination-out";
+        ctx.fillRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
+        ctx.globalCompositeOperation = "source-over";
+        ctx.strokeStyle = outlineColor; 
+        ctx.lineWidth = 2; 
+        ctx.strokeRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
+    }
 
     MouseArea {
-        id: selectionArea
         anchors.fill: parent
-        hoverEnabled: true
-
-        onReleased: root.visible = false
 
         onPressed: mouse => {
             root.startPosition = Qt.point(mouse.x, mouse.y);
-            rectangle.x = mouse.x;
-            rectangle.y = mouse.y;
-            rectangle.width = 0;
-            rectangle.height = 0;
-            root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
         }
 
         onPositionChanged: mouse => {
             if (pressed) {
-                rectangle.x = Math.min(root.startPosition.x, mouse.x);
-                rectangle.y = Math.min(root.startPosition.y, mouse.y);
-                rectangle.width = Math.abs(mouse.x - root.startPosition.x);
-                rectangle.height = Math.abs(mouse.y - root.startPosition.y);
+                var x = Math.min(root.startPosition.x, mouse.x);
+                var y = Math.min(root.startPosition.y, mouse.y);
+                var width = Math.abs(mouse.x - root.startPosition.x);
+                var height = Math.abs(mouse.y - root.startPosition.y);
 
-                root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+                root.selectionRect = Qt.rect(x, y, width, height);
+                root.requestPaint();
             }
         }
-    }
 
-    Rectangle {
-        id: overlayStart
-        color: root.overlayColor
-        visible: !selectionArea.containsPress
-        anchors.fill: parent
-    }
-
-    Rectangle {
-        id: overlayTop
-        color: root.overlayColor
-        x: 0
-        y: 0
-        width: parent.width
-        height: Math.max(0, rectangle.y)
-        visible: selectionArea.containsPress
-    }
-
-    Rectangle {
-        id: overlayLeft
-        color: root.overlayColor
-        x: 0
-        y: rectangle.y
-        width: Math.max(0, rectangle.x)
-        height: Math.max(0, rectangle.height)
-        visible: selectionArea.containsPress
-    }
-
-    Rectangle {
-        id: overlayRight
-        color: root.overlayColor
-        x: rectangle.x + rectangle.width
-        y: rectangle.y
-        width: Math.max(0, parent.width - (rectangle.x + rectangle.width))
-        height: Math.max(0, rectangle.height)
-        visible: selectionArea.containsPress
-    }
-
-    Rectangle {
-        id: overlayBottom
-        color: root.overlayColor
-        x: 0
-        y: rectangle.y + rectangle.height
-        width: parent.width
-        height: Math.max(0, parent.height - (rectangle.y + rectangle.height))
-        visible: selectionArea.containsPress
-    }
-
-    // The visible selection rectangle with border drawn above overlays
-    Rectangle {
-        id: rectangle
-        color: "transparent"
-        border.color: ShellSettings.colors.active_translucent
-        border.width: 2
-        x: 0
-        y: 0
-        width: 0
-        height: 0
-        z: 1
-        visible: selectionArea.containsPress
+        onReleased: mouse => {
+            root.visible = false;
+            root.areaSelected(root.selectionRect);
+        }
     }
 }

shell/widgets/OptionSlider.qml

@@ -1,98 +0,0 @@
-pragma ComponentBehavior: Bound
-
-import QtQuick
-import qs
-
-Item {
-    id: root
-
-    property list<string> values
-    property int index: 0
-
-    implicitWidth: 300
-    implicitHeight: 40
-
-    MouseArea {
-        id: mouseArea
-        anchors.fill: parent
-
-        property real halfHandle: handle.width / 2
-        property real activeWidth: groove.width - handle.width
-        property real valueOffset: mouseArea.halfHandle + (root.index / (root.values.length - 1)) * mouseArea.activeWidth
-
-        Repeater {
-            model: root.values
-
-            Item {
-                id: delegate
-                required property int index
-                required property string modelData
-
-                anchors.top: groove.bottom
-                anchors.topMargin: 2
-                x: mouseArea.halfHandle + (delegate.index / (root.values.length - 1)) * mouseArea.activeWidth
-
-                Rectangle {
-                    id: mark
-                    color: ShellSettings.colors.active_translucent
-                    width: 1
-                    height: groove.height
-                }
-
-                Text {
-                    anchors.top: mark.bottom
-
-                    x: delegate.index === 0 ? -4 : delegate.index === root.values.length - 1 ? -this.width + 4 : -(this.width / 2)
-
-                    text: delegate.modelData
-                    color: ShellSettings.colors.active
-                }
-            }
-        }
-
-        Rectangle {
-            id: grooveFill
-
-            anchors {
-                left: groove.left
-                top: groove.top
-                bottom: groove.bottom
-            }
-
-            radius: 5
-            color: ShellSettings.colors.active_translucent
-            width: mouseArea.valueOffset
-        }
-
-        Rectangle {
-            id: groove
-
-            anchors {
-                left: parent.left
-                right: parent.right
-            }
-
-            y: 5
-            implicitHeight: 7
-            color: "transparent"
-            border.color: ShellSettings.colors.active_translucent
-            border.width: 1
-            radius: 5
-        }
-
-        Rectangle {
-            id: handle
-            anchors.verticalCenter: groove.verticalCenter
-            height: 15
-            width: height
-            radius: height * 0.5
-            x: mouseArea.valueOffset - width * 0.5
-        }
-    }
-
-    Binding {
-        when: mouseArea.pressed
-        root.index: Math.max(0, Math.min(root.values.length - 1, Math.round((mouseArea.mouseX / root.width) * (root.values.length - 1))))
-        restoreMode: Binding.RestoreBinding
-    }
-}

shell/widgets/StyledMouseArea.qml

@@ -5,21 +5,16 @@ MouseArea {
     id: root
     hoverEnabled: true
 
-    property real radius: 10  
+    property real radius: width / 2
     property bool checked: false
     property var activeColor: ShellSettings.colors.active_translucent
     property var inactiveColor: "transparent"
 
     Rectangle {
-        color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor
+        color: root.containsMouse || root.checked ? root.activeColor : root.inactiveColor 
         radius: root.radius
         anchors.fill: parent
 
-        border {
-            width: root.containsMouse ? 1 : 0
-            color: ShellSettings.colors.active_translucent
-        }
-
         Behavior on color {
             ColorAnimation {
                 duration: 200