dark mode fixes

packages/web/src/celldata/JsonCellDataView.js

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import ReactJson from 'react-json-view';
 import ErrorInfo from '../widgets/ErrorInfo';
+import useTheme from '../theme/useTheme';
 
 const OuterWrapper = styled.div`
   flex: 1;
@@ -18,12 +19,13 @@ const InnerWrapper = styled.div`
 `;
 
 export default function JsonCellView({ value }) {
+  const theme = useTheme();
   try {
     const json = JSON.parse(value);
     return (
       <OuterWrapper>
         <InnerWrapper>
-          <ReactJson src={json} />
+          <ReactJson src={json} theme={theme.jsonViewerTheme} />
         </InnerWrapper>
       </OuterWrapper>
     );

packages/web/src/tabs/TableStructureTab.js

@@ -6,6 +6,7 @@ import { TableColumn } from '../utility/TableControl';
 import columnAppObject from '../appobj/columnAppObject';
 import constraintAppObject from '../appobj/constraintAppObject';
 import { useTableInfo, useDbCore } from '../utility/metadataLoaders';
+import useTheme from '../theme/useTheme';
 
 const WhitePage = styled.div`
   position: absolute;
@@ -13,15 +14,17 @@ const WhitePage = styled.div`
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: white;
+  background-color: ${(props) => props.theme.main_background};
+  overflow: auto;
 `;
 
 export default function TableStructureTab({ conid, database, schemaName, pureName, objectTypeField = 'tables' }) {
+  const theme = useTheme();
   const tableInfo = useDbCore({ conid, database, schemaName, pureName, objectTypeField });
   if (!tableInfo) return null;
   const { columns, primaryKey, foreignKeys, dependencies } = tableInfo;
   return (
-    <WhitePage>
+    <WhitePage theme={theme}>
       <ObjectListControl
         collection={columns.map((x, index) => ({ ...x, ordinal: index + 1 }))}
         makeAppObj={columnAppObject}

packages/web/src/theme/dark.js

@@ -8,6 +8,7 @@ const theme = {
 
   selectionAntName: 'blue',
   aceEditorTheme: 'twilight',
+  jsonViewerTheme: 'monokai',
 
   border: '#555',
   border_background: '#555',
@@ -19,7 +20,7 @@ const theme = {
   title_background: '#555',
   manager_background: '#222',
   tabs_background: '#111',
-  gridheader_background: '#222',
+  gridheader_background: '#333',
   gridbody_background: '#1a1a1a',
   scrollbar_background: '#444',
   input_background: '#222',

packages/web/src/theme/light.js

@@ -6,6 +6,7 @@ const theme = {
 
   selectionAntName: 'blue',
   aceEditorTheme: 'github',
+  jsonViewerTheme: 'rjv-default',
 
   border: '#ccc',
   border_background: '#ccc',

packages/web/src/themes/ThemeHelmet.js

@@ -37,16 +37,19 @@ export default function ThemeHelmet() {
         input {
           background-color: ${theme.input_background};
           color: ${theme.input_font1};
+          border: 1px solid ${theme.border};
         }
         
         select {
           background-color: ${theme.input_background};
           color: ${theme.input_font1};
+          border: 1px solid ${theme.border};
         }
 
         textarea {
           background-color: ${theme.input_background};
           color: ${theme.input_font1};
+          border: 1px solid ${theme.border};
         }
 
         ${_.flatten(

packages/web/src/utility/ObjectListControl.js

@@ -2,13 +2,14 @@ import React from 'react';
 import styled from 'styled-components';
 import TableControl, { TableColumn } from './TableControl';
 import { AppObjectControl } from '../appobj/AppObjects';
+import useTheme from '../theme/useTheme';
 
 const ObjectListWrapper = styled.div`
   margin-bottom: 20px;
 `;
 
 const ObjectListHeader = styled.div`
-  background-color: #ebedef;
+  background-color: ${(props) => props.theme.gridheader_background};
   padding: 5px;
 `;
 
@@ -25,11 +26,12 @@ const ObjectListBody = styled.div`
 `;
 
 export default function ObjectListControl({ collection = [], title, showIfEmpty = false, makeAppObj, children }) {
+  const theme = useTheme();
   if (collection.length == 0 && !showIfEmpty) return null;
 
   return (
     <ObjectListWrapper>
-      <ObjectListHeader>
+      <ObjectListHeader theme={theme}>
         <ObjectListHeaderTitle>{title}</ObjectListHeaderTitle>
       </ObjectListHeader>
       <ObjectListBody>

packages/web/src/widgets/WidgetStyles.js

@@ -45,7 +45,8 @@ export function WidgetsOuterContainer({ children, style = undefined, refNode = u
 
 export const StyledWidgetsInnerContainer = styled.div`
   flex: 1 1;
-  overflow: scroll;
+  overflow-x: auto;
+  overflow-y: auto;
   width: ${(props) => props.leftPanelWidth}px;
 `;