CreateNewListPage.qml

import QtQuick 2.0
import QtQuick.Controls 2.5
import QtGraphicalEffects 1.12

Item {
    Rectangle{
        width: 580
        height: 360


        Rectangle{
            width: 330
            height: 40

            Image {
                source: "qrc:/../../Desktop/header1.png"
                y: 10
                x: 10
                z: 2
            }

            Rectangle{
                color: "#e9e9e8"
                width: 130
                height: 37
                x: 50
                y: 12
                z: 1
                radius: 20

                Button {
                    x: 22
                    id: buttonBack


                    background: Rectangle {
                        id: rectangle
                        height: 30
                        color: "transparent"
                        anchors.verticalCenter: parent.verticalCenter
                    }
                    contentItem: Text {
                        id: textContent
                        text: qsTr("My Lists")
                        color: "blue"
                        font.underline: true
                        font.pointSize: 15
                    }

                    states:[
                        State {
                            name: "Hovering"
                            PropertyChanges {
                                target: textContent
                                color: "white"
                                font.underline: false
                            }
                            PropertyChanges {
                                target: rectangle
                                color: "blue"
                            }
                        }]

                    MouseArea{
                        hoverEnabled: true
                        anchors.fill: buttonBack
                        onEntered: { buttonBack.state='Hovering'}
                        onExited: { buttonBack.state=''}
                        onClicked:{
                            myStackView.pop()
                        }
                    }
                }

            }
        }


        Rectangle{
            width: 250
            height: 50
            x: 30
            y: 60
            Text {
                text: qsTr("Name your new list")
                font.bold: true
                font.pointSize: 10
                anchors.verticalCenter: parent.verticalCenter
            }

            Text {
                text: qsTr("(Ex: \"Things I need to do today\")");
                font.pointSize: 7
                x: 135
                color: "grey"
                anchors.verticalCenter: parent.verticalCenter
            }
        }

        Rectangle{
            width: 350
            height: 30
            y: 100
            x: 30
            border.color: "#7b9cd3"
            border.width: 1

            TextInput {
                id: textInput
                anchors.topMargin: 3
                cursorVisible: true
                anchors.fill: parent
                font.bold: true
                font.pointSize: 14
            }

        }


        Rectangle{
            width: 280
            height: 30
            y: 145
            x: 30

            Button{
                height: 20
                text: "Create this list"
                onClicked: {
                    controller.addList(textInput.text)
                    myStackView.push(firstPage)
                }

                background: Rectangle{
                    id: rect1
                    anchors.fill: parent
                    radius: 20
                    border.color: "#88b6cf"
                    gradient: Gradient {
                            GradientStop { position: 0.0; color: "#fcfefe" }
                            GradientStop { position: 1.0; color: "#d5e8f3" }
                        }
                }

            }

            Text {
                x: 105
                y: 5
                text: qsTr(" or ")

            }

            Button{
                id: buttonCancel
                width: 35
                height: 15
                x: 140
                y: 5

                Text {
                    id: textCancel
                    text: qsTr("Cancel")
                    color: "red"
                    font.underline: true
                }
                background: Rectangle{
                    id: rectangleCancel
                    anchors.fill: parent
                    color: "transparent"
                }

                states:[
                    State {
                        name: "Hovering"
                        PropertyChanges {
                            target: textCancel
                            color: "white"
                            font.underline: false
                        }
                        PropertyChanges {
                            target: rectangleCancel
                            color: "red"
                        }
                    }]

                MouseArea{
                    hoverEnabled: true
                    anchors.fill: buttonCancel
                    onEntered: { buttonCancel.state='Hovering'}
                    onExited: { buttonCancel.state=''}
                    onClicked:{
                        myStackView.pop()
                    }
                }
            }

        }


    }
}