added CheckBoxType

- added hover effect to LabelWithButtonType

client/images/controls/check.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 6L9 17L4 12" stroke="#CBCBCB" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

client/resources.qrc

@@ -174,5 +174,7 @@
         <file>images/controls/chevron-right.svg</file>
         <file>ui/qml/Controls2/ImageButtonType.qml</file>
         <file>ui/qml/Controls2/CardType.qml</file>
+        <file>ui/qml/Controls2/CheckBoxType.qml</file>
+        <file>images/controls/check.svg</file>
     </qresource>
 </RCC>

client/ui/qml/Controls2/CardType.qml

@@ -9,15 +9,16 @@ RadioButton {
     property string bodyText
     property string footerText
 
-    property string hoveredColor: Qt.rgba(255, 255, 255, 0)
+    property string hoveredColor: Qt.rgba(255, 255, 255, 0.05)
-    property string defaultColor: Qt.rgba(255, 255, 255, 0.05)
+    property string defaultColor: Qt.rgba(255, 255, 255, 0)
     property string disabledColor: Qt.rgba(255, 255, 255, 0)
     property string pressedColor: Qt.rgba(255, 255, 255, 0.05)
 
     property string textColor: "#0E0E11"
 
     property string pressedBorderColor: Qt.rgba(251, 178, 106, 0.3)
-    property string hoveredBorderColor: Qt.rgba(251, 178, 106, 1)
+    property string hoveredBorderColor: "transparent"
+    property string defaultBodredColor: "#FBB26A"
     property int borderWidth: 0
 
     implicitWidth: content.implicitWidth
@@ -44,9 +45,9 @@ RadioButton {
                 if(root.checked) {
                     return pressedBorderColor
                 }
-                return hovered ? hoveredBorderColor : defaultColor
+                return hovered ? hoveredBorderColor : defaultBodredColor
             } else {
-                return disabledColor
+                return defaultBodredColor
             }
         }
         border.width: {
@@ -54,7 +55,7 @@ RadioButton {
                 if(root.checked) {
                     return 1
                 }
-                return hovered ? 1 : 0
+                return hovered ? 0 : 1
             } else {
                 return 0
             }
@@ -72,7 +73,7 @@ RadioButton {
 
         Text {
             text: root.headerText
-            color: "#878b91"
+            color: "#D7D8DB"
             font.pixelSize: 25
             font.weight: 700
             font.family: "PT Root UI VF"
@@ -87,7 +88,7 @@ RadioButton {
         Text {
             text: root.bodyText
             wrapMode: Text.WordWrap
-            color: "#878b91"
+            color: "#D7D8DB"
             font.pixelSize: 16
             font.weight: 400
             font.family: "PT Root UI VF"
@@ -103,7 +104,7 @@ RadioButton {
             text: root.footerText
             visible: root.footerText !== ""
             enabled: root.footerText !== ""
-            color: "#878b91"
+            color: "#878B91"
             font.pixelSize: 13
             font.weight: 400
             font.family: "PT Root UI VF"

client/ui/qml/Controls2/CheckBoxType.qml

@@ -0,0 +1,77 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    implicitWidth: content.implicitWidth
+    implicitHeight: content.implicitHeight
+
+    RowLayout {
+        id: content
+
+        anchors.fill: parent
+
+        CheckBox {
+            id: checkBox
+
+            implicitWidth: 56
+            implicitHeight: 56
+
+            indicator: Image {
+                id: indicator
+                anchors.verticalCenter: checkBox.verticalCenter
+                anchors.horizontalCenter: checkBox.horizontalCenter
+                source: checkBox.checked ? "qrc:/images/controls/check.svg" : ""
+            }
+            Rectangle {
+                anchors.verticalCenter: checkBox.verticalCenter
+                anchors.horizontalCenter: checkBox.horizontalCenter
+                width: 24
+                height: 24
+                color: "transparent"
+                border.color: "#FBB26A"
+                border.width: 1
+                radius: 4
+            }
+            background: Rectangle {
+                id: background
+                color: Qt.rgba(255, 255, 255, 0.05)
+                radius: 16
+            }
+        }
+
+        ColumnLayout {
+            Text {
+                text: "Paragraph"
+                color: "#D7D8DB"
+                font.pixelSize: 18
+                font.weight: 400
+                font.family: "PT Root UI VF"
+
+                height: 22
+                Layout.fillWidth: true
+            }
+
+            Text {
+                text: "Caption"
+                color: "#878b91"
+                font.pixelSize: 13
+                font.weight: 400
+                font.family: "PT Root UI VF"
+                font.letterSpacing: 0.02
+
+                height: 16
+                Layout.fillWidth: true
+            }
+        }
+    }
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        onClicked: {
+            checkBox.checked = !checkBox.checked
+        }
+    }
+}

client/ui/qml/Controls2/ImageButtonType.qml

@@ -8,7 +8,7 @@ Button {
     property string image
 
     property string hoveredColor: Qt.rgba(255, 255, 255, 0.08)
-    property string defaultColor: Qt.rgba(255, 255, 255, 0)
+    property string defaultColor: "transparent"
     property string pressedColor: Qt.rgba(255, 255, 255, 0.12)
 
     property string imageColor: "#878B91"
@@ -34,6 +34,9 @@ Button {
                 return hovered ? hoveredColor : defaultColor
             }
         }
+        Behavior on color {
+            PropertyAnimation { duration: 200 }
+        }
     }
 
     MouseArea {

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -29,6 +29,7 @@ Item {
         ImageButtonType {
             id: button
 
+            hoverEnabled: false
             image: buttonImage
             onClicked: {
                 if (onClickedFunc && typeof onClickedFunc === "function") {
@@ -37,7 +38,39 @@ Item {
             }
 
             Layout.alignment: Qt.AlignRight
+
+            Rectangle {
+                id: imageBackground
+                anchors.fill: button
+                radius: 12
+                color: "transparent"
+
+
+                Behavior on color {
+                    PropertyAnimation { duration: 200 }
+                }
+            }
         }
     }
+    MouseArea {
+        anchors.fill: parent
+        cursorShape: Qt.PointingHandCursor
+        hoverEnabled: true
 
+        onEntered: {
+            imageBackground.color = button.hoveredColor
+        }
+
+        onExited: {
+            imageBackground.color = button.defaultColor
+        }
+
+        onPressedChanged: {
+            imageBackground.color = pressed ? button.pressedColor : entered ? button.hoveredColor : button.defaultColor
+        }
+
+        onClicked: {
+            button.clicked()
+        }
+    }
 }

client/ui/qml/Pages/PageTest.qml

@@ -117,6 +117,10 @@ PageBase {
                 bodyText: "Многие иностранные сайты и VPN-провайдеры заблокированы"
                 footerText: "футер"
             }
+
+            CheckBoxType {
+//                text: qsTr("Auto-negotiate encryption")
+            }
         }
     }
 }