TelltalePanel.qml

import QtQuick

Item {
    id: root

    property bool warningGeneral: false
    property bool absActive: false
    property bool espActive: false
    property bool oilLow: false
    property bool batteryLow: false
    property bool engineCheck: false
    property bool seatbeltOff: true
    property bool doorOpen: false
    property bool lowBeam: true
    property bool highBeam: false
    property bool fogLights: false
    property color borderAccent: "#262d3d"           // NEW

    implicitWidth: 600
    implicitHeight: 50

    Rectangle {
        anchors.fill: parent
        radius: 8
        color: "#10141f"
        border.color: root.borderAccent
        border.width: 1.5
        Behavior on border.color { ColorAnimation { duration: 400 } }
    }

    Row {
        anchors.centerIn: parent
        spacing: 6

        WarningLight { label: "!";   active: root.warningGeneral; activeColor: "#ff5252" }
        WarningLight { label: "ABS"; active: root.absActive;      activeColor: "#ffaa00" }
        WarningLight { label: "ESP"; active: root.espActive;      activeColor: "#ffaa00" }
        WarningLight { label: "OIL"; active: root.oilLow;         activeColor: "#ff5252" }
        WarningLight { label: "BAT"; active: root.batteryLow;     activeColor: "#ff5252" }
        WarningLight { label: "ENG"; active: root.engineCheck;    activeColor: "#ffaa00" }
        WarningLight { label: "SBL"; active: root.seatbeltOff;    activeColor: "#ff5252" }
        WarningLight { label: "DRS"; active: root.doorOpen;       activeColor: "#ffaa00" }
        WarningLight { label: "LO";  active: root.lowBeam;        activeColor: "#00c896" }
        WarningLight { label: "HI";  active: root.highBeam;       activeColor: "#3b8ed4" }
        WarningLight { label: "FOG"; active: root.fogLights;      activeColor: "#00c896" }
    }
}