theme

2026-04-19 20:06:00 +00:00 · 2020-11-12 15:28:37 +01:00
parent f30e7da503
commit 5eace3e332
12 changed files with 69 additions and 71 deletions
--- a/packages/web/src/datagrid/ColumnHeaderControl.js
+++ b/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>
  );
 }
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/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"
--- a/packages/web/src/datagrid/ReferenceHeader.js
+++ b/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-bottom: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
+  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>
--- a/packages/web/src/datagrid/ReferenceManager.js
+++ b/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(', ')})
--- a/packages/web/src/freetable/MacroDetail.js
+++ b/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-bottom: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
+  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>
--- a/packages/web/src/impexp/ImportExportConfigurator.js
+++ b/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 == 'target' && <Label>Target configuration</Label>}
+      {direction == 'source' && <Label theme={theme}>Source 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>
--- a/packages/web/src/modals/ImportExportModal.js
+++ b/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 #ccc;
-  // padding: 15px;
+  border-top: 1px solid ${(props) => props.theme.border};
  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
--- a/packages/web/src/modals/ModalContent.js
+++ b/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-top: 1px solid #ccc;
+  border-bottom: 1px solid ${(props) => props.theme.border};
+  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>;
 }
--- a/packages/web/src/modals/ModalFooter.js
+++ b/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};
 `;
--- a/packages/web/src/theme/dark.js
+++ b/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);
--- a/packages/web/src/theme/light.js
+++ b/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);
--- a/packages/web/src/widgets/InlineButton.js
+++ b/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(to bottom, #ededed 5%, #bab1ba 100%);
-  background-color: #ededed;
-  //border-radius: 15px;
-  border: 1px solid #bbb;
+  background: linear-gradient(
+    to bottom,
+    ${(props) => props.theme.inlinebtn_background} 5%,
+    ${(props) => props.theme.inlinebtn_background3} 100%
+  );
+  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-color: #bab1ba;
+    background: linear-gradient(
+      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>