public inbox for [email protected]  
help / color / mirror / Atom feed
From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica
Date: Wed, 2 Jan 2019 11:22:43 +0530
Message-ID: <CAM9w-_nkvOB5VTGwLkhDiNUYGF1yho0H6BniUoKFM8vveb3zKg@mail.gmail.com> (raw)
In-Reply-To: <CAM9w-_=sK8X=VXE8mqVY6+McuM=EXwg8_xJ56tf_0pHDvvH7uQ@mail.gmail.com>
References: <[email protected]>
	<CA+OCxoyp8XjOa0xdiqoohiQ1Bm0fcrruXTWu-Y_mqY5LaGeBoQ@mail.gmail.com>
	<CAM9w-_ngsgJxJOJKngc-3W8tqNymKeZjBCuW2_VN-nb4k5du=g@mail.gmail.com>
	<CA+OCxoxHWJK+XA6zROKWznJkJf1=adDEoafqCoz9BPnMvmtzAg@mail.gmail.com>
	<CA+OCxoyuDXfZR2zNKONy-CWWYbo_xAeLZRVZwVZ=1_gU+4zUAg@mail.gmail.com>
	<CAM9w-_mXaptQzE45a3eRfLB5qG0R+qUm6JnAnR4C6rOZ8fiJFw@mail.gmail.com>
	<CA+OCxowym3tJZfDkOJkqfsNbaxT=Z=nnxCEQWF4nm+HL5q8_qQ@mail.gmail.com>
	<CAM9w-_nXoXLjm4jyJKsZ1vOXJLei7akyrBQMOY+p_jmDzmEmdg@mail.gmail.com>
	<CA+OCxow69BHrCT7JcdfVyFwn0JnWEszaMdwxuWaxBddKf=h4mg@mail.gmail.com>
	<CAM9w-_myZ=B-Nzt9DGAnvXVQgz3szAbe13cLPC4kSSXbUQXt6w@mail.gmail.com>
	<CAM9w-_=sK8X=VXE8mqVY6+McuM=EXwg8_xJ56tf_0pHDvvH7uQ@mail.gmail.com>

Hi Hackers,

Kindly ignore the previous patch. Attaching updated patch with few more
corrections.
The patch includes:
- 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.
- Other improvements wherever noticed.

On Tue, Jan 1, 2019 at 11:09 AM Aditya Toshniwal <
[email protected]> wrote:

