[kcms/users]: port from avatar nested in button to avatar with own action

kcms/users/package/contents/ui/UserDetailsPage.qml

@@ -119,34 +119,24 @@ SimpleKCM {
         }
         RowLayout {
             Layout.alignment: Qt.AlignHCenter
-            QQC2.RoundButton {
-                id: userPfp
+            Kirigami.Avatar {
+                source: usersDetailPage.user.face
+                cache: false
+                name: user.realName
 
                 readonly property int size: 6 * Kirigami.Units.gridUnit
 
-                implicitWidth: size
-                implicitHeight: size
-                flat: true
-
-                Kirigami.Avatar {
-                    source: usersDetailPage.user.face
-                    cache: false // user picture path doesn't change after updating
-                    name: user.realName
-                    anchors {
-                        fill: parent
-                        margins: Kirigami.Units.smallSpacing
-                    }
-                }
-
-                Layout.alignment: Qt.AlignHCenter
-                Layout.maximumHeight: size + Kirigami.smallSpacing
-                Layout.minimumHeight: size + Kirigami.smallSpacing
-                Layout.maximumWidth: size + Kirigami.smallSpacing
-                Layout.minimumWidth: size + Kirigami.smallSpacing
+                Layout.preferredWidth: size
+                Layout.preferredHeight: size
 
-                onClicked: {
-                    picturesSheet.open()
-                    stackSwitcher.forceActiveFocus()
+                actions {
+                    main: Kirigami.Action {
+                        text: i18n("Change avatar")
+                        onTriggered: {
+                            picturesSheet.open()
+                            stackSwitcher.forceActiveFocus()
+                        }
+                    }
                 }
             }
             QQC2.TextField  {