Fixed theme related issues after react porting.

web/pgadmin/static/js/Theme/dark.js

@@ -85,6 +85,11 @@ export default function(basicSettings) {
       headerBg: '#424242',
       activeColor: '#d4d4d4',
       tableBg: '#424242',
+      activeStepBg: '#234d6e',
+      activeStepFg: '#FFFFFF',
+      stepBg: '#FFFFFF',
+      stepFg: '#000',
+      toggleBtnBg: '#000'
     }
   });
 }

web/pgadmin/static/js/Theme/high_contrast.js

@@ -57,7 +57,7 @@ export default function(basicSettings) {
       },
       text: {
         primary: '#fff',
-        muted: '#8b9cad',
+        muted: '#8b9cac',
       },
       background: {
         paper: '#010B15',
@@ -83,6 +83,11 @@ export default function(basicSettings) {
       headerBg: '#010B15',
       activeColor: '#d4d4d4',
       tableBg: '#010B15',
+      activeStepBg: '#84D6FF',
+      activeStepFg: '#010b15',
+      stepBg: '#FFFFFF',
+      stepFg: '#000',
+      toggleBtnBg: '#6B6B6B'
     }
   });
 }

web/pgadmin/static/js/Theme/index.jsx

@@ -242,6 +242,13 @@ function getFinalTheme(baseTheme) {
           borderColor: baseTheme.otherVars.inputBorderColor,
         }
       },
+      MuiFormControlLabel: {
+        label: {
+          '&.Mui-disabled': {
+            color: baseTheme.palette.text.muted
+          }
+        }
+      },
       MuiTabs: {
         root: {
           backgroundColor: baseTheme.otherVars.headerBg,
@@ -306,6 +313,13 @@ function getFinalTheme(baseTheme) {
           backgroundColor: baseTheme.otherVars.headerBg,
         }
       },
+      MuiToggleButtonGroup: {
+        groupedHorizontal : {
+          '&:not(:first-child)': {
+            borderLeft: 'abc'
+          }
+        }
+      },
       MuiSwitch: {
         root: {
           width: 54,
@@ -341,13 +355,23 @@ function getFinalTheme(baseTheme) {
         },
         thumb: {
           border: '1px solid ' + baseTheme.otherVars.inputBorderColor
+        },
+        track: {
+          backgroundColor: baseTheme.otherVars.toggleBtnBg
         }
       },
       MuiCheckbox: {
         root: {
           padding: '0px',
           color: baseTheme.otherVars.inputBorderColor,
+        },
+
+        colorPrimary: {
+          '&.Mui-disabled': {
+            color: baseTheme.palette.text.muted
+          }
         }
+
       },
       MuiToggleButton: {
         root: {

web/pgadmin/static/js/Theme/standard.js

@@ -91,6 +91,11 @@ export default function(basicSettings) {
       headerBg: '#fff',
       activeColor: '#326690',
       tableBg: '#fff',
+      activeStepBg: '#326690',
+      activeStepFg: '#FFFFFF',
+      stepBg: '#ddd',
+      stepFg: '#000',
+      toggleBtnBg: '#000'
     }
   });
 }

web/pgadmin/static/js/helpers/wizard/Wizard.jsx

@@ -56,14 +56,15 @@ const useStyles = makeStyles((theme) =>
       fontWeight: 600
     },
     activeIndex: {
-      backgroundColor: '#326690 !important',
+      backgroundColor: theme.otherVars.activeStepBg + ' !important',
-      color: '#fff'
+      color: theme.otherVars.activeStepFg + ' !important'
     },
     stepIndex: {
       padding: '0.5em 1em ',
       height: '2.5em',
       borderRadius: '2em',
-      backgroundColor: '#ddd',
+      backgroundColor: theme.otherVars.stepBg,
+      color: theme.otherVars.stepFg,
       display: 'inline-block',
       flex: 0.5,
 

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

@@ -7,7 +7,7 @@
 .CodeMirror {
   font-size: 1em;
   font-family: monospace, monospace;
-  background-color: $color-editor-bg;
+  background-color: $color-editor-bg !important;
   color: $color-editor-fg;
 }