> Hi Hackers,
>
> Attached is the patch to improve the previously committed new design
> changes.
> The patch includes:
> - 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)
> - Other improvements wherever noticed.
>
> I hope this covers majority of the issues.
> Kindly review.
>
>
> On Fri, Dec 21, 2018 at 7:48 PM Aditya Toshniwal <
> [email protected]> wrote:
>
>>
>>
>> On Fri, Dec 21, 2018 at 7:46 PM Dave Page <[email protected]> wrote:
>>
>>> On Fri, Dec 21, 2018 at 2:14 PM Aditya Toshniwal
>>> <[email protected]> wrote:
>>> >
>>> > For the query tool results grid text pop-out, you mean the border size
>>> around it ?
>>> > We don't have any design discussed for it, so could you please propose
>>> what can be done.
>>>
>>> Border, button colours etc. I can't draw anything, but I'd suggest
>>> that the border should be squared not rounded, and the
>>> thickness/shadow etc adjusted to match the other styling.
>>>
>> Cool.
>> Button colors are already changed. Others things noted. Will work on it.
>>
>>> >
>>> > On Fri, Dec 21, 2018 at 7:35 PM Dave Page <[email protected]> wrote:
>>> >>
>>> >> On Fri, Dec 21, 2018 at 2:02 PM Aditya Toshniwal
>>> >> <[email protected]> wrote:
>>> >> >
>>> >> >
>>> >> >
>>> >> > On Fri, Dec 21, 2018 at 7:29 PM Dave Page <[email protected]>
>>> wrote:
>>> >> >>
>>> >> >> One other issue: I'm seeing that standard sized dialogues (e.g. the
>>> >> >> Server or Database Properties dialogues) are wrapping their labels
>>> and
>>> >> >> controls at the default size. That should not be the case.
>>> >> >
>>> >> > Yep. Akshay has logged that in the sheet shared (
>>> https://drive.google.com/open?id=127BgrvdVUvWSEp-GnQvCDx1WaaemsycxSD0aUpWxb6k
>>> ).
>>> >>
>>> >> OK, but the answer isn't to increase the size of the dialogues as
>>> >> suggested. The size is fine (though we should review for consistency,
>>> >> and ensure we are using no more than 3 default standard sizes
>>> >> throughout the app); we should make the controls display nicely on the
>>> >> default dialogue size and wrap if the user makes it smaller than we
>>> >> can display in.
>>> >>
>>> >> >> On Fri, Dec 21, 2018 at 12:46 PM Dave Page <[email protected]>
>>> wrote:
>>> >> >> >
>>> >> >> > Hi
>>> >> >> >
>>> >> >> > On Fri, Dec 21, 2018 at 12:29 PM Aditya Toshniwal
>>> >> >> > <[email protected]> wrote:
>>> >> >> > >
>>> >> >> > > Hi Dave,
>>> >> >> > >
>>> >> >> > > On Fri, Dec 21, 2018 at 5:51 PM Dave Page <[email protected]>
>>> wrote:
>>> >> >> > >>
>>> >> >> > >> Nice! Thanks Ashesh.
>>> >> >> > >>
>>> >> >> > >> Some small issues I spotted:
>>> >> >> > >>
>>> >> >> > >> - The font looks somewhat small. How does it compare in size
>>> to, say,
>>> >> >> > >> Gmail? I think it needs to be increased to at least that size.
>>> >> >> > >
>>> >> >> > > Gmail uses 0.875rem (14px) for the left panel (Inbox, Sent).
>>> We are using 0.875rem (14px)  for main navbar links and 0.815rem(13.04px)
>>> for all other text.
>>> >> >> >
>>> >> >> > Let's increase the default to 0.875, and make the main links
>>> >> >> > proportionally bigger.
>>> >> >> >
>>> >> >> > >> - Dialogues have 2 close buttons next to each other in the
>>> top-right.
>>> >> >> > >> Looks like an icon and a text version?
>>> >> >> > >
>>> >> >> > > You need to do a yarn install. wcDocker code is changed to fix
>>> that.
>>> >> >> >
>>> >> >> > Yup, that fixed it.
>>> >> >> >
>>> >> >> > >> - Why do some Preferences panels use alternate line
>>> colouring, whilst
>>> >> >> > >> others don't? I suspect it's because some are actually tables
>>> under
>>> >> >> > >> the hood? I think we need consistency there.
>>> >> >> > >
>>> >> >> > > Noted.
>>> >> >> > >>
>>> >> >> > >>
>>> >> >> > >> - The Maintenance dialogue looks terrible - it needs to be
>>> made much
>>> >> >> > >> more compact. I also seem to be getting a failure to create
>>> >> >> > >> maintenance jobs (backups etc work fine).
>>> >> >> > >
>>> >> >> > > Noted.
>>> >> >> > >>
>>> >> >> > >>
>>> >> >> > >> - I think the buttons on the Browser need borders to match
>>> other buttons.
>>> >> >> > >
>>> >> >> > > It is made consistent with other wcDocker buttons like close,
>>> right arrow, left arrow. However, we can make it look like other buttons.
>>> >> >> >
>>> >> >> > I think they're a different class of buttons -
>>> control/navigation vs.
>>> >> >> > function. I think we should make this change as the browser
>>> buttons
>>> >> >> > really are a toolbar just like the larger on on the query tool.
>>> >> >> >
>>> >> >> > Thanks!
>>> >> >> >
>>> >> >> > >> Thanks!
>>> >> >> > >>
>>> >> >> > >> On Fri, Dec 21, 2018 at 12:01 PM Ashesh Vashi
>>> >> >> > >> <[email protected]> wrote:
>>> >> >> > >> >
>>> >> >> > >> > 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
>>> >> >> > >> >
>>> >> >> > >> > Branch
>>> >> >> > >> > ------
>>> >> >> > >> > master
>>> >> >> > >> >
>>> >> >> > >> > Details
>>> >> >> > >> > -------
>>> >> >> > >> >
>>> https://git.postgresql.org/gitweb?p=pgadmin4.git;a=commitdiff;h=5799ac14ba17dc25fbec184b3b2c6afbe37f...
>>> >> >> > >> >
>>> >> >> > >> > Modified Files
>>> >> >> > >> > --------------
>>> >> >> > >> > web/package.json                                   |    2 +-
>>> >> >> > >> > .../static/js/fts_configuration.js                 |    2 +-
>>> >> >> > >> > .../databases/schemas/functions/__init__.py        |    4 +-
>>> >> >> > >> > .../function => static}/css/function.css           |    0
>>> >> >> > >> > .../templates/trigger_function/css/function.css    |    3 -
>>> >> >> > >> > .../{templates/edbfunc => static}/css/edbfunc.css  |    0
>>> >> >> > >> > .../static/js/exclusion_constraint.js              |   18 +-
>>> >> >> > >> > .../foreign_key/static/js/foreign_key.js           |   17 +-
>>> >> >> > >> > .../schemas/tables/rules/static/css/rule.css       |    7 +
>>> >> >> > >> > .../tables/rules/templates/rules/css/rule.css      |    8 -
>>> >> >> > >> > .../databases/schemas/views/static/css/view.css    |    7 +
>>> >> >> > >> > .../schemas/views/templates/mview/css/mview.css    |    4 -
>>> >> >> > >> > .../schemas/views/templates/view/css/view.css      |    4 -
>>> >> >> > >> > .../pgagent/schedules/static/js/pga_schedule.js    |    3 +-
>>> >> >> > >> > .../servers/pgagent/static/css/pga_job.css         |    3 +
>>> >> >> > >> > .../pgagent/templates/pga_job/css/pga_job.css      |   13 -
>>> >> >> > >> > .../server_groups/servers/static/css/servers.css   |    4 +
>>> >> >> > >> > .../server_groups/servers/static/js/server.js      |   22 +-
>>> >> >> > >> > .../server_groups/servers/static/js/variable.js    |    4 +-
>>> >> >> > >> > .../servers/tablespaces/static/js/tablespace.js    |   13 +-
>>> >> >> > >> > .../servers/templates/css/servers.css              |    4 -
>>> >> >> > >> > web/pgadmin/browser/static/css/browser.css         |   13 -
>>> >> >> > >> > web/pgadmin/browser/static/css/wizard.css          |   21 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/browser.js           |   26 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/collection.js        |   16 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/keyboard.js          |   14 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/menu.js              |   28 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/node.js              |   53 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/node.ui.js           |    4 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/panel.js             |   15 +-
>>> >> >> > >> > web/pgadmin/browser/static/js/toolbar.js           |    3 -
>>> >> >> > >> > web/pgadmin/browser/static/js/wizard.js            |   58 +-
>>> >> >> > >> > web/pgadmin/browser/static/scss/_browser.scss      |   43 +-
>>> >> >> > >> > web/pgadmin/browser/static/scss/_wizard.scss       |   41 +-
>>> >> >> > >> > web/pgadmin/browser/templates/browser/css/node.css |    2 +-
>>> >> >> > >> > web/pgadmin/browser/templates/browser/index.html   |    9 +-
>>> >> >> > >> > web/pgadmin/dashboard/__init__.py                  |    2 +-
>>> >> >> > >> > web/pgadmin/dashboard/static/css/dashboard.css     |   21 +-
>>> >> >> > >> > web/pgadmin/dashboard/static/js/dashboard.js       |  120 +-
>>> >> >> > >> > web/pgadmin/dashboard/static/scss/_dashboard.scss  |   44 +-
>>> >> >> > >> > .../templates/dashboard/database_dashboard.html    |  171
>>> ++-
>>> >> >> > >> > .../templates/dashboard/server_dashboard.html      |  197
>>> ++-
>>> >> >> > >> > .../templates/dashboard/welcome_dashboard.html     |   30 +-
>>> >> >> > >> > web/pgadmin/feature_tests/browser_tool_bar_test.py |   23 +-
>>> >> >> > >> > web/pgadmin/feature_tests/file_manager_test.py     |   23 +-
>>> >> >> > >> > .../feature_tests/keyboard_shortcut_test.py        |    5 +-
>>> >> >> > >> > .../feature_tests/pg_datatype_validation_test.py   |    5 +-
>>> >> >> > >> > .../pg_utilities_backup_restore_test.py            |   28 +-
>>> >> >> > >> > .../feature_tests/pg_utilities_maintenance_test.py |   16 +-
>>> >> >> > >> > .../feature_tests/query_tool_journey_test.py       |    5 +-
>>> >> >> > >> > web/pgadmin/feature_tests/query_tool_tests.py      |  117 +-
>>> >> >> > >> > web/pgadmin/feature_tests/view_data_dml_queries.py |   16 +-
>>> >> >> > >> > .../misc/bgprocess/static/css/bgprocess.css        |   11 -
>>> >> >> > >> > web/pgadmin/misc/bgprocess/static/js/bgprocess.js  |  173
>>> ++-
>>> >> >> > >> > .../misc/bgprocess/static/scss/_bgprocess.scss     |   81 +-
>>> >> >> > >> > web/pgadmin/misc/depends/static/js/depends.js      |    3 +-
>>> >> >> > >> > .../misc/file_manager/static/css/file_manager.css  |  141 +-
>>> >> >> > >> > .../misc/file_manager/static/js/create_dialogue.js |    9 +-
>>> >> >> > >> > .../misc/file_manager/static/js/select_dialogue.js |   19 +-
>>> >> >> > >> > web/pgadmin/misc/file_manager/static/js/utility.js |   77 +-
>>> >> >> > >> > .../file_manager/static/scss/_file_manager.scss    |  157
>>> +--
>>> >> >> > >> > .../file_manager/templates/file_manager/index.html |   95 +-
>>> >> >> > >> > .../misc/statistics/static/js/statistics.js        |    3 +-
>>> >> >> > >> > web/pgadmin/preferences/static/css/preferences.css |   14 -
>>> >> >> > >> > web/pgadmin/preferences/static/js/preferences.js   |   31 +-
>>> >> >> > >> > .../preferences/static/scss/_preferences.scss      |   16 +
>>> >> >> > >> > web/pgadmin/static/css/pgadmin.css                 |   81 +-
>>> >> >> > >> > web/pgadmin/static/fonts/Roboto-Bold.ttf           |  Bin 0
>>> -> 170760 bytes
>>> >> >> > >> > web/pgadmin/static/fonts/Roboto-Medium.ttf         |  Bin 0
>>> -> 172064 bytes
>>> >> >> > >> > web/pgadmin/static/fonts/Roboto-Regular.ttf        |  Bin 0
>>> -> 171676 bytes
>>> >> >> > >> > web/pgadmin/static/img/collapse_expand.svg         |   15 +
>>> >> >> > >> > web/pgadmin/static/img/forgot_password.svg         |  283
>>> ++++
>>> >> >> > >> > web/pgadmin/static/img/login.svg                   |    1 +
>>> >> >> > >> > web/pgadmin/static/js/alertify.pgadmin.defaults.js |   82 +-
>>> >> >> > >> > web/pgadmin/static/js/backform.pgadmin.js          |   80 +-
>>> >> >> > >> > web/pgadmin/static/js/backgrid.pgadmin.js          |   33 +-
>>> >> >> > >> > web/pgadmin/static/js/slickgrid/editors.js         |    8 +-
>>> >> >> > >> > web/pgadmin/static/js/sqleditor/filter_dialog.js   |   33 +-
>>> >> >> > >> > .../static/js/sqleditor/query_tool_preferences.js  |   15 +-
>>> >> >> > >> > web/pgadmin/static/scss/_aci_tree.overrides.scss   |   75 +-
>>> >> >> > >> > web/pgadmin/static/scss/_alert.scss                |   12 +-
>>> >> >> > >> > web/pgadmin/static/scss/_alertify.overrides.scss   |  150 +-
>>> >> >> > >> > web/pgadmin/static/scss/_backform.overrides.scss   |    8 +
>>> >> >> > >> > web/pgadmin/static/scss/_backgrid.overrides.scss   |  251
>>> +++-
>>> >> >> > >> > web/pgadmin/static/scss/_bootstrap.overrides.scss  |  230
>>> ++--
>>> >> >> > >> > web/pgadmin/static/scss/_codemirror.overrides.scss |   94 +-
>>> >> >> > >> > web/pgadmin/static/scss/_pgadmin.grid.scss         |   56 +
>>> >> >> > >> > web/pgadmin/static/scss/_pgadmin.style.scss        | 1440
>>> +++++---------------
>>> >> >> > >> > web/pgadmin/static/scss/_select2.overrides.scss    |   24 +-
>>> >> >> > >> > web/pgadmin/static/scss/_webcabin.overrides.scss   |  368
>>> -----
>>> >> >> > >> > web/pgadmin/static/scss/_webcabin.pgadmin.scss     |  250
>>> ++++
>>> >> >> > >> > web/pgadmin/static/scss/pgadmin.scss               |   10 +-
>>> >> >> > >> > .../static/scss/resources/_default.style.scss      |   90 +-
>>> >> >> > >> > .../static/scss/resources/_default.variables.scss  |  203
>>> ++-
>>> >> >> > >> > web/pgadmin/static/vendor/backform/backform.js     |  645
>>> +++++++++
>>> >> >> > >> > .../templates/security/change_password.html        |   43 +-
>>> >> >> > >> > .../templates/security/forgot_password.html        |    9 +-
>>> >> >> > >> > web/pgadmin/templates/security/login_user.html     |   16 +-
>>> >> >> > >> > web/pgadmin/templates/security/panel.html          |   23 +-
>>> >> >> > >> > web/pgadmin/tools/backup/__init__.py               |    6 +-
>>> >> >> > >> > web/pgadmin/tools/backup/static/js/backup.js       |    8 +-
>>> >> >> > >> > .../backup/static/js/backup_dialog_wrapper.js      |   22 +-
>>> >> >> > >> > web/pgadmin/tools/datagrid/__init__.py             |    1 -
>>> >> >> > >> > web/pgadmin/tools/datagrid/static/js/datagrid.js   |   38 +-
>>> >> >> > >> > .../tools/datagrid/templates/datagrid/filter.html  |    2 -
>>> >> >> > >> > .../tools/datagrid/templates/datagrid/index.html   |  193
>>> ++-
>>> >> >> > >> > web/pgadmin/tools/debugger/static/css/debugger.css |   34 +-
>>> >> >> > >> > web/pgadmin/tools/debugger/static/js/debugger.js   |    2 +-
>>> >> >> > >> > .../tools/debugger/static/js/debugger_ui.js        |   28 +-
>>> >> >> > >> > web/pgadmin/tools/debugger/static/js/direct.js     |   13 +-
>>> >> >> > >> > .../tools/debugger/static/scss/_debugger.scss      |    8 -
>>> >> >> > >> > .../tools/debugger/templates/debugger/direct.html  |   89 +-
>>> >> >> > >> > .../tools/grant_wizard/static/js/grant_wizard.js   |   27 +-
>>> >> >> > >> > .../grant_wizard/static/scss/_grant_wizard.scss    |   31 +-
>>> >> >> > >> > .../tools/import_export/static/js/import_export.js |   24 +-
>>> >> >> > >> > web/pgadmin/tools/maintenance/__init__.py          |   10 +-
>>> >> >> > >> > .../tools/maintenance/static/js/maintenance.js     |   24 +-
>>> >> >> > >> > .../maintenance/static/scss/_maintenance.scss      |    2 +-
>>> >> >> > >> > web/pgadmin/tools/restore/__init__.py              |   14 +-
>>> >> >> > >> > web/pgadmin/tools/restore/static/js/restore.js     |    8 +-
>>> >> >> > >> > .../restore/static/js/restore_dialog_wrapper.js    |   24 +-
>>> >> >> > >> > .../tools/sqleditor/static/css/sqleditor.css       |  128 +-
>>> >> >> > >> > web/pgadmin/tools/sqleditor/static/js/sqleditor.js |   35 +-
>>> >> >> > >> > .../tools/sqleditor/static/scss/_history.scss      |   42 +-
>>> >> >> > >> > .../tools/sqleditor/static/scss/_sqleditor.scss    |  128 +-
>>> >> >> > >> > .../user_management/static/css/user_management.css |   37 -
>>> >> >> > >> > .../user_management/static/js/user_management.js   |   53 +-
>>> >> >> > >> > .../static/scss/_user_management.scss              |   12 +-
>>> >> >> > >> > .../javascript/alerts/alertify_wrapper_spec.js     |    4 +-
>>> >> >> > >> > .../backup/backup_dialog_wrapper_spec.js           |    8 +-
>>> >> >> > >> > .../restore/restore_dialog_wrapper_spec.js         |    8 +-
>>> >> >> > >> > web/webpack.config.js                              |    2 +-
>>> >> >> > >> > web/webpack.shim.js                                |    2 +-
>>> >> >> > >> > web/webpack.test.config.js                         |    1 +
>>> >> >> > >> > web/yarn.lock                                      | 1015
>>> +++++++++++++-
>>> >> >> > >> > 135 files changed, 5002 insertions(+), 3850 deletions(-)
>>> >> >> > >> >
>>> >> >> > >>
>>> >> >> > >>
>>> >> >> > >> --
>>> >> >> > >> Dave Page
>>> >> >> > >> Blog: http://pgsnake.blogspot.com
>>> >> >> > >> Twitter: @pgsnake
>>> >> >> > >>
>>> >> >> > >> EnterpriseDB UK: http://www.enterprisedb.com
>>> >> >> > >> The Enterprise PostgreSQL Company
>>> >> >> > >
>>> >> >> > >
>>> >> >> > >
>>> >> >> > > --
>>> >> >> > > Thanks and Regards,
>>> >> >> > > Aditya Toshniwal
>>> >> >> > > Software Engineer | EnterpriseDB Software Solutions | Pune
>>> >> >> > > "Don't Complain about Heat, Plant a tree"
>>> >> >> >
>>> >> >> >
>>> >> >> >
>>> >> >> > --
>>> >> >> > Dave Page
>>> >> >> > Blog: http://pgsnake.blogspot.com
>>> >> >> > Twitter: @pgsnake
>>> >> >> >
>>> >> >> > EnterpriseDB UK: http://www.enterprisedb.com
>>> >> >> > The Enterprise PostgreSQL Company
>>> >> >>
>>> >> >>
>>> >> >>
>>> >> >> --
>>> >> >> Dave Page
>>> >> >> Blog: http://pgsnake.blogspot.com
>>> >> >> Twitter: @pgsnake
>>> >> >>
>>> >> >> EnterpriseDB UK: http://www.enterprisedb.com
>>> >> >> The Enterprise PostgreSQL Company
>>> >> >
>>> >> >
>>> >> >
>>> >> > --
>>> >> > Thanks and Regards,
>>> >> > Aditya Toshniwal
>>> >> > Software Engineer | EnterpriseDB Software Solutions | Pune
>>> >> > "Don't Complain about Heat, Plant a tree"
>>> >>
>>> >>
>>> >>
>>> >> --
>>> >> Dave Page
>>> >> Blog: http://pgsnake.blogspot.com
>>> >> Twitter: @pgsnake
>>> >>
>>> >> EnterpriseDB UK: http://www.enterprisedb.com
>>> >> The Enterprise PostgreSQL Company
>>> >
>>> >
>>> >
>>> > --
>>> > Thanks and Regards,
>>> > Aditya Toshniwal
>>> > Software Engineer | EnterpriseDB Software Solutions | Pune
>>> > "Don't Complain about Heat, Plant a tree"
>>>
>>>
>>>
>>> --
>>> Dave Page
>>> Blog: http://pgsnake.blogspot.com
>>> Twitter: @pgsnake
>>>
>>> EnterpriseDB UK: http://www.enterprisedb.com
>>> The Enterprise PostgreSQL Company
>>>
>>
>>
>> --
>> Thanks and Regards,
>> Aditya Toshniwal
>> Software Engineer | EnterpriseDB Software Solutions | Pune
>> "Don't Complain about Heat, Plant a tree"
>>
>
>
> --
> Thanks and Regards,
> Aditya Toshniwal
> Software Engineer | EnterpriseDB Software Solutions | Pune
> "Don't Complain about Heat, Plant a tree"
>


