style: Clean up dialogs stylesheet to fix layout issues

- remove unnecessary dialog type-specific padding, spacing and margin definitions that led to layout to problems
- bump the size of user avatar in authentication dialog
- nest css classes in the sass to better reflect the structure of dialog elements
- sync style of audio device selector with switcher-popup style
- sync text and padding styles with other elements
- fix incorrect button order in audio selection dialog

Closes: https://gitlab.gnome.org/GNOME/gnome-shell/-/issues/7876
Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3473>

js/ui/audioDeviceSelection.js

@@ -55,17 +55,18 @@ const AudioDeviceSelectionDialog = GObject.registerClass({
 
         this.contentLayout.add_child(content);
 
+        this.addButton({
+            action: () => this.close(),
+            label: _('Cancel'),
+            key: Clutter.KEY_Escape,
+        });
+
         if (Main.sessionMode.allowSettings) {
             this.addButton({
                 action: this._openSettings.bind(this),
                 label: _('Sound Settings'),
             });
         }
-        this.addButton({
-            action: () => this.close(),
-            label: _('Cancel'),
-            key: Clutter.KEY_Escape,
-        });
     }
 
     _getDeviceLabel(device) {

js/ui/components/polkitAgent.js

@@ -21,7 +21,7 @@ const DialogMode = {
     CONFIRM: 1,
 };
 
-const DIALOG_ICON_SIZE = 64;
+const DIALOG_ICON_SIZE = 96;
 
 const DELAYED_RESET_TIMEOUT = 200;
 

js/ui/dialog.js

@@ -56,6 +56,7 @@ class Dialog extends St.Widget {
         this._dialog.add_child(this.contentLayout);
 
         this.buttonLayout = new St.Widget({
+            style_class: 'modal-dialog-button-box',
             layout_manager: new Clutter.BoxLayout({
                 spacing: 12,
                 homogeneous: true,
@@ -124,7 +125,7 @@ class Dialog extends St.Widget {
             keys = [];
 
         let button = new St.Button({
-            style_class: 'modal-dialog-linked-button',
+            style_class: 'modal-dialog-button',
             button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
             reactive: true,
             can_focus: true,

js/ui/main.js

@@ -988,7 +988,7 @@ class RestartMessage extends ModalDialog.ModalDialog {
     _init(message) {
         super._init({
             shellReactive: true,
-            styleClass: 'restart-message headline',
+            styleClass: 'restart-message',
             shouldFadeIn: false,
             destroyOnClose: true,
         });