Fixed dark theme-related CSS and modify the color codes. Fixes #5287

Fixed backgrid row hover issue where on hover background color is set for edit and delete cell only. Fixes #5470

docs/en_US/release_notes_4_24.rst

@@ -22,6 +22,8 @@ Bug fixes
 
 | `Issue #3851 <https://redmine.postgresql.org/issues/3851>`_ -  Add proper indentation to the code while generating functions, procedures, and trigger functions.
 | `Issue #4235 <https://redmine.postgresql.org/issues/4235>`_ -  Fixed tab indent issue on a selection of lines is deleting the content when 'use spaces == true' in the preferences.
+| `Issue #5287 <https://redmine.postgresql.org/issues/5287>`_ -  Fixed dark theme-related CSS and modify the color codes.
+| `Issue #5470 <https://redmine.postgresql.org/issues/5470>`_ -  Fixed backgrid row hover issue where on hover background color is set for edit and delete cell only.
 | `Issue #5530 <https://redmine.postgresql.org/issues/5530>`_ -  Ensure that the referenced table should be displayed on foreign key constraints.
 | `Issue #5621 <https://redmine.postgresql.org/issues/5621>`_ -  Remove extra brackets from reverse engineering SQL of RLS Policy.
 | `Issue #5629 <https://redmine.postgresql.org/issues/5629>`_ -  Fixed an issue where the user is able to edit properties when some of the collection nodes are selected.

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

