Merge pull request #714 from mabashian/list-view-and-delete-modal-fixes

List view styling tweaks based on UI/UX feedback

awx/ui/client/legacy-styles/ansible-ui.less

@@ -2012,6 +2012,7 @@ button.dropdown-toggle,
 
 .modal.fade .modal-dialog {
   transform: translate(0, 0);
+  margin: 100px auto;
 }
 
 .modal-backdrop, .modal-backdrop.fade.in {

awx/ui/client/legacy-styles/lists.less

@@ -81,12 +81,11 @@ table, tbody {
 .List-actionButton {
     font-size: 16px;
     height: 30px;
-    width: 30px;
+    min-width: 30px;
     color: @list-action-icon;
     background-color: @list-actn-bg;
     border: none;
     border-radius: 50%;
-    transition: background-color 0.2s, border-color 0.2s;;
 }
 
 .List-actionButton:hover {
@@ -108,6 +107,12 @@ table, tbody {
     color: @list-pagin-text;
     text-transform: uppercase;
     height: 22px;
+    display: flex;
+}
+
+.List-paginationPagerHolder {
+    display: flex;
+    flex: 1 0 auto;
 }
 
 .List-paginationPager {
@@ -128,13 +133,18 @@ table, tbody {
     background-color: @list-pagin-bg-act!important;
 }
 
+.List-paginationItemsOf {
+    display: flex;
+    justify-content: flex-end;
+}
+
 .List-header {
-    align-items: center;
     display: flex;
     height: 34px;
 }
 
 .List-title {
+    align-items: center;
     flex: 1 0 auto;
     display: flex;
 }
@@ -163,7 +173,6 @@ table, tbody {
 }
 
 .List-buttonSubmit {
-    transition: background-color 0.2s;
     background-color: @submit-button-bg;
     color: @submit-button-text;
 }
@@ -175,7 +184,6 @@ table, tbody {
 }
 
 .List-buttonDefault {
-    transition: background-color 0.2s;
     background-color: @btn-bg;
     color: @btn-txt;
     border-color: @btn-bord;
@@ -235,6 +243,10 @@ table, tbody {
     color: @list-srch-btn-icon;
 }
 
+.List-searchNoResults {
+    color: @default-interface-txt;
+}
+
 .List-noItems {
     display: flex;
     align-items: center;

awx/ui/client/src/controllers/Credentials.js

@@ -566,7 +566,7 @@ export function CredentialsEdit($scope, $rootScope, $compile, $location, $log,
 
         Prompt({
             hdr: 'Delete',
-            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
+            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
             action: action,
             actionText: 'DELETE'
         });

awx/ui/client/src/controllers/Organizations.js

@@ -352,7 +352,7 @@ export function OrganizationsEdit($scope, $rootScope, $compile, $location, $log,
 
         Prompt({
             hdr: 'Delete',
-            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
+            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
             action: action,
             actionText: 'DELETE'
         });

awx/ui/client/src/controllers/Projects.js

@@ -796,7 +796,7 @@ export function ProjectsEdit($scope, $rootScope, $compile, $location, $log,
 
         Prompt({
             hdr: 'Delete',
-            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
+            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
             action: action,
             actionText: 'DELETE'
         });

awx/ui/client/src/controllers/Teams.js

@@ -429,7 +429,7 @@ export function TeamsEdit($scope, $rootScope, $compile, $location, $log,
 
         Prompt({
             hdr: 'Delete',
-            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.name + ' ' + title + '?</div>',
+            body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.name + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
             action: action,
             actionText: 'DELETE'
         });

awx/ui/client/src/controllers/Users.js

@@ -484,7 +484,7 @@ export function UsersEdit($scope, $rootScope, $compile, $location, $log,
 
             Prompt({
                 hdr: 'Delete',
-                body: '<div class="Prompt-bodyQuery">Are you sure you want to remove ' + name + ' from ' + $scope.username + ' ' + title + '?</div>',
+                body: '<div class="Prompt-bodyQuery">Are you sure you want to remove the ' + title + ' below from ' + $scope.username + '?</div><div class="Prompt-bodyTarget">' + name + '</div>',
                 action: action,
                 actionText: 'DELETE'
             });

awx/ui/client/src/forms/Inventories.js

@@ -127,6 +127,14 @@ export default
                             awToolTip: 'Schedule future job template runs',
                             dataPlacement: 'top',
                         },
+                        copy: {
+                            label: 'Copy',
+                            ngClick: "copyScanJobTemplate()",
+                            "class": 'btn-danger btn-xs',
+                            awToolTip: 'Copy template',
+                            dataPlacement: 'top',
+                            ngHide: 'job_template.summary_fields.can_copy === false'
+                        },
                         edit: {
                             label: 'Edit',
                             ngClick: "editScanJob()",
@@ -140,14 +148,6 @@ export default
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Delete the scan job template'
-                        },
-                        copy: {
-                            label: 'Copy',
-                            ngClick: "copyScanJobTemplate()",
-                            "class": 'btn-danger btn-xs',
-                            awToolTip: 'Copy template',
-                            dataPlacement: 'top',
-                            ngHide: 'job_template.summary_fields.can_copy === false'
                         }
                     }
                 }

awx/ui/client/src/forms/Organizations.js

@@ -87,7 +87,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('users', user.id, user.username, 'users')",
+                            ngClick: "delete('users', user.id, user.username, 'user')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Remove user'
@@ -133,7 +133,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('admins', admin.id, admin.username, 'administrators')",
+                            ngClick: "delete('admins', admin.id, admin.username, 'administrator')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Remove administrator'

awx/ui/client/src/forms/Projects.js

@@ -261,7 +261,7 @@ angular.module('ProjectFormDefinition', ['SchedulesListDefinition'])
                     },
                     "delete": {
                         label: 'Delete',
-                        ngClick: "delete('organizations', organization.id, organization.name, 'organizations')",
+                        ngClick: "delete('organizations', organization.id, organization.name, 'organization')",
                         icon: 'icon-trash',
                         "class": 'btn-danger',
                         awToolTip: 'Delete the organization'

awx/ui/client/src/forms/Teams.js

@@ -95,7 +95,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('credentials', credential.id, credential.name, 'credentials')",
+                            ngClick: "delete('credentials', credential.id, credential.name, 'credential')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Remove the credential'
@@ -157,7 +157,7 @@ export default
 
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('permissions', permission.id, permission.name, 'permissions')",
+                            ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Delete the permission',
@@ -203,7 +203,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('projects', project.id, project.name, 'projects')",
+                            ngClick: "delete('projects', project.id, project.name, 'project')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Remove the project'
@@ -251,7 +251,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('users', user.id, user.username, 'users')",
+                            ngClick: "delete('users', user.id, user.username, 'user')",
                             icon: 'icon-terash',
                             "class": 'btn-danger',
                             awToolTip: 'Remove user'

awx/ui/client/src/forms/Users.js

@@ -150,7 +150,7 @@ export default
                         },
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('credentials', credential.id, credential.name, 'credentials')",
+                            ngClick: "delete('credentials', credential.id, credential.name, 'credential')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Delete the credential'
@@ -212,7 +212,7 @@ export default
 
                         "delete": {
                             label: 'Delete',
-                            ngClick: "delete('permissions', permission.id, permission.name, 'permissions')",
+                            ngClick: "delete('permissions', permission.id, permission.name, 'permission')",
                             icon: 'icon-trash',
                             "class": 'btn-danger',
                             awToolTip: 'Delete the permission',

awx/ui/client/src/helpers/Jobs.js

@@ -476,11 +476,11 @@ export default
             if (job.status === 'pending' || job.status === 'running' || job.status === 'waiting') {
                 url = job.related.cancel;
                 action_label = 'cancel';
-                hdr = 'Cancel Job';
+                hdr = 'Cancel';
             } else {
                 url = job.url;
                 action_label = 'delete';
-                hdr = 'Delete Job';
+                hdr = 'Delete';
             }
 
             action = function () {
@@ -537,11 +537,11 @@ export default
                 scope.removeCancelJob();
             }
             scope.removeCancelJob = scope.$on('CancelJob', function() {
-                var body;
+                var cancelBody = "<div class=\"Prompt-bodyQuery\">Submit the request to cancel?</div>";
-                body = (action_label === 'cancel' || job.status === 'new') ? "Submit the request to cancel" : "Delete";
+                var deleteBody = "<div class=\"Prompt-bodyQuery\">Are you sure you want to delete the job below?</div><div class=\"Prompt-bodyTarget\">#" + id + " " + job.name  + "</div>";
                 Prompt({
                     hdr: hdr,
-                    body: "<div class=\"Prompt-bodyQuery\">" + body + " job #" + id + " " + job.name  + "?</div>",
+                    body: (action_label === 'cancel' || job.status === 'new') ? cancelBody : deleteBody,
                     action: action,
                     actionText: (action_label === 'cancel' || job.status === 'new') ? "YES" : "DELETE"
                 });

awx/ui/client/src/lists/AllJobs.js

@@ -27,7 +27,7 @@ export default
             },
             status: {
                 label: 'Status',
-                columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-2',
+                columnClass: 'col-lg-2 col-md-2 col-sm-2 col-xs-3',
                 awToolTip: "{{ all_job.status_tip }}",
                 awTipPlacement: "top",
                 dataTitle: "{{ all_job.status_popover_title }}",
@@ -50,7 +50,7 @@ export default
                 noLink: true,
                 searchable: false,
                 filter: "longDate",
-                columnClass: "col-lg-2 col-md-2 hidden-xs",
+                columnClass: "col-lg-2 col-md-2 col-sm-2 hidden-xs",
                 key: true,
                 desc: true
             },
@@ -66,7 +66,7 @@ export default
             },
             name: {
                 label: 'Name',
-                columnClass: 'col-md-3 col-sm-4 col-xs-4',
+                columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-3',
                 ngClick: "viewJobLog(all_job.id, all_job.nameHref)",
                 defaultSearchField: true,
                 awToolTip: "{{ all_job.name | sanitize }}",
@@ -86,8 +86,15 @@ export default
 
         fieldActions: {
 
-            columnClass: 'col-lg-2 col-md-3 col-sm-4 col-xs-4',
+            columnClass: 'col-lg-2 col-md-2 col-sm-3 col-xs-4',
 
+            stdout: {
+                mode: 'all',
+                href: '/#/jobs/{{ all_job.id }}/stdout',
+                awToolTip: 'View standard output',
+                dataPlacement: 'top',
+                ngShow: "all_job.type == 'job'"
+            },
             submit: {
                 icon: 'icon-rocket',
                 mode: 'all',
@@ -109,13 +116,6 @@ export default
                 awToolTip: 'Delete the job',
                 dataPlacement: 'top',
                 ngShow: "all_job.status !== 'running' && all_job.status !== 'waiting' && all_job.status !== 'pending'"
-            },
-            stdout: {
-                mode: 'all',
-                href: '/#/jobs/{{ all_job.id }}/stdout',
-                awToolTip: 'View standard output',
-                dataPlacement: 'top',
-                ngShow: "all_job.type == 'job'"
             }
         }
     });

awx/ui/client/src/lists/CompletedJobs.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 
 
 
@@ -86,6 +86,13 @@ export default
         actions: { },
 
         fieldActions: {
+            stdout: {
+                mode: 'all',
+                href: '/#/jobs/{{ completed_job.id }}/stdout',
+                awToolTip: 'View standard output',
+                dataPlacement: 'top',
+                ngShow: "completed_job.type == 'job'"
+            },
             submit: {
                 icon: 'icon-rocket',
                 mode: 'all',
@@ -99,19 +106,12 @@ export default
                 ngClick: 'deleteJob(completed_job.id)',
                 awToolTip: 'Delete the job',
                 dataPlacement: 'top'
-            },
+            }
             // job_details: {
             //     mode: 'all',
             //     ngClick: "viewJobLog(completed_job.id)",
             //     awToolTip: 'View job details',
             //     dataPlacement: 'top'
-            // },
+            // }
-            stdout: {
-                mode: 'all',
-                href: '/#/jobs/{{ completed_job.id }}/stdout',
-                awToolTip: 'View standard output',
-                dataPlacement: 'top',
-                ngShow: "completed_job.type == 'job'"
-            }
         }
     });

awx/ui/client/src/lists/InventoryGroups.js

@@ -154,13 +154,6 @@ export default
                     "|| group.status == 'updating'",
                 dataPlacement: "top"
             },
-            edit: {
-                //label: 'Edit',
-                mode: 'all',
-                ngClick: "editGroup(group.id)",
-                awToolTip: 'Edit group',
-                dataPlacement: "top"
-            },
             copy: {
                 mode: 'all',
                 ngClick: "copyGroup(group.id)",
@@ -168,6 +161,13 @@ export default
                 ngShow: "group.id > 0",
                 dataPlacement: "top"
             },
+            edit: {
+                //label: 'Edit',
+                mode: 'all',
+                ngClick: "editGroup(group.id)",
+                awToolTip: 'Edit group',
+                dataPlacement: "top"
+            },
             "delete": {
                 //label: 'Delete',
                 mode: 'all',

awx/ui/client/src/lists/InventoryHosts.js

@@ -60,6 +60,12 @@ export default
                 iconClass: "{{ 'fa icon-job-' + host.active_failures }}",
                 id: 'active-failutes-action'
             },
+            copy: {
+                mode: 'all',
+                ngClick: "copyHost(host.id)",
+                awToolTip: 'Copy or move host to another group',
+                dataPlacement: "top"
+            },
             edit: {
                 //label: 'Edit',
                 ngClick: "editHost(host.id)",
@@ -67,12 +73,6 @@ export default
                 awToolTip: 'Edit host',
                 dataPlacement: 'top'
             },
-            copy: {
-                mode: 'all',
-                ngClick: "copyHost(host.id)",
-                awToolTip: 'Copy or move host to another group',
-                dataPlacement: "top"
-            },
             "delete": {
                 //label: 'Delete',
                 ngClick: "deleteHost(host.id, host.name)",

awx/ui/client/src/lists/JobTemplates.js

@@ -69,6 +69,14 @@ export default
                 awToolTip: 'Schedule future job template runs',
                 dataPlacement: 'top',
             },
+            copy: {
+                label: 'Copy',
+                ngClick: "copyJobTemplate(job_template.id, job_template.name)",
+                "class": 'btn-danger btn-xs',
+                awToolTip: 'Copy template',
+                dataPlacement: 'top',
+                ngHide: 'job_template.summary_fields.can_copy===false'
+            },
             edit: {
                 label: 'Edit',
                 ngClick: "editJobTemplate(job_template.id)",
@@ -82,14 +90,6 @@ export default
                 "class": 'btn-danger btn-xs',
                 awToolTip: 'Delete template',
                 dataPlacement: 'top',
-            },
-            copy: {
-                label: 'Copy',
-                ngClick: "copyJobTemplate(job_template.id, job_template.name)",
-                "class": 'btn-danger btn-xs',
-                awToolTip: 'Copy template',
-                dataPlacement: 'top',
-                ngHide: 'job_template.summary_fields.can_copy===false'
             }
         }
     });

