added new controls elements (BasicButtonType, ImageButtonType, LabelWithButtonType, TextFieldWithHeaderType)

client/ui/qml/Controls2/BasicButtonType.qml

@@ -0,0 +1,57 @@
+import QtQuick
+import QtQuick.Controls
+
+Button {
+    id: root
+
+    property string hoveredColor: "#C1C2C5"
+    property string defaultColor: "#D7D8DB"
+    property string disabledColor: "#494B50"
+    property string pressedColor: "#979799"
+
+    property string textColor: "#0E0E11"
+
+    property string borderColor: "#D7D8DB"
+    property int borderWidth: 0
+
+    implicitWidth: 328
+    implicitHeight: 56
+
+    hoverEnabled: true
+
+    background: Rectangle {
+        id: background
+        anchors.fill: parent
+        radius: 16
+        color: {
+            if (root.enabled) {
+                if(root.pressed) {
+                    return pressedColor
+                }
+                return hovered ? hoveredColor : defaultColor
+            } else {
+                return disabledColor
+            }
+        }
+        border.color: borderColor
+        border.width: borderWidth
+    }
+
+    MouseArea {
+        anchors.fill: background
+        enabled: false
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Text {
+        anchors.fill: background
+        font.family: "PT Root UI"
+        font.styleName: "normal"
+        font.weight: 400
+        font.pixelSize: 16
+        color: textColor
+        text: root.text
+        horizontalAlignment: Text.AlignHCenter
+        verticalAlignment: Text.AlignVCenter
+    }
+}

client/ui/qml/Controls2/ImageButtonType.qml

@@ -0,0 +1,44 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Button {
+    id: root
+
+    property string image
+
+    property string hoveredColor: Qt.rgba(255, 255, 255, 0.08)
+    property string defaultColor: Qt.rgba(255, 255, 255, 0)
+    property string pressedColor: Qt.rgba(255, 255, 255, 0.12)
+
+    property string imageColor: "#878B91"
+
+    implicitWidth: 40
+    implicitHeight: 40
+
+    hoverEnabled: true
+
+    icon.source: image
+    icon.color: imageColor
+
+    background: Rectangle {
+        id: background
+
+        anchors.fill: parent
+        radius: 12
+        color: {
+            if (root.enabled) {
+                if(root.pressed) {
+                    return pressedColor
+                }
+                return hovered ? hoveredColor : defaultColor
+            }
+        }
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        enabled: false
+        cursorShape: Qt.PointingHandCursor
+    }
+}

client/ui/qml/Controls2/LabelWithButtonType.qml

@@ -0,0 +1,43 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    property string text
+
+    property var onClickedFunc
+    property alias buttonImage : button.image
+
+    implicitWidth: 360
+    implicitHeight: 72
+
+    RowLayout {
+        anchors.fill: parent
+
+        Text {
+            font.family: "PT Root UI"
+            font.styleName: "normal"
+            font.pixelSize: 18
+            color: "#d7d8db"
+            text: root.text
+            horizontalAlignment: Text.AlignLeft
+            verticalAlignment: Text.AlignVCenter
+        }
+
+        ImageButtonType {
+            id: button
+
+            image: buttonImage
+            onClicked: {
+                if (onClickedFunc && typeof onClickedFunc === "function") {
+                    onClickedFunc()
+                }
+            }
+
+            Layout.alignment: Qt.AlignRight
+        }
+    }
+
+}

client/ui/qml/Controls2/TextFieldWithHeaderType.qml

@@ -0,0 +1,68 @@
+import QtQuick
+import QtQuick.Controls
+import QtQuick.Layouts
+
+Item {
+    id: root
+
+    property string headerText
+    property string textFieldText
+    property bool textFieldEditable: true
+
+    implicitWidth: 328
+    implicitHeight: 74
+
+    Rectangle {
+        id: backgroud
+        anchors.fill: parent
+        color: "#1c1d21"
+        radius: 16
+        border.color: "#d7d8db"
+        border.width: textField.focus ? 1 : 0
+    }
+
+    ColumnLayout {
+        anchors.fill: backgroud
+
+        Text {
+            text: root.headerText
+            color: "#878b91"
+            font.pixelSize: 13
+            font.weight: 400
+            font.family: "PT Root UI VF"
+            font.letterSpacing: 0.02
+
+            height: 16
+            Layout.fillWidth: true
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            Layout.topMargin: 16
+        }
+
+        TextField {
+            id: textField
+
+            enabled: root.textFieldEditable
+            text: root.textFieldText
+            color: "#d7d8db"
+            font.pixelSize: 16
+            font.weight: 400
+            font.family: "PT Root UI VF"
+
+            height: 24
+            Layout.fillWidth: true
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            Layout.bottomMargin: 16
+            topPadding: 0
+            rightPadding: 0
+            leftPadding: 0
+            bottomPadding: 0
+
+            background: Rectangle {
+                anchors.fill: parent
+                color: "#1c1d21"
+            }
+        }
+    }
+}