@@ -71,16 +71,8 @@ define('pgadmin.node.column', [
         Backgrid.Extension.DependentCell.prototype.initialize.apply(this, arguments);
       },
       dependentChanged: function () {
-        this.$el.empty();
+        this.model.set(this.column.get('name'), null);
-        var model = this.model,
+        this.render();
-          column = this.column,
-          editable = this.column.get('editable'),
-          is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
-
-        if (is_editable){ this.$el.addClass('editable'); }
-        else { this.$el.removeClass('editable'); }
-
-        this.delegateEvents();
         return this;
       },
       render: function() {

web/pgadmin/browser/server_groups/servers/databases/schemas/types/static/js/type.js

@@ -36,16 +36,8 @@ define('pgadmin.node.type', [
       Backgrid.Extension.DependentCell.prototype.initialize.apply(this, arguments);
     },
     dependentChanged: function () {
-      this.$el.empty();
+      this.model.set(this.column.get('name'), null);
-      var model = this.model;
+      this.render();
-      var column = this.column;
-      var editable = this.column.get('editable');
-
-      var is_editable = _.isFunction(editable) ? !!editable.apply(column, [model]) : !!editable;
-      if (is_editable){ this.$el.addClass('editable'); }
-      else { this.$el.removeClass('editable'); }
-
-      this.delegateEvents();
       return this;
     },
     remove: Backgrid.Extension.DependentCell.prototype.remove,
@@ -269,6 +261,7 @@ define('pgadmin.node.type', [
       collection_type: 'coll-type',
       hasSQL: true,
       hasDepends: true,
+      width: pgBrowser.stdW.md + 'px',
       Init: function() {
         /* Avoid multiple registration of menus */
         if (this.initialized)

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

@@ -801,6 +801,7 @@ define('pgadmin.dashboard', [
 
     reflectPreferences: function() {
       var self = this;
+      var tickColor = getComputedStyle(document.documentElement).getPropertyValue('--border-color');
 
       /* We will use old preferences for selective graph updates on preference change */
       if(self.preferences) {
@@ -829,6 +830,10 @@ define('pgadmin.dashboard', [
           yaxis: {
             autoscale: 1,
           },
+          grid: {
+            color: 'transparent',
+            tickColor: tickColor,
+          },
         };
 
         if(self.preferences.graph_data_points) {

web/pgadmin/static/js/alertify.pgadmin.defaults.js

@@ -440,7 +440,7 @@ define([
       var alertMessage =
       `<div class="d-flex px-3 py-2">
         <div class="pr-2">
-          <i class="fa fa-check text-success" aria-hidden="true"></i>
+          <i class="fa fa-check" aria-hidden="true"></i>
         </div>
         <div class="text-body" role="status">${message}</div>
       </div>`;
@@ -450,7 +450,7 @@ define([
       var alertMessage =
       `<div class="d-flex px-3 py-2">
         <div class="pr-2">
-          <i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
+          <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
         </div>
         <div class="text-body" role="status">${message}</div>
       </div>`;
@@ -460,7 +460,7 @@ define([
       var alertMessage =
       `<div class="d-flex px-3 py-2">
         <div class="mr-3">
-          <i class="fa fa-info text-primary" aria-hidden="true"></i>
+          <i class="fa fa-info-circle" aria-hidden="true"></i>
         </div>
         <div class="text-body" role="status">${message}</div>
       </div>`;

web/pgadmin/static/scss/_alert.scss

@@ -44,6 +44,7 @@
   align-self: center;
   // To make sure IE picks up the correct font
   font-family: $font-family-primary;
+  color: $color-fg;
 }
 
 .alert-info {
@@ -114,20 +115,23 @@
 
   .error-in-footer {
     border-radius: $border-radius;
-    border: 1px solid $color-danger-light;
+    background: $alert-danger-bg;
-    background: $color-danger-lighter;
+    border: $border-width solid $alert-danger-color;
+    color: $alert-danger-color;
   }
 
   .success-in-footer {
     border-radius: $border-radius;
-    border: 1px solid $color-success-light;
+    background: $alert-success-bg;
-    background: $color-success-light;
+    border: $border-width solid $alert-success-color;
+    color: $alert-success-color;
   }
 
   .info-in-footer {
     border-radius: $border-radius;
-    border: 1px solid $color-primary;
+    background: $alert-primary-bg;
-    background: $color-primary-light;
+    border: $border-width solid $alert-primary-color;
+    color: $alert-primary-color;
 
     .fa {
         font-size: 1rem;

web/pgadmin/static/scss/_alertify.overrides.scss

@@ -214,20 +214,23 @@
 }
 
 .ajs-message.ajs-error.ajs-visible {
-  background: $color-danger-lighter;
+  background: $alert-danger-bg;
-  border: $border-width solid $color-danger;
+  border: $border-width solid $alert-danger-color;
+  color: $alert-danger-color;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-success.ajs-visible {
-  background: $color-success-light;
+  background: $alert-success-bg;
-  border: $border-width solid $color-success;
+  border: $border-width solid $alert-success-color;
+  color: $alert-success-color;
   @extend .ajs-text-smoothing;
 }
 
 .ajs-message.ajs-visible {
-  background: $color-primary-light;
+  background: $alert-primary-bg;
-  border: $border-width solid $color-primary;
+  border: $border-width solid $alert-primary-color;
+  color: $alert-primary-color;
   @extend .ajs-text-smoothing;
 }
 

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

@@ -5,6 +5,13 @@
 
 .backgrid td {
   font-weight: normal!important;
+  &.editable {
+    & .display-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      @extend .form-control;
+    }
+  }
 }
 
 .backgrid.table th.sortable > button {
@@ -62,6 +69,12 @@
   z-index: 10 !important;
 }
 
+.backgrid td.editor {
+  & input[type=text], & input[type=password] {
+    @extend .form-control;
+  }
+}
+
 .backgrid .string-cell.editor input[type=password] {
   text-align: left;
 }
@@ -97,7 +110,6 @@
 }
 
 .backgrid:not(.presentation) td.renderable:not(.editable):not(.delete-cell) {
-    background-color: $color-gray-lighter;
     // if transparent border then setting color will help
     border-bottom-color: $color-gray-lighter;
 }
@@ -106,10 +118,6 @@
     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;

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

@@ -297,13 +297,6 @@ td.switch-cell > div.toggle {
 	font-weight: bold;
 }
 
-.navbar-brand:hover {
-	color: $color-brand !important;
-}
-.navbar-brand:focus {
-	color: $color-brand !important;
-}
-
 .btn-sm-sq {
   @extend .btn-sm;
   line-height: 0.7rem;

web/pgadmin/static/scss/pgadmin.scss

@@ -5,6 +5,11 @@ $theme-colors: (
   "warning": $color-warning,
 );
 
+/* Certain variables are required in JS directly */
+:root {
+  --border-color: #{$border-color};
+}
+
 @import "node_modules/bootstrap/scss/bootstrap";
 
 @import 'webcabin.pgadmin';

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

@@ -10,10 +10,6 @@
   &-light{
     background-color: $color-primary-light;
   }
-
-  &-dark{
-    background-color: $color-primary-dark;
-  }
 }
 
 .bg-danger {
@@ -69,10 +65,6 @@
   &-light {
     border-color: $color-primary-light;
   }
-
-  &-dark {
-    border-color: $color-primary-dark;
-  }
 }
 
 .border-danger {

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

@@ -11,7 +11,6 @@ $color-primary: #326690 !default;
 $color-primary-fg: $white !default;
 $color-primary-light: #d6effc !default;
 $color-primary-light-fg: $color-primary !default;
-$color-primary-dark: #295c85 !default;
 
 $color-secondary: $white !default;
 
@@ -65,6 +64,13 @@ $header-bg: $color-bg !default;
 
 $tree-font-size: 0.815rem;
 
+$alert-primary-bg: $color-primary-light !default;
+$alert-primary-color: $color-primary !default;
+$alert-danger-bg: $color-danger-lighter !default;
+$alert-danger-color: $color-danger !default;
+$alert-success-bg: $color-success-light !default;
+$alert-success-color: $color-success !default;
+
 $navbar-bg: $color-primary;
 $navbar-font-size: 0.925rem;
 $navbar-height: 32px;
@@ -130,6 +136,7 @@ $nav-tabs-link-active-border-color: none;
 $table-cell-padding: 0.25rem;
 $table-header-cell-padding: 0.75rem;
 $table-hover-bg: none; //we will use our own classes
+$table-hover-color: #000 !default;
 $table-active-bg: $color-primary-light;
 $table-border-width: $border-width;
 $table-border-color: $border-color;

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

@@ -4,7 +4,6 @@ $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;
@@ -27,9 +26,16 @@ $border-color: #dde0e6;
 $shadow-base-color: $color-gray-dark;
 $text-muted: $color-gray-dark;
 $header-bg: $color-bg;
+$alert-primary-bg: $color-primary-light !default;
+$alert-primary-color: $color-primary !default;
+$alert-danger-bg: $color-danger-lighter !default;
+$alert-danger-color: $color-danger !default;
+$alert-success-bg: $color-success-light !default;
+$alert-success-color: $color-success !default;
 $negative-bg: $color-gray-light;
 $popover-bg: $color-gray-dark;
 $popover-body-color: $white;
+$table-hover-color: #000;
 $input-bg: $white;
 $input-color: $color-fg;
 $input-border-color: $border-color;

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

@@ -8,7 +8,6 @@ $color-primary: #234d6e;
 $color-primary-fg: $color-fg;
 $color-primary-light: #323E43;
 $color-primary-light-fg: $color-primary-fg;
-$color-primary-dark: #15354f;
 
 $color-secondary: #6b6b6b;
 
@@ -36,6 +35,9 @@ $border-color: #4a4a4a;
 $shadow-base-color: #111111;
 
 $text-muted: #8A8A8A;
+
+$table-hover-color: #fff;
+
 $input-bg: $color-bg;
 $input-color: $color-fg;
 $input-border-color: #6b6b6b;
@@ -48,6 +50,13 @@ $active-color: $color-fg;
 
 $header-bg: $color-gray-lighter;
 
+$alert-primary-bg: $color-bg;
+$alert-primary-color: #50B0F0;
+$alert-danger-bg: $color-bg;
+$alert-danger-color: $color-danger;
+$alert-success-bg: $color-bg;
+$alert-success-color: $color-success;
+
 $table-bg: $color-gray-lighter;
 
 $color-editor-fg: #7dc9f1;

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

@@ -889,7 +889,8 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
     $el.empty();
     var model = this.model;
     var columnName = this.column.get("name");
-    $el.text(this.formatter.fromRaw(model.get(columnName), model));
+    var value = this.formatter.fromRaw(model.get(columnName), model);
+    $el.append($(`<span class="display-text" title="${value}">${value}</span>`));
     $el.addClass(columnName);
     this.updateStateClassesMaybe();
     this.delegateEvents();
@@ -932,9 +933,15 @@ var Cell = Backgrid.Cell = Backbone.View.extend({
 
       // Need to redundantly undelegate events for Firefox
       this.undelegateEvents();
+      var dispText = this.$el.find('.display-text');
+      var width = '100%';
+      if(dispText.length === 1) {
+        width = dispText.width();
+      }
       this.$el.empty();
       this.$el.append(this.currentEditor.$el);
       this.currentEditor.render();
+      this.currentEditor.$el.css('min-width',width);
       this.$el.addClass("editor");
 
       model.trigger("backgrid:editing", model, column, this, this.currentEditor);

web/pgadmin/tools/search_objects/static/js/search_objects_dialog_wrapper.js

@@ -29,7 +29,7 @@ export default class SearchObjectsDialogWrapper extends DialogWrapper {
           <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" role="img"></i>
+                <i class="fa fa-exclamation-triangle" aria-hidden="true" role="img"></i>
               </div>
               <div role="alert" class="alert-text">${text}</div>
               <div class="ml-auto close-error-bar">
@@ -47,7 +47,7 @@ export default class SearchObjectsDialogWrapper extends DialogWrapper {
           <div class="info-in-footer">
             <div class="d-flex px-2 py-1">
               <div class="pr-2">
-                <i class="fa fa-info-circle text-primary" aria-hidden="true"></i>
+                <i class="fa fa-info-circle" aria-hidden="true"></i>
               </div>
               <div class="alert-text" role="alert">${text}</div>
             </div>

web/pgadmin/tools/user_management/static/js/user_management.js

@@ -45,6 +45,7 @@ define([
       },
       dependentChanged: function () {
         this.$el.empty();
+        this.render();
         var model = this.model,
           column = this.column,
           editable = this.column.get('editable'),