Improvements in the UI for both default and dark themes. Fixes #5133

Improve the style of the highlighted code after query execution for Dark mode. Fixes #4996.
Changed background pattern for geometry viewer to use #fff for all themes. Fixes #5077
Changed the color of selected and hovered item for Select2 dropdown, also tweak the appearance of the tags in multi-select boxes. Fixes #4955
Fixed Firefox monospaced issue by updating the font to the latest version. Fixes #5184

docs/en_US/event_trigger_dialog.rst

@@ -35,15 +35,15 @@ Click the *Definition* tab to continue.
 
 Use the fields in the *Definition* tab to define the event trigger:
 
-* Select a radio button in the *Enabled Status* field to specify a status for
+* Select a value from the drop down of *Trigger Enabled* field to specify a status
-  the trigger: *Enable* *Disable*, *Replica* *Always*.
+  for the trigger: *Enable* *Disable*, *Replica* *Always*.
 * Use the drop-down listbox next to *Trigger function* to specify an existing
   function.  A trigger function takes an empty argument list, and returns a
   value of type event_trigger.
-* Select a radio button in the *Events* field to specify when the event trigger
+* Select a value from the drop down of *Events* field to specify when the event
-  will fire: *DDL COMMAND START*, *DDL COMMAND END*, or *SQL DROP*.
+  trigger will fire: *DDL COMMAND START*, *DDL COMMAND END*, or *SQL DROP*.
-* Use the *When* field to write a condition for the event trigger that must be
+* Use the *When TAG in* field to enter filter values for TAG for which the trigger
-  satisfied before the event trigger can execute.
+  will be executed. The values must be in single quotes separated by comma.
 
 Click the *Security Labels* tab to continue.
 

docs/en_US/release_notes_4_19.rst

@@ -16,12 +16,17 @@ Housekeeping
 ************
 
 | `Issue #5088 <https://redmine.postgresql.org/issues/5088>`_ -  Improve code coverage and API test cases for the Event Trigger module.
+| `Issue #5133 <https://redmine.postgresql.org/issues/5133>`_ -  Improvements in the UI for both default and dark themes.
 | `Issue #5176 <https://redmine.postgresql.org/issues/5176>`_ -  Enhance logging by tracking stdout and stderr of subprocess when log level set to DEBUG.
 | `Issue #5185 <https://redmine.postgresql.org/issues/5185>`_ -  Added option to override the class name of a label tag for select2 control.
 
 Bug fixes
 *********
 
+| `Issue #4955 <https://redmine.postgresql.org/issues/4955>`_ -  Changed the color of selected and hovered item for Select2 dropdown.
+| `Issue #4996 <https://redmine.postgresql.org/issues/4996>`_ -  Improve the style of the highlighted code after query execution for Dark mode.
 | `Issue #5058 <https://redmine.postgresql.org/issues/5058>`_ -  Ensure that AlertifyJS should not be visible as a title for alert dialog.
+| `Issue #5077 <https://redmine.postgresql.org/issues/5077>`_ -  Changed background pattern for geometry viewer to use #fff for all themes.
 | `Issue #5107 <https://redmine.postgresql.org/issues/5107>`_ -  Set proper focus on tab navigation for file manager dialog.
 | `Issue #5115 <https://redmine.postgresql.org/issues/5115>`_ -  Fix an issue where command and statements were parsed incorrectly for Rules.
+| `Issue #5184 <https://redmine.postgresql.org/issues/5184>`_ -  Fixed Firefox monospaced issue by updating the font to the latest version.

web/pgadmin/browser/server_groups/servers/databases/event_triggers/static/js/event_trigger.js

