2 files changed, 36 insertions, 21 deletions

diff --git a/framework/qml/Icons.qml b/framework/qml/Icons.qml
index df3baead..f40ff9b0 100644
--- a/framework/qml/Icons.qml
+++ b/framework/qml/Icons.qml
@@ -62,6 +62,7 @@ Item {
     property string goDown_inverted: "go-down-inverted"
     property string goUp: "go-up"
     property string checkbox: "checkbox"
+    property string checkbox_inverted: "checkbox-inverted"
     property string password_show: "password-show-on"
     property string password_hide: "password-show-off"
     property string secure: "document-encrypt"
diff --git a/views/calendar/qml/View.qml b/views/calendar/qml/View.qml
index 30239378..5820ab87 100644
--- a/views/calendar/qml/View.qml
+++ b/views/calendar/qml/View.qml
@@ -136,32 +136,46 @@ RowLayout {
                     type: "calendar"
                     roles: ["name", "color"]
                 }
-                delegate: Item {
+                delegate: RowLayout {
                     width: listView.availableWidth
                     height: Kube.Units.gridUnit
-                    RowLayout {
-                        anchors.fill: parent
-                        spacing: Kube.Units.smallSpacing
-                        Kube.CheckBox {
-                            opacity: 0.9
-                            checked: !model.checked
-                            onToggled: model.checked = !checked
-                        }
-                        Kube.Label {
-                            Layout.fillWidth: true
-                            text: model.name
-                            color: Kube.Colors.highlightedTextColor
-                            elide: Text.ElideLeft
-                            clip: true
-                        }
-                        Rectangle {
-                            anchors.verticalCenter: parent.verticalCenter
+                    spacing: Kube.Units.smallSpacing
+                    Kube.CheckBox {
+                        id: checkBox
+                        opacity: 0.9
+                        checked: !model.checked
+                        onToggled: model.checked = !checked
+
+                        indicator: Rectangle {
                             width: Kube.Units.gridUnit
-                            height: width
-                            radius: width / 2
+                            height: Kube.Units.gridUnit
+
                             color: model.color
-                            opacity: 0.9
+
+                            Rectangle {
+                                id: highlight
+                                anchors.fill: parent
+                                visible: checkBox.hovered || checkBox.visualFocus
+                                color: Kube.Colors.highlightColor
+                                opacity: 0.4
+                            }
+
+                            Kube.Icon {
+                                anchors.centerIn: parent
+                                height: Kube.Units.gridUnit
+                                width: Kube.Units.gridUnit
+                                visible: checkBox.checked
+                                iconName: Kube.Icons.checkbox_inverted
+                            }
                         }
+
+                    }
+                    Kube.Label {
+                        Layout.fillWidth: true
+                        text: model.name
+                        color: Kube.Colors.highlightedTextColor
+                        elide: Text.ElideLeft
+                        clip: true
                     }
                 }
             }