awx/ui/client/src/lists/Jobs.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 
 export default
     angular.module('JobsListDefinition', [])
@@ -74,6 +74,13 @@ export default
         actions: { },
 
         fieldActions: {
+            stdout: {
+                mode: 'all',
+                href: '/#/jobs/{{ job.id }}/stdout',
+                awToolTip: 'View standard output',
+                dataPlacement: 'top',
+                ngShow: "job.type == 'job'"
+            },
             submit: {
                 mode: 'all',
                 icon: 'icon-rocket',
@@ -95,13 +102,6 @@ export default
                 awToolTip: 'Delete the job',
                 dataPlacement: 'top',
                 ngShow: "job.status != 'running'"
-            },
-            stdout: {
-                mode: 'all',
-                href: '/#/jobs/{{ job.id }}/stdout',
-                awToolTip: 'View standard output',
-                dataPlacement: 'top',
-                ngShow: "job.type == 'job'"
             }
         }
     });

awx/ui/client/src/lists/ScanJobs.js

@@ -56,6 +56,15 @@ export default
                 awToolTip: 'Schedule future job template runs',
                 dataPlacement: 'top',
             },
+            copy: {
+                label: 'Copy',
+                ngClick: "copyJobTemplate(job_template.id, job_template.name)",
+                "class": 'btn-danger btn-xs',
+                awToolTip: 'Copy template',
+                dataPlacement: 'top',
+                ngHide: 'job_template.summary_fields.can_copy===false'
+
+            },
             edit: {
                 label: 'Edit',
                 ngClick: "editJobTemplate(job_template.id)",
@@ -69,15 +78,6 @@ export default
                 "class": 'btn-danger btn-xs',
                 awToolTip: 'Delete template',
                 dataPlacement: 'top',
-            },
-            copy: {
-                label: 'Copy',
-                ngClick: "copyJobTemplate(job_template.id, job_template.name)",
-                "class": 'btn-danger btn-xs',
-                awToolTip: 'Copy template',
-                dataPlacement: 'top',
-                ngHide: 'job_template.summary_fields.can_copy===false'
-
             }
         }
     });

