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

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?'),
-          type:'radio', group: gettext('Definition'), mode: ['properties', 'edit','create'],
+          id: 'enabled', label: gettext('Trigger enabled?'),
+          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'),
-          type:'radio', group: gettext('Definition'), cell: 'string',
+          id: 'eventname', label: gettext('Event'),
+          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">',
-        '   <input type="checkbox" tabindex="1" name="privilege" privilege="<%- privilege_type %>" target="<%- target %>" <%= privilege ? \'checked\' : "" %>></input>',
-        '   <%- privilege_label %>',
-        '  </label>',
+        '  <div class="custom-control custom-checkbox privilege-checkbox">',
+        '    <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">',
-        '   <input type="checkbox" tabindex="1" name="with_grant" privilege="<%- privilege_type %>" target="<%- target %>" <%= with_grant ? \'checked\' : "" %> <%= enable_with_grant ? "" : \'disabled\'%>></input>',
-        '   WITH GRANT OPTION',
-        '  </label>',
+        '  <div class="custom-control custom-checkbox privilege-checkbox">',
+        '    <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"
-                       {% if not config.ALLOW_SAVE_PASSWORD  %}disabled{% endif %}
-                >
-                <label for="save_password">Save Password</label>
+                <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 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"
-                       {% if not config.ALLOW_SAVE_TUNNEL_PASSWORD  %}disabled{% endif %}
-                >
-                <label for="save_tunnel_password" class="ml-1">Save Password</label>
+                <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 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"
-                       {% if not config.ALLOW_SAVE_PASSWORD  %}disabled{% endif %}
-                >
-                <label for="save_password" class="ml-1">Save Password</label>
+                <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 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)
-                  this.$el.empty().append('<input tabindex="-1" type="checkbox" title="Select" disabled="disabled"/>');
-                else
-                  this.$el.empty().append('<input tabindex="-1" type="checkbox" title="Select" />');
+                let disabled = ('canDrop' in model && model.canDrop === false);
+                let id = `row-${_.uniqueId(model.oid || model.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}" ${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>' +