1 files changed, 38 insertions, 16 deletions
diff --git a/modules/controlcenter/network/EthernetList.qml b/modules/controlcenter/network/EthernetList.qml
index bdc43e8..e0d4b3f 100644
--- a/modules/controlcenter/network/EthernetList.qml
+++ b/modules/controlcenter/network/EthernetList.qml
@@ -56,14 +56,20 @@ DeviceList {
 
     delegate: Component {
         StyledRect {
+            id: ethernetItem
+
             required property var modelData
+            readonly property bool isActive: root.activeItem && modelData && root.activeItem.interface === modelData.interface
 
             width: ListView.view ? ListView.view.width : undefined
+            implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
 
-            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, root.activeItem === modelData ? Colours.tPalette.m3surfaceContainer.a : 0)
+            color: Qt.alpha(Colours.tPalette.m3surfaceContainer, ethernetItem.isActive ? Colours.tPalette.m3surfaceContainer.a : 0)
             radius: Appearance.rounding.normal
 
             StateLayer {
+                id: stateLayer
+
                 function onClicked(): void {
                     root.session.ethernet.active = modelData;
                 }
@@ -72,9 +78,7 @@ DeviceList {
             RowLayout {
                 id: rowLayout
 
-                anchors.left: parent.left
-                anchors.right: parent.right
-                anchors.verticalCenter: parent.verticalCenter
+                anchors.fill: parent
                 anchors.margins: Appearance.padding.normal
 
                 spacing: Appearance.spacing.normal
@@ -86,6 +90,12 @@ DeviceList {
                     radius: Appearance.rounding.normal
                     color: modelData.connected ? Colours.palette.m3primaryContainer : Colours.tPalette.m3surfaceContainerHigh
 
+                    StyledRect {
+                        anchors.fill: parent
+                        radius: parent.radius
+                        color: Qt.alpha(modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface, stateLayer.pressed ? 0.1 : stateLayer.containsMouse ? 0.08 : 0)
+                    }
+
                     MaterialIcon {
                         id: icon
 
@@ -94,25 +104,36 @@ DeviceList {
                         font.pointSize: Appearance.font.size.large
                         fill: modelData.connected ? 1 : 0
                         color: modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+
+                        Behavior on fill {
+                            Anim {}
+                        }
                     }
                 }
 
-                StyledText {
+                ColumnLayout {
                     Layout.fillWidth: true
-                    elide: Text.ElideRight
-                    maximumLineCount: 1
 
-                    text: modelData.interface || qsTr("Unknown")
-                }
+                    spacing: 0
 
-                StyledText {
-                    text: modelData.connected ? qsTr("Connected") : qsTr("Disconnected")
-                    color: modelData.connected ? Colours.palette.m3primary : Colours.palette.m3outline
-                    font.pointSize: Appearance.font.size.small
-                    font.weight: modelData.connected ? 500 : 400
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: modelData.interface || qsTr("Unknown")
+                        elide: Text.ElideRight
+                    }
+
+                    StyledText {
+                        Layout.fillWidth: true
+                        text: modelData.connected ? qsTr("Connected") : qsTr("Disconnected")
+                        color: Colours.palette.m3outline
+                        font.pointSize: Appearance.font.size.small
+                        elide: Text.ElideRight
+                    }
                 }
 
                 StyledRect {
+                    id: connectBtn
+
                     implicitWidth: implicitHeight
                     implicitHeight: connectIcon.implicitHeight + Appearance.padding.smaller * 2
 
@@ -120,6 +141,8 @@ DeviceList {
                     color: Qt.alpha(Colours.palette.m3primaryContainer, modelData.connected ? 1 : 0)
 
                     StateLayer {
+                        color: modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
+
                         function onClicked(): void {
                             if (modelData.connected && modelData.connection) {
                                 Nmcli.disconnectEthernet(modelData.connection, () => {});
@@ -133,13 +156,12 @@ DeviceList {
                         id: connectIcon
 
                         anchors.centerIn: parent
+                        animate: true
                         text: modelData.connected ? "link_off" : "link"
                         color: modelData.connected ? Colours.palette.m3onPrimaryContainer : Colours.palette.m3onSurface
                     }
                 }
             }
-
-            implicitHeight: rowLayout.implicitHeight + Appearance.padding.normal * 2
         }
     }