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/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;
-  outline: 0;
-  font-size: 9pt;
-  margin-top: 28px;
-  background: none;
-  background-color: $color-gray-light;
+  font-family: $font-family-primary;
+  font-size: $tree-font-size;
 }
 
 #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;
-  color: $color-primary-fg;
+  background-color: inherit;
 }
 
-#schema-diff-grid .slick-row > .slick-cell:not(.l0):not(.r0).selected {
-  background-color: $table-hover-bg-color;
+#schema-diff-grid .slick-row > .slick-cell.selected {
+  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'],
-    function(pgSchemaDiffHook) {
-      var pgSchemaDiffHook = pgSchemaDiffHook || pgAdmin.Tools.SchemaDiffHook;
-      pgSchemaDiffHook.load({{trans_id}});
+    ['sources/generated/slickgrid', 'sources/generated/codemirror', 'sources/generated/browser_nodes'],
+    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);