awx/ui/client/src/lists/ScheduledJobs.js

@@ -3,7 +3,7 @@
  *
  * All Rights Reserved
  *************************************************/
- 
+
 
 export default
     angular.module('ScheduledJobsDefinition', ['sanitizeFilter'])
@@ -32,7 +32,7 @@ export default
                 label: 'Next Run',
                 noLink: true,
                 searchable: false,
-                columnClass: "col-lg-2 col-md-2 hidden-xs",
+                columnClass: "col-lg-3 col-md-2 col-sm-3 hidden-xs",
                 filter: "longDate",
                 key: true
             },
@@ -55,7 +55,7 @@ export default
             },
             name: {
                 label: 'Name',
-                columnClass: 'col-md-3 col-sm-4 col-xs-4',
+                columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
                 sourceModel: 'unified_job_template',
                 sourceField: 'name',
                 ngClick: "editSchedule(schedule.id)",
@@ -68,6 +68,9 @@ export default
         actions: { },
 
         fieldActions: {
+
+            columnClass: 'col-lg-3 col-md-3 col-sm-3 col-xs-5',
+
             "play": {
                 mode: "all",
                 ngClick: "toggleSchedule($event, schedule.id)",

awx/ui/client/src/shared/form-generator.js

@@ -1675,7 +1675,7 @@ angular.module('FormGenerator', [GeneratorHelpers.name, 'Utilities', listGenerat
 
                 // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
                 html += "<div class=\"row\" ng-show=\"" + collection.iterator + "Loading == false && " + collection.iterator + "_active_search == true && " + itm + ".length == 0\">\n";
-                html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
+                html += "<div class=\"col-lg-12 List-searchNoResults\">No records matched your search.</div>\n";
                 html += "</div>\n";
 
                 // Show the "no items" box when loading is done and the user isn't actively searching and there are no results

awx/ui/client/src/shared/generator-helpers.js

@@ -705,8 +705,8 @@ angular.module('GeneratorHelpers', [systemStatus.name])
                 set = params.set,
                 html = '';
             html += "<!-- Paginate Widget -->\n";
-            html += "<div id=\"" + iterator + "-pagination\" class=\"List-pagination row page-row\">\n";
+            html += "<div id=\"" + iterator + "-pagination\" class=\"List-pagination page-row\">\n";
-            html += "<div class=\"col-lg-8 col-md-8\">\n";
+            html += "<div class=\"List-paginationPagerHolder\">";
             html += "<div class=\"List-paginationPager\" ng-hide=\"" + iterator + "HidePaginator || " + iterator + "_num_pages <= 1\">";
             html += "<ul id=\"pagination-links\" class=\"pagination\">\n";
             html += "<li class=\"List-paginationPager--item\" ng-hide=\"" + iterator + "_page -5 <= 1 \"><a href id=\"first-page-set\" ng-click=\"getPage(1,'" + set + "','" + iterator + "')\">" +
@@ -729,8 +729,7 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             html += "</ul>\n";
             html += "<span class=\"List-paginationPager--pageof\">Page <span id=\"current-page\">{{ " + iterator + "_page }}</span> of <span id=\"total-pages\">{{ " + iterator + "_num_pages }}</span></span>";
             html += "</div>";
-            html += "</div>\n";
+            html += "</div>";
-            html += "<div class=\"col-lg-4 col-md-4\" ng-hide=\"" + iterator + "_mode == 'lookup'\">\n";
             html += "<div id=\"pagination-labels\" class=\"page-label\" ng-hide=\"(" + iterator + "_total_rows | number:0) < 1\">\n";
             html += "<span id=\"total-items\">ITEMS&nbsp;";
             html += "<span>{{ (" + iterator + "_total_rows | number:0) < 1 ? 0 : (" + iterator + "_page-1)*" + iterator + "_page_size+1}}</span>";
@@ -740,7 +739,6 @@ angular.module('GeneratorHelpers', [systemStatus.name])
             html += "</span>";
             html += "</div>\n";
             html += "</div>\n";
-            html += "</div>\n";
 
             return html;
         };

awx/ui/client/src/shared/list-generator/list-generator.factory.js

@@ -382,7 +382,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate
 
                         // Message for when a search returns no results.  This should only get shown after a search is executed with no results.
                         html += "<div class=\"row\" ng-show=\"" + list.iterator + "Loading == false && " + list.iterator + "_active_search == true && " + list.name + ".length == 0\">\n";
-                        html += "<div class=\"col-lg-12\">No records matched your search.</div>\n";
+                        html += "<div class=\"col-lg-12 List-searchNoResults\">No records matched your search.</div>\n";
                         html += "</div>\n";
                     }
 

awx/ui/client/src/shared/prompt/prompt.less

@@ -5,11 +5,15 @@
     flex-wrap:wrap;
     flex-direction: row;
     padding: 15px 20px;
+    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
+    -moz-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
+    box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25);
 }
 
 .Prompt-header {
     display: flex;
     width: 100%;
+    margin-bottom: 25px;
 }
 
 .Prompt-title {
@@ -33,13 +37,12 @@
     height:20px;
     font-size: 20px;
     background-color:@default-bg;
-    color:@default-second-border;
+    color:@default-icon;
-    transition: color 0.2s;
     line-height:1;
 }
 
 .Prompt-exit:hover{
-    color:@default-icon;
+    color:@default-icon-hov;
 }
 
 .Prompt-body {
@@ -47,7 +50,7 @@
 }
 
 .Prompt-bodyQuery {
-    padding: 15px 0px;
+    margin-bottom: 20px;
     color: @default-interface-txt;
 }
 
@@ -58,7 +61,7 @@
 .Prompt-footer {
     display: flex;
     justify-content: flex-end;
-    padding-top: 20px;
+    margin-top: 20px;
     width: 100%;
 }
 
@@ -93,6 +96,10 @@
     color: @btn-txt-sel;
 }
 
+.Prompt-footerButton {
+    padding: 4px 8px;
+}
+
 .Prompt-footerButton + .Prompt-footerButton {
     margin-left: 20px;
 }