[gnome-shell/uajain/adapt-user-avatar-part2: 5/8] authPrompt: Iconize the cancel button

[Umang Jain <uajain src gnome org>]

commit 2c2d39c8d517afacaab27249dab1c8fd69371092
Author: Umang Jain <mailumangjain gmail com>
Date:   Wed Jan 8 17:54:35 2020 +0530

    authPrompt: Iconize the cancel button
    
    For the UNLOCK_ONLY mode, we need the cancel button to be a circular
    icon. Hence, branch out the cancel button code and add some styling.

 data/theme/gnome-shell-sass/_common.scss | 10 +++++++++
 js/gdm/authPrompt.js                     | 36 +++++++++++++++++++++-----------
 2 files changed, 34 insertions(+), 12 deletions(-)
---
diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index be51a97aad..f4ecc47d06 100644
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -1974,6 +1974,16 @@ StScrollBar {
       }
     }
   }
+  .cancel-button {
+    padding: 0;
+    border-radius: 16px;
+    width: 32px;
+    height: 32px;
+    border-color: transparentize($bg_color,0.7);
+    background-color: transparentize($bg_color,0.7);
+
+         StIcon { icon-size: 16px; }
+  }
 }
 
   .login-dialog-logo-bin { padding: 24px 0px; }
diff --git a/js/gdm/authPrompt.js b/js/gdm/authPrompt.js
index 1b1e91546a..6ef253689f 100644
--- a/js/gdm/authPrompt.js
+++ b/js/gdm/authPrompt.js
@@ -156,18 +156,19 @@ var AuthPrompt = GObject.registerClass({
     }
 
     _initEntryAndButtons() {
-        this.cancelButton = new St.Button({
-            style_class: 'modal-dialog-button button',
-            button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
-            reactive: true,
-            can_focus: true,
-            label: _("Cancel"),
-            x_expand: true,
-            x_align: Clutter.ActorAlign.START,
-            y_align: Clutter.ActorAlign.END,
-        });
+        this.cancelButton = null;
 
         if (this._mode == AuthPromptMode.UNLOCK_ONLY) {
+            this.cancelButton = new St.Button({
+                style_class: 'modal-dialog-button button cancel-button',
+                button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                reactive: true,
+                can_focus: true,
+                x_expand: true,
+                x_align: Clutter.ActorAlign.START,
+                y_align: Clutter.ActorAlign.END,
+                child: new St.Icon({ icon_name: 'go-previous-symbolic' }),
+            });
             let mainBox = new St.BoxLayout({
                 style_class: 'login-dialog-button-box',
                 vertical: false,
@@ -177,14 +178,25 @@ var AuthPrompt = GObject.registerClass({
             mainBox.add_child(this._entry);
             mainBox.add_child(this._defaultButtonWell);
         } else {
+            this.add_child(this._entry);
+            this.add_child(this._capsLockWarningLabel);
+
             this._buttonBox = new St.BoxLayout({
                 style_class: 'login-dialog-button-box',
                 vertical: false,
                 y_align: Clutter.ActorAlign.END,
             });
-            this.add_child(this._entry);
-            this.add_child(this._capsLockWarningLabel);
 
+            this.cancelButton = new St.Button({
+                style_class: 'modal-dialog-button button',
+                button_mask: St.ButtonMask.ONE | St.ButtonMask.THREE,
+                reactive: true,
+                can_focus: true,
+                label: _("Cancel"),
+                x_expand: true,
+                x_align: Clutter.ActorAlign.START,
+                y_align: Clutter.ActorAlign.END,
+            });
             this._buttonBox.add_child(this.cancelButton);
             this._buttonBox.add_child(this._defaultButtonWell);
             this.add_child(this._buttonBox);