Fixed following:

- Base font size changed from 0.815rem to 0.875rem, for navbar from 0.875rem to 0.925rem. - Dialog sizes made consistent throughout the application. Now there are 3 size options for width and height each - sm, md, lg. Combination of any of these to be used hereafter - Alignment fix for controls of Node properties dialogs which includes showing text and label in one line without dialog size change, checkbox alignment, switch control alignment at places and other minor improvements in other dialogs - Error message design change in dialogs validation - SQL Editor data grid editor popup design changes which were missed - Design change for dashboard server activity grid - Login page language dropdown color fix - Properties accordion collapse design fix - Help, Info icon fixed across all dialogs which were not working if clicked exactly on the text - Added missing icon with buttons at few places - Shadow behind the dialogs is increased to make it look clearly separated and depth. - Control Alignment fix in maintenance dialog - Min height of alertify dialogs set for better UX - File dialog design fix when no files found - Grant wizard fixes - Scroll bar visibility on first page, use full space for SQL generated on the last page - Browser toolbar buttons changed to sync with SQL editor toolbar buttons - Rounded corners for docker floating dialog (no properties) - Renaming file in file dialog should show original file name - SQL data grid text edit popup buttons behaviour was swapped. This is fixed. - Import/Export dialog changes as per new design.
2025-02-25 18:55:31 -06:00 · 2019-01-02 15:05:15 +05:30
parent 1b9c841c15
commit 86ecf9c84e
65 changed files with 512 additions and 341 deletions
--- a/web/pgadmin/about/static/js/about.js
+++ b/web/pgadmin/about/static/js/about.js
@@ -20,7 +20,8 @@ define(
              },
              setup: function() {
                return {
-                  buttons:[{ text: gettext('OK'), key: 27, className: 'btn btn-primary' }],
+                  buttons:[{ text: gettext('OK'), key: 27,
+                    className: 'btn btn-primary fa fa-lg fa-check pg-alertify-button' }],
                  options: {
                    modal: false,
                    resizable: true,
@@ -44,7 +45,7 @@ define(
            function(data) {
              alertify.aboutDialog(
                  S(gettext('About %s')).sprintf(pgAdmin.Browser.utils.app_name).value(), data
-              ).resizeTo(800, 450);
+              ).resizeTo(pgAdmin.Browser.stdW.md, pgAdmin.Browser.stdH.md);
            });
      },
    };
