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>

data/theme/gnome-shell-sass/widgets/_dialogs.scss

@@ -1,57 +1,34 @@
 /* Modal Dialogs */
 
-.headline {
+// style for all dialogs
-  @extend %title_4;
-}
-
 .modal-dialog {
   background-color: $bg_color;
   border-radius: $alert_radius;
-  box-shadow: inset 0 0 0 1px $outer_borders_color;
   padding: $base_padding * 4;
+  spacing: $base_padding * 3;
+  box-shadow: 0 12px 8px 12px rgba(0,0,0,0.03);
 
   .modal-dialog-content-box {
-    spacing: $base_margin * 8;
+    padding-top: $base_padding * 2;
-    margin-top: $base_margin * 2;
+    spacing: $base_padding * 3;
-    margin-bottom: $base_margin * 4;
     max-width: 28em;
   }
 
-  .modal-dialog-linked-button {
+  .modal-dialog-button-box {
-    @extend %dialog_button;
+    padding-top: $base_padding;
+    .modal-dialog-button {
+      @extend %dialog_button;
+    }
   }
 }
 
-/* End Session Dialog */
+// lists in dialogs
-.end-session-dialog {
-  width: 24em;
-
-  .end-session-dialog-battery-warning,
-  .dialog-list-title {
-    color: $warning_color;
-  }
-}
-
-/* Message Dialog */
-.message-dialog-content {
-  spacing: $base_padding * 3;
-
-  .message-dialog-title {
-    text-align: center;
-    @extend %title_2;
-
-    &.lightweight { @extend %title_4;}
-  }
-  .message-dialog-description { text-align: center; }
-}
-
-/* Dialog List */
 .dialog-list {
   spacing: $base_padding * 3;
 
   .dialog-list-title {
-    text-align: center;
     @extend %heading;
+    text-align: center;
   }
 
   .dialog-list-scrollview { max-height: 200px; }
@@ -63,104 +40,134 @@
 
       .dialog-list-item-title { font-weight: bold; }
       .dialog-list-item-description {
-        color: darken($fg_color,5%);
         @extend %caption;
+        color: darken($fg_color,5%);
       }
     }
   }
 }
 
+/* End Session Dialog */
+.end-session-dialog {
+  width: 24em;
+
+  // special style for session warnings
+  .end-session-dialog-battery-warning,
+  .dialog-list-title {
+    color: $warning_color;
+    background-color: transparentize($warning_color, 0.9);
+    padding: $base_padding * 1.5;
+    border-radius: $base_border_radius;
+    margin: $base_margin 0;
+  }
+}
+
+/* Message Dialog */
+.message-dialog-content {
+  spacing: $base_padding * 3;
+
+  .message-dialog-title {
+    text-align: center;
+    @extend %title_2;
+
+    &.lightweight {
+      @extend %title_4;
+    }
+  }
+  .message-dialog-description {
+    text-align: center;
+  }
+}
+
 /* Run Dialog */
 .run-dialog {
-  .modal-dialog-content-box {
+  width: 24em;
-    margin-top: $base_padding * 4;
+
-    margin-bottom: $base_padding * 2;
+  // run dialog needs to override bottom padding
+  // to account for inexplicable extra padding
+  padding-bottom: $base_padding;
+
+  .run-dialog-entry {
+    padding: $base_padding * 2 $base_padding * 1.5;
   }
-  .run-dialog-entry { width: 20em; }
   .run-dialog-description {
     @extend %caption;
-    text-align: center;
     color: darken($fg_color, 20%);
   }
 }
 
 /* Password or Authentication Dialog */
-
 .prompt-dialog {
   width: 28em;
 
-  .modal-dialog-content-box {
+  .prompt-dialog-password-grid {
-    margin-bottom: $base_margin * 6;
+    spacing-rows: $base_margin * 2;
+    spacing-columns: $base_margin;
+
+    .prompt-dialog-password-entry {
+      width: auto;
+      padding: $base_padding * 2 $base_padding * 1.5;
+      // 4px (spacing) + 16px (spinner-width)
+      &:ltr { margin-left: $base_margin+$base_icon_size; }
+      &:rtl { margin-right: $base_margin+$base_icon_size; }
+    }
+  }
+
+  .prompt-dialog-password-layout {
+    spacing: $base_margin * 2;
+  }
+
+  .prompt-dialog-error-label,
+  .prompt-dialog-info-label,
+  .prompt-dialog-null-label {
+    @extend %caption;
+    text-align: center;
+  }
+
+  .prompt-dialog-error-label {
+    color: $warning_color;
   }
 }
 
-.prompt-dialog-password-grid {
-  spacing-rows: $base_margin * 2;
-  spacing-columns: $base_margin;
-
-  .prompt-dialog-password-entry {
-    width: auto;
-
-    // 4px (spacing) + 16px (spinner-width)
-    &:ltr { margin-left: $base_margin+$base_icon_size; }
-    &:rtl { margin-right: $base_margin+$base_icon_size; }
-  }
-}
-
-.prompt-dialog-password-layout {
-  spacing: $base_margin * 2;
-}
-
-.prompt-dialog-password-entry {
-  width: 20em;
-}
-
-.prompt-dialog-error-label,
-.prompt-dialog-info-label,
-.prompt-dialog-null-label {
-  text-align: center;
-  @extend %caption;
-}
-
-.prompt-dialog-error-label {
-  color: $warning_color;
-}
-
-
 /* Polkit Dialog */
-
 .polkit-dialog-user-layout {
   text-align: center;
   spacing: $base_margin * 2;
   margin-bottom: $base_padding;
 
-  .polkit-dialog-user-root-label { color: $warning_color; }
+  .polkit-dialog-user-label,
+  .polkit-dialog-user-root-label {
+    @extend %title_4;
+  }
+
+  .polkit-dialog-user-root-label {
+    color: $warning_color;
+  }
 }
 
 /* Audio selection dialog */
 .audio-device-selection-dialog {
-  .modal-dialog-content-box { margin-bottom: $base_margin * 7; }
+  min-width: 24em;
-  .audio-selection-box { spacing: $base_margin * 5; }
-}
 
-.audio-selection-device {
+  .audio-selection-box {
-  border-radius: $base_border_radius * 2;
+    spacing: $base_padding * 2;
-  &:hover,&:focus { background-color: $hover_bg_color; }
+
-  &:active {
+    // styled similar to switcher-popup
-    background-color: -st-accent-color;
+    .audio-selection-device {
-    color: -st-accent-fg-color;
+      @include tile_button($fg:$osd_fg_color, $bg:$osd_bg_color);
+
+      .audio-selection-device-box {
+        padding: $base_padding * 2;
+        spacing: $base_padding * 2;
+      }
+
+      .audio-selection-device-icon {
+        icon-size: $base_icon_size * 4;
+      }
+    }
   }
 }
 
-.audio-selection-device-box {
-  padding: $base_margin * 5;
-  spacing: $base_margin * 5;
-}
-
-.audio-selection-device-icon {
-  icon-size: $base_icon_size * 4;
-}
-
 /* Welcome dialog */
 .welcome-dialog-image {
   background-image: url("resource:///org/gnome/shell/theme/gnome-shell-start.svg");
@@ -173,4 +180,9 @@
 /* Access portal dialog */
 .access-dialog {
   text-align: center;
-}
+}
+
+// specific label style for restart message
+.restart-message {
+  @extend %title_4;
+}

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,
         });