theme

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -8,6 +8,7 @@ import { isTypeDateTime } from '@dbgate/tools';
 import { openDatabaseObjectDetail } from '../appobj/databaseObjectAppObject';
 import { useSetOpenedTabs } from '../utility/globalState';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const HeaderDiv = styled.div`
   display: flex;
@@ -28,7 +29,7 @@ const IconWrapper = styled.span`
 `;
 
 const ResizeHandle = styled.div`
-  background-color: #ccc;
+  background-color: ${(props) => props.theme.border};
   width: 2px;
   cursor: col-resize;
   z-index: 1;
@@ -52,6 +53,7 @@ export default function ColumnHeaderControl({
   const onResizeDown = useSplitterDrag('clientX', onResize);
   const { foreignKey } = column;
   const setOpenedTabs = useSetOpenedTabs();
+  const theme = useTheme();
 
   const openReferencedTable = () => {
     openDatabaseObjectDetail(setOpenedTabs, 'TableDataTab', null, {
@@ -125,7 +127,7 @@ export default function ColumnHeaderControl({
           )}
         </DropDownButton>
       )}
-      <ResizeHandle className="resizeHandleControl" onMouseDown={onResizeDown} />
+      <ResizeHandle className="resizeHandleControl" onMouseDown={onResizeDown} theme={theme} />
     </HeaderDiv>
   );
 }

packages/web/src/datagrid/DataGridCore.js

@@ -64,7 +64,7 @@ const TableHeaderRow = styled.tr`
 `;
 const TableHeaderCell = styled.td`
   // font-weight: bold;
-  border: 1px solid #c0c0c0;
+  border: 1px solid ${(props) => props.theme.border};
   // border-collapse: collapse;
   text-align: left;
   padding: 0;
@@ -970,6 +970,7 @@ export default function DataGridCore(props) {
           {display.filterable && (
             <TableHeaderRow>
               <TableHeaderCell
+                theme={theme}
                 style={{ width: hederColwidthPx, minWidth: hederColwidthPx, maxWidth: hederColwidthPx }}
                 data-row="filter"
                 data-col="header"

packages/web/src/datagrid/ReferenceHeader.js

@@ -3,17 +3,18 @@ import ToolbarButton from '../widgets/ToolbarButton';
 import styled from 'styled-components';
 import dimensions from '../theme/dimensions';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Container = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #ddeeee;
+  background: ${(props) => props.theme.gridheader_background_cyan[0]};
   height: ${dimensions.toolBar.height}px;
   min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${(props) => props.theme.border};
 `;
 
 const Header = styled.div`
@@ -27,8 +28,9 @@ const HeaderText = styled.div`
 `;
 
 export default function ReferenceHeader({ reference, onClose }) {
+  const theme = useTheme();
   return (
-    <Container>
+    <Container theme={theme}>
       <Header>
         <FontIcon icon="img reference" />
         <HeaderText>

packages/web/src/datagrid/ReferenceManager.js

@@ -4,6 +4,7 @@ import { ManagerInnerContainer } from './ManagerStyles';
 import SearchInput from '../widgets/SearchInput';
 import { filterName } from '@dbgate/datalib';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const SearchBoxWrapper = styled.div`
   display: flex;
@@ -16,7 +17,7 @@ const Header = styled.div`
 `;
 
 const LinkContainer = styled.div`
-  color: #337ab7;
+  color: ${props=>props.theme.manager_font_blue[7]};
   margin: 5px;
   &:hover {
     text-decoration: underline;
@@ -32,8 +33,9 @@ const NameContainer = styled.div`
 `;
 
 function ManagerRow({ tableName, columns, icon, onClick }) {
+  const theme = useTheme();
   return (
-    <LinkContainer onClick={onClick}>
+    <LinkContainer onClick={onClick} theme={theme}>
       <FontIcon icon={icon} />
       <NameContainer>
         {tableName} ({columns.map((x) => x.columnName).join(', ')})

packages/web/src/freetable/MacroDetail.js

@@ -9,6 +9,7 @@ import { WidgetTitle } from '../widgets/WidgetStyles';
 import { FormButton } from '../utility/forms';
 import FormStyledButton from '../widgets/FormStyledButton';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Container = styled.div`
   display: flex;
@@ -18,8 +19,8 @@ const Container = styled.div`
   height: ${dimensions.toolBar.height}px;
   min-height: ${dimensions.toolBar.height}px;
   overflow: hidden;
-  border-top: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${(props) => props.theme.border};
 `;
 
 const Header = styled.div`
@@ -60,8 +61,9 @@ const Buttons = styled.div`
 `;
 
 function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
+  const theme = useTheme();
   return (
-    <Container>
+    <Container theme={theme}>
       <Header>
         <FontIcon icon="img macro" />
         <HeaderText>{selectedMacro.title}</HeaderText>

packages/web/src/impexp/ImportExportConfigurator.js

@@ -44,7 +44,7 @@ const Column = styled.div`
 const Label = styled.div`
   margin: 5px;
   margin-top: 15px;
-  color: #777;
+  color: ${(props) => props.theme.modal_font2};
 `;
 
 const SourceNameWrapper = styled.div`
@@ -54,10 +54,10 @@ const SourceNameWrapper = styled.div`
 
 const TrashWrapper = styled.div`
   &:hover {
-    background-color: #ccc;
+    background-color: ${(props) => props.theme.modal_background2};
   }
   cursor: pointer;
-  color: blue;
+  color: ${(props) => props.theme.modal_font_blue[7]};
 `;
 
 const SqlWrapper = styled.div`
@@ -170,6 +170,7 @@ function SourceTargetConfig({
   tablesField = undefined,
   engine = undefined,
 }) {
+  const theme = useTheme();
   const { values, setFieldValue } = useFormikContext();
   const types =
     values[storageTypeField] == 'jsldata'
@@ -187,24 +188,24 @@ function SourceTargetConfig({
   const archiveFiles = useArchiveFiles({ folder: values[archiveFolderField] });
   return (
     <Column>
-      {direction == 'source' && <Label>Source configuration</Label>}
+      {direction == 'source' && <Label theme={theme}>Source configuration</Label>}
-      {direction == 'target' && <Label>Target configuration</Label>}
+      {direction == 'target' && <Label theme={theme}>Target configuration</Label>}
       <FormReactSelect options={types.filter((x) => x.directions.includes(direction))} name={storageTypeField} />
       {(storageType == 'database' || storageType == 'query') && (
         <>
-          <Label>Server</Label>
+          <Label theme={theme}>Server</Label>
           <FormConnectionSelect name={connectionIdField} />
-          <Label>Database</Label>
+          <Label theme={theme}>Database</Label>
           <FormDatabaseSelect conidName={connectionIdField} name={databaseNameField} />
         </>
       )}
       {storageType == 'database' && (
         <>
-          <Label>Schema</Label>
+          <Label theme={theme}>Schema</Label>
           <FormSchemaSelect conidName={connectionIdField} databaseName={databaseNameField} name={schemaNameField} />
           {tablesField && (
             <>
-              <Label>Tables/views</Label>
+              <Label theme={theme}>Tables/views</Label>
               <FormTablesSelect
                 conidName={connectionIdField}
                 schemaName={schemaNameField}
@@ -240,7 +241,7 @@ function SourceTargetConfig({
       )}
       {storageType == 'query' && (
         <>
-          <Label>Query</Label>
+          <Label theme={theme}>Query</Label>
           <SqlWrapper>
             <SqlEditor
               value={values.sourceSql}
@@ -254,14 +255,14 @@ function SourceTargetConfig({
 
       {storageType == 'archive' && (
         <>
-          <Label>Archive folder</Label>
+          <Label theme={theme}>Archive folder</Label>
           <FormArchiveFolderSelect name={archiveFolderField} />
         </>
       )}
 
       {storageType == 'archive' && direction == 'source' && (
         <>
-          <Label>Source files</Label>
+          <Label theme={theme}>Source files</Label>
           <FormArchiveFilesSelect folderName={values[archiveFolderField]} name={tablesField} />
           <div>
             <FormStyledButton
@@ -286,6 +287,7 @@ function SourceTargetConfig({
 
 function SourceName({ name }) {
   const { values, setFieldValue } = useFormikContext();
+  const theme = useTheme();
   const handleDelete = () => {
     setFieldValue(
       'sourceList',
@@ -296,7 +298,7 @@ function SourceName({ name }) {
   return (
     <SourceNameWrapper>
       <div>{name}</div>
-      <TrashWrapper onClick={handleDelete}>
+      <TrashWrapper onClick={handleDelete} theme={theme}>
         <FontIcon icon="icon delete" />
       </TrashWrapper>
     </SourceNameWrapper>

packages/web/src/modals/ImportExportModal.js

@@ -43,7 +43,7 @@ const WidgetColumnWrapper = styled.div`
   display: flex;
   flex: 1;
   overflow: hidden;
-  border-left: 1px solid #ccc;
+  border-left: 1px solid ${(props) => props.theme.border};
 `;
 
 const StyledForm = styled(Form)`
@@ -58,9 +58,7 @@ const StyledForm = styled(Form)`
 `;
 
 const ContentWrapper = styled.div`
-  // border-bottom: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
-  border-top: 1px solid #ccc;
-  // padding: 15px;
   flex: 1;
   display: flex;
   flex-direction: column;
@@ -135,10 +133,10 @@ export default function ImportExportModal({ modalState, initialValues, uploadedF
         <StyledForm>
           <ModalHeader modalState={modalState}>Import/Export</ModalHeader>
           <Wrapper>
-            <ContentWrapper>
+            <ContentWrapper theme={theme}>
               <ImportExportConfigurator uploadedFile={uploadedFile} />
             </ContentWrapper>
-            <WidgetColumnWrapper>
+            <WidgetColumnWrapper theme={theme}>
               <WidgetColumnBar>
                 {/* <WidgetColumnBarItem title="Preview" name="preview">
                   Preview

packages/web/src/modals/ModalContent.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${(props) => props.theme.border};
-  border-top: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
   padding: 15px;
 `;
 
 export default function ModalContent({ children }) {
-  return <Wrapper>{children}</Wrapper>;
+  const theme = useTheme();
+  return <Wrapper theme={theme}>{children}</Wrapper>;
 }

packages/web/src/modals/ModalFooter.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
-  border-bottom: 1px solid #ccc;
+  border-bottom: 1px solid ${(props) => props.theme.border};
   padding: 15px;
   background-color: ${(props) => props.theme.modalheader_background};
 `;

packages/web/src/theme/dark.js

@@ -18,15 +18,16 @@ const theme = {
   widget_background: '#222',
   title_background: '#555',
   manager_background: '#000',
-  tabs_background: '#444',
+  tabs_background: '#111',
   gridheader_background: '#222',
   gridbody_background: '#000',
   scrollbar_background: '#444',
   input_background: '#333',
   modal_background: '#222',
   modalheader_background: '#555',
-  button_background: '#337ab7',
+  button_background: '#004488',
   statusbar_background: '#00c',
+  inlinebtn_background: '#222',
 };
 
 export default fillTheme(theme);

packages/web/src/theme/light.js

@@ -26,6 +26,7 @@ const theme = {
   modalheader_background: '#eff',
   button_background: '#337ab7',
   statusbar_background: '#00c',
+  inlinebtn_background: '#ededed',
 };
 
 export default fillTheme(theme);

packages/web/src/widgets/InlineButton.js

@@ -1,36 +1,38 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import useTheme from '../theme/useTheme';
 
 const ButtonDiv = styled.div`
-  //box-shadow: 3px 4px 0px 0px #899599;
+  background: linear-gradient(
-  background: linear-gradient(to bottom, #ededed 5%, #bab1ba 100%);
+    to bottom,
-  background-color: #ededed;
+    ${(props) => props.theme.inlinebtn_background} 5%,
-  //border-radius: 15px;
+    ${(props) => props.theme.inlinebtn_background3} 100%
-  border: 1px solid #bbb;
+  );
+  background-color: ${(props) => props.theme.inlinebtn_background};
+  border: 1px solid ${(props) => props.theme.inlinebtn_background3};
   display: inline-block;
   cursor: pointer;
-  // color: #3a8a9e;
-  // color: gray;
-  // font-family: Arial;
   vertical-align: middle;
-  color: black;
+  color: ${(props) => props.theme.inlinebtn_font1};;
   font-size: 12px;
   padding: 3px;
   margin: 0;
-  // padding: 7px 25px;
   text-decoration: none;
-  // text-shadow: 0px 1px 0px #e1e2ed;
   &:hover {
-    border: 1px solid #777;
+    border: 1px solid ${(props) => props.theme.inlinebtn_font2};
   }
   &:active:hover {
-    background: linear-gradient(to bottom, #bab1ba 5%, #ededed 100%);
+    background: linear-gradient(
-    background-color: #bab1ba;
+      to bottom,
+      ${(props) => props.theme.inlinebtn_background3} 5%,
+      ${(props) => props.theme.inlinebtn_background} 100%
+    );
+    background-color: ${(props) => props.theme.inlinebtn_background3};
   }
   display: flex;
 
-  ${props =>
+  ${(props) =>
     props.square &&
     `
       width: 18px;
@@ -43,25 +45,6 @@ const InnerDiv = styled.div`
   text-align: center;
 `;
 
-// ${props =>
-//     !props.disabled &&
-//     `
-//   &:hover {
-//     background-color: #286090;
-//   }
-
-//   &:active:hover {
-//     background-color: #204d74;
-//   }
-//   `}
-
-//   ${props =>
-//     props.disabled &&
-//     `
-//     background-color: #ccc;
-//     color: gray;
-//   `}
-
 export default function InlineButton({
   children,
   onClick = undefined,
@@ -69,6 +52,7 @@ export default function InlineButton({
   disabled = undefined,
   square = false,
 }) {
+  const theme = useTheme();
   return (
     <ButtonDiv
       className="buttonLike"
@@ -78,6 +62,7 @@ export default function InlineButton({
       }}
       disabled={disabled}
       square={square}
+      theme={theme}
     >
       <InnerDiv>{children}</InnerDiv>
     </ButtonDiv>