From 038fd6ce214a5b88093c22c00a01c0f828f40b51 Mon Sep 17 00:00:00 2001
From: Aditya Toshniwal <aditya.toshniwal@enterprisedb.com>
Date: Mon, 4 Oct 2021 12:41:48 +0530
Subject: [PATCH] Fixed Dark theme UI related issues. Fixes #6846

---
 .../schemas/tables/columns/static/js/column.ui.js  | 14 ++++++++++++--
 .../schemas/tables/static/js/partition.utils.ui.js |  2 +-
 web/pgadmin/static/js/Theme/dark.js                |  2 +-
 web/pgadmin/static/js/Theme/index.jsx              | 10 ++++++++++
 .../static/js/components/FormComponents.jsx        |  1 +
 5 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
index ea6ba8bc9..ee6edcd1b 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/columns/static/js/column.ui.js
@@ -275,8 +275,13 @@ export default class ColumnSchema extends BaseUISchema {
         return _.isUndefined(this.nodeInfo['table'] || this.nodeInfo['view'] || this.nodeInfo['mview']);
       },
     },{
-      id: 'attlen', label: gettext('Length/Precision'), cell: 'int',
+      id: 'attlen', label: gettext('Length/Precision'),
       deps: ['cltype'], type: 'int', group: gettext('Definition'), width: 120, disableResizing: true,
+      cell: (state)=>{
+        return {
+          cell: obj.attlenRange(state) ? 'int' : '',
+        };
+      },
       depChange: (state)=>{
         let range = this.attlenRange(state);
         if(range) {
@@ -300,8 +305,13 @@ export default class ColumnSchema extends BaseUISchema {
         return Boolean(obj.attlenRange(state));
       },
     },{
-      id: 'attprecision', label: gettext('Scale'), cell: 'int', width: 60, disableResizing: true,
+      id: 'attprecision', label: gettext('Scale'), width: 60, disableResizing: true,
       deps: ['cltype'], type: 'int', group: gettext('Definition'),
+      cell: (state)=>{
+        return {
+          cell: obj.attlenRange(state) ? 'int' : '',
+        };
+      },
       depChange: (state)=>{
         let range = this.attprecisionRange(state);
         if(range) {
diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
index aa71e3732..8d0212ea0 100644
--- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
+++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/static/js/partition.utils.ui.js
@@ -264,7 +264,7 @@ export class PartitionsSchema extends BaseUISchema {
         }
         return false;
       },
-      disabled: function(state) {
+      readonly: function(state) {
         if(obj.top && obj.top.sessData.partition_type == 'list' && obj.isNew(state)
             && state.is_default !== true) {
           return false;
diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js
index 3d5cd3abc..aecc75c44 100644
--- a/web/pgadmin/static/js/Theme/dark.js
+++ b/web/pgadmin/static/js/Theme/dark.js
@@ -26,7 +26,7 @@ export default function(basicSettings) {
       },
       primary: {
         main: '#234d6e',
-        light: '#d6effc',
+        light: '#323E43',
         contrastText: '#fff',
         hoverMain: darken('#234d6e', 0.25),
         hoverBorderColor: darken('#234d6e', 0.25),
diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx
index 784b8840d..8126a3075 100644
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/web/pgadmin/static/js/Theme/index.jsx
@@ -233,6 +233,11 @@ function getFinalTheme(baseTheme) {
     mixins: mixins,
     overrides: {
       MuiOutlinedInput:  {
+        root: {
+          '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
+            borderColor: baseTheme.otherVars.inputBorderColor,
+          },
+        },
         notchedOutline: {
           borderColor: baseTheme.otherVars.inputBorderColor,
         }
@@ -259,12 +264,16 @@ function getFinalTheme(baseTheme) {
         root: {
           backgroundColor: baseTheme.palette.background.default,
           textOverflow: 'ellipsis',
+          '&.Mui-disabled': {
+            backgroundColor: baseTheme.otherVars.inputDisabledBg,
+          },
         },
         inputMultiline: {
           fontSize: baseTheme.typography.fontSize,
           height: 'unset',
           backgroundColor: baseTheme.palette.background.default,
           '&[readonly], &.Mui-disabled': {
+            color: baseTheme.palette.text.muted,
             backgroundColor: baseTheme.otherVars.inputDisabledBg,
           },
         },
@@ -273,6 +282,7 @@ function getFinalTheme(baseTheme) {
           height: 'unset',
           backgroundColor: baseTheme.palette.background.default,
           '&[readonly], &.Mui-disabled': {
+            color: baseTheme.palette.text.muted,
             backgroundColor: baseTheme.otherVars.inputDisabledBg,
           },
         }
diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx
index 58afb7c37..160a2b57c 100644
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/web/pgadmin/static/js/components/FormComponents.jsx
@@ -589,6 +589,7 @@ const customReactSelectStyles = (theme, readonly)=>({
     ...provided,
     minHeight: '0',
     backgroundColor: readonly ? theme.otherVars.inputDisabledBg : theme.palette.background.default,
+    color: readonly ? theme.palette.text.muted : theme.palette.text.primary,
     borderColor: theme.otherVars.inputBorderColor,
     ...(state.isFocused ? {
       borderColor: theme.palette.primary.main,