Improvement in the look and feel of the whole application

Changed the SCSS/CSS for the below third party libraries to adopt the
new look 'n' feel:
- wcDocker
- Alertify dialogs, and notifications
- AciTree
- Bootstrap Navbar
- Bootstrap Tabs
- Bootstrap Drop-Down menu
- Backgrid
- Select2

Adopated the new the look 'n' feel for the dialogs, wizard, properties,
tab panels, tabs, fieldset, subnode control, spinner control, HTML
table, and other form controls.

- Font is changed to Roboto
- Using SCSS variables to define the look 'n' feel
- Designer background images for the Login, and Forget password pages in
  'web' mode
- Improved the look 'n' feel for the key selection in the preferences
  dialog
- Table classes consistency changes across the application
- File Open and Save dialog list view changes

Author(s): Aditya Toshniwal & Khushboo Vashi

web/pgadmin/tools/backup/__init__.py

@@ -194,11 +194,11 @@ class BackupMessage(IProcessDesc):
             # It should never reach here.
             res += "Backup"
 
-        res += '</div><div>'
+        res += '</div><div class="py-1">'
         res += _("Running command:")
-        res += '</b><br><span class="pg-bg-cmd enable-selection">'
+        res += '<div class="pg-bg-cmd enable-selection p-1">'
         res += html.safe_str(cmd + self.cmd)
-        res += '</span></div>'
+        res += '</div></div>'
 
         return res
 

web/pgadmin/tools/backup/static/js/backup.js

@@ -50,7 +50,7 @@ define([
       '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '<% } %>',
     ].join('\n')),
-    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-xs-12',
+    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-xs-12 row',
   });
 
   //Backup Model (Server Node)
@@ -242,6 +242,7 @@ define([
       control: 'fieldset',
       label: gettext('Sections'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'pre_data',
         label: gettext('Pre-data'),
@@ -283,6 +284,7 @@ define([
       control: 'fieldset',
       label: gettext('Type of objects'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'only_data',
         label: gettext('Only data'),
@@ -326,6 +328,7 @@ define([
       control: 'fieldset',
       label: gettext('Do not save'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'dns_owner',
         label: gettext('Owner'),
@@ -370,6 +373,7 @@ define([
       control: 'fieldset',
       label: gettext('Queries'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'use_column_inserts',
         label: gettext('Use Column Inserts'),
@@ -429,6 +433,7 @@ define([
       control: 'fieldset',
       label: gettext('Disable'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'disable_trigger',
         label: gettext('Trigger'),
@@ -450,6 +455,7 @@ define([
       control: 'fieldset',
       label: gettext('Miscellaneous'),
       group: gettext('Dump options'),
+      contentClass: 'row',
       schema: [{
         id: 'with_oids',
         label: gettext('With OID(s)'),

web/pgadmin/tools/backup/static/js/backup_dialog_wrapper.js

@@ -29,8 +29,8 @@ export class BackupDialogWrapper extends DialogWrapper {
   setup() {
     return {
       buttons: [{
-        text: '<span class="fa fa-lg fa-info"></span>',
-        className: 'btn btn-default pull-left',
+        text: '',
+        className: 'btn btn-secondary pull-left fa fa-info pg-alertify-icon-button',
         attrs: {
           name: 'object_help',
           type: 'button',
@@ -38,9 +38,9 @@ export class BackupDialogWrapper extends DialogWrapper {
           label: gettext('Backup'),
         },
       }, {
-        text: '<span class="fa fa-lg fa-question"></span>',
+        text: '',
         key: 112,
-        className: 'btn btn-default pull-left',
+        className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
         attrs: {
           name: 'dialog_help',
           type: 'button',
@@ -49,16 +49,16 @@ export class BackupDialogWrapper extends DialogWrapper {
             'filename': 'backup_dialog.html',
           }),
         },
+      }, {
+        text: gettext('Cancel'),
+        key: 27,
+        className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
+        'data-btn-name': 'cancel',
       }, {
         text: gettext('Backup'),
         key: 13,
         className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
         'data-btn-name': 'backup',
-      }, {
-        text: gettext('Cancel'),
-        key: 27,
-        className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
-        'data-btn-name': 'cancel',
       }],
       // Set options for dialog
       options: {
@@ -188,11 +188,11 @@ export class BackupDialogWrapper extends DialogWrapper {
   }
 
   disableBackupButton() {
-    this.__internal.buttons[2].element.disabled = true;
+    this.__internal.buttons[3].element.disabled = true;
   }
 
   enableBackupButton() {
-    this.__internal.buttons[2].element.disabled = false;
+    this.__internal.buttons[3].element.disabled = false;
   }
 
   createDialog(node, treeInfo, typeOfDialog, $container) {