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/restore/__init__.py

@@ -121,15 +121,11 @@ class RestoreMessage(IProcessDesc):
             )
         )
 
-        res += '</div><div><b>'
-        res += html.safe_str(
-            _("Running command:")
-        )
-        res += '</b><br><span class="pg-bg-cmd enable-selection">'
-        res += html.safe_str(cmd)
-        res += self.cmd
-        res += '</span></div>'
-
+        res += '</div><div class="py-1">'
+        res += _("Running command:")
+        res += '<div class="pg-bg-cmd enable-selection p-1">'
+        res += html.safe_str(cmd + self.cmd)
+        res += '</div></div>'
         return res
 
 

web/pgadmin/tools/restore/static/js/restore.js

@@ -29,7 +29,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
       '<% } %>',
     ].join('\n')),
-    className: 'pgadmin-control-group form-group pg-el-xs-4',
+    className: 'pgadmin-control-group form-group pg-el-4 row',
   });
 
   //Restore Model (Objects like Database/Schema/Table)
@@ -146,6 +146,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Sections'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'pre_data',
         label: gettext('Pre-data'),
@@ -188,6 +189,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Type of objects'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'only_data',
         label: gettext('Only data'),
@@ -222,6 +224,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Do not save'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'dns_owner',
         label: gettext('Owner'),
@@ -260,6 +263,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Queries'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'include_create_database',
         label: gettext('Include CREATE DATABASE statement'),
@@ -287,6 +291,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Disable'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'disable_trigger',
         label: gettext('Trigger'),
@@ -304,6 +309,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
       control: 'fieldset',
       label: gettext('Miscellaneous / Behavior'),
       group: gettext('Restore options'),
+      contentClass: 'row',
       schema: [{
         id: 'verbose',
         label: gettext('Verbose messages'),

web/pgadmin/tools/restore/static/js/restore_dialog_wrapper.js

@@ -22,8 +22,8 @@ export class RestoreDialogWrapper 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',
@@ -31,9 +31,9 @@ export class RestoreDialogWrapper extends DialogWrapper {
           label: gettext('Restore'),
         },
       }, {
-        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',
@@ -42,18 +42,18 @@ export class RestoreDialogWrapper extends DialogWrapper {
             'filename': 'restore_dialog.html',
           }),
         },
+      }, {
+        text: gettext('Cancel'),
+        key: 27,
+        className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
+        restore: false,
+        'data-btn-name': 'cancel',
       }, {
         text: gettext('Restore'),
         key: 13,
         className: 'btn btn-primary fa fa-upload pg-alertify-button',
         restore: true,
         'data-btn-name': 'restore',
-      }, {
-        text: gettext('Cancel'),
-        key: 27,
-        className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
-        restore: false,
-        'data-btn-name': 'cancel',
       }],
       // Set options for dialog
       options: {
@@ -177,11 +177,11 @@ export class RestoreDialogWrapper extends DialogWrapper {
   }
 
   disableRestoreButton() {
-    this.__internal.buttons[2].element.disabled = true;
+    this.__internal.buttons[3].element.disabled = true;
   }
 
   enableRestoreButton() {
-    this.__internal.buttons[2].element.disabled = false;
+    this.__internal.buttons[3].element.disabled = false;
   }
 
   createDialog(node, treeInfo, $container) {