[gnome-control-center/user-accounts-add-cutout-to-avatar-edit-button: 3/3] user-accounts: Add cutout to avatar edit button

[Georges Basile Stavracas Neto <gbsneto src gnome org>]

commit 854c888214989b590009f3d93857ad71c134f90b
Author: Felipe Borges <felipeborges gnome org>
Date:   Wed Mar 2 12:23:31 2022 +0100

    user-accounts: Add cutout to avatar edit button
    
    Shamelessly copied from
    https://gitlab.gnome.org/GNOME/fractal/-/blob/fractal-next/data/resources/ui/content-room-details.ui#L29
    and
    https://gitlab.gnome.org/GNOME/fractal/-/blob/fractal-next/data/resources/style.css#L506
    
    Fixes #1662

 panels/user-accounts/cc-user-panel.ui              | 22 ++++++++++++++++------
 panels/user-accounts/data/user-accounts-dialog.css |  7 +++++++
 2 files changed, 23 insertions(+), 6 deletions(-)
---
diff --git a/panels/user-accounts/cc-user-panel.ui b/panels/user-accounts/cc-user-panel.ui
index c09776b03..ff2488df1 100644
--- a/panels/user-accounts/cc-user-panel.ui
+++ b/panels/user-accounts/cc-user-panel.ui
@@ -101,14 +101,24 @@
                               </object>
                             </child>
                             <child type="overlay">
-                              <object class="GtkMenuButton" id="user_avatar_edit_button">
-                                <property name="sensitive">False</property>
-                                <property name="halign">end</property>
-                                <property name="valign">end</property>
-                                <property name="icon-name">document-edit-symbolic</property>
+                              <object class="AdwBin">
                                 <style>
-                                  <class name="circular"/>
+                                  <class name="cutout-button"/>
                                 </style>
+                                <property name="halign">end</property>
+                                <property name="valign">end</property>
+                                <child>
+                                  <object class="GtkMenuButton" id="user_avatar_edit_button">
+                                    <property name="sensitive">False</property>
+                                    <property name="icon-name">document-edit-symbolic</property>
+                                    <property name="popover">
+                                      <object class="CcAvatarChooser" id="avatar_chooser"/>
+                                    </property>
+                                    <style>
+                                      <class name="circular"/>
+                                    </style>
+                                  </object>
+                                </child>
                               </object>
                             </child>
                           </object>
diff --git a/panels/user-accounts/data/user-accounts-dialog.css 
b/panels/user-accounts/data/user-accounts-dialog.css
index e9b5f549f..7a984a432 100644
--- a/panels/user-accounts/data/user-accounts-dialog.css
+++ b/panels/user-accounts/data/user-accounts-dialog.css
@@ -14,3 +14,10 @@ levelbar .strength-high {
   background-color: #73d216;
   border-color: #73d216;
 }
+
+/* This is used for user_avatar_edit_button */
+.cutout-button {
+  background-color: @window_bg_color;
+  border-radius: 9999px;
+  padding: 2px;
+}