WaterLevelSensor/ConnectButton.qml

import QtQuick
import QtQuick.Effects
import QtQuick.Controls
import QtQuick.Controls.Material

Rectangle {
    id: root
    property color accent_color: "#00000000"
    property color font_color: "#00000000"
    property int font_enlarged_text_size: 20
    property int font_normal_text_size: 16
    property string text: "Connect"
    property string text2: "Stop"
    property int mode: 0
    signal connect;
    layer.enabled: true
    layer.effect: MultiEffect {
        shadowEnabled: true
    }

    Text {
        anchors.centerIn: parent
        font.pointSize:  root.font_enlarged_text_size
        color: root.font_color
        text: mode ? root.text2 : root.text
        horizontalAlignment: Text.AlignHCenter
    }

    radius: 5
    border {
        color: root.accent_color
        width: 0.5
    }
    MouseArea {
        id: settings_button_area
        anchors.fill: parent
        hoverEnabled: true
        property color settings_rect_pressed_prev: "#00000000"
        property color settings_rect_entered_prev: "#00000000"
        onEntered:  {
            settings_rect_entered_prev = root.color
            root.color = "#5A1F1F1F"
        }
        onExited: {
            root.color = settings_rect_entered_prev
        }
        onPressed: {
            settings_rect_pressed_prev = root.color
            root.color = "#5A1F4F1F"
            root.connect();
            switchMode();
        }
        onReleased: {
            root.color = settings_rect_pressed_prev
        }
    }
    function switchMode() {
        if(root.mode === 0)
            root.mode = 1
        else
            root.mode = 0;
    }
}