diff --git a/src/qml/controls/ContinueButton.qml b/src/qml/controls/ContinueButton.qml index d478ba45e8..81e100d65d 100644 --- a/src/qml/controls/ContinueButton.qml +++ b/src/qml/controls/ContinueButton.qml @@ -6,6 +6,7 @@ import QtQuick 2.15 import QtQuick.Controls 2.15 Button { + id: root font.family: "Inter" font.styleName: "Semi Bold" font.pixelSize: 18 @@ -17,9 +18,47 @@ Button { verticalAlignment: Text.AlignVCenter } background: Rectangle { + id: bg implicitHeight: 46 implicitWidth: 300 color: Theme.color.orange radius: 5 + state:"DEFAULT" + + states: [ + State { + name: "DEFAULT" + PropertyChanges { target: bg; color: Theme.color.orange } + }, + State { + name: "HOVER" + PropertyChanges { target: bg; color: Theme.color.orangeLight1 } + }, + State { + name: "PRESSED" + PropertyChanges { target: bg; color: Theme.color.orangeLight2 } + } + ] + + Behavior on color { + ColorAnimation { duration: 150 } + } + } + MouseArea { + anchors.fill: parent + hoverEnabled: true + onEntered: { + root.background.state = "HOVER" + } + onExited: { + root.background.state = "DEFAULT" + } + onPressed: { + root.background.state = "PRESSED" + } + onReleased: { + root.background.state = "DEFAULT" + root.clicked() + } } } diff --git a/src/qml/controls/Theme.qml b/src/qml/controls/Theme.qml index c85f18161c..4227dac1ec 100644 --- a/src/qml/controls/Theme.qml +++ b/src/qml/controls/Theme.qml @@ -11,6 +11,8 @@ Control { required property color white required property color background required property color orange + required property color orangeLight1 + required property color orangeLight2 required property color red required property color green required property color blue @@ -38,6 +40,8 @@ Control { white: "#FFFFFF" background: "black" orange: "#F89B2A" + orangeLight1: "#FFAD4A" + orangeLight2: "#FFBF72" red: "#EC6363" green: "#36B46B" blue: "#3CA3DE" @@ -59,6 +63,8 @@ Control { white: "#FFFFFF" background: "white" orange: "#F7931A" + orangeLight1: "#FFAD4A" + orangeLight2: "#FFBF72" red: "#EB5757" green: "#27AE60" blue: "#2D9CDB"