diff --git a/packages/web/src/datagrid/ColumnHeaderControl.js b/packages/web/src/datagrid/ColumnHeaderControl.js index 10bd77e69..a7440069f 100644 --- 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({ )} )} - + ); } diff --git a/packages/web/src/datagrid/DataGridCore.js b/packages/web/src/datagrid/DataGridCore.js index fc8435553..b80701ebf 100644 --- 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 && ( 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 ( - +
diff --git a/packages/web/src/datagrid/ReferenceManager.js b/packages/web/src/datagrid/ReferenceManager.js index 00a42f4c7..f556111de 100644 --- 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 ( - + {tableName} ({columns.map((x) => x.columnName).join(', ')}) diff --git a/packages/web/src/freetable/MacroDetail.js b/packages/web/src/freetable/MacroDetail.js index a75034653..4237eaaf8 100644 --- 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 ( - +
{selectedMacro.title} diff --git a/packages/web/src/impexp/ImportExportConfigurator.js b/packages/web/src/impexp/ImportExportConfigurator.js index dea06217b..8871f096a 100644 --- 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 ( - {direction == 'source' && } - {direction == 'target' && } + {direction == 'source' && } + {direction == 'target' && } x.directions.includes(direction))} name={storageTypeField} /> {(storageType == 'database' || storageType == 'query') && ( <> - + - + )} {storageType == 'database' && ( <> - + {tablesField && ( <> - + - + - + )} {storageType == 'archive' && direction == 'source' && ( <> - +
{ setFieldValue( 'sourceList', @@ -296,7 +298,7 @@ function SourceName({ name }) { return (
{name}
- + diff --git a/packages/web/src/modals/ImportExportModal.js b/packages/web/src/modals/ImportExportModal.js index b355d0f0a..040917222 100644 --- 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 Import/Export - + - + {/* Preview diff --git a/packages/web/src/modals/ModalContent.js b/packages/web/src/modals/ModalContent.js index 815c28ba0..c02b20356 100644 --- 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 {children}; + const theme = useTheme(); + return {children}; } diff --git a/packages/web/src/modals/ModalFooter.js b/packages/web/src/modals/ModalFooter.js index 4cb68b928..ddc6bec1d 100644 --- 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}; `; diff --git a/packages/web/src/theme/dark.js b/packages/web/src/theme/dark.js index 4a5c76020..1eba21806 100644 --- 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); diff --git a/packages/web/src/theme/light.js b/packages/web/src/theme/light.js index aa266aa5b..f49a3e83d 100644 --- 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); diff --git a/packages/web/src/widgets/InlineButton.js b/packages/web/src/widgets/InlineButton.js index daf98a7bf..426e706ac 100644 --- 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 ( {children}