feat: checkbox style

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

@@ -63,7 +63,7 @@ Rectangle {
         source: "../../../img/list-next.svg"
     }
 
-    CheckBox  {
+    StatusCheckBox  {
         id: assetCheck
         visible: !showListSelector && showCheckbox && !isUser
         anchors.top: accountImage.top

ui/app/AppLayouts/Profile/Sections/Ens/TermsAndConditions.qml

@@ -248,7 +248,7 @@ Item {
                 anchors.topMargin: 24
             }
 
-            CheckBox {
+            StatusCheckBox {
                 id: termsAndConditionsCheckbox
                 anchors.top: keyLbl.bottom
                 anchors.topMargin: Style.current.padding

ui/app/AppLayouts/Wallet/components/TokenSettingsModalContent.qml

@@ -4,6 +4,7 @@ import QtQuick.Layouts 1.13
 
 import "../../../../imports"
 import "../../../../shared"
+import "../../../../shared/status"
 import "../../Chat/ContactsColumn"
 import "../data/"
 
@@ -60,7 +61,7 @@ Item {
                 font.pixelSize: 15
                 width: 330
             }
-            CheckBox  {
+            StatusCheckBox  {
                 id: assetCheck
                 checked: walletModel.hasAsset("0x123", symbol)
                 anchors.left: assetFullTokenName.right

ui/onboarding/Intro.qml

@@ -2,6 +2,7 @@ import QtQuick 2.13
 import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.13
 import "../shared"
+import "../shared/status"
 import "../imports"
 
 RowLayout {
@@ -91,7 +92,7 @@ RowLayout {
             wrapMode: Text.Wrap
         }
 
-        CheckBox {
+        StatusCheckBox {
             id: warningCheckBox
             anchors.top: warningMessage.bottom
             anchors.topMargin: 0

ui/shared/img/checkmark.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.76413 9.69006L12.3248 4.27888C12.7068 3.90717 13.3248 3.90591 13.7111 4.28187C14.0948 4.65523 14.0968 5.25861 13.7142 5.63093L7.45575 11.7211C7.26582 11.906 7.01753 11.9992 6.76838 12C6.51183 11.9981 6.26284 11.9063 6.07584 11.7244L3.28423 9.0078C2.9041 8.63789 2.90429 8.03795 3.29064 7.66199C3.67431 7.28863 4.29863 7.29084 4.67363 7.65576L6.76413 9.69006Z" fill="white"/>
+</svg>

ui/shared/status/StatusCheckBox.qml

@@ -0,0 +1,34 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtGraphicalEffects 1.13
+import "../../imports"
+import "../../shared"
+
+CheckBox {
+    id: control
+
+    indicator: Rectangle {
+        implicitWidth: 18
+        implicitHeight: 18
+        x: control.leftPadding
+        y: parent.height / 2 - height / 2
+        radius: 3
+        color: (control.down || control.checked) ? Style.current.blue : Style.current.grey
+
+        Image {
+            source: "../img/checkmark.svg"
+            width: 16
+            height: 16
+            anchors.centerIn: parent
+            visible: control.down || control.checked
+        }
+    }
+
+    contentItem: StyledText {
+        text: control.text
+        opacity: enabled ? 1.0 : 0.3
+        verticalAlignment: Text.AlignVCenter
+        leftPadding: !!control.text ? control.indicator.width + control.spacing : control.indicator.width
+    }
+}
+