Adjusted badge positions as designs. Fixes #1619

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

@@ -32,42 +32,12 @@ Item {
             text: qsTrId("security")
         }
 
-        Item {
+        StatusSettingsLineButton {
-            id: backupSeedPhrase
-            height: backupText.height
-            width: parent.width
-
-            StyledText {
-                id: backupText
-                //% "Backup Seed Phrase"
             text: qsTrId("backup-seed-phrase")
-                font.pixelSize: 15
+            isBadge: !profileModel.mnemonic.isBackedUp
-                color: !badge.visible ? Style.current.darkGrey : Style.current.textColor
+            isEnabled: !profileModel.mnemonic.isBackedUp
-            }
+            onClicked: {
-
+                backupSeedModal.open()
-            Rectangle {
-                id: badge
-                visible: !profileModel.mnemonic.isBackedUp
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 0
-                radius: 9
-                color: Style.current.blue
-                width: 18
-                height: 18
-                Text {
-                    font.pixelSize: 12
-                    color: Style.current.white
-                    anchors.centerIn: parent
-                    text: "1"
-                }
-            }
-
-            MouseArea {
-                enabled: !profileModel.mnemonic.isBackedUp
-                anchors.fill: parent
-                onClicked: backupSeedModal.open()
-                cursorShape: enabled ? Qt.PointingHandCursor : Qt.ArrowCursor
             }
         }
 

ui/app/AppMain.qml

@@ -202,15 +202,24 @@ RowLayout {
               anchors.topMargin: 0
 
               Rectangle {
+                  id: chatBadge
                   visible: chatsModel.unreadMessagesCount > 0
                   anchors.top: parent.top
                   anchors.left: parent.right
-                  anchors.leftMargin: -10
+                  anchors.leftMargin: -16
-                  anchors.topMargin: -5
+                  anchors.topMargin: 1
-                  radius: width / 2
+                  radius: height / 2
+                  color: Style.current.white
+                  width: chatsModel.unreadMessagesCount < 10 ? 22 : messageCount.width + 14
+                  height: 22
+
+                  Rectangle {
+                    anchors.centerIn: parent
+                    width: parent.width - 4
+                    height: parent.height - 4
+                    radius: height / 2
                     color: Style.current.blue
-                  width: chatsModel.unreadMessagesCount < 10 ? 18 : messageCount.width + 10
+
-                  height: 18
                     Text {
                         id: messageCount
                         font.pixelSize: chatsModel.unreadMessagesCount > 99 ? 10 : 12
@@ -220,6 +229,7 @@ RowLayout {
                     }
                   }
               }
+        }
 
         StatusIconTabButton {
               id: walletBtn
@@ -252,12 +262,20 @@ RowLayout {
                 visible: !profileModel.mnemonic.isBackedUp && sLayout.children[sLayout.currentIndex] !== profileLayoutContainer
                 anchors.top: parent.top
                 anchors.left: parent.right
-                anchors.leftMargin: -10
+                anchors.leftMargin: -17
-                anchors.topMargin: -5
+                anchors.topMargin: -2
-                radius: width / 2
+                radius: height / 2
+                color: Style.current.white
+                width: 22
+                height: 22
+
+                Rectangle {
+                    anchors.centerIn: parent
+                    width: parent.width - 4
+                    height: parent.height - 4
+                    radius: height / 2
                     color: Style.current.blue
-                width: 18
+
-                height: 18
                     Text {
                         font.pixelSize: 12
                         color: Style.current.white
@@ -266,6 +284,7 @@ RowLayout {
                     }
                 }
             }
+        }
 
         StatusIconTabButton {
               id: nodeBtn

ui/shared/status/StatusSettingsLineButton.qml

@@ -8,6 +8,9 @@ Item {
     property bool isSwitch: false
     property bool switchChecked: false
     property string currentValue
+    property bool isBadge: false
+    property string badgeText: "1"
+    property bool isEnabled: true
     signal clicked(bool checked)
 
     id: root
@@ -18,6 +21,7 @@ Item {
         id: textItem
         text: root.text
         font.pixelSize: 15
+        color: !root.isEnabled ? Style.current.darkGrey : Style.current.textColor
     }
 
     StyledText {
@@ -37,12 +41,31 @@ Item {
 
     StatusSwitch {
         id: switchItem
+        enabled: root.isEnabled
         visible: root.isSwitch
         checked: root.switchChecked
         anchors.right: parent.right
         anchors.verticalCenter: textItem.verticalCenter
     }
 
+    Rectangle {
+        id: badge
+        visible: root.isBadge & !root.isSwitch
+        anchors.right: root.isSwitch ? switchItem.left : caret.left
+        anchors.rightMargin: Style.current.padding
+        anchors.verticalCenter: textItem.verticalCenter
+        radius: 9
+        color: Style.current.blue
+        width: 18
+        height: 18
+        Text {
+            font.pixelSize: 12
+            color: Style.current.white
+            anchors.centerIn: parent
+            text: root.badgeText
+        }
+    }
+
     SVGImage {
         id: caret
         visible: !root.isSwitch
@@ -61,6 +84,7 @@ Item {
 
     MouseArea {
         anchors.fill: parent
+        enabled: root.isEnabled
         onClicked: {
             root.clicked(!root.switchChecked)
         }