@@ -108,28 +108,30 @@ define('pgadmin.node.event_trigger', [
         },{
           id: 'comment', label: gettext('Comment'), type: 'multiline',
         },{
-          id: 'enabled', label: gettext('Enabled?'),
+          id: 'enabled', label: gettext('Trigger enabled?'),
-          type:'radio', group: gettext('Definition'), mode: ['properties', 'edit','create'],
+          group: gettext('Definition'), mode: ['properties', 'edit','create'],
           options: [
             {label: 'Enable', value: 'O'},
             {label: 'Disable', value: 'D'},
             {label: 'Replica', value: 'R'},
             {label: 'Always', value: 'A'},
           ],
+          control: 'select2', select2: { allowClear: false, width: '100%' },
         },{
           id: 'eventfunname', label: gettext('Trigger function'),
           type: 'text', control: 'node-ajax-options', group: gettext('Definition'),
           url:'fopts', cache_node: 'trigger_function',
         },{
-          id: 'eventname', label: gettext('Events'),
+          id: 'eventname', label: gettext('Event'),
-          type:'radio', group: gettext('Definition'), cell: 'string',
+          group: gettext('Definition'), cell: 'string',
           options: [
             {label: 'DDL COMMAND START', value: 'DDL_COMMAND_START'},
             {label: 'DDL COMMAND END', value: 'DDL_COMMAND_END'},
             {label: 'SQL DROP', value: 'SQL_DROP'},
           ],
+          control: 'select2', select2: { allowClear: false, width: '100%' },
         },{
-          id: 'when', label: gettext('When'),  cell: 'string',
+          id: 'when', label: gettext('When TAG in'),  cell: 'string',
           type: 'text', group: gettext('Definition'),
           control: Backform.SqlFieldControl,
           extraClasses:['custom_height_css_class'],

web/pgadmin/browser/server_groups/servers/databases/schemas/synonyms/static/js/synonym.js

@@ -183,7 +183,7 @@ define('pgadmin.node.synonym', [
           id: 'is_public_synonym', label: gettext('Public synonym?'),
           type: 'switch', mode: ['properties'], cell: 'switch',
           options: { onText: gettext('Yes'), offText: gettext('No'), onColor: 'success',
-            offColor: 'primary', size: 'mini'},
+            offColor: 'ternary', size: 'mini'},
         },
         ],
         validate: function() {

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.js

@@ -219,7 +219,7 @@ define('pgadmin.node.column', [
           deps:['name'], cellHeaderClasses:'width_percent_5',
           options: {
             onText: gettext('Yes'), offText: gettext('No'),
-            onColor: 'success', offColor: 'primary',
+            onColor: 'success', offColor: 'ternary',
           },
           visible: function(m) {
             return _.isUndefined(
@@ -524,7 +524,7 @@ define('pgadmin.node.column', [
           id: 'attnotnull', label: gettext('Not NULL?'), cell: 'switch',
           type: 'switch', cellHeaderClasses:'width_percent_20',
           group: gettext('Constraints'), editable: 'editable_check_for_table',
-          options: { onText: gettext('Yes'), offText: gettext('No'), onColor: 'success', offColor: 'primary' },
+          options: { onText: gettext('Yes'), offText: gettext('No'), onColor: 'success', offColor: 'ternary' },
           deps: ['colconstype'],
           disabled: function(m) {
             if (m.get('colconstype') == 'i') {

web/pgadmin/browser/server_groups/servers/roles/static/js/role.js

@@ -105,7 +105,12 @@ define('pgadmin.node.role', [
       '  <span class="wcTabIcon <%= optimage %>"></span>',
       '  <span><%= opttext %><span>',
       '  <% if (checkbox) { %>',
-      '  <input type="checkbox" <%=disabled ? "disabled=\'disabled\'" : ""%>/>',
+      '  <div class="custom-control custom-checkbox custom-checkbox-no-label d-inline">',
+      '    <input tabindex="-1" type="checkbox" class="custom-control-input" id="check_<%= opttext %>" />',
+      '    <label class="custom-control-label" for="check_<%= opttext %>">',
+      '      <span class="sr-only">WITH ADMIN<span>',
+      '    </label>',
+      '  </div>',
       '  <% } %>',
       '</span>',
     ].join('\n')),

web/pgadmin/browser/server_groups/servers/static/js/privilege.js

@@ -328,16 +328,20 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
       template: _.template([
         '<tr class="<%= header ? "header" : "" %>">',
         ' <td class="renderable">',
-        '  <label class="privilege_label">',
+        '  <div class="custom-control custom-checkbox privilege-checkbox">',
-        '   <input type="checkbox" tabindex="1" name="privilege" privilege="<%- privilege_type %>" target="<%- target %>" <%= privilege ? \'checked\' : "" %>></input>',
+        '    <input tabindex="0" type="checkbox" class="custom-control-input" id="<%= checkbox_id %>" name="privilege" privilege="<%- privilege_type %>" target="<%- target %>" <%= privilege ? \'checked\' : "" %>/>',
+        '    <label class="custom-control-label" for="<%= checkbox_id %>">',
         '      <%- privilege_label %>',
         '    </label>',
+        '  </div>',
         ' </td>',
         ' <td class="renderable">',
-        '  <label class="privilege_label">',
+        '  <div class="custom-control custom-checkbox privilege-checkbox">',
-        '   <input type="checkbox" tabindex="1" name="with_grant" privilege="<%- privilege_type %>" target="<%- target %>" <%= with_grant ? \'checked\' : "" %> <%= enable_with_grant ? "" : \'disabled\'%>></input>',
+        '    <input tabindex="0" type="checkbox" class="custom-control-input" id="wgo_<%= checkbox_id %>" name="with_grant" privilege="<%- privilege_type %>" target="<%- target %>" <%= with_grant ? \'checked\' : "" %> <%= enable_with_grant ? "" : \'disabled\'%>/>',
+        '    <label class="custom-control-label" for="wgo_<%= checkbox_id %>">',
         '      WITH GRANT OPTION',
         '    </label>',
+        '  </div>',
         ' </td>',
         '</tr>'].join(' '), null, {variable: null}),
 
@@ -359,6 +363,7 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
 
         // For each privilege generate html template.
         // List down all the Privilege model.
+        var checkbox_id = _.uniqueId();
         collection.each(function(m) {
           var d = m.toJSON();
 
@@ -372,6 +377,7 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
               'privilege_label': self.Labels[d.privilege_type],
               'with_grant': (self.model.get('grantee') != 'PUBLIC' && d.with_grant),
               'enable_with_grant': (self.model.get('grantee') != 'PUBLIC' && d.privilege),
+              'checkbox_id': d.privilege_type + '' + checkbox_id,
             });
           privilege = (privilege && d.privilege);
           with_grant = (with_grant && privilege && d.with_grant);
@@ -389,6 +395,7 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform',
               'with_grant': (self.model.get('grantee') != 'PUBLIC' && with_grant),
               'enable_with_grant': (self.model.get('grantee') != 'PUBLIC' && privilege),
               'header': true,
+              'checkbox_id': 'all' + '' + checkbox_id,
             }));
         }
         self.$el.find('input[type=checkbox]').first().trigger('focus');

web/pgadmin/browser/server_groups/servers/templates/servers/password.html

@@ -3,18 +3,20 @@
         <div><label class="font-weight-bold" for="password">{{ _('Please enter the password for the user \'{0}\' to connect the server - "{1}"').format(username,
             server_label) }}</label></div>
         <div class="input-group row py-2">
-            <label class="col-sm-2 col-form-label" aria-hidden="true">Password</label>
+            <span class="col-sm-2 col-form-label" aria-hidden="true">Password</span>
             <div class="col-sm-10">
               <input id="password" class="form-control" name="password" type="password">
             </div>
         </div>
         <div class="save-password-div input-group row py-2">
-            <label for="password" class="col-sm-2 col-form-label"></label>
+            <span class="col-sm-2 col-form-label">&nbsp;</span>
             <div class="col-sm-10">
-                <input id="save_password" name="save_password" type="checkbox"
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
                            {% if not config.ALLOW_SAVE_PASSWORD  %}disabled{% endif %}
                     >
-                <label for="save_password">Save Password</label>
+                    <label class="custom-control-label" for="save_password">Save Password</label>
+                </div>
             </div>
         </div>
         {% if errmsg %}

web/pgadmin/browser/server_groups/servers/templates/servers/tunnel_password.html

@@ -13,10 +13,12 @@
         </div>
         <div class="save-password-div input-group py-2">
             <div class="w-100">
-                <input id="save_tunnel_password" name="save_tunnel_password" type="checkbox"
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" id="save_tunnel_password" name="save_tunnel_password" type="checkbox"
                            {% if not config.ALLOW_SAVE_TUNNEL_PASSWORD  %}disabled{% endif %}
                     >
-                <label for="save_tunnel_password" class="ml-1">Save Password</label>
+                    <label class="custom-control-label" for="save_tunnel_password" class="ml-1">Save Password</label>
+                </div>
             </div>
         </div>
         {% endif %}
@@ -28,12 +30,13 @@
             </div>
         </div>
         <div class="save-password-div input-group py-2">
-            <label for="password" class="col-sm-2 col-form-label"></label>
             <div class="w-100">
-                <input id="save_password" name="save_password" type="checkbox"
+                <div class="custom-control custom-checkbox">
+                    <input class="custom-control-input" id="save_password" name="save_password" type="checkbox"
                            {% if not config.ALLOW_SAVE_PASSWORD  %}disabled{% endif %}
                     >
-                <label for="save_password" class="ml-1">Save Password</label>
+                    <label class="custom-control-label" for="save_password" class="ml-1">Save Password</label>
+                </div>
             </div>
         </div>
         {% endif %}

web/pgadmin/browser/static/js/browser.js

@@ -201,7 +201,7 @@ define('pgadmin.browser', [
         isCloseable: false,
         isPrivate: true,
         elContainer: true,
-        content: '<div class="obj_properties container-fluid"><div role="status" class="alert alert-info pg-panel-message">' + select_object_msg + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div role="status" class="pg-panel-message">' + select_object_msg + '</div></div>',
         events: panelEvents,
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');
@@ -215,7 +215,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div class="negative-space p-2"><div role="status" class="alert alert-info pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container d-none"></div></div>',
+        content: '<div class="negative-space p-2"><div role="status" class="pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container d-none"></div></div>',
         events: panelEvents,
       }),
       // Reversed engineered SQL for the object
@@ -236,7 +236,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div class="negative-space p-2"><div role="status" class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependencies-container d-none"></div></div>',
+        content: '<div class="negative-space p-2"><div role="status" class="pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependencies-container d-none"></div></div>',
         events: panelEvents,
       }),
       // Dependents of the object
@@ -247,7 +247,7 @@ define('pgadmin.browser', [
         width: 500,
         isCloseable: false,
         isPrivate: true,
-        content: '<div class="negative-space p-2"><div role="status" class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependents-container d-none"></div></div>',
+        content: '<div class="negative-space p-2"><div role="status" class="pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-dependents-container d-none"></div></div>',
         events: panelEvents,
       }),
     },

web/pgadmin/browser/static/js/collection.js

@@ -162,13 +162,18 @@ define([
               },
               render: function() {
                 let model = this.model.toJSON();
-
                 // canDrop can be set to false for individual row from the server side to disable the checkbox
-                if ('canDrop' in model && model.canDrop === false)
+                let disabled = ('canDrop' in model && model.canDrop === false);
-                  this.$el.empty().append('<input tabindex="-1" type="checkbox" title="Select" disabled="disabled"/>');
+                let id = `row-${_.uniqueId(model.oid || model.name)}`;
-                else
-                  this.$el.empty().append('<input tabindex="-1" type="checkbox" title="Select" />');
 
+                this.$el.empty().append(`
+                  <div class="custom-control custom-checkbox custom-checkbox-no-label">
+                    <input tabindex="-1" type="checkbox" class="custom-control-input" id="${id}" ${disabled?'disabled':''}/>
+                    <label class="custom-control-label" for="${id}">
+                      <span class="sr-only">Select<span>
+                    </label>
+                  </div>
+                `);
                 this.delegateEvents();
                 return this;
               },
@@ -216,7 +221,7 @@ define([
         j.empty();
         j.data('obj-view', gridView);
 
-        $msgContainer = '<div role="status" class="alert alert-info pg-panel-message pg-panel-properties-message">' +
+        $msgContainer = '<div role="status" class="pg-panel-message pg-panel-properties-message">' +
          gettext('Retrieving data from the server...') + '</div>';
 
         $msgContainer = $($msgContainer).appendTo(j);

web/pgadmin/browser/static/js/node.js

@@ -396,7 +396,7 @@ define('pgadmin.browser.node', [
 
           if (!newModel.isNew()) {
             // This is definetely not in create mode
-            var msgDiv = '<div role="status" class="alert alert-info pg-panel-message pg-panel-properties-message">' +
+            var msgDiv = '<div role="status" class="pg-panel-message pg-panel-properties-message">' +
               gettext('Retrieving data from the server...') + '</div>',
               $msgDiv = $(msgDiv);
             var timer = setTimeout(function(ctx) {
@@ -500,7 +500,7 @@ define('pgadmin.browser.node', [
         isPrivate: true,
         isLayoutMember: false,
         elContainer: true,
-        content: '<div class="obj_properties container-fluid"><div role="status" class="alert alert-info pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
+        content: '<div class="obj_properties container-fluid"><div role="status" class="pg-panel-message">' + gettext('Please wait while we fetch information about the node from the server...') + '</div></div>',
         onCreate: function(myPanel, $container) {
           $container.addClass('pg-no-overflow');
         },

web/pgadmin/browser/static/js/wizard.js

@@ -100,7 +100,7 @@ define([
       '        <% } %>' +
       '        <div class="col-sm-<% if (this.options.show_left_panel) { %>9<% }' +
       '          else { %>12<% } %> wizard-right-panel">' +
-      '          <% if ( typeof show_description !=  "undefined"){ %>' +
+      '          <% if ( typeof show_description !=  "undefined" && show_description != ""){ %>' +
       '            <div class="wizard-description">' +
       '              <%= show_description %>' +
       '            </div>' +

web/pgadmin/dashboard/static/js/dashboard.js

@@ -248,7 +248,7 @@ define('pgadmin.dashboard', [
                       ajaxHook();
                     } else {
                       $(div).html(
-                        '<div class="alert alert-danger pg-panel-message" role="alert">' + gettext('An error occurred whilst loading the dashboard.') + '</div>'
+                        '<div class="pg-panel-message" role="alert">' + gettext('An error occurred whilst loading the dashboard.') + '</div>'
                       );
                     }
                   }
@@ -256,7 +256,7 @@ define('pgadmin.dashboard', [
               });
           };
           $(div).html(
-            '<div class="alert alert-info pg-panel-message" role="alert">' + gettext('Loading dashboard...') + '</div>'
+            '<div class="pg-panel-message" role="alert">' + gettext('Loading dashboard...') + '</div>'
           );
           ajaxHook();
 
@@ -379,7 +379,7 @@ define('pgadmin.dashboard', [
                             ajaxHook();
                           } else {
                             $(div).html(
-                              '<div class="alert alert-danger pg-panel-message" role="alert">' + gettext('An error occurred whilst loading the dashboard.') + '</div>'
+                              '<div class="pg-panel-message" role="alert">' + gettext('An error occurred whilst loading the dashboard.') + '</div>'
                             );
                           }
                         }
@@ -387,7 +387,7 @@ define('pgadmin.dashboard', [
                     });
                 };
                 $(div).html(
-                  '<div class="alert alert-info pg-panel-message" role="alert">' + gettext('Loading dashboard...') + '</div>'
+                  '<div class="pg-panel-message" role="alert">' + gettext('Loading dashboard...') + '</div>'
                 );
                 ajaxHook();
                 $(dashboardPanel).data('server_status', true);
@@ -402,7 +402,7 @@ define('pgadmin.dashboard', [
                 self.clearChartFromStore();
               }
               $(div).html(
-                '<div class="alert alert-info pg-panel-message" role="alert">' + gettext('Please connect to the selected server to view the dashboard.') + '</div>'
+                '<div class="pg-panel-message" role="alert">' + gettext('Please connect to the selected server to view the dashboard.') + '</div>'
               );
               $(dashboardPanel).data('server_status', false);
             }
@@ -602,7 +602,7 @@ define('pgadmin.dashboard', [
                 }
               } else {
                 msg = gettext('An error occurred whilst rendering the graph.');
-                cls = 'danger';
+                cls = 'error';
               }
             }
 
@@ -610,7 +610,7 @@ define('pgadmin.dashboard', [
               let chart_obj = chart_store[chart_name].chart_obj;
               $(chart_obj.getContainer()).addClass('graph-error');
               $(chart_obj.getContainer()).html(
-                '<div class="alert alert-' + cls + ' pg-panel-message" role="alert">' + msg + '</div>'
+                '<div class="pg-panel-' + cls + ' pg-panel-message" role="alert">' + msg + '</div>'
               );
             }
           })
@@ -737,7 +737,7 @@ define('pgadmin.dashboard', [
               }
             } else {
               msg = gettext('An error occurred whilst rendering the table.');
-              cls = 'danger';
+              cls = 'error';
             }
           }
 
@@ -748,7 +748,7 @@ define('pgadmin.dashboard', [
           }
 
           $(container).html(
-            '<div class="alert alert-' + cls + ' pg-panel-message" role="alert">' + msg + '</div>'
+            '<div class="pg-panel-' + cls + ' pg-panel-message" role="alert">' + msg + '</div>'
           );
 
           // Try again

web/pgadmin/dashboard/static/scss/_dashboard.scss

@@ -17,7 +17,7 @@
 }
 
 .graph-error {
-    background-color: $color-gray-lighter;
+    background-color: inherit;
     padding-top: 20px
 }
 

web/pgadmin/misc/statistics/static/js/statistics.js

@@ -103,7 +103,7 @@ define('misc.statistics', [
       onText: gettext('True'),
       offText: gettext('False'),
       onColor: 'success',
-      offColor: 'primary',
+      offColor: 'ternary',
       size: 'mini',
     }
   );

web/pgadmin/preferences/static/js/preferences.js

@@ -214,7 +214,7 @@ define('pgadmin.preferences', [
                 onText: gettext('True'),
                 offText: gettext('False'),
                 onColor: 'success',
-                offColor: 'primary',
+                offColor: 'ternary',
                 size: 'mini',
               };
               return 'switch';
@@ -223,7 +223,7 @@ define('pgadmin.preferences', [
                 onText: gettext('Show'),
                 offText: gettext('Hide'),
                 onColor: 'success',
-                offColor: 'primary',
+                offColor: 'ternary',
                 size: 'mini',
                 width: '56',
               };

web/pgadmin/static/js/backform.pgadmin.js

@@ -468,13 +468,41 @@ define([
       helpMessage: '',
       name: '',
     },
+    events: _.extend({}, Backform.InputControl.prototype.events, {
+      'click label.btn': 'toggle',
+    }),
+    toggle: function(e) {
+      /* Toggle the other buttons to unchecked and current to checked */
+      let $curr = $(e.currentTarget),
+        $btn_group = $curr.closest('.btn-group');
+
+      $btn_group.find('.btn')
+        .removeClass('btn-primary')
+        .addClass('btn-secondary')
+        .find('.fa')
+        .addClass('visibility-hidden')
+        .siblings('input')
+        .prop('checked', false);
+
+      $curr.removeClass('btn-secondary')
+        .addClass('btn-primary')
+        .find('.fa')
+        .removeClass('visibility-hidden')
+        .siblings('input')
+        .prop('checked', true)
+        .trigger('change');
+
+      e.preventDefault();
+      e.stopPropagation();
+    },
     template: _.template([
       '<label class="<%=controlLabelClassName%>"><%=label%></label>',
       '<div class="<%=controlsClassName%> <%=extraClasses.join(\' \')%>">',
-      ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>"  data-toggle="buttons">',
+      ' <div class="btn-group pgadmin-controls-radio-none<% if (disabled) {%> disabled <%}%>" >',
       '  <% for (var i=0; i < options.length; i++) { %>',
       '  <% var option = options[i]; %>',
-      '  <label class="btn btn-primary<% if (option.value == value) { %> active<%}%><% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
+      '  <label class="btn btn-radiomodern <% if (option.value == value) { %> btn-primary <%} else {%> btn-secondary <%}%> <% if (!option.disabled && !disabled) { %>" tabindex="0"<% } else { %> disabled"<% } %>>',
+      '    <i class="fa fa-check  <% if (option.value != value) { %>visibility-hidden <%}%>"></i>',
       '    <input type="radio" name="<%=name%>" autocomplete="off" value=<%-formatter.fromRaw(option.value)%> <% if (option.value == value) { %> checked<%}%> <% if (option.disabled || disabled) { %> disabled <%}%>> <%-option.label%>',
       '  </label>',
       '  <% } %>',
@@ -539,7 +567,7 @@ define([
         onText: gettext('Yes'),
         offText: gettext('No'),
         onColor: 'success',
-        offColor: 'primary',
+        offColor: 'ternary',
         size: 'mini',
         width: null,
         height: null,
@@ -3237,16 +3265,19 @@ define([
       '<label class="<%=Backform.controlLabelClassName%>"><%=controlLabel%></label>',
       '<div class="<%=Backform.controlContainerClassName%>">',
       '  <button class="btn btn-secondary btn-checkbox">',
-      '    <input type="<%=type%>" class="<%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+      '  <div class="custom-control custom-checkbox <%=extraClasses.join(\' \')%>">',
+      '    <input tabindex="-1" type="checkbox" class="custom-control-input" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+      '    <label class="custom-control-label" for="<%=cId%>">',
       '      <%=label%>',
+      '    </label>',
+      '  </div>',
       '  </button>',
       '</div>',
     ].join('\n')),
     onButtonClick: function(e) {
       if (e.target.nodeName !== 'BUTTON')
         return;
-      var $el = this.$el.find('input[type=checkbox]');
+      this.$el.find('input[type=checkbox]').trigger('click');
-      $el.prop('checked', !$el.prop('checked'));
     },
   });
 

web/pgadmin/static/js/backgrid.pgadmin.js

@@ -621,7 +621,7 @@ define([
         onText: gettext('Yes'),
         offText: gettext('No'),
         onColor: 'success',
-        offColor: 'primary',
+        offColor: 'ternary',
         size: 'mini',
         width: null,
         height: null,

web/pgadmin/static/js/sqleditor/history/query_history.js

@@ -59,7 +59,7 @@ export default class QueryHistory {
       this.parentNode.empty()
         .removeClass('d-flex')
         .append(
-          `<div role="status" class='alert alert-info pg-panel-message'>${gettext(
+          `<div role="status" class='pg-panel-message'>${gettext(
             'No history found'
           )}</div>`
         );

web/pgadmin/static/js/sqleditor/history/query_history_entries.js

@@ -2,6 +2,7 @@ import moment from 'moment';
 import $ from 'jquery';
 import _ from 'underscore';
 import 'bootstrap.toggle';
+import gettext from 'sources/gettext';
 
 const ARROWUP = 38;
 const ARROWDOWN = 40;
@@ -71,7 +72,7 @@ export class QueryHistoryItem {
       `<li class='list-item' tabindex='0' data-key='${this.dataKey()}'>
           <div class='entry ${this.entry.status ? '' : 'error'}'>
               <div class='query'>
-                  <i id="query_source_icon" class="query-history-icon sql-icon-lg"></i>
+                  <span id="query_source_icon" class="query-history-icon sql-icon-lg"></span>
                   ${_.escape(this.entry.query)}
               </div>
               <div class='other-info'>
@@ -251,12 +252,12 @@ export class QueryHistoryEntries {
         <div class="toggle-and-history-container">
             <div class="query-history-toggle">
                 <label class="control-label">
-                    Show queries generated internally by pgAdmin?
+                    ${gettext('Show queries generated internally by pgAdmin')}?
                 </label>
                 <input id="generated-queries-toggle" type="checkbox"
                   class="pgadmin-controls" data-style="quick"
-                  data-size="mini" data-on="Yes" data-off="No"
+                  data-size="mini" data-on="${gettext('Yes')}" data-off="${gettext('No')}"
-                  data-onstyle="success" data-offstyle="primary" checked>
+                  data-onstyle="success" data-offstyle="ternary" checked>
             </div>
             <div id='query_list' class='query-history' tabindex='0'></div>
         </div>

web/pgadmin/static/scss/_aci_tree.overrides.scss

@@ -20,7 +20,7 @@
 }
 .aciTree .aciTreeText {
 	font-family: $font-family-primary;
-	font-size: 0.815rem;
+	font-size: $tree-font-size;
 }
 
 .aciTree .aciTreeSelected > .aciTreeLine {

web/pgadmin/static/scss/_backgrid.overrides.scss

@@ -103,6 +103,10 @@
     background-color: $color-gray-light;
 }
 
+.backgrid:not(.presentation) td.renderable.editable:not(.delete-cell):not(.edit-cell) {
+    background-color: $input-bg;
+}
+
 .sql-editor-grid-container .backgrid > thead > th.renderable,
 .sql-editor-grid-container .backgrid > tbody > td.renderable {
     white-space: pre-wrap;
@@ -144,8 +148,8 @@ table.backgrid {
 
 /* Latest backgrid adds column name like `label` to td element, override color*/
 .backgrid td.label {
-  color:  $color-gray-dark;
+  color: $color-fg;
-  font-size: 14px;
+  font-size: $font-size-base;
   font-weight: normal;
 }
 
@@ -325,3 +329,18 @@ table.backgrid {
 table tr th button {
   font-weight: bold;
 }
+
+.custom-control.custom-checkbox.custom-checkbox-no-label {
+   padding-left: 0;
+
+   .custom-control-label {
+     // set same width/height as before and after
+     width: 1em;
+     height: 1em;
+
+     &::before,
+     &::after {
+       left: 0;
+     }
+   }
+}

web/pgadmin/static/scss/_bootstrap.overrides.scss

@@ -103,6 +103,14 @@ legend {
 	@include button-variant($color-secondary, $btn-secondary-border, $btn-secondary-hover-bg);
 }
 
+/** Overriding secondary button of bootstrap **/
+/* Used Bootstrap 4 Mixin button-variant
+ * Refer file : bootstrap/scss/mixins/_buttons.scss
+ */
+.btn-ternary {
+	@include button-variant($color-ternary, $btn-ternary-border, $btn-ternary-hover-bg);
+}
+
 .form-group fieldset {
 	background-color: $color-gray-lighter;
 	border-color: $color-gray-lighter;
@@ -331,3 +339,10 @@ td.switch-cell > div.toggle {
 .btn-group.pgadmin-controls-radio-none > label.btn.btn-primary.disabled {
   pointer-events: none;
 }
+
+/* Bootstrap custom controls */
+.custom-control-input {
+  &:focus:checked ~ .custom-control-label::before {
+    border-color: $custom-control-indicator-focus-border-color;
+  }
+}

web/pgadmin/static/scss/_codemirror.overrides.scss

@@ -172,7 +172,7 @@
   }
 }
 
-.CodeMirror-focused .CodeMirror-selected {
+.CodeMirror .CodeMirror-selected {
   background: $color-primary-light !important;
 }
 

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -290,6 +290,17 @@
     margin: 0 auto;
     position: relative;
     text-align: center;
+
+    &:before {
+        font-family: $font-family-icon;
+        content: "\f05a" !important;
+        font-size: 1rem;
+        margin-right: 0.5rem;
+    }
+
+    &.pg-panel-error:before {
+        content: "\f06a" !important;
+    }
 }
 
 .pgadmin-control {
@@ -519,11 +530,17 @@ fieldset.inline-fieldset > div {
   }
 }
 
-.pgadmin-controls input[type="checkbox"]{
+.pgadmin-controls input[type=checkbox]{
   margin-left: 0 !important;
   margin-top: 10px !important;
 }
 
+/* custom-control-label is used for checkbox */
+.pgadmin-controls .custom-control-label{
+  margin-left: 0 !important;
+  margin-top: 5px !important;
+}
+
 .pgadmin-controls.sql_field_layout {
   margin: 0;
   padding: 0;
@@ -668,7 +685,7 @@ div.rolmembership {
 
 .inline-tab-panel {
     float: left; width: 100%;
-    background-color: $color-primary-fg;
+    background-color: $header-bg;
     border: 1px solid $border-color;
     border-radius: $card-border-radius;
 }
@@ -761,8 +778,15 @@ table tr td {
   }
 }
 
-.privilege_label{
+.privilege-checkbox{
-  font-size: 10px!important;
+    & .custom-control-label {
+        font-size: 0.7rem;
+        line-height: 1.7;
+        &:before, &:after {
+            height: 0.8rem;
+            width: 0.8rem;
+        }
+    }
 }
 
 span.button-label {
@@ -1081,3 +1105,8 @@ select:-webkit-autofill:focus {
   -webkit-box-shadow: 0 0 0px 1000px $color-primary-light inset;
   transition: background-color 5000s ease-in-out 0s;
 }
+
+/* Left side has a check icon, right side corrected */
+.btn-radiomodern {
+    padding-right: 1.75*$input-btn-padding-x !important;
+}

web/pgadmin/static/scss/_select2.overrides.scss

@@ -3,20 +3,33 @@
     color: $input-color;
 }
 
-.select2-container--default .select2-results__option--highlighted[aria-selected],
 .select2-container--default .select2-results__option[aria-selected=true] {
-  background-color: $dropdown-link-hover-bg;
+  background-color: $tree-bg-selected;
-  color:  $dropdown-link-hover-color;
+  color: $tree-fg-selected;
+}
+
+.select2-container--default .select2-results__option--highlighted {
+  background-color: $tree-bg-hover !important;
+  color: $tree-fg-hover !important;
 }
 
 .select2-container--default .select2-selection--multiple {
     background-color: $input-bg;
     color: $input-color;
+
+
 }
 
 .select2-container--default .select2-selection--multiple .select2-selection__choice {
-  background-color: $dropdown-link-hover-bg;
+  background-color: $tree-bg-selected;
-  color:  $dropdown-link-hover-color;
+  color: $tree-fg-selected;
+  border: $input-border-width solid $dropdown-link-hover-bg;
+  line-height: 2;
+
+  & .select2-selection__choice__remove {
+    color: $dropdown-link-hover-bg;
+    margin-right: 0.25rem;
+  }
 }
 
 .select2-container--default .select2-search--inline .select2-search__field {

web/pgadmin/static/scss/resources/_default.variables.scss

@@ -1,5 +1,5 @@
 /** Dividing a pixel var with 1px or rem var with 1rem removes the unit px/rem **/
-$enable-flex: true ;
+$enable-flex: true;
 
 $white: #fff;
 $black: #000;
@@ -15,6 +15,9 @@ $color-primary-dark: #295c85 !default;
 
 $color-secondary: $white !default;
 
+$color-ternary: #5b6d7c !default;
+$color-ternary-fg: $white !default;
+
 $color-danger: #e53935 !default;
 $color-danger-fg: $white !default;
 $color-danger-light: #F39999 !default;
@@ -60,6 +63,7 @@ $border-radius: 0.25rem;
 $text-muted: $color-gray-dark !default;
 $header-bg: $color-bg !default;
 
+$tree-font-size: 0.815rem;
 
 $navbar-bg: $color-primary;
 $navbar-font-size: 0.925rem;
@@ -135,7 +139,7 @@ $table-head-color: $color-primary-fg;
 $input-bg: $white !default;
 $input-color: $color-fg !default;
 $input-placeholder-color: $text-muted;
-$input-border-color: $border-color;
+$input-border-color: $border-color !default;
 $input-border-radius: $border-radius;
 $input-disabled-bg: $color-gray-lighter !default;
 $input-btn-border-width: $border-width;
@@ -200,7 +204,7 @@ $table-hover-bg-color: $color-primary-light;
 $datagrid-bg: $color-gray-light;
 
 $tree-fg-hover: $color-fg;
-$tree-bg-hover: $color-gray-lighter;
+$tree-bg-hover: $color-gray-light;
 $tree-fg-selected: $color-fg;
 $tree-bg-selected: $color-primary-light;
 
@@ -210,8 +214,8 @@ $sql-grid-title-cell-fg: $input-color;
 $sql-grid-title-cell-bg: $input-bg;
 
 $sql-title-padding: 3px;
-$sql-title-bg: #5b6d7c;
+$sql-title-bg: $color-ternary;
-$sql-title-fg: $white;
+$sql-title-fg: $color-ternary-fg;
 // Toolbar + editor title heights + title bottom border
 $sql-editor-panel-top: $title-height + $text-height-calc*16px + $sql-title-padding*2 + $panel-border-width - 0.5px;
 $sql-gutters-bg: $negative-bg;
@@ -241,6 +245,9 @@ $alertify-borderremove-margin: $panel-border-width;
 $btn-secondary-border: $color-gray;
 $btn-secondary-hover-bg: $color-gray-light;
 
+$btn-ternary-border: $color-ternary !default;
+$btn-ternary-hover-bg: darken($color-ternary, 7.5%) !default;
+
 $card-header-padding : 0.25rem 0.5rem;
 $no-border-radius: 0px !important;
 
@@ -261,6 +268,11 @@ $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='ut
 
 /***************/
 
-$schemadiff-diff-row-color: #fff9c4;
+$schemadiff-diff-row-color: #fff9c4 !default;
-$schemadiff-source-row-color: #ffebee;
+$schemadiff-source-row-color: #ffebee !default;
-$schemadiff-target-row-color: #fbe3bf;
+$schemadiff-target-row-color: #fbe3bf !default;
+
+/* Custom controls bootstrap changes */
+$custom-forms-transition: none;
+$custom-control-indicator-focus-border-color: $input-focus-border-color;
+$custom-control-indicator-border-color: $input-border-color;

web/pgadmin/static/scss/resources/_theme.variables.scss.sample

@@ -1,59 +1,40 @@
 $color-bg: $white;
 $color-fg: #222222;
-
-$color-bg: #fff;
-$color-fg: #222;
-
 $color-primary: #326690;
 $color-primary-fg: $white;
 $color-primary-light: #d6effc;
 $color-primary-light-fg: $color-primary;
 $color-primary-dark: #295c85;
-
 $color-secondary: $white;
-
+$color-ternary: #5b6d7c;
+$color-ternary-fg: $white;
 $color-danger: #e53935;
 $color-danger-fg: $white;
 $color-danger-light: #F39999;
-$color-danger-lighter: #F39999;
+$color-danger-lighter: #FAECEC;
-
 $color-success: #43a047;
 $color-success-fg: $black;
 $color-success-light: #DDF1DE;
-
 $color-warning: #eea236;
 $color-warning-fg: $black;
 $color-warning-light: #fce5c5;;
-
-/* Used at highest level in places like tooltip backgroud */
 $color-gray-dark: #848ea0;
-/* Used for text colors at certain places */
 $color-gray: #bac1cd;
-/* Used mostly for panel background empty spaces */
 $color-gray-light: #ebeef3;
-/* Used mostly for disabled input backgrounds */
 $color-gray-lighter: #f3f5f9;
-
+$color-brand: $color-primary;
-$color-brand: $white;
-
 $border-color: #dde0e6;
 $shadow-base-color: $color-gray-dark;
-
 $text-muted: $color-gray-dark;
+$header-bg: $color-bg;
+$negative-bg: $color-gray-light;
+$popover-bg: $color-gray-dark;
+$popover-body-color: $white;
 $input-bg: $white;
 $input-color: $color-fg;
+$input-border-color: $border-color;
 $input-disabled-bg: $color-gray-lighter;
-
+$color-editor-fg: $input-color;
-$popover-bg: $color-bg;
-$popover-body-color: $color-fg;
-
-$active-color: $color-primary;
-
-$header-bg: $color-gray-lighter;
-
-$table-bg: $color-gray-lighter;
-
-$color-editor-fg: $color-fg;
 $color-editor-keyword: #908;
 $color-editor-number: #964;
 $color-editor-string: #a11;
@@ -65,18 +46,18 @@ $color-editor-bracket: #997;
 $color-editor-operator: $color-fg;
 $color-editor-foldmarker: #0000FF;
 $color-editor-activeline: #50B0F0;
-
+$active-color: $color-primary;
+$table-bg: $color-bg;
 $explain-sev-2-bg: #FFEE88;
 $explain-sev-3-bg: #EE8800;
 $explain-sev-4-bg: #880000;
 $explain-sev-3-color: #FFFFFF;
 $explain-sev-4-color: #FFFFFF;
-
+$btn-ternary-border: $color-ternary;
-$negative-bg: $color-gray-light;
+$btn-ternary-hover-bg: darken($color-ternary, 7.5%);
-
+$scrollbar-base-color: #bac1cd;
-/* Works only with chromium browsers */
+$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ");
-$scrollbar-color:  $color-gray-lighter!default;
+$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23326690;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
-$scrollbar-hover-color: #666666 !default;
+$schemadiff-diff-row-color: #fff9c4;
-
+$schemadiff-source-row-color: #ffebee;
-$loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%23326690;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
+$schemadiff-target-row-color: #fbe3bf;
-$loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%23222222;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;

web/pgadmin/static/scss/resources/dark/_theme.variables.scss

@@ -35,10 +35,11 @@ $color-brand: #1b71b5;
 $border-color: #4a4a4a;
 $shadow-base-color: #111111;
 
-$text-muted: #9d9fa1;
+$text-muted: #6b6b6b;
-$input-bg: $color-gray-light;
+$input-bg: $color-bg;
 $input-color: $color-fg;
-$input-disabled-bg: $color-bg;
+$input-border-color: #6b6b6b;
+$input-disabled-bg: inherit;
 
 $popover-bg: $color-bg;
 $popover-body-color: $color-fg;
@@ -74,3 +75,7 @@ $scrollbar-base-color: #616161;
 
 $loader-icon : url("data:image/svg+xml;charset=UTF-8,%3c?xml version='1.0' encoding='utf-8'?%3e%3csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3e%3cstyle type='text/css'%3e .st0%7bfill:none;stroke:%23ebeef3;stroke-width:2;%7d .st1%7bfill:none;stroke:%2340617d;stroke-width:2;%7d %3c/style%3e%3cg%3e%3cg transform='translate(1 1)'%3e%3ccircle class='st0' cx='18' cy='18' r='18'/%3e%3cpath class='st1' d='M36,18c0-9.9-8.1-18-18-18 '%3e%3canimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3e%3c/animateTransform%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e ") !default;
 $loader-icon-small: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: Adobe Illustrator 23.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 38 38' style='enable-background:new 0 0 38 38;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:none;stroke:%23EBEEF3;stroke-width:5;%7D .st1%7Bfill:none;stroke:%2340617d;stroke-width:5;%7D%0A%3C/style%3E%3Cg%3E%3Cg transform='translate(1 1)'%3E%3Ccircle class='st0' cx='18' cy='18' r='16'/%3E%3Cpath class='st1' d='M34,18c0-8.8-7.2-16-16-16 '%3E%3CanimateTransform accumulate='none' additive='replace' attributeName='transform' calcMode='linear' dur='0.7s' fill='remove' from='0 18 18' repeatCount='indefinite' restart='always' to='360 18 18' type='rotate'%3E%3C/animateTransform%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") !default;
+
+$schemadiff-diff-row-color: #807a48 !default;
+$schemadiff-source-row-color: #402025 !default;
+$schemadiff-target-row-color: #6b5438 !default;

web/pgadmin/static/vendor/backform/backform.js

@@ -547,12 +547,14 @@
       id: _.uniqueId('bf_')
     },
     template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%>" for="<%=cId%>"><%=controlLabel%></label>',
+      '<div class="<%=Backform.controlLabelClassName%>"><%=controlLabel%></div>',
       '<div class="<%=Backform.controlContainerClassName%>">',
-      '  <div class="form-check">',
+      '  <div class="custom-control custom-checkbox <%= (label && label.length)?"":"custom-checkbox-no-label" %>">',
-      '    <input type="<%=type%>" class="form-check-input <%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly" : ""%> <%=required ? "required" : ""%> />',
+      '    <input type="<%=type%>" id="<%=cId%>" class="custom-control-input <%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "readonly" : ""%> <%=required ? "required" : ""%> />',
       '    <% if (label && label.length) { %>',
-      '       <label class="form-check-label" for="<%=cId%>"><%=label%></label>',
+      '       <label class="custom-control-label" for="<%=cId%>"><%=label%></label>',
+      '    <% } else { %>',
+      '       <label class="custom-control-label" for="<%=cId%>"><span class="sr-only"><%=controlLabel%></span></label>',
       '    <% } %>',
       '  </div>',
       '</div>'
@@ -578,9 +580,9 @@
       '  <% for (var i=0; i < options.length; i++) { %>',
       '    <% var option = options[i]; %>',
       '    <% var id = _.uniqueId("bf_"); %>',
-      '  <div class="form-check">',
+      '  <div class="custom-control custom-radio">',
-      '    <input type="<%=type%>" class="<%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />',
+      '    <input type="<%=type%>" class="custom-control-input <%=extraClasses.join(\' \')%>" id="<%=cId%>" name="<%=name%>" value="<%-formatter.fromRaw(option.value)%>" <%=rawValue == option.value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=readonly ? "disabled" : ""%> <%=required ? "required" : ""%> />',
-      '    <label class="form-check-label" for="<%=cId%>"><%-option.label%></label>',
+      '    <label class="custom-control-label" for="<%=cId%>"><%-option.label%></label>',
       '  </div>',
       '  <% } %>',
       '  <% if (helpMessage && helpMessage.length) { %>',

web/pgadmin/static/vendor/backgrid/backgrid-select-all.js

@@ -122,7 +122,15 @@
        Renders a checkbox in a table cell.
     */
     render: function () {
-      this.$el.empty().append('<label class="sr-only">Select all</label><input tabindex="-1" type="checkbox" title="Select all"/>');
+      let id = `selectall-${_.uniqueId(this.column.get('name'))}`;
+      this.$el.empty().append(`
+        <div class="custom-control custom-checkbox custom-checkbox-no-label">
+          <input tabindex="-1" type="checkbox" class="custom-control-input" id="${id}" />
+          <label class="custom-control-label" for="${id}">
+            <span class="sr-only">Select All<span>
+          </label>
+        </div>
+      `);
       this.delegateEvents();
       return this;
     }

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -192,7 +192,7 @@
                 </ul>
             </div>
             <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-filter" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-filter" type="button" class="btn btn-secondary"
                         title=""
                         accesskey=""
                         tabindex="0" disabled>

web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js

@@ -103,10 +103,21 @@ define([
 
         // Do not use parent's render function. It set's tabindex to -1 on
         // checkboxes.
-        this.$el.empty().append('<input type="checkbox" />');
+
-        this.delegateEvents();
+
 
         var col = this.column.get('name');
+        let id = `row-${_.uniqueId(col)}`;
+        this.$el.empty().append(`
+          <div class="custom-control custom-checkbox custom-checkbox-no-label">
+            <input tabindex="-1" type="checkbox" class="custom-control-input" id="${id}" />
+            <label class="custom-control-label" for="${id}">
+              <span class="sr-only">Select All<span>
+            </label>
+          </div>
+        `);
+        this.delegateEvents();
+
         if (this.model && this.model.has(col)) {
           if (this.model.get(col)) {
             this.$el.parent().toggleClass('selected', true);

web/pgadmin/tools/maintenance/static/js/maintenance.js

@@ -448,11 +448,11 @@ define([
               if (d._type == 'primary_key' || d._type == 'unique_constraint' ||
                 d._type == 'index') {
                 var vacuum_analyze_btns = $container.find(
-                  '.pgadmin-controls label:lt(2)'
+                  '.btn-group label.btn:lt(2)'
-                ).removeClass('active').addClass('disabled');
+                ).addClass('disabled');
                 // Find reindex button element & add active class to it
                 var reindex_btn = vacuum_analyze_btns[1].nextElementSibling;
-                $(reindex_btn).addClass('active');
+                $(reindex_btn).trigger('click');
               }
 
               view.$el.attr('tabindex', -1);

web/pgadmin/tools/schema_diff/static/css/schema_diff.css

@@ -1,4 +1,5 @@
-.icon-schema-diff {
+.icon-schema-diff:before {
+  /*
   display: inline-block;
   align-content: center;
   vertical-align: middle;
@@ -9,6 +10,10 @@
   background-position-x: center;
   background-position-y: center;
   background-image: url('../img/compare.svg') !important;
+  */
+
+  font-icon: url('../img/compare.svg');
+  font-size: 1.3em !important;
 }
 
 .icon-schema-diff-white {
@@ -42,7 +47,7 @@
 }
 
 #schema-diff-header {
-  margin-top: 2px;
+  padding: 0.75rem 0.7rem;
 }
 
 #schema-diff-header .control-label {

web/pgadmin/tools/schema_diff/static/js/schema_diff.backform.js

@@ -287,25 +287,25 @@ let SchemaDiffHeaderView = Backform.Form.extend({
   },
   template: _.template(`
     <div class="row pgadmin-control-group">
-      <div class="control-label">Select Source</div>
+      <div class="col-1 control-label">Select Source</div>
       <div class="col-6 source row"></div>
     </div>
     <div class="row pgadmin-control-group">
-      <div class="control-label">Select Target</div>
+      <div class="col-1 control-label">Select Target</div>
       <div class="col-6 target row"></div>
       <div class="col-5 target-buttons">
           <div class="action-btns d-flex">
               <button class="btn btn-primary mr-auto"><i class="icon-schema-diff-white"></i>&nbsp;` + gettext('Compare') + `</button>
               <button id="generate-script" class="btn btn-secondary mr-1" disabled><i class="fa fa-file-code-o sql-icon-lg"></i>&nbsp;` + gettext('Generate Script') + `</button>
               <div class="btn-group mr-1" role="group" aria-label="">
-                <button id="btn-filter" type="button" class="btn btn-sm btn-secondary"
+                <button id="btn-filter" type="button" class="btn btn-secondary"
                         title=""
                         accesskey=""
                         tabindex="0"
                         style="pointer-events: none;">
                     <i class="fa fa-filter sql-icon-lg" aria-hidden="true"></i>&nbsp;` + gettext('Filter') + `
                 </button>
-                <button id="btn-filter-dropdown" type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split"
+                <button id="btn-filter-dropdown" type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split"
                         data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                         title=""
                         accesskey=""

web/pgadmin/tools/schema_diff/static/js/schema_diff.js

@@ -115,7 +115,7 @@ define('pgadmin.schemadiff', [
 
         // Set panel title and icon
         schemaDiffPanel.title('<span title="'+panel_tooltip+'">'+panel_title+'</span>');
-        schemaDiffPanel.icon('icon-schema-diff');
+        schemaDiffPanel.icon('pg-font-icon icon-schema-diff');
         schemaDiffPanel.focus();
 
         var openSchemaDiffURL = function(j) {

web/pgadmin/tools/schema_diff/static/js/schema_diff_ui.js

@@ -761,7 +761,7 @@ export default class SchemaDiffUI {
 
     footer_panel.$container.find('#schema-diff-ddl-comp').append(self.footer.render().$el);
     header_panel.$container.find('#schema-diff-grid').append(`<div class='obj_properties container-fluid'>
-    <div class='alert alert-info pg-panel-message'>` + gettext('Select the server, database and schema for the source and target and click <b>Compare</b> to compare them.') + '</div></div>');
+    <div class='pg-panel-message'>` + gettext('Select the server, database and schema for the source and target and click <b>Compare</b> to compare them.') + '</div></div>');
 
     self.grid_width = $('#schema-diff-grid').width();
     self.grid_height = this.panel_obj.height();

web/pgadmin/tools/schema_diff/static/scss/_schema_diff.scss

@@ -4,23 +4,18 @@
   right: 0;
   top: 0;
   bottom: 0;
-  padding-top: 10px;
   background-color: $color-gray-light;
 }
 
 #schema-diff-grid {
-  background: $color-bg;
+  font-family: $font-family-primary;
-  outline: 0;
+  font-size: $tree-font-size;
-  font-size: 9pt;
-  margin-top: 28px;
-  background: none;
-  background-color: $color-gray-light;
 }
 
 #schema-diff-grid .slick-header .slick-header-columns {
   background: $color-bg;
   height: 40px;
-  border-bottom: $panel-border;
+  border-bottom: none;
 }
 
 #schema-diff-grid .slick-header .slick-header-column.ui-state-default {
@@ -29,6 +24,17 @@
   border-right: $panel-border;
 }
 
+#schema-diff-grid {
+  .ui-widget-content {
+    background-color: $input-bg;
+    color: $input-color;
+  }
+
+  .ui-state-default {
+    color: $color-fg;
+  }
+}
+
 .slick-row:hover .slick-cell{
   border-top: $table-hover-border;
   border-bottom: $table-hover-border;
@@ -46,12 +52,11 @@
 }
 
 #schema-diff-grid .slick-row .slick-cell.l0.r0.selected {
-  background-color: $color-primary;
+  background-color: inherit;
-  color: $color-primary-fg;
 }
 
-#schema-diff-grid .slick-row > .slick-cell:not(.l0):not(.r0).selected {
+#schema-diff-grid .slick-row > .slick-cell.selected {
-  background-color: $table-hover-bg-color;
+  background-color: $table-hover-bg-color !important;
   border-top: $table-hover-border;
   border-bottom: $table-hover-border;
 }
@@ -60,14 +65,14 @@
   background: $color-bg;
   border-bottom: none;
   border-right: none;
-  border-top: none;
+  border-top: $panel-border;
 }
 
 #schema-diff-grid .different {
   background-color: $schemadiff-diff-row-color !important;
 }
 #schema-diff-grid .source {
-  background-color: $schemadiff-source-row-color !important;
+  background-color: $schemadiff-source-row-color;
 }
 #schema-diff-grid .target {
   background-color: $schemadiff-target-row-color !important;
@@ -83,3 +88,11 @@
   background-color: $color-bg !important;
   overflow-y: hidden;
 }
+
+#schema-diff-grid .slick-group-select-checkbox {
+  width: 13px;
+  height: 13px;
+  margin-right: 1rem;
+  vertical-align: middle;
+  display: inline-block;
+}

web/pgadmin/tools/schema_diff/templates/schema_diff/index.html

@@ -2,10 +2,14 @@
 {% block init_script %}
 try {
   require(
-    ['sources/generated/schema_diff', 'sources/generated/slickgrid', 'sources/generated/codemirror', 'sources/generated/browser_nodes'],
+    ['sources/generated/slickgrid', 'sources/generated/codemirror', 'sources/generated/browser_nodes'],
-    function(pgSchemaDiffHook) {
+    function() {
+      require(['sources/generated/schema_diff'], function(pgSchemaDiffHook) {
         var pgSchemaDiffHook = pgSchemaDiffHook || pgAdmin.Tools.SchemaDiffHook;
         pgSchemaDiffHook.load({{trans_id}});
+      }, function() {
+        console.log(arguments);
+      });
     },
     function() {
       console.log(arguments);

web/pgadmin/tools/sqleditor/static/css/sqleditor.css

@@ -337,6 +337,10 @@ input.editor-checkbox:focus {
   width: 100%;
   height: 100%;
   background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAANElEQVQoU2O8e/fuf2VlZUYGLAAkB5bApggmBteJrAiZjWI0SAJkIrKVxCvAawVeRxLyJgB+Ajc1cwux9wAAAABJRU5ErkJggg==);
+  /* Let's keep the background as fff irrespective of theme
+   * make geometry viewer look clean
+   */
+  background-color: #fff;
  }
 
 

web/pgadmin/tools/sqleditor/static/scss/_sqleditor.scss

@@ -349,3 +349,8 @@ div.strikeout:after {
 .sql-editor-grid-container.has-no-footer {
   height: 100%;
 }
+
+
+/* Setting it to hardcoded white as the SVG generated is having white bg
+ * Need to check what can be done.
+ */