fix: fix design of appearance in settings

ui/app/AppLayouts/Profile/Sections/AppearanceContainer.qml

@@ -192,8 +192,8 @@ ScrollView {
                 image.height: 186
                 control.text: qsTr("Normal")
                 control.checked: !appSettings.compactMode
-                control.onCheckedChanged: {
-                    if (control.checked) {
+                onRadioCheckedChanged: {
+                    if (checked) {
                         appSettings.compactMode = false
                     }
                 }
@@ -205,8 +205,8 @@ ScrollView {
                 image.height: 186
                 control.text: qsTr("Compact")
                 control.checked: appSettings.compactMode
-                control.onCheckedChanged: {
-                    if (control.checked) {
+                onRadioCheckedChanged: {
+                    if (checked) {
                         appSettings.compactMode = true
                     }
                 }
@@ -239,8 +239,8 @@ ScrollView {
                 image.height: 128
                 control.text: qsTr("Light")
                 control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Light
-                control.onClicked: {
-                    if (control.checked) {
+                onRadioCheckedChanged: {
+                    if (checked) {
                         root.updateTheme(AppearanceContainer.Theme.Light)
                     }
                 }
@@ -254,8 +254,8 @@ ScrollView {
                 image.height: 128
                 control.text: qsTr("Dark")
                 control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.Dark
-                control.onClicked: {
-                    if (control.checked) {
+                onRadioCheckedChanged: {
+                    if (checked) {
                         root.updateTheme(AppearanceContainer.Theme.Dark)
                     }
                 }
@@ -269,8 +269,8 @@ ScrollView {
                 image.height: 128
                 control.text: qsTr("System")
                 control.checked: profileModel.profile.appearance === AppearanceContainer.Theme.System
-                control.onClicked: {
-                    if (control.checked) {
+                onRadioCheckedChanged: {
+                    if (checked) {
                         root.updateTheme(AppearanceContainer.Theme.System)
                     }
                 }

ui/shared/status/StatusImageRadioButton.qml

@@ -11,10 +11,13 @@ Rectangle {
     property int padding: Style.current.padding
     property alias control: radioControl
     property alias image: img
+    property bool isHovered: false
+    signal radioCheckedChanged(checked: bool)
 
     width: 312
     height: 258
-    color: radioControl.checked ? Style.current.secondaryBackground : Style.current.transparent
+    color: radioControl.checked ? Style.current.secondaryBackground :
+                                  (isHovered ? Style.current.backgroundHover : Style.current.transparent)
 
     radius: Style.current.radius
 
@@ -35,4 +38,15 @@ Rectangle {
         anchors.left: parent.left
         anchors.leftMargin: root.padding
     }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        onEntered: root.isHovered = true
+        onExited: root.isHovered = false
+        onClicked: {
+            root.radioCheckedChanged(!radioControl.checked)
+        }
+        cursorShape: Qt.PointingHandCursor
+    }
 }

ui/shared/status/StatusSettingsLineButton.qml

@@ -104,7 +104,6 @@ Rectangle {
         onClicked: {
             root.clicked(!root.switchChecked)
         }
-
         cursorShape: Qt.PointingHandCursor
     }
 }