feat: fix Notification page and lists of contacts

ui/app/AppLayouts/Chat/components/Contact.qml

@@ -17,24 +17,26 @@ Rectangle {
     property bool isVisible: true
 
     property bool showCheckbox: true
+    property bool clickable: true
     property bool isChecked: false
-    property bool showListSelector: false
+    property bool isHovered: false
     property var onItemChecked: (function(pubKey, itemChecked) { console.log(pubKey, itemChecked)  })
 
-
+    id: root
     visible: isVisible && (isContact || isUser)
     height: visible ? 64 : 0
     anchors.right: parent.right
     anchors.left: parent.left
     border.width: 0
     radius: Style.current.radius
-    color: Style.current.transparent
+    color: isHovered ? Style.current.backgroundHover : Style.current.transparent
 
     StatusImageIdenticon {
         id: accountImage
         anchors.left: parent.left
         anchors.verticalCenter: parent.verticalCenter
         source: identicon
+        anchors.leftMargin: Style.current.padding
     }
     
     StyledText {
@@ -50,22 +52,9 @@ Rectangle {
         anchors.leftMargin: Style.current.padding
     }
 
-    SVGImage {
-        id: image
-        visible: showListSelector && !showCheckbox
-        height: 24
-        width: 24
-        anchors.top: accountImage.top
-        anchors.topMargin: 6
-        anchors.right: parent.right
-        anchors.rightMargin: Style.current.padding
-        fillMode: Image.PreserveAspectFit
-        source: "../../../img/list-next.svg"
-    }
-
     StatusCheckBox  {
         id: assetCheck
-        visible: !showListSelector && showCheckbox && !isUser
+        visible: showCheckbox && !isUser
         anchors.top: accountImage.top
         anchors.topMargin: 6
         anchors.right: parent.right
@@ -92,7 +81,10 @@ Rectangle {
     MouseArea {
         cursorShape: Qt.PointingHandCursor
         anchors.fill: parent
-        enabled: showCheckbox
+        enabled: root.clickable || root.showCheckbox
+        hoverEnabled: root.clickable || root.showCheckbox
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
         onClicked: assetCheck.clicked()
     }
 }

ui/app/AppLayouts/Chat/components/PrivateChatPopup.qml

@@ -139,7 +139,6 @@ ModalPopup {
                     name: model.name
                     address: model.address
                     identicon: model.thumbnailImage || model.identicon
-                    showListSelector: true
                     onItemChecked: function(pubKey, itemChecked){
                         chatsModel.joinChat(pubKey, Constants.chatTypeOneToOne);
                         popup.close()

ui/app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml

@@ -0,0 +1,67 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "./"
+import "../../../../imports"
+import "../../../../shared"
+import "../../../../shared/status"
+
+Item {
+    property bool checked: false
+    property string name
+    property string notificationTitle
+    property string notificationMessage
+    property var buttonGroup
+    property bool isHovered: false
+    signal radioCheckedChanged(checked: bool)
+
+    id: root
+    height: container.height
+    width: container.width
+
+    Rectangle {
+        id: container
+        width: notificationPreview.width + Style.current.padding * 2
+        height: childrenRect.height + Style.current.padding + Style.current.halfPadding
+        color: radioButton.checked ? Style.current.secondaryBackground :
+                                     (isHovered ? Style.current.backgroundHover : Style.current.transparent)
+        radius: Style.current.radius
+
+        StatusRadioButton {
+            id: radioButton
+            text: root.name
+            ButtonGroup.group: root.buttonGroup
+            checked: root.checked
+            onCheckedChanged: root.radioCheckedChanged(checked)
+            anchors.top: parent.top
+            anchors.topMargin: Style.current.halfPadding
+            anchors.left: parent.left
+            anchors.leftMargin: Style.current.padding
+        }
+
+        StatusNotificationWithDropShadow {
+            id: notificationPreview
+            anchors.top: radioButton.bottom
+            anchors.topMargin: Style.current.halfPadding
+            anchors.left: parent.left
+            name: root.notificationTitle
+            chatType: Constants.chatTypePublic
+            message: root.notificationMessage
+        }
+
+    }
+
+    MouseArea {
+        anchors.fill: container
+        hoverEnabled: true
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
+        onClicked: {
+            if (!radioButton.checked) {
+                root.radioCheckedChanged(true)
+            }
+        }
+
+        cursorShape: Qt.PointingHandCursor
+    }
+}
+

ui/app/AppLayouts/Profile/Sections/NotificationsContainer.qml

@@ -47,69 +47,43 @@ ScrollView {
 
         Column {
             id: column
-            spacing: Style.current.padding
             anchors.top: sectionHeadlineNotifications.bottom
             anchors.topMargin: Style.current.smallPadding
             anchors.left: parent.left
             anchors.right: parent.right
 
-            RowLayout {
+            StatusRadioButtonRow {
-                width: parent.width
+                //% "All messages"
-                StyledText {
+                text: qsTrId("all-messages")
-                    //% "All messages"
+                buttonGroup: notificationSetting
-                    text: qsTrId("all-messages")
+                checked: appSettings.notificationSetting === Constants.notifyAllMessages
-                    font.pixelSize: 15
+                onRadioCheckedChanged: {
-                }
+                    if (checked) {
-
+                        appSettings.notificationSetting = Constants.notifyAllMessages
-                StatusRadioButton {
-                    Layout.alignment: Qt.AlignRight
-                    ButtonGroup.group: notificationSetting
-                    rightPadding: 0
-                    checked: appSettings.notificationSetting === Constants.notifyAllMessages
-                    onCheckedChanged: {
-                        if (checked) {
-                            appSettings.notificationSetting = Constants.notifyAllMessages
-                        }
                     }
                 }
             }
 
-            RowLayout {
+            StatusRadioButtonRow {
-                width: parent.width
+                //% "Just @mentions"
-                StyledText {
+                text: qsTrId("just--mentions")
-                    //% "Just @mentions"
+                buttonGroup: notificationSetting
-                    text: qsTrId("just--mentions")
+                checked:  appSettings.notificationSetting === Constants.notifyJustMentions
-                    font.pixelSize: 15
+                onRadioCheckedChanged: {
-                }
+                    if (checked) {
-                StatusRadioButton {
+                        appSettings.notificationSetting = Constants.notifyJustMentions
-                    Layout.alignment: Qt.AlignRight
-                    ButtonGroup.group: notificationSetting
-                    rightPadding: 0
-                    checked: appSettings.notificationSetting === Constants.notifyJustMentions
-                    onCheckedChanged: {
-                        if (checked) {
-                            appSettings.notificationSetting = Constants.notifyJustMentions
-                        }
                     }
                 }
             }
 
-            RowLayout {
+            StatusRadioButtonRow {
-                width: parent.width
+                //% "Nothing"
-                StyledText {
+                text: qsTrId("nothing")
-                    //% "Nothing"
+                buttonGroup: notificationSetting
-                    text: qsTrId("nothing")
+                checked:  appSettings.notificationSetting === Constants.notifyNone
-                    font.pixelSize: 15
+                onRadioCheckedChanged: {
-                }
+                    if (checked) {
-                StatusRadioButton {
+                        appSettings.notificationSetting = Constants.notifyNone
-                    Layout.alignment: Qt.AlignRight
-                    ButtonGroup.group: notificationSetting
-                    rightPadding: 0
-                    checked: appSettings.notificationSetting === Constants.notifyNone
-                    onCheckedChanged: {
-                        if (checked) {
-                            appSettings.notificationSetting = Constants.notifyNone
-                        }
                     }
                 }
             }
@@ -127,8 +101,7 @@ ScrollView {
 
         StatusSectionHeadline {
             id: sectionHeadlineSound
-            //% "Sound & Appearance"
+            text: qsTr("Appearance")
-            text: qsTrId("sound---appearance")
             anchors.top: separator.bottom
             anchors.left: parent.left
             anchors.right: parent.right
@@ -136,87 +109,43 @@ ScrollView {
 
         Column {
             id: column2
-            spacing: Style.current.padding
             anchors.top: sectionHeadlineSound.bottom
             anchors.topMargin: Style.current.smallPadding
             anchors.left: parent.left
             anchors.right: parent.right
             width: parent.width
 
-            RowLayout {
+            StatusSettingsLineButton {
-                width: parent.width
+                //% "Play a sound when receiving a notification"
-                StyledText {
+                text: qsTrId("play-a-sound-when-receiving-a-notification")
-                    //% "Play a sound when receiving a notification"
+                isSwitch: true
-                    text: qsTrId("play-a-sound-when-receiving-a-notification")
+                switchChecked: appSettings.notificationSoundsEnabled
-                    font.pixelSize: 15
+                onClicked: {
-                }
+                    appSettings.notificationSoundsEnabled = checked
-
-                StatusSwitch {
-                    Layout.alignment: Qt.AlignRight
-                    checked: appSettings.notificationSoundsEnabled
-                    onCheckedChanged: {
-                        appSettings.notificationSoundsEnabled = checked
-                    }
                 }
             }
 
-            RowLayout {
+            StatusSettingsLineButton {
-                width: parent.width
+                text: qsTr("Use your operating system's notifications")
+                isSwitch: true
+                switchChecked: appSettings.useOSNotifications
+                onClicked: {
+                    appSettings.useOSNotifications = checked
+                }
+
                 StyledText {
-                    text: qsTr("Use your operating system's notifications")
+                    id: detailText
-                    font.pixelSize: 15
+                    text: qsTr("Setting this to false will instead use Status' notification style as seen below")
+                    color: Style.current.secondaryText
+                    width: parent.width
+                    font.pixelSize: 12
                     wrapMode: Text.WordWrap
-                    Layout.fillWidth: true
+                    anchors.left: parent.left
-
+                    anchors.leftMargin: Style.current.padding
-                    StyledText {
+                    anchors.bottom: parent.bottom
-                        id: detailText
+                    anchors.topMargin: 2
-                        text: qsTr("Setting this to false will instead use Status' notification style as seen below")
-                        color: Style.current.secondaryText
-                        width: parent.width
-                        font.pixelSize: 12
-                        wrapMode: Text.WordWrap
-                        anchors.top: parent.bottom
-                    }
-                }
-
-                StatusSwitch {
-                    Layout.alignment: Qt.AlignRight
-                    checked: appSettings.useOSNotifications
-                    onCheckedChanged: {
-                        appSettings.useOSNotifications = checked
-                    }
                 }
             }
-
-            /* GridLayout { */
-            /*     columns: 4 */
-            /*     width: parent.width */
-
-            /*     StatusRadioButton { */
-            /*         checked: true */
-            /*         //% "Sound 1" */
-            /*         text: qsTrId("sound-1") */
-            /*         ButtonGroup.group: soundSetting */
-            /*     } */
-
-            /*     StatusRadioButton { */
-            /*         //% "Sound 2" */
-            /*         text: qsTrId("sound-2") */
-            /*         ButtonGroup.group: soundSetting */
-            /*     } */
-
-            /*     StatusRadioButton { */
-            /*         //% "Sound 3" */
-            /*         text: qsTrId("sound-3") */
-            /*         ButtonGroup.group: soundSetting */
-            /*     } */
-
-            /*     StatusRadioButton { */
-            /*         //% "Sound 4" */
-            /*         text: qsTrId("sound-4") */
-            /*         ButtonGroup.group: soundSetting */
-            /*     } */
-            /* } */
         }
 
         Column {
@@ -239,106 +168,47 @@ ScrollView {
                 anchors.left: parent.left
                 anchors.leftMargin: -Style.current.padding
                 anchors.right: parent.right
-                anchors.rightMargin: -Style.current.padding
                 spacing: 10
 
-                Rectangle {
+                NotificationAppearancePreview {
-                    width: notificationAnonymous.width + Style.current.padding * 2
+                    //% "Anonymous"
-                    height: childrenRect.height + Style.current.padding + Style.current.halfPadding
+                    name: qsTrId("anonymous")
-                    color: labelAnonymous.checked ? Style.current.secondaryBackground : Style.current.transparent
+                    notificationTitle: "Status"
-                    radius: Style.current.radius
+                    notificationMessage: qsTr("You have a new message")
-
+                    buttonGroup: messageSetting
-                    StatusRadioButton {
+                    checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous
-                        id: labelAnonymous
+                    onRadioCheckedChanged: {
-                        //% "Anonymous"
+                        if (checked) {
-                        text: qsTrId("anonymous")
+                            appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewAnonymous
-                        ButtonGroup.group: messageSetting
-                        checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewAnonymous
-                        onCheckedChanged: {
-                            if (checked) {
-                                appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewAnonymous
-                            }
                         }
-                        anchors.top: parent.top
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
-                        anchors.leftMargin: Style.current.padding
-                    }
-
-                    StatusNotificationWithDropShadow {
-                        id: notificationAnonymous
-                        anchors.top: labelAnonymous.bottom
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
-                        name: "Status"
-                        chatType: Constants.chatTypePublic
-                        message: qsTr("You have a new message")
                     }
                 }
 
-                Rectangle {
+                NotificationAppearancePreview {
-                    width: notificationAnonymous.width + Style.current.padding * 2
+                    //% "Name only"
-                    height: childrenRect.height + Style.current.padding + Style.current.halfPadding
+                    name: qsTrId("name-only")
-                    color: labelNameOnly.checked ? Style.current.secondaryBackground : Style.current.transparent
+                    notificationTitle: "Vitalik Buterin"
-                    radius: Style.current.radius
+                    notificationMessage: qsTr("You have a new message")
-
+                    buttonGroup: messageSetting
-                    StatusRadioButton {
+                    checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameOnly
-                        id: labelNameOnly
+                    onRadioCheckedChanged: {
-                        //% "Name only"
+                        if (checked) {
-                        text: qsTrId("name-only")
+                            appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameOnly
-                        ButtonGroup.group: messageSetting
-                        checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameOnly
-                        onCheckedChanged: {
-                            if (checked) {
-                                appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameOnly
-                            }
                         }
-                        anchors.top: parent.top
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
-                        anchors.leftMargin: Style.current.padding
-                    }
-
-                    StatusNotificationWithDropShadow {
-                        id: notificationNameOnly
-                        name: "Vitalik Buterin"
-                        chatType: Constants.chatTypeOneToOne
-                        message: qsTr("You have a new message")
-                        anchors.top: labelNameOnly.bottom
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
                     }
                 }
 
-                Rectangle {
+                NotificationAppearancePreview {
-                    width: notificationAnonymous.width + Style.current.padding * 2
+                    //% "Name & Message"
-                    height: childrenRect.height + Style.current.padding + Style.current.halfPadding
+                    name: qsTrId("name---message")
-                    color: labelNameAndMessage.checked ? Style.current.secondaryBackground : Style.current.transparent
+                    notificationTitle: "Vitalik Buterin"
-                    radius: Style.current.radius
+                    notificationMessage: qsTr("Hi there! Yes, no problem, let me know if I can help.")
-
+                    buttonGroup: messageSetting
-                    StatusRadioButton {
+                    checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameAndMessage
-                        id: labelNameAndMessage
+                    onRadioCheckedChanged: {
-                        //% "Name & Message"
+                        if (checked) {
-                        text: qsTrId("name---message")
-                        ButtonGroup.group: messageSetting
-                        checked: appSettings.notificationMessagePreviewSetting === Constants.notificationPreviewNameAndMessage
-                        onCheckedChanged: {
                             appSettings.notificationMessagePreviewSetting = Constants.notificationPreviewNameAndMessage
                         }
-                        anchors.top: parent.top
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
-                        anchors.leftMargin: Style.current.padding
-                    }
-
-                    StatusNotificationWithDropShadow {
-                        id: notificationNameAndMessage
-                        name: "Vitalik Buterin"
-                        chatType: Constants.chatTypeOneToOne
-                        message: qsTr("Hi there! Yes, no problem, let me know if I can help.")
-                        anchors.top: labelNameAndMessage.bottom
-                        anchors.topMargin: Style.current.halfPadding
-                        anchors.left: parent.left
                     }
                 }
             }
@@ -348,7 +218,6 @@ ScrollView {
                 text: qsTrId("no-preview-or-advanced--go-to-notification-center")
                 font.pixelSize: 15
                 anchors.left: parent.left
-                anchors.leftMargin: -Style.current.padding
             }
         }
 
@@ -373,33 +242,27 @@ ScrollView {
 
         Column {
             id: column4
-            spacing: Style.current.padding
             anchors.top: sectionHeadlineContacts.bottom
             anchors.topMargin: Style.current.smallPadding
             anchors.left: parent.left
             anchors.right: parent.right
             width: parent.width
-            RowLayout {
-                width: parent.width
-                StyledText {
-                    //% "Receive notifications from non-contacts"
-                    text: qsTrId("receive-notifications-from-non-contacts")
-                    font.pixelSize: 15
-                }
 
-                StatusSwitch {
+            StatusSettingsLineButton {
-                    Layout.alignment: Qt.AlignRight
+                //% "Receive notifications from non-contacts"
-                    checked: appSettings.allowNotificationsFromNonContacts
+                text: qsTrId("receive-notifications-from-non-contacts")
-                    onCheckedChanged: {
+                isSwitch: true
-                        appSettings.allowNotificationsFromNonContacts = checked
+                switchChecked: appSettings.allowNotificationsFromNonContacts
-                    }
+                onClicked: {
+                    appSettings.allowNotificationsFromNonContacts = checked
                 }
             }
 
-            StatusSectionMenuItem {
+            StatusSettingsLineButton {
                 //% "Muted users"
-                label: qsTrId("muted-users")
+                text: qsTrId("muted-users")
-                info: profileModel.mutedContacts.rowCount() > 0 ? profileModel.mutedContacts.rowCount() : qsTr("None")
+                currentValue: profileModel.mutedContacts.rowCount() > 0 ? profileModel.mutedContacts.rowCount() : qsTr("None")
+                isSwitch: false
                 onClicked: {
                     const mutedChatsModal = notificationsContainer.mutedChatsModalComponent.createObject(notificationsContainer, {
                         showMutedContacts: true
@@ -409,12 +272,11 @@ ScrollView {
                 }
             }
 
-            StatusSectionMenuItem {
+            StatusSettingsLineButton {
                 //% "Muted chats"
-                label: qsTrId("muted-chats")
+                text: qsTrId("muted-chats")
-                //% "You can limit what gets shown in notifications"
+                currentValue: profileModel.mutedChats.rowCount() > 0 ? profileModel.mutedChats.rowCount() : qsTr("None")
-                description: qsTrId("you-can-limit-what-gets-shown-in-notifications")
+                isSwitch: false
-                info: profileModel.mutedChats.rowCount() > 0 ? profileModel.mutedChats.rowCount() : qsTr("None")
                 onClicked: {
                     const mutedChatsModal = notificationsContainer.mutedChatsModalComponent.createObject(notificationsContainer, {
                         showMutedContacts: false
@@ -422,6 +284,19 @@ ScrollView {
                     mutedChatsModal.title = qsTr("Muted chats")
                     mutedChatsModal.open()
                 }
+
+                StyledText {
+                    //% "You can limit what gets shown in notifications"
+                    text: qsTrId("you-can-limit-what-gets-shown-in-notifications")
+                    color: Style.current.secondaryText
+                    width: parent.width
+                    font.pixelSize: 12
+                    wrapMode: Text.WordWrap
+                    anchors.left: parent.left
+                    anchors.leftMargin: Style.current.padding
+                    anchors.bottom: parent.bottom
+                    anchors.topMargin: 2
+                }
             }
         }
 
@@ -444,15 +319,12 @@ ScrollView {
             anchors.right: parent.right
             width: parent.width
 
-            Button {
+            StatusButton {
                 flat: true
                 horizontalPadding: 0
-                contentItem: Text {
+                //% "Reset notification settings"
-                    //% "Reset notification settings"
+                text: qsTrId("reset-notification-settings")
-                    text: qsTrId("reset-notification-settings")
+                type: "warn"
-                    font.pixelSize: 15
-                    color: Style.current.red
-                }
                 onClicked: {
                     appSettings.notificationSetting = defaultAppSettings.notificationSetting
                     appSettings.notificationSoundsEnabled = defaultAppSettings.notificationSoundsEnabled

ui/nim-status-client.pro

@@ -211,6 +211,7 @@ DISTFILES += \
     app/AppLayouts/Profile/Sections/BrowserModals/SearchEngineModal.qml \
     app/AppLayouts/Profile/Sections/ChangeProfilePicModal.qml \
     app/AppLayouts/Profile/Sections/MyProfileContainer.qml \
+    app/AppLayouts/Profile/Sections/NotificationAppearancePreview.qml \
     app/AppLayouts/Profile/Sections/OpenLinksWithModal.qml \
     app/AppLayouts/Profile/Sections/SoundsContainer.qml \
     app/AppLayouts/UIComponents/UIComponents.qml \
@@ -435,5 +436,6 @@ DISTFILES += \
     shared/qmldir \
     shared/status/StatusEmojiSuggestionPopup.qml \
     shared/status/StatusInputListPopup.qml \
+    shared/status/StatusRadioButtonRow.qml \
     shared/status/StatusSettingsLineButton.qml \
     sounds/ErrorSound.qml

ui/shared/status/StatusRadioButtonRow.qml

@@ -0,0 +1,57 @@
+import QtQuick 2.13
+import QtQuick.Controls 2.13
+import "../../imports"
+import ".."
+import "."
+
+Rectangle {
+    property alias text: textElement.text
+    property var buttonGroup
+    property bool checked: false
+    property bool isHovered: false
+    signal radioCheckedChanged(checked: bool)
+
+    id: root
+    height: 52
+    color: isHovered ? Style.current.backgroundHover : Style.current.transparent
+    radius: Style.current.radius
+    border.width: 0
+    anchors.left: parent.left
+    anchors.leftMargin: -Style.current.padding
+    anchors.right: parent.right
+    anchors.rightMargin: -Style.current.padding
+
+
+    StyledText {
+        id: textElement
+        text: ""
+        font.pixelSize: 15
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+    }
+
+    StatusRadioButton {
+        id: radioButton
+        anchors.verticalCenter: parent.verticalCenter
+        anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
+        ButtonGroup.group: root.buttonGroup
+        rightPadding: 0
+        checked: root.checked
+        onCheckedChanged: root.radioCheckedChanged(checked)
+    }
+
+    MouseArea {
+        cursorShape: Qt.PointingHandCursor
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
+        onClicked: {
+            if (!radioButton.checked) {
+                root.radioCheckedChanged(true)
+            }
+        }
+    }
+}

ui/shared/status/StatusSettingsLineButton.qml

@@ -3,7 +3,7 @@ import QtGraphicalEffects 1.12
 import "../../imports"
 import ".."
 
-Item {
+Rectangle {
     property string text
     property bool isSwitch: false
     property bool switchChecked: false
@@ -12,13 +12,23 @@ Item {
     property string badgeText: "1"
     property bool isEnabled: true
     signal clicked(bool checked)
+    property bool isHovered: false
 
     id: root
-    height: textItem.height
+    height: 52
-    width: parent.width
+    color: isHovered ? Style.current.backgroundHover : Style.current.transparent
+    radius: Style.current.radius
+    border.width: 0
+    anchors.left: parent.left
+    anchors.leftMargin: -Style.current.padding
+    anchors.right: parent.right
+    anchors.rightMargin: -Style.current.padding
 
     StyledText {
         id: textItem
+        anchors.left: parent.left
+        anchors.leftMargin: Style.current.padding
+        anchors.verticalCenter: parent.verticalCenter
         text: root.text
         font.pixelSize: 15
         color: !root.isEnabled ? Style.current.darkGrey : Style.current.textColor
@@ -37,6 +47,7 @@ Item {
         anchors.right: root.isSwitch ? switchItem.left : caret.left
         anchors.rightMargin: Style.current.padding
         anchors.verticalCenter: textItem.verticalCenter
+
     }
 
     StatusSwitch {
@@ -45,6 +56,7 @@ Item {
         visible: root.isSwitch
         checked: root.switchChecked
         anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
         anchors.verticalCenter: textItem.verticalCenter
     }
 
@@ -70,6 +82,7 @@ Item {
         id: caret
         visible: !root.isSwitch
         anchors.right: parent.right
+        anchors.rightMargin: Style.current.padding
         anchors.verticalCenter: textItem.verticalCenter
         source: "../../app/img/caret.svg"
         width: 13
@@ -85,6 +98,9 @@ Item {
     MouseArea {
         anchors.fill: parent
         enabled: root.isEnabled
+        hoverEnabled: true
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
         onClicked: {
             root.clicked(!root.switchChecked)
         }