checkbox: remove a gap between rectangle and text, fix layout

components/CheckBox.qml

@@ -31,7 +31,7 @@ import QtQuick.Layouts 1.1
 
 import "../components" as MoneroComponents
 
-RowLayout {
+Item {
     id: checkBox
     property alias text: label.text
     property string checkedIcon: "../images/checkedIcon-black.png"
@@ -42,6 +42,7 @@ RowLayout {
     property alias fontColor: label.color
     signal clicked()
     height: 25 * scaleRatio
+    width: checkBoxLayout.width
 
     function toggle(){
         checkBox.checked = !checkBox.checked
@@ -49,13 +50,17 @@ RowLayout {
     }
 
     RowLayout {
-        Layout.fillWidth: true
+        id: checkBoxLayout
+
+        Item {
+            id: checkMark
+            height: checkBox.height
+            width: checkBox.height
+
             Rectangle {
-            anchors.left: parent.left
+                id: backgroundRect
-            width: 25 * scaleRatio
+                anchors.fill: parent
-            height: checkBox.height - 1
                 radius: 3
-            y: 0
                 color: "transparent"
                 border.color:
                     if(checkBox.checked){
@@ -65,27 +70,11 @@ RowLayout {
                     }
             }
 
-        Rectangle {
-            id: backgroundRect
-            anchors.left: parent.left
-            width: 25 * scaleRatio
-            height: checkBox.height - 1
-            y: 1
-            color: "transparent"
-
             Image {
                 anchors.centerIn: parent
                 source: checkBox.checkedIcon
                 visible: checkBox.checked
             }
-
-            MouseArea {
-                anchors.fill: parent
-                cursorShape: Qt.PointingHandCursor
-                onClicked: {
-                    toggle()
-                }
-            }
         }
 
         Text {
@@ -94,9 +83,10 @@ RowLayout {
             font.pixelSize: checkBox.fontSize
             color: MoneroComponents.Style.defaultFontColor
             wrapMode: Text.Wrap
-            Layout.fillWidth: true
+            Layout.leftMargin: !isMobile ? 10 : 8
-            anchors.left: backgroundRect.right
+        }
-            anchors.leftMargin: !isMobile ? 10 : 8
+    }
+
     MouseArea {
         anchors.fill: parent
         cursorShape: Qt.PointingHandCursor
@@ -104,6 +94,4 @@ RowLayout {
             toggle()
         }
     }
-        }
-    }
 }