--- a/web/pgadmin/browser/server_groups/servers/databases/languages/static/js/language.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/languages/static/js/language.js
@@ -220,14 +220,14 @@ define('pgadmin.node.language', [
          },
        }, {
          id: 'lanacl', label: gettext('Privileges'), type: 'collection',
-          group: 'security', control: 'unique-col-collection', mode: ['edit', 'create'],
+          group: gettext('Security'), control: 'unique-col-collection', mode: ['edit', 'create'],
          model: pgBrowser.Node.PrivilegeRoleModel.extend({
            privileges: ['U'],
          }), canAdd: true, canDelete: true, uniqueCol : ['grantee'],
        },{
          id: 'seclabels', label: gettext('Security Labels'), mode: ['edit', 'create'],
          model: pgBrowser.SecLabelModel, editable: false,
-          type: 'collection', group: 'security', min_version: 90200,
+          type: 'collection', group: gettext('Security'), min_version: 90200,
          canAdd: true, canEdit: false, canDelete: true,
          control: 'unique-col-collection',
        },
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/static/js/schema.js
@@ -72,7 +72,7 @@ define('pgadmin.node.schema', [
        var grid = self.grid = new Backgrid.Grid({
          columns: self.grid_columns,
          collection: self.model.get(self.field.get('name')),
-          className: 'backgrid table-bordered',
+          className: 'backgrid table-bordered table-noouter-border table-hover',
        });

      // render grid
@@ -120,6 +120,8 @@ define('pgadmin.node.schema', [

   // Extend the browser's collection class for VacuumSettingsModel
  Backform.VacuumSettingsSchema = [{
+    id: 'spacer_ctrl', group: gettext('Table'), mode: ['edit', 'create'], type: 'spacer',
+  },{
    id: 'autovacuum_custom', label: gettext('Custom auto-vacuum?'),
    group: gettext('Table'), mode: ['edit', 'create'],
    type: 'switch',
@@ -184,6 +186,8 @@ define('pgadmin.node.schema', [
      ],
    }),
    deps: ['autovacuum_enabled'],
+  },{
+    id: 'spacer_ctrl', group: gettext('Toast Table'), mode: ['edit', 'create'], type: 'spacer',
  },{
    id: 'toast_autovacuum', label: gettext('Custom auto-vacuum?'),
    group: gettext('Toast Table'), mode: ['edit', 'create'],
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/indexes/static/js/index.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/indexes/static/js/index.js
@@ -228,7 +228,6 @@ define('pgadmin.node.index', [
      hasDepends: true,
      hasStatistics: true,
      statsPrettifyFields: ['Size', 'Index size'],
-      width: '45%',
      Init: function() {
        /* Avoid mulitple registration of menus */
        if (this.initialized)
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/table.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/table.js
@@ -44,7 +44,7 @@ define('pgadmin.node.table', [
      sqlCreateHelp: 'sql-createtable.html',
      dialogHelp: url_for('help.static', {'filename': 'table_dialog.html'}),
      hasScriptTypes: ['create', 'select', 'insert', 'update', 'delete'],
-      width: '60%',
+      width: '650px',
      Init: function() {
        /* Avoid multiple registration of menus */
        if (this.initialized)
--- a/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js
+++ b/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js
@@ -187,6 +187,15 @@ define('pgadmin.node.pga_schedule', [
        },
      });

+    var CustomInfoControl = Backform.Control.extend({
+      template: _.template([
+        '<div>',
+        '  <%=infotext%>',
+        '</div>',
+      ].join('\n')),
+      className: 'pgadmin-control-group',
+    });
+
    pgBrowser.Nodes['pga_schedule'] = pgBrowser.Node.extend({
      parent_type: 'pga_job',
      type: 'pga_schedule',
@@ -335,6 +344,10 @@ define('pgadmin.node.pga_schedule', [
              return this;
            },
          }), mode: ['properties'],
+        },{
+          type: 'control',  mode: ['create', 'edit'], group: gettext('Repeat'),
+          infotext: gettext('Schedules are specified using a <b>cron-style</b> format.<br/><ul><li>For each selected time or date element, the schedule will execute.<br/>e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.<br/></li><li>Values from more than one field may be specified in order to further control the schedule.<br/>e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.</li><li>For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.</li></ul>'),
+          control: CustomInfoControl,
        },{
          type: 'nested', label: gettext('Days'), group: gettext('Repeat'),
          mode: ['create', 'edit'],
@@ -344,11 +357,11 @@ define('pgadmin.node.pga_schedule', [
                this, arguments
              );

-              this.$el.prepend(
-                '<div class="set-group">' +
-                  gettext('Schedules are specified using a <b>cron-style</b> format.<br/><ul><li>For each selected time or date element, the schedule will execute.<br/>e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.<br/></li><li>Values from more than one field may be specified in order to further control the schedule.<br/>e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.</li><li>For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.</li></ul>') +
-                  '</div>'
-              );
+              // $(
+              //   '<div>' +
+              //     gettext('Schedules are specified using a <b>cron-style</b> format.<br/><ul><li>For each selected time or date element, the schedule will execute.<br/>e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.<br/></li><li>Values from more than one field may be specified in order to further control the schedule.<br/>e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.</li><li>For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.</li></ul>') +
+              //   '</div>'
+              // ).insertBefore(this.$el);

              return res;
            },
--- a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
+++ b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
@@ -68,18 +68,19 @@ define('pgadmin.node.role', [

  var RoleCustomSwitchControl = Backform.SwitchControl.extend({
    template: _.template([
-      '<label class="control-label"><%=label%></label>',
-      '<div class="pgadmin-controls">',
-      '  <div class="checkbox" style="float:right">',
+      '<label class="control-label pg-el-sm-10 pg-el-12"><%=label%></label>',
+      '<div class="pgadmin-controls pg-el-sm-2 pg-el-12">',
+      '  <div class="checkbox">',
      '    <label>',
      '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
      '    </label>',
      '  </div>',
-      '  <% if (helpMessage && helpMessage.length) { %>',
-      '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '  <% } %>',
      '</div>',
+      '<% if (helpMessage && helpMessage.length) { %>',
+      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
+      '<% } %>',
    ].join('\n')),
+    className: 'pgadmin-control-group form-group pg-el-12 row',
  });

  var RoleMembersControl = Backform.Control.extend({
--- a/web/pgadmin/browser/server_groups/servers/static/css/servers.css
+++ b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
@@ -9,4 +9,4 @@

 .change_password {
  padding-left: 7px;
-}
+}
--- a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
+++ b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
@@ -302,7 +302,7 @@ define('pgadmin.node.tablespace', [
              };
            });
          }
-          Alertify.move_objects_dlg(true).resizeTo('40%','50%');
+          Alertify.move_objects_dlg(true).resizeTo(pgBrowser.stdW.md,pgBrowser.stdH.md);
        },
      },
      model: pgBrowser.Node.Model.extend({
--- a/web/pgadmin/browser/server_groups/static/js/server_group.js
+++ b/web/pgadmin/browser/server_groups/static/js/server_group.js
@@ -9,8 +9,8 @@ define('pgadmin.node.server_group', [
      type: 'server_group',
      dialogHelp: url_for('help.static', {'filename': 'server_group_dialog.html'}),
      label: gettext('Server Group'),
-      width: '350px',
-      height: '250px',
+      width: '250px',
+      height: '150px',
      is_collection: true,
      Init: function() {
        /* Avoid multiple registration of menus */
--- a/web/pgadmin/browser/static/css/wizard.css
+++ b/web/pgadmin/browser/static/css/wizard.css
@@ -44,30 +44,11 @@
  width: 140px;
 }

-.wizard-right-panel_content {
-  padding: 0.5rem 0rem;
-}
-
 /* Wizard Footer CSS */
 .pgadmin-wizard .footer .row {
  margin: 0 -6px 3px -6px;
 }

-/* Wizard Button CSS */
-
-.pgadmin-wizard .wizard-buttons button.wizard-next i.fa {
-  padding-left: 5px;
-}
-
-.pgadmin-wizard .wizard-buttons button.wizard-back i.fa,
-.pgadmin-wizard .wizard-buttons button.wizard-cancel i.fa {
-  padding-right: 5px;
-}
-
-.pgadmin-wizard .wizard-buttons .wizard-finish {
-  margin-right: 0 !important;
-}
-
 .wizard-header .wizard-cancel-event {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAdklEQVQ4jd2SwQnAIAxF36GH0pOTFHEgF3IkR5LO0F4SCGJVEHroAy/f/E+igV+yAa6hO7nrcgAZuIBg9CBalppXEnDL0RA1q556ASdQqhBrLlLTxVch1uxHZiU2AuKs2Vdt23GGHSy/wfIvzOzBPhpjaRO/5wG/szevJ+ZXzAAAAABJRU5ErkJggg==) no-repeat center center;
  padding: 10px;
--- a/web/pgadmin/browser/static/js/browser.js
+++ b/web/pgadmin/browser/static/js/browser.js
@@ -108,6 +108,19 @@ define('pgadmin.browser', [
    // It will be used to register extensions, tools, child node scripts,
    // etc.
    scripts: {},
+    // Standard Widths and Height for dialogs in px
+    stdW: {
+      sm: 500,
+      md: 700,
+      lg: 900,
+      default: 500,
+    },
+    stdH: {
+      sm: 200,
+      md: 400,
+      lg: 550,
+      default: 550,
+    },
    // Default panels
    panels: {
      // Panel to keep the left hand browser tree
--- a/web/pgadmin/browser/static/js/node.js
+++ b/web/pgadmin/browser/static/js/node.js
@@ -313,18 +313,19 @@ define('pgadmin.browser.node', [
          }

          var onSessionInvalid = function(msg) {
-            var alertMessage = '\
-              <div class="media error-in-footer bg-danger-light border-danger text-danger text-14">\
-                <div class="media-body media-middle">\
-                  <div class="alert-icon error-icon">\
-                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
-                  </div>\
-                    <div class="alert-text">' + msg + '</div>\
-                    <div class="close-error-bar">\
-                      <a class="close-error">x</a>\
-                    </div>\
-                </div>\
-              </div>';
+            var alertMessage = `
+            <div class="error-in-footer">
+              <div class="d-flex px-2 py-1">
+                <div class="pr-2">
+                  <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
+                </div>
+                <div class="alert-text">${msg}</div>
+                <div class="ml-auto close-error-bar">
+                  <a class="close-error fa fa-times text-danger"></a>
+                </div>
+              </div>
+            </div>`;
+
            if (!_.isUndefined(that.statusBar)) {
              that.statusBar.html(alertMessage).css('visibility', 'visible');
              that.statusBar.find('a.close-error').bind('click', function() {
@@ -558,12 +559,43 @@ define('pgadmin.browser.node', [

            d.body.insertBefore(el, d.body.firstChild);

-            var pW = screen.width < 800 ? '95%' : '500px',
-              pH = screen.height < 600 ? '95%' : '550px',
-              w = pgAdmin.toPx(el, self.width || pW, 'width', true),
-              h = pgAdmin.toPx(el, self.height || pH, 'height', true),
-              x = (b.offsetWidth - w) / 2,
-              y = (b.offsetHeight - h) / 2;
+            let w, h, x, y;
+            if(screen.width < 800) {
+              w= pgAdmin.toPx(el, '95%', 'width', true);
+            } else {
+              w= pgAdmin.toPx(el, self.width || pgBrowser.stdW.default+'px', 'width', true);
+
+              /* Fit to standard sizes */
+              if(w <= pgBrowser.stdW.sm) {
+                w = pgBrowser.stdW.sm;
+              } else {
+                if(w <= pgBrowser.stdW.md) {
+                  w = pgBrowser.stdW.md;
+                } else {
+                  w = pgBrowser.stdW.lg;
+                }
+              }
+            }
+
+            if(screen.height < 600) {
+              h = pgAdmin.toPx(el, '95%', 'height', true);
+            } else {
+              h = pgAdmin.toPx(el, self.height || pgBrowser.stdH.default+'px', 'height', true);
+
+              /* Fit to standard sizes */
+              if(h <= pgBrowser.stdH.sm) {
+                h = pgBrowser.stdH.sm;
+              } else {
+                if(h <= pgBrowser.stdH.md) {
+                  h = pgBrowser.stdH.md;
+                } else {
+                  h = pgBrowser.stdH.lg;
+                }
+              }
+            }
+
+            x = (b.offsetWidth - w) / 2,
+            y = (b.offsetHeight - h) / 4;

            var p = pgBrowser.docker.addPanel(
              'node_props', wcDocker.DOCK.FLOAT, undefined, {
@@ -1319,7 +1351,7 @@ define('pgadmin.browser.node', [

            var btnGroup = this.find('.pg-prop-btn-group'),
              btnSave = btnGroup.find('button.btn-primary'),
-              btnReset = btnGroup.find('button.btn-warning');
+              btnReset = btnGroup.find('button.btn-secondary[type="reset"]');

            if (hasError || !modified) {
              btnSave.prop('disabled', true);
--- a/web/pgadmin/browser/static/js/panel.js
+++ b/web/pgadmin/browser/static/js/panel.js
@@ -142,10 +142,10 @@ define(
              p.pgResizeTimeout = null;

              /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
-              if (w < 576) {
+              if (w < 480) {
                w = 'xs';
              }
-              if (w >= 576) {
+              if (w >= 480) {
                w = 'sm';
              }
              if (w >= 768) {
--- a/web/pgadmin/browser/static/js/toolbar.js
+++ b/web/pgadmin/browser/static/js/toolbar.js
@@ -13,6 +13,7 @@ let _defaultToolBarButtons = [
    text: '',
    toggled: false,
    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
    enabled: false,
  },
  {
@@ -21,6 +22,7 @@ let _defaultToolBarButtons = [
    text: '',
    toggled: false,
    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
    enabled: false,
  },
  {
@@ -29,6 +31,7 @@ let _defaultToolBarButtons = [
    text: '',
    toggled: false,
    toggleClass: '',
+    parentClass: 'pg-toolbar-btn',
    enabled: false,
  },
 ];
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -106,20 +106,19 @@ define([
      '        </div>' +
      '      </div>' +
      '      <div class="wizard-footer pg-prop-footer">' +
-        '      <div class="pg-prop-status-bar" style="visibility:hidden">' +
-        '        <div class="media error-in-footer bg-danger-light border-danger text-danger text-14">' +
-        '          <div class="media-body media-middle">' +
-        '            <div class="alert-icon error-icon">' +
-        '              <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>' +
-        '            </div>' +
-        '            <div class="alert-text">' +
-        '            </div>' +
-        '            <div class="close-error-bar">' +
-        '              <a class="close-error">x</a>' +
-        '            </div>' +
-        '          </div>' +
-        '        </div>' +
-        '      </div>' +
+      '        <div class="pg-prop-status-bar" style="visibility:hidden">' +
+      '          <div class="error-in-footer"> ' +
+      '            <div class="d-flex px-2 py-1"> ' +
+      '              <div class="pr-2"> ' +
+      '                <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i> ' +
+      '              </div> ' +
+      '              <div class="alert-text"></div> ' +
+      '              <div class="ml-auto close-error-bar"> ' +
+      '                <a class="close-error fa fa-times text-danger"></a> ' +
+      '              </div> ' +
+      '            </div> ' +
+      '          </div> ' +
+      '        </div>' +
      '        <div class="wizard-buttons d-flex">' +
      '          <div>' +
      '            <button title = "' + gettext('Help for this dialog.') + '"' +
@@ -128,14 +127,14 @@ define([
      '          </div>' +
      '          <div class="ml-auto">' +
      '              <button class="btn btn-secondary wizard-cancel" <%=this.options.disable_cancel ? "disabled" : ""%>>' +
-      '                <i class="fa fa-lg fa-close"></i>' + gettext('Cancel') + '</button>' +
+      '                <i class="fa fa-close"></i>&nbsp;' + gettext('Cancel') + '</button>' +
      '              <button class="btn btn-secondary wizard-back" <%=this.options.disable_prev ? "disabled" : ""%>>' +
-      '                <i class="fa fa-backward"></i>' + gettext('Back') + '</button>' +
+      '                <i class="fa fa-backward"></i>&nbsp;' + gettext('Back') + '</button>' +
      '              <button class="btn btn-secondary wizard-next" <%=this.options.disable_next ? "disabled" : ""%>>' +
      '                ' + gettext('Next') +
-      '                <i class="fa fa-forward"></i></button>' +
+      '                &nbsp;<i class="fa fa-forward"></i></button>' +
      '              <button class="btn btn-primary wizard-finish" <%=this.options.disable_finish ? "disabled" : ""%>>' +
-      '                ' + gettext('Finish') + '</button>' +
+      '                <i class="fa fa-check"></i>&nbsp;' + gettext('Finish') + '</button>' +
      '          </div>' +
      '        </div>' +
      '      </div>' +
--- a/web/pgadmin/browser/static/scss/_browser.scss
+++ b/web/pgadmin/browser/static/scss/_browser.scss
@@ -46,3 +46,8 @@ samp,
  text-align: center;
  color: $loading-fg;
 }
+
+.pg-toolbar-btn {
+  margin-left: 0.25rem;
+  border: $input-btn-border-width solid $btn-secondary-border;
+}
--- a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
+++ b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
@@ -82,7 +82,7 @@ $bgproc-container-pad: 2px;

 .ajs-bg-bgprocess > .pg-bg-bgprocess > .pg-bg-status.bg-failed {
  color: $color-fg;
-  background-color: $color-danger-light;
+  background-color: $color-danger-lighter;
 }

 .pg-panel-content div.bg-process-watcher {
--- a/web/pgadmin/misc/file_manager/static/css/file_manager.css
+++ b/web/pgadmin/misc/file_manager/static/css/file_manager.css
@@ -236,10 +236,8 @@ a.dz-remove {

 .file_listing .no_folder_found {
  text-align: center;
-  position: absolute;
-  top: 50px;
  width: 100%;
-  font-size: 14px;
+  padding: 0.5rem;
 }

 div.change_file_types span {
--- a/web/pgadmin/misc/file_manager/static/js/file_manager.js
+++ b/web/pgadmin/misc/file_manager/static/js/file_manager.js
@@ -29,9 +29,9 @@ define('misc.file_manager', [
    // Call dialogs subject to dialog_type param
    show_dialog: function(params) {
      if (params.dialog_type == 'create_file') {
-        Alertify.createModeDlg(params).resizeTo('60%', '80%');
+        Alertify.createModeDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
      } else {
-        Alertify.fileSelectionDlg(params).resizeTo('60%', '80%');
+        Alertify.fileSelectionDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
      }
    },
  };
--- a/web/pgadmin/misc/file_manager/static/js/utility.js
+++ b/web/pgadmin/misc/file_manager/static/js/utility.js
@@ -576,7 +576,7 @@ define([

          result += '</ul>';
        } else {
-          result += '<table id="contents" class="table table-bordered table-noouter-border table-hover tablesorter">';
+          result += '<table id="contents" class="table table-bordered table-noouter-border table-bottom-border table-hover tablesorter">';
          result += '<thead><tr><th>';
          result += '<span>' + lg.name + '</span></th>';
          result += '<th><span>' + lg.size + '</span></th><th>';
@@ -659,16 +659,15 @@ define([
        if ($('.fileinfo').data('view') == 'grid') {
          result += '<ul id="contents" class="grid"></ul>';
        } else {
-          result += '<table id="contents" class="list tablesorter">';
-          result += '<thead><tr><th><span>' +
-            lg.name + '</span></th><th><span>' + lg.size +
-            '</span></th><th><span>' + lg.modified +
-            '</span></th></tr></thead>';
-          result += '<tbody>';
+          result += '<table id="contents" class="table table-bordered table-noouter-border table-empty-rows ablesorter">';
+          result += '<thead><tr><th><span>' + lg.name + '</span></th>' +
+                    '<th><span>' + lg.size + '</span></th>' +
+                    '<th><span>' + lg.modified + '</span></th>' +
+                    '</tr></thead>';
+          result += '</tbody>';
+          result += '</table>';
        }
-        result += '<h1 class="no_folder_found">' +
-          lg.could_not_retrieve_folder + '</h1>';
-
+        result += '<div class="no_folder_found">' + lg.could_not_retrieve_folder + '</div>';
        var cap_no_folders = ['upload', 'create'];

        data.Capabilities = cap_no_folders;
@@ -691,7 +690,7 @@ define([
        if ($('.fileinfo').data('view') == 'grid') {
          e.stopPropagation();
          $this = $('.file_manager').find('#contents li.selected p');
-          orig_value = decodeURI($this.find('span').attr('title'));
+          orig_value = decodeURI($this.find('span.less_text').attr('title'));
          newvalue = orig_value.substring(0, orig_value.indexOf('.'));

          if (newvalue === '') {
@@ -715,7 +714,7 @@ define([
          $this = $('.fileinfo').find(
            'table#contents tbody tr.selected td:first-child p'
          );
-          orig_value = decodeURI($this.find('span').html()),
+          orig_value = decodeURI($this.find('span.less_text').html()),
            newvalue = orig_value.substring(0, orig_value.lastIndexOf('.'));

          if (orig_value.lastIndexOf('/') == orig_value.length - 1 || newvalue === '') {
@@ -1137,7 +1136,7 @@ define([
            <input type='checkbox' id='show_hidden' onclick='pgAdmin.FileUtils.handleClick(this)' tabindex='11'>
          </div>
          <div class="ml-auto">
-            <label>${gettext('Format')}</label>
+            <label class="my-auto">${gettext('Format')}</label>
            <select name='type' tabindex='12'>${fileFormats}</select>
          <div>`;
        }
--- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
+++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
@@ -142,6 +142,9 @@

 .allowed_file_types {
  border-top: $panel-border;
+  background: $color-bg-theme;
+  z-index: 5;
+  padding: 0.25rem;
 }

 .upload_file{
@@ -211,10 +214,10 @@
 }

 .fileinfo .fm_dimmer {
-  height: calc(100% - 32px);
  display: none;
-  top: 0px;
-  background:$color-fg;
+  top: 0;
+  bottom: 0;
+  background: $loading-bg;
  opacity: 0.5;
  width: 100%;
  position: absolute;
@@ -223,10 +226,8 @@

 .fileinfo .delete_item, .fileinfo .replace_file {
  display: none;
-  padding: 15px 15px;
-  border: 1px solid $color-gray-light;
-  border-left: 0;
-  border-right: 0;
+  padding: 1rem;
+  border-bottom: $panel-border;
  background: $color-bg-theme;
  position: absolute;
  top: 0;
@@ -235,15 +236,6 @@
  z-index: 4;
 }

-.fileinfo .delete_item span.pull-right .btn,
-.fileinfo .replace_file span.pull-right .btn {
-  padding: 0px 5px;
-  color: $color-fg;
-  background: $color-bg;
-  font-size: 12px;
-  margin-right: 4px;
-}
-
 .upload_file .dz_cross_btn {
  color: $color-fg-theme;
  right: 0px;
--- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html
+++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
@@ -64,16 +64,16 @@
        <div class='fm_dimmer'></div>
        <div class='delete_item'>
            <span>{{ _('Are you sure you want to delete this item?') }}</span>
-        <span class="pull-right">
-        <button type='button' class='btn btn_yes' tabindex="13">{{ _('Yes') }}</button>
-        <button type='button' class='btn btn_no' tabindex="14">{{ _('No') }}</button>
-        </span>
+            <span class="pull-right">
+                <button type='button' class='btn btn-secondary btn_no' tabindex="14">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary btn_yes' tabindex="13">{{ _('Yes') }}</button>
+            </span>
        </div>
        <div class='replace_file'>
            <span>{{ _('Are you sure you want to replace this file?') }}</span>
            <span class="pull-right">
-                <button type='button' class='btn btn_yes' tabindex="15">{{ _('Yes') }}</button>
-                <button type='button' class='btn btn_no' tabindex="16">{{ _('No') }}</button>
+                <button type='button' class='btn btn-secondary btn_no' tabindex="16">{{ _('No') }}</button>
+                <button type='button' class='btn btn-primary btn_yes' tabindex="15">{{ _('Yes') }}</button>
            </span>
        </div>
    </div>
--- a/web/pgadmin/misc/static/explain/css/explain.css
+++ b/web/pgadmin/misc/static/explain/css/explain.css
@@ -6,11 +6,11 @@
    cursor: pointer;
 }

-.pg-explain-zoom-btn {
+.pg-explain-zoom-btn,
+.pg-explain-download-btn {
    top: 5px;
    min-width: 25px;
    cursor: pointer;
-    border: 1px solid transparent;
    font-size: 0.75rem;
 }

@@ -72,10 +72,3 @@ td.explain-tooltip-val {
    left: 79px;
    opacity: 0.5;
 }
-
-.pg-explain-download-btn {
-    top: 5px;
-    min-width: 25px;
-    border: 1px solid transparent;
-    font-size: 0.75rem;
-}
--- a/web/pgadmin/preferences/static/js/preferences.js
+++ b/web/pgadmin/preferences/static/js/preferences.js
@@ -307,12 +307,6 @@ define('pgadmin.preferences', [
                  /*
                   * Clear the existing html in the preferences content
                   */
-                // Keyboard short cuts and nodes wiull have striped divs
-                if (d.label.toLowerCase() == 'keyboard shortcuts' || d.label.toLowerCase() == 'nodes')
-                  $container.find('.preferences_content').addClass('striped-divs');
-                else
-                  $container.find('.preferences_content').removeClass('striped-divs');
-
                $container.find('.preferences_content');

                renderPreferencePanel(d.preferences);
@@ -477,7 +471,7 @@ define('pgadmin.preferences', [

    },
    show: function() {
-      Alertify.preferencesDlg(true).resizeTo('60%', '60%');
+      Alertify.preferencesDlg(true).resizeTo(pgAdmin.Browser.stdW.lg,pgAdmin.Browser.stdH.lg);
    },
  };

--- a/web/pgadmin/preferences/static/scss/_preferences.scss
+++ b/web/pgadmin/preferences/static/scss/_preferences.scss
@@ -3,22 +3,13 @@
  padding-top: 2px;
  height: 100%;
  overflow: auto;
-  border-right: 2px solid $color-gray-light;
-  background-image: $color-gray-lighter;
-}
-
-.preferences_content {
-  &.striped-divs > {
-    div.pgadmin-control-group:nth-of-type(odd) {
-      background: $color-gray-light;
-      padding-top: 6px;
-    }
-    div.pgadmin-control-group:nth-of-type(even) {
-      background: $color-bg-theme;
-    }
-  }
+  border-right: $panel-border;
 }

 .btn-checkbox {
  padding: $btn-checkbox-padding;
+
+  & input[type="checkbox"]{
+    margin-top: 0px !important;
+  }
 }
--- a/web/pgadmin/static/js/alertify.pgadmin.defaults.js
+++ b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
@@ -197,10 +197,10 @@ define([
        this.pgResizeTimeout = null;

        /** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
-        if (w < 576) {
+        if (w < 480) {
          w = 'xs';
        }
-        if (w >= 576) {
+        if (w >= 480) {
          w = 'sm';
        }
        if (w >= 768) {
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -2288,7 +2288,7 @@ define([
      '<div class="input-group">',
      '<input type="<%=type%>" class="form-control <%=extraClasses.join(\' \')%>" name="<%=name%>" min="<%=min%>" max="<%=max%>"maxlength="<%=maxlength%>" value="<%-value%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
      '<div class="input-group-append">',
-      '<button class="btn btn-outline-secondary fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> ></button>',
+      '<button class="btn btn-secondary fa fa-ellipsis-h select_item" <%=disabled ? "disabled" : ""%> ></button>',
      '</div>',
      '</div>',
      '<% if (helpMessage && helpMessage.length) { %>',
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -36,7 +36,13 @@
  function getButtons(editable) {
    var $buttons = $('<div class=\'pg_buttons\' />'),
      label = editable ? 'Cancel' : 'OK',
-      button_type = editable ? 'btn-danger' : 'btn-primary';
+      button_type = editable ? 'btn-secondary' : 'btn-primary',
+      button_icon = editable ? 'fa-times' : 'fa-check';
+
+    $('<button class=\'btn ' + button_type + ' long_text_editor pg-alertify-button\' data-label="'+label+'">' +
+    '<span class="fa '+ button_icon +' pg-alertify-button"></span>&nbsp;'+ label +
+    '</button>')
+    .appendTo($buttons);

    if (editable) {
      $('<button class=\'btn btn-primary long_text_editor\' data-label="Save">'+
@@ -44,11 +50,6 @@
        '</button>')
        .appendTo($buttons);
    }
-
-    $('<button class=\'btn ' + button_type + ' long_text_editor pg-alertify-button\' data-label="'+label+'">' +
-      '<span class="fa fa-save pg-alertify-button"></span>&nbsp;'+ label +
-      '</button>')
-      .appendTo($buttons);
    return $buttons;
  }

@@ -140,8 +141,8 @@
      $input = getTextArea().appendTo($wrapper);
      $buttons = getButtons(true).appendTo($wrapper);

-      $buttons.find('button:first').on('click', this.save);
-      $buttons.find('button:last').on('click', this.cancel);
+      $buttons.find('button:first').on('click', this.cancel);
+      $buttons.find('button:last').on('click', this.save);
      $input.on('keydown', this.handleKeyDown);

      scope.position(args.position);
--- a/web/pgadmin/static/js/sqleditor/filter_dialog.js
+++ b/web/pgadmin/static/js/sqleditor/filter_dialog.js
@@ -112,19 +112,17 @@ let FilterDialog = {
            this.__internal.buttons[2].element.disabled = true;

            // Status bar
-            this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 d-none\'>' +
-              '  <div class=\'media error-in-footer bg-danger-light border-danger text-danger text-14\'>' +
-              '    <div class=\'media-body media-middle\'>' +
-              '      <div class=\'alert-icon error-icon\'>' +
-              '        <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
-              '      </div>' +
-              '      <div class=\'alert-text\'>' +
-              '      </div>' +
-              '    </div>' +
-              '  </div>' +
-              '</div>', {
-                text: '',
-              }).appendTo($container);
+            this.statusBar = $(
+              '<div class=\'pg-prop-status-bar pg-el-xs-12 d-none\'>' +
+              '  <div class="error-in-footer"> ' +
+              '    <div class="d-flex px-2 py-1"> ' +
+              '      <div class="pr-2"> ' +
+              '        <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i> ' +
+              '      </div> ' +
+              '      <div class="alert-text"></div> ' +
+              '    </div> ' +
+              '  </div> ' +
+              '</div>').appendTo($container);

            // To show progress on filter Saving/Updating on AJAX
            this.showFilterProgress = $(
@@ -259,7 +257,7 @@ let FilterDialog = {
        };
      });

-      Alertify.filterDialog(title).resizeTo('65%', '60%');
+      Alertify.filterDialog(title).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.md);
    })
    .fail(function(e) {
      handleQueryToolAjaxError(pgAdmin, handler, e, '_show_filter', [], true);
--- a/web/pgadmin/static/js/sqleditor/query_tool_notifications.js
+++ b/web/pgadmin/static/js/sqleditor/query_tool_notifications.js
@@ -88,14 +88,15 @@ let queryToolNotifications = {

    // Set up the grid
    let notifications_grid = new Backgrid.Grid({
+      emptyText: 'No data found',
      columns: gridCols,
      collection: queryToolNotifications.collection,
-      className: 'backgrid table-bordered presentation table backgrid-striped',
+      className: 'backgrid presentation table table-bordered table-hover table-noouter-border table-bottom-border',
    });

    // Render the grid
    if (notifications_grid)
-      notifications_panel.$container.append(notifications_grid.render().el);
+      notifications_panel.$container.find('.sql-editor-notifications').append(notifications_grid.render().el);
  },

  // This function is used to raise notify messages and update the
--- a/web/pgadmin/static/scss/_aci_tree.overrides.scss
+++ b/web/pgadmin/static/scss/_aci_tree.overrides.scss
@@ -3,7 +3,7 @@
 }
 .aciTree .aciTreeText {
 	font-family: $font-family-primary;
-	font-size: 12px;
+	font-size: 0.815rem;
 }
 .aciTree.aciTreeFocus .aciTreeFocus > .aciTreeLine  {
  background-color: $color-primary-light;
--- a/web/pgadmin/static/scss/_alert.scss
+++ b/web/pgadmin/static/scss/_alert.scss
@@ -104,25 +104,17 @@
  }

  .alert-text {
-    flex-grow: 1;
-    border: 1px solid $color-danger-light;
-    padding: 6px 12px 6px 10px;
-    border-left: none;
    -moz-user-select: text;
    -khtml-user-select: text;
    -webkit-user-select: text;
    -ms-user-select: text;
    user-select: text;
-    width: 100%;
  }

  .error-in-footer {
-    border-radius: 5px;
-    border: 1px solid transparent;
-
-    .alert-text {
-      border-color: $color-danger-light;
-    }
+    border-radius: $border-radius;
+    border: 1px solid $color-danger-light;
+    background: $color-danger-lighter;
  }

  .success-in-footer {
--- a/web/pgadmin/static/scss/_alertify.overrides.scss
+++ b/web/pgadmin/static/scss/_alertify.overrides.scss
@@ -32,7 +32,7 @@
        border-top-left-radius: $panel-border-radius;
        border-top-right-radius: $panel-border-radius;
        & .ajs-content {
-          top: 0;
+          top: 0 !important;
          border-radius: inherit;
        }
      }
@@ -48,7 +48,8 @@
    }
  }
  .ajs-body .ajs-content {
-    top: $title-height;
+    top: $title-height !important;
+    bottom: $footer-height-calc !important;
  }

  /* Removes padding from alertify footer */
@@ -114,6 +115,10 @@
  }
 }

+.alertify.ajs-frameless .ajs-body .ajs-content {
+  bottom: 0px !important;
+}
+
 .alertify.ajs-maximized .ajs-commands,
 .alertify.ajs-resizable .ajs-commands {
  margin: 2px 0px 0 0;
@@ -180,11 +185,9 @@
 }

 .pg-alertify-icon-button {
-  //refered - $input-btn-padding-y, $input-btn-padding-x
-  padding: 0.275rem $input-btn-padding-x;
  &:before {
    font-size: 1.3em !important;
-    line-height: 1.3;
+    line-height: 1.2;
    font-family: $font-family-icon;
  }
 }
@@ -195,7 +198,7 @@
 }

 .ajs-message.ajs-error.ajs-visible {
-  background: $color-danger-light;
+  background: $color-danger-lighter;
  border: $border-width solid $color-danger;
  @extend .ajs-text-smoothing;
 }
@@ -215,3 +218,7 @@
 .ajs-message > .media > .media-body.media-middle {
  display: flex;
 }
+
+.alertify .ajs-dimmer {
+  background-color: $loading-bg;
+}
--- a/web/pgadmin/static/scss/_backform.overrides.scss
+++ b/web/pgadmin/static/scss/_backform.overrides.scss
@@ -1,6 +1,6 @@
 .has-error {
  .pgadmin-controls .form-control {
-    border-color: $color-danger;
+    border-color: $color-danger-light;
  }

  .form-control {
@@ -11,15 +11,15 @@
    color: $color-danger;
  }

-  .control-label:before {
+  .control-label::before {
    font: normal normal normal 16px/1 FontAwesome;
    content: "\f071";
    text-decoration: inherit;
    position: absolute;
    color: $color-danger;
-    right: 6px;
-    padding-top: 6px;
+    right: 0.5rem;
    z-index: 1;
+    line-height: inherit;
  }
 }

@@ -36,10 +36,14 @@
  }
 }
 .backform-tab .tab-pane {
-	padding: 7px;
+	padding: 0.5rem;
 	&.SQL {
    height: 100%;
-    padding: 0px 7px 0px 0px;
+    padding: 0px;
+
+    & .pgadmin-controls.SQL {
+      padding: 0px;
+    }
 	}
 }

--- a/web/pgadmin/static/scss/_backgrid.overrides.scss
+++ b/web/pgadmin/static/scss/_backgrid.overrides.scss
@@ -1,6 +1,7 @@
 .backgrid th, .backgrid td {
  font-weight: normal!important;
  text-align: left;
+  line-height: $line-height-base;
 }

 .backgrid.backgrid-striped tbody {
@@ -223,6 +224,10 @@ span.form-control:disabled {
    background-color: $color-bg;
    border: 1px solid $border-color;
    border-radius: $panel-border-radius;
+
+    & .tab-pane {
+      padding: 0.5rem;
+    }
 }
 .subnode-footer {
    height: 38px;
--- a/web/pgadmin/static/scss/_bootstrap.overrides.scss
+++ b/web/pgadmin/static/scss/_bootstrap.overrides.scss
@@ -18,6 +18,10 @@ iframe {
 	border-width: 0;
 }

+legend {
+	margin-bottom: 0rem;
+}
+
 /* Padding for the treeview */
 .browser-browser-pane {
 	padding-left: 0;
@@ -134,13 +138,19 @@ iframe {
 	border-left: 5px solid;
 	border-top: 5px solid transparent;
 }
+/* 25px is for showing error icon */
 .control-label {
 	display: inline-block;
 	margin: 0px;
-	padding: 5px 25px 5px 5px;
+	padding: 5px 25px 5px 5px !important;
 	vertical-align: middle;
 }

+.form-check {
+	padding-left: 0rem;
+	padding-right: 0.5rem;
+}
+
 .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
 	color: $text-muted;
 }
@@ -259,6 +269,7 @@ td.switch-cell > div.bootstrap-switch {
 			font-weight: bold;
 			&.active {
 				border-bottom: $active-border !important;
+				color: $color-primary;
 			}
 		}
 	}
@@ -311,3 +322,17 @@ td.switch-cell > div.bootstrap-switch {
 .bootstrap-datetimepicker-widget thead th {
  background-color: $color-bg;
 }
+
+.input-group {
+    & .input-group-text {
+      background: $input-bg;
+	}
+}
+
+/* bootstrap-switch */
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary {
+	background: $color-primary;
+}
+.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success, .bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success {
+	background: $color-success;
+}
--- a/web/pgadmin/static/scss/_pgadmin.style.scss
+++ b/web/pgadmin/static/scss/_pgadmin.style.scss
@@ -24,9 +24,6 @@
 .user-language div{
  float:left;
 }
-.user-language select{
-  height: 25px !important;
-}

 .Resizer {
  background: $color-gray-lighter;
@@ -142,7 +139,7 @@
 }

 .alertify .ajs-body {
-  min-height: $footer-height-calc*2;
+  min-height: $footer-height-calc*1.5;
 }


@@ -248,6 +245,10 @@
    margin-bottom: 33px;
 }

+.pg-prop-btn-group-above {
+  border-bottom: $panel-border;
+}
+
 .has-pg-prop-btn-group {
    top: 45px;
    height: calc(100% - 45px);
@@ -323,9 +324,10 @@
 }

 .pgadmin-controls {
-    padding-right: 3px;
-    padding-left: 3px;
+    padding-right: 0px;
+    padding-left: 0px;
 }
+
 .pgadmin-controls.SQL {
  padding-right: 3px;
  padding-left: 1px;
@@ -372,6 +374,11 @@
  border-radius: 0rem;
  border-top-left-radius: $card-border-radius;
  border-top-right-radius: $card-border-radius;
+
+  &.collapsed {
+    border-bottom: none !important;
+    border-radius: $card-border-radius;
+  }
 }

 .obj_properties .badge .caret {
@@ -502,15 +509,17 @@ fieldset.inline-fieldset > div {
  padding: 15px;
 }

-.pgadmin-control-group.sql {
-  margin: 0px;
-  padding: 0px;
-  height: 100%;
+.pgadmin-control-group{
+  &.sql, &.sqltab {
+    margin: 0px;
+    padding: 0px;
+    height: 100%;
+  }
 }

 .pgadmin-controls input[type="checkbox"]{
  margin-left: 0 !important;
-  margin-top: 0px !important;
+  margin-top: 10px !important;
 }

 .pgadmin-controls.sql_field_layout {
@@ -520,14 +529,14 @@ fieldset.inline-fieldset > div {
  z-index: 1;
 }

-.pgadmin-controls.focused {
-  border-color: $color-primary-light;
+.pgadmin-controls.focused,
+.pgadmin-controls:focus {
+  border-color: $input-focus-border-color !important;
  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
+  -webkit-box-shadow: $input-focus-box-shadow;
+  box-shadow: $input-focus-box-shadow;
 }

-
 .dashboard-tab-container,
 .pg-panel-statistics-container,
 .pg-panel-depends-container,
@@ -742,14 +751,7 @@ form[name="change_password_form"] .help-block {
  }
 }

-.close-error-bar {
-  background: $color-danger;
-  padding: 5px;
-  border-radius: 0px 4px 4px 0px;
-}
-
-.close-error-bar a {
-  color: $color-danger-fg !important;
+.close-error {
  cursor: pointer;
 }

@@ -831,6 +833,15 @@ table.table-bottom-border {
  }
 }

+table.table-empty-rows{
+  thead th:last-of-type,tr:last-of-type{
+    & td, & th {
+      border-bottom: $panel-border;
+    }
+  }
+}
+
+
 .context-menu-list .context-menu-submenu:after {
  font-family: $font-family-icon;
  content: "\f054" !important;
@@ -852,14 +863,21 @@ table.table-bottom-border {
    padding-bottom: 1.0rem;
  }
  & .panel-body {
-    padding-botttom: 0.8rem;
+    padding-bottom: 0.8rem;
  }
  & .btn-login {
    background-color: $security-btn-color;
  }
-  & .user-language select {
-    background-color: transparent;
-    color: $security-text-color;
+  & .user-language {
+    & select{
+      background-color: $color-primary;
+      color: $security-text-color;
+
+      & option{
+        background-color: $color-primary;
+        color: $security-text-color;
+      }
+    }
  }
  & .pg-icon {
    width: 28px;
@@ -917,7 +935,6 @@ table.table-bottom-border {
  }
 }

-
 .backform-tab{
  & > .nav.nav-tabs {
    position: absolute;
@@ -928,7 +945,7 @@ table.table-bottom-border {
  & > .tab-content {
    position: absolute;
    top: $title-height;
-    bottom: 50px;
+    bottom: $footer-height-calc;
  }
 }
 .ajs-content {
--- a/web/pgadmin/static/scss/_select2.overrides.scss
+++ b/web/pgadmin/static/scss/_select2.overrides.scss
@@ -30,18 +30,14 @@
  height: 100%;
 }

-
-.select2-container--default.select2-container--focus
-.select2-selection--multiple {
-  border: 1px solid $color-gray-light !important;
-  outline: 0 none;
-}
-
 .select2-container--default.select2-container--focus {
-  border-color: $color-primary-light;
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
-  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba($color-primary, .6);
+  & .select2-selection--single,
+  & .select2-selection--multiple {
+    border-color: $input-focus-border-color !important;
+    outline: 0;
+    -webkit-box-shadow: $input-focus-box-shadow;
+    box-shadow: $input-focus-box-shadow;
+  }
 }


--- a/web/pgadmin/static/scss/_webcabin.pgadmin.scss
+++ b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
@@ -29,8 +29,8 @@
 }

 .wcFrameButton {
-  width: 25px;
-  height: 20px;
+  width: 24px;
+  height: 22px;
  display: flex;
  border-radius: $btn-border-radius;
  margin: auto;
@@ -85,6 +85,66 @@
 .wcFloating {
  box-shadow: $box-shadow;
  z-index: 1050 !important;
+
+  &.wcFrame, & .wcPanelBackground {
+    border-bottom-left-radius: $card-border-radius;
+    border-bottom-right-radius: $card-border-radius;
+  }
+
+  & .pg-panel-content {
+    border-bottom: $card-border-radius;
+  }
+
+  & .wcFrameCornerNE,
+  & .wcFrameCornerNW,
+  & .wcFrameCornerSE,
+  & .wcFrameCornerSW {
+    height: $card-border-radius*2;
+    width: $card-border-radius*2;
+    background: transparent;
+  }
+
+  & .wcFrameCornerNE {
+    border: $panel-border;
+    border-left: none !important;
+    border-bottom: none !important;
+    border-radius: none;
+    border-top-right-radius: $card-border-radius;
+  }
+
+  & .wcFrameCornerNW {
+    border: $panel-border;
+    border-right: none !important;
+    border-bottom: none !important;
+    border-radius: none;
+    border-top-left-radius: $card-border-radius;
+  }
+
+  & .wcFrameCornerSE {
+    border: $panel-border;
+    border-top: none !important;
+    border-left: none !important;
+    border-radius: none;
+    border-bottom-right-radius: $card-border-radius;
+  }
+
+  & .wcFrameCornerSW {
+    border: $panel-border;
+    border-right: none !important;
+    border-top: none !important;
+    border-radius: none;
+    border-bottom-left-radius: $card-border-radius;
+  }
+
+  .wcFrameEdgeH {
+    left: $card-border-radius !important;
+    right: $card-border-radius !important;
+  }
+
+  .wcFrameEdgeV {
+    top: $card-border-radius !important;
+    bottom: $card-border-radius !important;
+  }
 }

 .wcFloating .wcPanelTabActive {
--- a/web/pgadmin/static/scss/resources/_default.style.scss
+++ b/web/pgadmin/static/scss/resources/_default.style.scss
@@ -22,6 +22,10 @@
  &-light {
    background-color: $color-danger-light;
  }
+
+  &-lighter {
+    background-color: $color-danger-lighter;
+  }
 }

 .bg-success {
@@ -81,6 +85,10 @@
  &-light {
    border-color: $color-danger-light;
  }
+
+  &-lighter {
+    border-color: $color-danger-lighter;
+  }
 }

 .border-success {
--- a/web/pgadmin/static/scss/resources/_default.variables.scss
+++ b/web/pgadmin/static/scss/resources/_default.variables.scss
@@ -19,7 +19,8 @@ $color-secondary: $white !default;

 $color-danger: #e53935 !default;
 $color-danger-fg: $white !default;
-$color-danger-light: #FBE1E1;
+$color-danger-light: #F39999;
+$color-danger-lighter: #FAECEC;

 $color-success: #43a047 !default;
 $color-success-fg: $black !default;
@@ -51,7 +52,7 @@ $font-family-editor: 'Source Code Pro' !default;
 $font-family-icon: 'FontAwesome' !default;

 $border-width: 1px;
-$border-color: rgba($color-gray, 0.5);
+$border-color: #dde0e6;
 $border-color-dark: $color-gray;
 $box-shadow: 0 0.5rem 3rem $color-gray-dark;

@@ -59,7 +60,8 @@ $box-shadow: 0 0.5rem 3rem $color-gray-dark;
 $gray-600: $color-gray-dark;
 $gray-900: $color-fg-theme;
 $body-color: $color-fg-theme;
-$font-size-base: 0.815rem;
+$font-size-base: 0.875rem;
+$line-height-base: 1.5; // no change
 $grid-gutter-width: 15px;
 $border-radius: 0.25rem; //no change

@@ -122,9 +124,19 @@ $input-border-radius: $border-radius; //no change
 $input-disabled-bg: $color-gray-lighter;
 $input-btn-border-width: $border-width; //no change
 $input-border-width: $input-btn-border-width; //no change
-$input-btn-padding-y: .375rem; //no change
+$input-btn-padding-y: .25rem;
 $input-btn-padding-x: .75rem; //no change

+$component-active-bg: $color-primary; //no change
+$input-btn-focus-width: .2rem !default; //no change
+$input-btn-focus-color: rgba($component-active-bg, .25) !default; //no change
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default; //no change
+$input-focus-bg: $input-bg !default; //no change
+$input-focus-border-color: lighten($component-active-bg, 25%) !default; //no change
+$input-focus-color: $input-color !default; //no change
+$input-focus-width: $input-btn-focus-width !default; //no change
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default; //no change
+
 $btn-border-radius: $border-radius; //no change

 /***************/
@@ -136,12 +148,12 @@ $panel-border-radius: $border-radius;
 $panel-border: $panel-border-width solid $panel-border-color !important;
 $panel-border-dark: $panel-border-width solid $border-color-dark !important;
 $tabs-padding: 5px 10px 2px;
-$title-height: 37px * $font-size-base/1rem;
+$title-height: ($line-height-base*16px) + 5px + 2px + $border-width;
 $footer-padding: 0.5rem;
-$footer-min-height: 2.18rem;
+$footer-min-height: 2rem;
 $footer-height-calc: $footer-min-height+$footer-padding*2;
-$navbar-font-size: 0.875rem;
-$navbar-user-font-size: 0.815rem;
+$navbar-font-size: 0.925rem;
+$navbar-user-font-size: 0.875rem;

 $navbar-dropdown-top: 100%;
 $dropdown-submenu-top: -$dropdown-spacer;
@@ -160,7 +172,7 @@ $sql-gutters-bg: $color-gray-light;
 $sql-history-detail-bg: $color-gray-lighter;
 $sql-history-success-bg: $color-primary-light;
 $sql-history-success-fg: $color-primary;
-$sql-history-error-bg: $color-danger-light;
+$sql-history-error-bg: $color-danger-lighter;
 $sql-history-error-fg: $color-danger;

 $negative-bg: $color-gray-light;
@@ -175,7 +187,7 @@ $btn-secondary-hover-bg: $color-gray-light;
 $card-header-padding : 0.25rem 0.5rem;
 $no-border-radius: 0px !important;

-$btn-checkbox-padding: 0.3rem 0.8rem;
+$btn-checkbox-padding: $input-btn-padding-y $input-btn-padding-x;

 $security-text-color: $white;
 $security-btn-color: #038bba;
--- a/web/pgadmin/static/vendor/backform/backform.js
+++ b/web/pgadmin/static/vendor/backform/backform.js
@@ -404,7 +404,6 @@

  var SpacerControl = Backform.SpacerControl = Control.extend({
    template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%>">&nbsp;</label>',
      '<div class="<%=Backform.controlsClassName%>"></div>'
    ].join("\n"))
  });
@@ -558,7 +557,7 @@
    },
    template: _.template([
      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
-      '<div class="<%=Backform.controlContainerClassName%> form-check-inline">',
+      '<div class="<%=Backform.controlContainerClassName%> d-flex">',
      '  <% for (var i=0; i < options.length; i++) { %>',
      '    <% var option = options[i]; %>',
      '    <% var id = _.uniqueId("bf_"); %>',
--- a/web/pgadmin/static/vendor/backgrid/backgrid.css
+++ b/web/pgadmin/static/vendor/backgrid/backgrid.css
@@ -80,10 +80,6 @@
  text-align: center;
 }

-.backgrid td.editor {
-  padding: 0;
-}
-
 .backgrid td.editor,
 .backgrid tbody tr:nth-child(odd) td.editor {
  background-color: rgba(82, 168, 236, 0.1);
--- a/web/pgadmin/templates/security/fields.html
+++ b/web/pgadmin/templates/security/fields.html
@@ -4,7 +4,7 @@
           type="{% if type %}{{ type }}{% else %}{{ field.type }}{% endif %}" autofocus>
    {% if field.errors %}
    {% for error in field.errors %}
-    <span class="form-text text-danger">{{ error }}</span>
+    <span class="form-text">{{ error }}</span>
    {% endfor %}
    {% endif %}
 </div>
--- a/web/pgadmin/templates/security/login_user.html
+++ b/web/pgadmin/templates/security/login_user.html
@@ -14,8 +14,8 @@
    {{ render_field_with_errors(login_user_form.password, "password") }}
    <button class="btn btn-primary btn-block btn-login" type="submit" value="{{ _('Login') }}">{{ _('Login') }}</button>
    <div class="form-group row mb-3 c user-language">
-        <div class="col-8"><span class="help-block">{{ _('<a href="%(url)s" class="text-white">Forgotten your password</a>?', url=url_for('browser.forgot_password')) }}</span></div>
-        <div class="col-4">
+        <div class="col-7"><span class="help-block">{{ _('<a href="%(url)s" class="text-white">Forgotten your password</a>?', url=url_for('browser.forgot_password')) }}</span></div>
+        <div class="col-5">
            <select class="form-control" name="language" value="{{user_language}}">
                {% for key, lang in config.LANGUAGES.items() %}
                <option value="{{key}}" {% if user_language == key %}selected{% endif %}>{{lang}}</option>
--- a/web/pgadmin/tools/backup/static/js/backup.js
+++ b/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 row',
+    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
  });

  //Backup Model (Server Node)
@@ -580,7 +580,7 @@ define([
        alertify,
        BackupModel
      );
-      dialog.draw(action, item, {'globals': true});
+      dialog.draw(action, item, {'globals': true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
    },
    start_backup_server: function(action, item) {
      let dialog = new globalBackupDialog.BackupDialog(
@@ -589,7 +589,7 @@ define([
        alertify,
        BackupObjectModel
      );
-      dialog.draw(action, item, {'server': true});
+      dialog.draw(action, item, {'server': true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
    },
    // Callback to draw Backup Dialog for objects
    backup_objects: function(action, treeItem) {
@@ -599,7 +599,7 @@ define([
        alertify,
        BackupObjectModel
      );
-      dialog.draw(action, treeItem, null);
+      dialog.draw(action, treeItem, null, pgBrowser.stdW.md, pgBrowser.stdH.md);
    },
  };
  return pgBrowser.Backup;
--- a/web/pgadmin/tools/backup/static/js/backup_dialog.js
+++ b/web/pgadmin/tools/backup/static/js/backup_dialog.js
@@ -28,7 +28,7 @@ export class BackupDialog extends Dialog {
    });
  }

-  draw(action, aciTreeItem, params) {
+  draw(action, aciTreeItem, params, width=0, height=0) {
    const serverInformation = this.retrieveAncestorOfTypeServer(aciTreeItem);

    if (!serverInformation) {
@@ -66,7 +66,7 @@ export class BackupDialog extends Dialog {
        typeOfDialog
      );

-      dialog(true).resizeTo('60%', '50%');
+      dialog(true).resizeTo(width, height);
    }).catch(function() {
      that.alertify.alert(
        gettext('Utility not found'),
--- a/web/pgadmin/tools/datagrid/static/js/datagrid.js
+++ b/web/pgadmin/tools/datagrid/static/js/datagrid.js
@@ -379,7 +379,7 @@ define('pgadmin.datagrid', [
        $.get(url_for('datagrid.filter'),
          function(data) {
            alertify.filterDialog('Data Filter', data, baseUrl, validateUrl)
-                    .resizeTo(300, 200);
+                    .resizeTo(pgBrowser.stdW.sm,pgBrowser.stdH.sm);
          }
        );
      },
--- a/web/pgadmin/tools/debugger/static/js/debugger_ui.js
+++ b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
@@ -951,7 +951,7 @@ define([

    Alertify.debuggerInputArgsDialog(
      gettext('Debugger'), debug_info, restart_debug, is_edb_proc
-    ).resizeTo('60%', '60%');
+    ).resizeTo(pgBrowser.stdW.md,pgBrowser.stdH.md);

  };

--- a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
+++ b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
@@ -1031,6 +1031,7 @@ define([

                  // Render SqlTab control to generate its html markup
                  var sqlCtrlHtml = sqlControl.render().$el;
+                  sqlCtrlHtml.addClass('h-100');
                  this.render = function() {
                    return {
                      el: sqlCtrlHtml,
@@ -1150,7 +1151,7 @@ define([
      }

      // Call Grant Wizard Dialog and set dimensions for wizard
-      Alertify.wizardDialog(true).resizeTo('55%', '75%');
+      Alertify.wizardDialog(true).resizeTo(pgBrowser.stdW.lg,pgBrowser.stdH.lg);
    },
  };

--- a/web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
+++ b/web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
@@ -29,6 +29,7 @@
  height: calc(100% - 15px);
  display: block;
  padding: 0;
+  overflow-y: hidden !important;
 }

 .object_type_table thead {
@@ -114,8 +115,8 @@

 .wizard-right-panel_content .CodeMirror {
  border: 1px solid $color-gray-light;
-  height: 285px !important;
-  min-height: 285px !important;
+  height: 100% !important;
+  min-height: 100% !important;
 }

 .wizard-right-panel_content .CodeMirror-linenumber {
@@ -123,10 +124,6 @@
  border-right: none;
 }

-.wizard-right-panel_content .CodeMirror-gutters {
-  min-height: 285px !important;
-}
-
 .grant_wizard_container {
  position: relative;
  overflow: hidden;
--- a/web/pgadmin/tools/import_export/static/js/import_export.js
+++ b/web/pgadmin/tools/import_export/static/js/import_export.js
@@ -496,6 +496,8 @@ Backform, commonUtils, supportedNodes
                }],
                options: {
                  modal: true,
+                  padding: !1,
+                  overflow: !1,
                },
              };
            },
@@ -645,10 +647,6 @@ Backform, commonUtils, supportedNodes
                }
              });

-              // Give the dialog initial height & width
-              this.elements.dialog.style.minHeight = '80%';
-              this.elements.dialog.style.minWidth = '70%';
-
              view.$el.attr('tabindex', -1);
              // var dialogTabNavigator = pgBrowser.keyboardNavigation.getDialogTabNavigator(view);
              pgBrowser.keyboardNavigation.getDialogTabNavigator(view);
@@ -682,7 +680,7 @@ Backform, commonUtils, supportedNodes
          S(
            gettext('Import/Export data - table \'%s\'')
          ).sprintf(treeInfo.table.label).value(), node, i, d
-        ).set('resizable', true).resizeTo('70%', '80%');
+        ).set('resizable', true).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg);
      })
      .fail(function() {
        Alertify.alert(
--- a/web/pgadmin/tools/maintenance/static/js/maintenance.js
+++ b/web/pgadmin/tools/maintenance/static/js/maintenance.js
@@ -34,7 +34,7 @@ define([
      '  <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
      '<% } %>',
    ].join('\n')),
-    className: 'pgadmin-control-group form-group col-6',
+    className: 'pgadmin-control-group form-group pg-el-md-6 pg-el-12 row',
  });

  // Main model for Maintenance functionality
@@ -492,7 +492,8 @@ define([
          return;
        }
        // Open the Alertify dialog
-        Alertify.MaintenanceDialog('Maintenance...').set('resizable', true).resizeTo('60%', '80%');
+        Alertify.MaintenanceDialog(gettext('Maintenance...')).set('resizable', true)
+          .resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.md);
      })
      .fail(function() {
        Alertify.alert(
--- a/web/pgadmin/tools/restore/static/js/restore.js
+++ b/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-4 row',
+    className: 'pgadmin-control-group form-group pg-el-md-6 row',
  });

  //Restore Model (Objects like Database/Schema/Table)
@@ -381,7 +381,7 @@ commonUtils, menuUtils, supportedNodes, restoreDialog
      let dialog = new restoreDialog.RestoreDialog(
        pgBrowser, $, alertify, RestoreObjectModel
      );
-      dialog.draw(action, treeItem);
+      dialog.draw(action, treeItem, pgBrowser.stdW.md, pgBrowser.stdH.md);
    },
  };
  return pgBrowser.Restore;
--- a/web/pgadmin/tools/restore/static/js/restore_dialog.js
+++ b/web/pgadmin/tools/restore/static/js/restore_dialog.js
@@ -27,7 +27,7 @@ export class RestoreDialog extends Dialog {
    });
  }

-  draw(action, aciTreeItem) {
+  draw(action, aciTreeItem, width, height) {

    const serverInformation = this.retrieveAncestorOfTypeServer(aciTreeItem);

@@ -69,7 +69,8 @@ export class RestoreDialog extends Dialog {

      let title = sprintf(gettext('Restore (%s: %s)'), node.label, data.label);
      that.createOrGetDialog(title, 'restore');
-      that.alertify.pg_restore(title, aciTreeItem1, data, node).resizeTo('65%', '60%');
+      that.alertify.pg_restore(title, aciTreeItem1, data, node)
+        .resizeTo(width, height);
    }).catch(function() {
      that.alertify.alert(
        gettext('Utility not found'),
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -310,7 +310,9 @@ input.editor-checkbox:focus {
 /* For Filter status bar */
 .data_sorting_dialog .pg-prop-status-bar {
  position: absolute;
-  bottom: 40px;
+  left: 0;
+  right: 0;
+  bottom: 0;
  z-index: 5;
 }

--- a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
@@ -2172,7 +2172,7 @@ define('tools.querytool', [


            /* If filter is applied then remove class 'btn-secondary'
-             * and add 'btn-warning' to change the colour of the button.
+             * and add 'btn-primary' to change the colour of the button.
             */
            if (self.can_filter && res.data.filter_applied) {
              $('#btn-filter').removeClass('btn-secondary');
--- a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
+++ b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
@@ -218,11 +218,10 @@ li.CodeMirror-hint-active {
 .pg_text_editor {
  z-index:10000;
  position:absolute;
-  background: $color-bg;
-  padding: 7px 5px 5px 1px;
-  border:2px solid  $color-gray;
-  -moz-border-radius:10px;
-  border-radius:10px;
+  background: $color-bg-theme;
+  padding: 0.25rem;
+  border: $panel-border;
+  box-shadow: $dropdown-box-shadow;
 }

 .editor-title {
--- a/web/pgadmin/tools/user_management/static/js/user_management.js
+++ b/web/pgadmin/tools/user_management/static/js/user_management.js
@@ -122,7 +122,7 @@ define([
        });
      }

-      alertify.ChangePassword(title, url).resizeTo('55%', '60%');
+      alertify.ChangePassword(title, url).resizeTo(pgBrowser.stdW.lg, pgBrowser.stdH.md);
    },

    isPgaLoginRequired(xhr) {
@@ -220,7 +220,7 @@ define([
        });
      }

-      alertify.PgaLogin(title, url).resizeTo('75%','70%');
+      alertify.PgaLogin(title, url).resizeTo(pgBrowser.stdW.md, pgBrowser.stdH.md);
    },

    // Callback to draw User Management Dialog.
@@ -625,18 +625,19 @@ define([
            prepare: function() {
              var footerTpl = _.template([
                  '<div class="pg-prop-footer" style="visibility:hidden;">',
-                  '<div class="pg-prop-status-bar">',
-                  '<div class="media error-in-footer bg-danger-light border-danger text-danger text-14">',
-                  '<div class="media-body media-middle">',
-                  '<div class="alert-icon error-icon">',
-                  '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>',
-                  '</div>',
-                  '<div class="alert-text">',
-                  '</div>',
-                  '<div class="close-error-bar"><a class="close-error">x</a></div>',
-                  '</div>',
-                  '</div>',
-                  '</div>',
+                  ' <div class="pg-prop-status-bar">',
+                  '    <div class="error-in-footer"> ',
+                  '      <div class="d-flex px-2 py-1"> ',
+                  '        <div class="pr-2"> ',
+                  '          <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i> ',
+                  '        </div> ',
+                  '        <div class="alert-text"></div> ',
+                  '        <div class="ml-auto close-error-bar"> ',
+                  '          <a class="close-error fa fa-times text-danger"></a> ',
+                  '        </div> ',
+                  '      </div> ',
+                  '    </div> ',
+                  ' </div>',
                  '</div>',
                ].join('\n')),
                $statusBar = $(footerTpl()),
@@ -887,7 +888,7 @@ define([
          };
        });
      }
-      alertify.UserManagement(true).resizeTo('680px', '400px');
+      alertify.UserManagement(true).resizeTo(pgBrowser.stdW.md, pgBrowser.stdH.md);
    },

  };
--- a/web/pgadmin/tools/user_management/static/scss/_user_management.scss
+++ b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
@@ -24,23 +24,4 @@

 .user_management .backform-tab {
  height: calc(100% - 75px);
-}
-
-.user_management .search_users {
-  float:right;
-  margin-right: 5px;
-  padding:0 !important;
-}
-
-.user_management .search_users input{
-  height:15px;
-  margin-top: 3px;
-}
-
-.user_management input[placeholder] {
-  font-size: 12px;
-}
-
-.user_management_pg-alertify-button {
-  line-height: 16px;
-}
+}
--- a/web/regression/javascript/backup/backup_dialog_spec.js
+++ b/web/regression/javascript/backup/backup_dialog_spec.js
@@ -40,6 +40,18 @@ describe('BackupDialog', () => {
          getTreeNodeHierarchy: jasmine.createSpy('db.getTreeNodeHierarchy'),
        },
      },
+      stdW: {
+        sm: 500,
+        md: 700,
+        lg: 900,
+        default: 500,
+      },
+      stdH: {
+        sm: 200,
+        md: 400,
+        lg: 550,
+        default: 550,
+      },
    };
    pgBrowser.Nodes.server.hasId = true;
    pgBrowser.Nodes.database.hasId = true;
@@ -196,10 +208,10 @@ describe('BackupDialog', () => {
          });

          it('displays the dialog', (done) => {
-            backupDialog.draw(null, [{id: 'serverTreeNode'}], null);
+            backupDialog.draw(null, [{id: 'serverTreeNode'}], null, pgBrowser.stdW.md, pgBrowser.stdH.md);
            setTimeout(() => {
              expect(alertifySpy['backup_objects']).toHaveBeenCalledWith(true);
-              expect(backupDialogResizeToSpy.resizeTo).toHaveBeenCalledWith('60%', '50%');
+              expect(backupDialogResizeToSpy.resizeTo).toHaveBeenCalledWith(pgBrowser.stdW.md, pgBrowser.stdH.md);
              done();
            }, 0);
          });
--- a/web/regression/javascript/backup/global_server_backup_dialog_spec.js
+++ b/web/regression/javascript/backup/global_server_backup_dialog_spec.js
@@ -31,6 +31,18 @@ describe('GlobalServerBackupDialog', () => {
      Nodes: {
        server: jasmine.createSpyObj('Node[server]', ['getTreeNodeHierarchy']),
      },
+      stdW: {
+        sm: 500,
+        md: 700,
+        lg: 900,
+        default: 500,
+      },
+      stdH: {
+        sm: 200,
+        md: 400,
+        lg: 550,
+        default: 550,
+      },
    };
    pgBrowser.Nodes.server.hasId = true;
    jquerySpy = jasmine.createSpy('jquerySpy');
@@ -158,10 +170,10 @@ describe('GlobalServerBackupDialog', () => {

          context('dialog for global backup', () => {
            it('displays the dialog', (done) => {
-              backupDialog.draw(null, [serverTreeNode], {globals: true});
+              backupDialog.draw(null, [serverTreeNode], {globals: true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
              setTimeout(() => {
                expect(alertifySpy['BackupDialog_globals']).toHaveBeenCalledWith(true);
-                expect(globalResizeToSpy.resizeTo).toHaveBeenCalledWith('60%', '50%');
+                expect(globalResizeToSpy.resizeTo).toHaveBeenCalledWith(pgBrowser.stdW.md, pgBrowser.stdH.md);
                done();
              }, 0);
            });
@@ -169,10 +181,10 @@ describe('GlobalServerBackupDialog', () => {

          context('dialog for server backup', () => {
            it('displays the dialog', (done) => {
-              backupDialog.draw(null, [serverTreeNode], {server: true});
+              backupDialog.draw(null, [serverTreeNode], {server: true}, pgBrowser.stdW.md, pgBrowser.stdH.md);
              setTimeout(() => {
                expect(alertifySpy['BackupDialog_server']).toHaveBeenCalledWith(true);
-                expect(serverResizeToSpy.resizeTo).toHaveBeenCalledWith('60%', '50%');
+                expect(serverResizeToSpy.resizeTo).toHaveBeenCalledWith(pgBrowser.stdW.md, pgBrowser.stdH.md);
                done();
              }, 0);
            });
--- a/web/regression/javascript/file_manager/file_manager_specs.js
+++ b/web/regression/javascript/file_manager/file_manager_specs.js
@@ -17,6 +17,21 @@ describe('fileSelectDialog', function () {

  let params;

+  pgAdmin.Browser = {
+    stdW: {
+      sm: 500,
+      md: 700,
+      lg: 900,
+      default: 500,
+    },
+    stdH: {
+      sm: 200,
+      md: 400,
+      lg: 550,
+      default: 550,
+    },
+  };
+
  describe('When dialog is called for select file', () => {
    it('Select file dialog', function() {
      params = {
--- a/web/regression/javascript/restore/restore_dialog_spec.js
+++ b/web/regression/javascript/restore/restore_dialog_spec.js
@@ -27,6 +27,18 @@ describe('RestoreDialog', () => {
        server: jasmine.createSpyObj('Node[server]', ['getTreeNodeHierarchy']),
        database: jasmine.createSpyObj('Node[database]', ['getTreeNodeHierarchy']),
      },
+      stdW: {
+        sm: 500,
+        md: 700,
+        lg: 900,
+        default: 500,
+      },
+      stdH: {
+        sm: 200,
+        md: 400,
+        lg: 550,
+        default: 550,
+      },
    };
    pgBrowser.Nodes.server.hasId = true;
    pgBrowser.Nodes.database.hasId = true;
@@ -185,7 +197,7 @@ describe('RestoreDialog', () => {
          });

          it('displays the dialog', (done) => {
-            restoreDialog.draw(null, [{id: 'serverTreeNode'}], {server: true});
+            restoreDialog.draw(null, [{id: 'serverTreeNode'}], pgBrowser.stdW.md, pgBrowser.stdH.md);
            setTimeout(() => {
              expect(alertifySpy['pg_restore']).toHaveBeenCalledWith(
                'Restore (some-server-label: some-tree-label)',
@@ -197,7 +209,7 @@ describe('RestoreDialog', () => {
                },
                pgBrowser.Nodes.server
              );
-              expect(spy.resizeTo).toHaveBeenCalledWith('65%', '60%');
+              expect(spy.resizeTo).toHaveBeenCalledWith(pgBrowser.stdW.md, pgBrowser.stdH.md);
              done();
            }, 0);
          });