-- 
Thanks and Regards,
Aditya Toshniwal
Software Engineer | EnterpriseDB Software Solutions | Pune
"Don't Complain about Heat, Plant a tree"


Attachments:

  [application/octet-stream] RM3692.part2.patch (74.7K, 3-RM3692.part2.patch)
  download | inline diff:
diff --git a/web/pgadmin/about/static/js/about.js b/web/pgadmin/about/static/js/about.js
index 1e72c917..2aaf98f4 100644
--- 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);
             });
       },
     };
diff --git 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
index e7e2aa43..b1c76887 100644
--- 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',
         },
diff --git 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
index c716f824..8775b9fb 100644
--- 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'],
diff --git 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
index bb1986bd..f6d8f319 100644
--- 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)
diff --git 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
index c8a09297..4185aa77 100644
--- 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)
diff --git 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
index bcc27509..e60f3304 100644
--- 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;
             },
diff --git a/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js b/web/pgadmin/browser/server_groups/servers/roles/static/js/role.js
index 419ae45f..0226a5be 100644
--- 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({
diff --git a/web/pgadmin/browser/server_groups/servers/static/css/servers.css b/web/pgadmin/browser/server_groups/servers/static/css/servers.css
index e8981cf5..65f9f53d 100644
--- 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;
-}
+}
\ No newline at end of file
diff --git a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js
index 25d85a8b..7e9dd79d 100644
--- 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({
diff --git a/web/pgadmin/browser/server_groups/static/js/server_group.js b/web/pgadmin/browser/server_groups/static/js/server_group.js
index 58d1ccd2..93053a95 100644
--- 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 */
diff --git a/web/pgadmin/browser/static/css/wizard.css b/web/pgadmin/browser/static/css/wizard.css
index 1cdded00..d293881f 100644
--- 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;
diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js
index e9ef25c9..00f72e94 100644
--- 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
diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js
index 9fe31aea..76de9964 100644
--- 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);
diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js
index 45131d10..09c21a9f 100644
--- 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) {
diff --git a/web/pgadmin/browser/static/js/toolbar.js b/web/pgadmin/browser/static/js/toolbar.js
index 7719c29a..b01e28e8 100644
--- 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,
   },
 ];
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index fbb1a578..401a7342 100644
--- 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>' +
diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss
index 158d2891..76c230cd 100644
--- 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;
+}
\ No newline at end of file
diff --git a/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss b/web/pgadmin/misc/bgprocess/static/scss/_bgprocess.scss
index 59572914..caf54f23 100644
--- 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 {
diff --git a/web/pgadmin/misc/file_manager/static/css/file_manager.css b/web/pgadmin/misc/file_manager/static/css/file_manager.css
index 23824fa7..dd7596b4 100644
--- 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 {
diff --git a/web/pgadmin/misc/file_manager/static/js/file_manager.js b/web/pgadmin/misc/file_manager/static/js/file_manager.js
index 1dccd79b..ed4f99e4 100644
--- 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);
       }
     },
   };
diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js
index 5fbf0a55..0733e52d 100644
--- 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>`;
         }
diff --git a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss
index 85f85463..2d90a67f 100644
--- 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;
diff --git a/web/pgadmin/misc/file_manager/templates/file_manager/index.html b/web/pgadmin/misc/file_manager/templates/file_manager/index.html
index 9d1e3673..f854545e 100644
--- 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>
diff --git a/web/pgadmin/misc/static/explain/css/explain.css b/web/pgadmin/misc/static/explain/css/explain.css
index b6d413cc..7c4ee999 100644
--- 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;
-}
diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js
index 511c80a1..97bb496c 100644
--- 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);
     },
   };
 
diff --git a/web/pgadmin/preferences/static/scss/_preferences.scss b/web/pgadmin/preferences/static/scss/_preferences.scss
index 7c8d674a..14b52d32 100644
--- 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;
+  }
 }
diff --git a/web/pgadmin/static/js/alertify.pgadmin.defaults.js b/web/pgadmin/static/js/alertify.pgadmin.defaults.js
index 2d093df3..83047985 100644
--- 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) {
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 024a7eed..357be9e4 100644
--- 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) { %>',
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index 2d732c56..18e8494c 100644
--- 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);
diff --git a/web/pgadmin/static/js/sqleditor/filter_dialog.js b/web/pgadmin/static/js/sqleditor/filter_dialog.js
index 6dc9571b..f25ef312 100644
--- 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);
diff --git a/web/pgadmin/static/js/sqleditor/query_tool_notifications.js b/web/pgadmin/static/js/sqleditor/query_tool_notifications.js
index 500d2059..472bf178 100644
--- 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
diff --git a/web/pgadmin/static/scss/_aci_tree.overrides.scss b/web/pgadmin/static/scss/_aci_tree.overrides.scss
index ad775173..70a0c916 100644
--- 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;
diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss
index 507b9477..4f59011d 100644
--- 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 {
diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss
index c7382d4b..235c9fdb 100644
--- 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;
+}
\ No newline at end of file
diff --git a/web/pgadmin/static/scss/_backform.overrides.scss b/web/pgadmin/static/scss/_backform.overrides.scss
index 6a04f614..abc2af4e 100644
--- 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;
+    }
 	}
 }
 
diff --git a/web/pgadmin/static/scss/_backgrid.overrides.scss b/web/pgadmin/static/scss/_backgrid.overrides.scss
index 519a56be..afe1c65e 100644
--- 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;
diff --git a/web/pgadmin/static/scss/_bootstrap.overrides.scss b/web/pgadmin/static/scss/_bootstrap.overrides.scss
index e7b44e72..8ab15ad5 100644
--- 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;
+}
diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss
index 99b12e09..0e8ffc7a 100644
--- 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 {
diff --git a/web/pgadmin/static/scss/_select2.overrides.scss b/web/pgadmin/static/scss/_select2.overrides.scss
index d7bb5b3e..afecaf7b 100644
--- 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;
+  }
 }
 
 
diff --git a/web/pgadmin/static/scss/_webcabin.pgadmin.scss b/web/pgadmin/static/scss/_webcabin.pgadmin.scss
index 5550a207..79f68ecc 100644
--- 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 {
diff --git a/web/pgadmin/static/scss/resources/_default.style.scss b/web/pgadmin/static/scss/resources/_default.style.scss
index 0096d3e9..f90fe47a 100644
--- 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 {
diff --git a/web/pgadmin/static/scss/resources/_default.variables.scss b/web/pgadmin/static/scss/resources/_default.variables.scss
index a97bedca..79eff097 100644
--- 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;
diff --git a/web/pgadmin/static/vendor/backform/backform.js b/web/pgadmin/static/vendor/backform/backform.js
index b0b72511..b0d2fd4a 100644
--- 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_"); %>',
diff --git a/web/pgadmin/static/vendor/backgrid/backgrid.css b/web/pgadmin/static/vendor/backgrid/backgrid.css
index 7eb59697..c4298e22 100644
--- 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);
diff --git a/web/pgadmin/templates/security/fields.html b/web/pgadmin/templates/security/fields.html
index a07971aa..efb126b2 100644
--- 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>
diff --git a/web/pgadmin/templates/security/login_user.html b/web/pgadmin/templates/security/login_user.html
index b53f9461..7515c2c2 100644
--- 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>
diff --git a/web/pgadmin/tools/backup/static/js/backup.js b/web/pgadmin/tools/backup/static/js/backup.js
index 3662f5a5..3bb5da0d 100644
--- 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;
diff --git a/web/pgadmin/tools/backup/static/js/backup_dialog.js b/web/pgadmin/tools/backup/static/js/backup_dialog.js
index 8613ddd6..bd68ecb5 100644
--- 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'),
diff --git a/web/pgadmin/tools/datagrid/static/js/datagrid.js b/web/pgadmin/tools/datagrid/static/js/datagrid.js
index 8b842c56..c27482ab 100644
--- 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);
           }
         );
       },
diff --git a/web/pgadmin/tools/debugger/static/js/debugger_ui.js b/web/pgadmin/tools/debugger/static/js/debugger_ui.js
index f86418e3..6372835d 100644
--- 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);
 
   };
 
diff --git a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
index f87742e6..ece3945c 100644
--- 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);
     },
   };
 
diff --git a/web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss b/web/pgadmin/tools/grant_wizard/static/scss/_grant_wizard.scss
index 35810cb1..5975d607 100644
--- 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;
diff --git a/web/pgadmin/tools/import_export/static/js/import_export.js b/web/pgadmin/tools/import_export/static/js/import_export.js
index 35f41ac8..9d6d8e55 100644
--- 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(
diff --git a/web/pgadmin/tools/maintenance/static/js/maintenance.js b/web/pgadmin/tools/maintenance/static/js/maintenance.js
index f402dabf..c3e7e541 100644
--- 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(
diff --git a/web/pgadmin/tools/restore/static/js/restore.js b/web/pgadmin/tools/restore/static/js/restore.js
index 2dcfdd60..fcb96396 100644
--- 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;
diff --git a/web/pgadmin/tools/restore/static/js/restore_dialog.js b/web/pgadmin/tools/restore/static/js/restore_dialog.js
index 88970b2c..1fe36bc9 100644
--- 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'),
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 5961dc5a..91c515f4 100644
--- 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;
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/js/sqleditor.js b/web/pgadmin/tools/sqleditor/static/js/sqleditor.js
index b334036a..4b1fbb10 100644
--- 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');
diff --git a/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss b/web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss
index 73513620..5d425bb8 100644
--- 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 {
diff --git a/web/pgadmin/tools/user_management/static/js/user_management.js b/web/pgadmin/tools/user_management/static/js/user_management.js
index f928c0bb..212a9de0 100644
--- 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);
     },
 
   };
diff --git a/web/pgadmin/tools/user_management/static/scss/_user_management.scss b/web/pgadmin/tools/user_management/static/scss/_user_management.scss
index 145bb664..ca1b090a 100644
--- 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;
-}
+}
\ No newline at end of file


view thread (29+ messages)  latest in thread

reply

Reply instructions:

You may reply publicly to this message via plain-text email
using any one of the following methods:

* Reply to all the recipients using the --to and --cc options:
  reply via email

  To: [email protected]
  Cc: [email protected], [email protected]
  Subject: Re: pgAdmin 4 commit: Improvement in the look and feel of the whole applica
  In-Reply-To: <CAM9w-_nkvOB5VTGwLkhDiNUYGF1yho0H6BniUoKFM8vveb3zKg@mail.gmail.com>

* Save the following mbox file, import it into your mail client,
  and reply-to-all from there: mbox

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox