theme - statusbar, icons

packages/web/src/Screen.js

@@ -76,7 +76,7 @@ const StausBarContainer = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.statusBarBackground};
+  background-color: ${(props) => props.theme.statusbar_background};
 `;
 
 const ScreenHorizontalSplitHandle = styled(HorizontalSplitHandle)`

packages/web/src/appobj/AppObjectList.js

@@ -4,6 +4,7 @@ import { AppObjectCore } from './AppObjects';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 import styled from 'styled-components';
 import { ExpandIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const SubItemsDiv = styled.div`
   margin-left: 16px;
@@ -23,7 +24,7 @@ const GroupDiv = styled.div`
   user-select: none;
   padding: 5px;
   &:hover {
-    background-color: lightblue;
+    background-color: ${(props) => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
@@ -93,12 +94,14 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
 function AppObjectGroup({ group, items }) {
   const [isExpanded, setIsExpanded] = React.useState(true);
   const [isHover, setIsHover] = React.useState(false);
+  const theme = useTheme();
   return (
     <>
       <GroupDiv
         onMouseEnter={() => setIsHover(true)}
         onMouseLeave={() => setIsHover(false)}
         onClick={() => setIsExpanded(!isExpanded)}
+        theme={theme}
       >
         <ExpandIconHolder>
           <ExpandIcon isExpanded={isExpanded} />

packages/web/src/appobj/AppObjects.js

@@ -5,12 +5,13 @@ import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
+import useTheme from '../theme/useTheme';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
   &:hover {
-    background-color: lightblue;
+    background-color: ${(props) => props.theme.left_background_blue[1]};
   }
   cursor: pointer;
   white-space: nowrap;
@@ -46,6 +47,7 @@ export function AppObjectCore({
   ...other
 }) {
   const appObjectParams = useAppObjectParams();
+  const theme = useTheme();
 
   const handleContextMenu = (event) => {
     if (!Menu) return;
@@ -65,6 +67,7 @@ export function AppObjectCore({
       onContextMenu={handleContextMenu}
       onClick={onClick ? () => onClick(data) : undefined}
       isBold={bold}
+      theme={theme}
       {...other}
     >
       {prefix}

packages/web/src/datagrid/ColumnManager.js

@@ -6,6 +6,7 @@ import { ExpandIcon } from '../icons';
 import InlineButton from '../widgets/InlineButton';
 import { ManagerInnerContainer } from './ManagerStyles';
 import SearchInput from '../widgets/SearchInput';
+import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div``;
 
@@ -15,7 +16,7 @@ const Row = styled.div`
   cursor: pointer;
   white-space: nowrap;
   &:hover {
-    background-color: lightblue;
+    background-color: ${(props) => props.theme.manager_background_blue[1]};
   }
 `;
 
@@ -31,23 +32,6 @@ const Button = styled.button`
   // width: 50px;
 `;
 
-// const Input = styled.input`
-//   flex: 1;
-//   min-width: 90px;
-// `;
-
-// function ExpandIcon({ display, column, isHover, ...other }) {
-//   if (column.foreignKey) {
-//     return (
-//       <FontIcon
-//         icon={`far ${display.isExpandedColumn(column.uniqueName) ? 'fa-minus-square' : 'fa-plus-square'} `}
-//         {...other}
-//       />
-//     );
-//   }
-//   return <FontIcon icon={`fas fa-square ${isHover ? 'lightblue' : 'white'}`} {...other} />;
-// }
-
 /**
  * @param {object} props
  * @param {import('@dbgate/datalib').GridDisplay} props.display
@@ -56,10 +40,12 @@ const Button = styled.button`
 function ColumnManagerRow(props) {
   const { display, column } = props;
   const [isHover, setIsHover] = React.useState(false);
+  const theme = useTheme();
   return (
     <Row
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
+      theme={theme}
       onClick={(e) => {
         // @ts-ignore
         if (e.target.closest('.expandColumnIcon')) return;
@@ -91,11 +77,7 @@ export default function ColumnManager(props) {
   return (
     <>
       <SearchBoxWrapper>
-        <SearchInput
-          placeholder="Search columns"
-          filter={columnFilter}
-          setFilter={setColumnFilter}
-        />
+        <SearchInput placeholder="Search columns" filter={columnFilter} setFilter={setColumnFilter} />
         <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
         <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>
       </SearchBoxWrapper>

packages/web/src/freetable/MacroManager.js

@@ -13,18 +13,6 @@ const SearchBoxWrapper = styled.div`
   margin-bottom: 5px;
 `;
 
-// const MacroItemStyled = styled.div`
-//   white-space: nowrap;
-//   padding: 5px;
-//   &:hover {
-//     background-color: lightblue;
-//   }
-// `;
-
-// function MacroListItem({ macro }) {
-//   return <MacroItemStyled>{macro.title}</MacroItemStyled>;
-// }
-
 export default function MacroManager({ managerSize, selectedMacro, setSelectedMacro }) {
   const [filter, setFilter] = React.useState('');
 

packages/web/src/icons.js

@@ -35,32 +35,34 @@ const iconNames = {
   'icon show-wizard': 'mdi mdi-comment-edit',
   'icon disconnected': 'mdi mdi-lan-disconnect',
   'icon theme': 'mdi mdi-brightness-6',
+  'icon error': 'mdi mdi-close-circle',
+  'icon ok': 'mdi mdi-check-circle',
 
   'icon run': 'mdi mdi-play',
   'icon chevron-down': 'mdi mdi-chevron-down',
 
-  'img green-ok': 'mdi mdi-check-circle color-green',
-  'img alert': 'mdi mdi-alert-circle color-blue',
-  'img red-error': 'mdi mdi-close-circle color-red',
-  'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
+  'img green-ok': 'mdi mdi-check-circle color-green-8',
+  'img alert': 'mdi mdi-alert-circle color-blue-6',
+  // 'img red-error': 'mdi mdi-close-circle color-red-7',
+  // 'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
 
-  'img archive': 'mdi mdi-table color-yellow-icon',
-  'img archive-folder': 'mdi mdi-database-outline color-green-icon',
+  'img archive': 'mdi mdi-table color-gold-7',
+  'img archive-folder': 'mdi mdi-database-outline color-green-7',
   'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
   'img column': 'mdi mdi-table-column',
-  'img server': 'mdi mdi-server color-blue-icon',
-  'img primary-key': 'mdi mdi-key-star color-yellow-icon',
+  'img server': 'mdi mdi-server color-blue-7',
+  'img primary-key': 'mdi mdi-key-star color-yellow-7',
   'img foreign-key': 'mdi mdi-key-link',
   'img sql-file': 'mdi mdi-file',
-  'img shell': 'mdi mdi-flash color-blue-icon',
+  'img shell': 'mdi mdi-flash color-blue-7',
 
-  'img free-table': 'mdi mdi-table color-green-icon',
+  'img free-table': 'mdi mdi-table color-green-7',
   'img macro': 'mdi mdi-hammer-wrench',
 
-  'img database': 'mdi mdi-database color-yellow-icon',
-  'img table': 'mdi mdi-table color-blue-icon',
-  'img view': 'mdi mdi-table color-magenta-icon',
-  'img procedure': 'mdi mdi-cog color-blue-icon',
+  'img database': 'mdi mdi-database color-yellow-7',
+  'img table': 'mdi mdi-table color-blue-7',
+  'img view': 'mdi mdi-table color-magenta-7',
+  'img procedure': 'mdi mdi-cog color-blue-7',
   'img function': 'mdi mdi-function-variant',
 
   'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',

packages/web/src/theme/dark.js

@@ -2,7 +2,7 @@ import fillTheme from './fillTheme';
 
 const theme = {
   main_type: 'dark',
-  main_background: '#fff',
+  main_background: '#444',
 
   fontWhite1: '#ddd',
 
@@ -26,8 +26,7 @@ const theme = {
   modal_background: '#222',
   modalheader_background: '#555',
   button_background: '#337ab7',
-
-  statusBarBackground: '#00c',
+  statusbar_background: '#00c',
 };
 
 export default fillTheme(theme);

packages/web/src/theme/fillTheme.js

@@ -74,6 +74,10 @@ function fillThemeCore(theme) {
       fillOne(theme, name, type, add, background, 'fontWhite', 'fontBlack', lightenByTenth, presetDarkPalettes);
     }
   }
+
+  if (add.main_type == 'dark') add.main_palettes = presetDarkPalettes;
+  else add.main_palettes = presetPalettes;
+
   return {
     ...add,
     ...theme,

packages/web/src/theme/light.js

@@ -25,8 +25,7 @@ const theme = {
   modal_background: '#fff',
   modalheader_background: '#eff',
   button_background: '#337ab7',
-
-  statusBarBackground: '#00c',
+  statusbar_background: '#00c',
 };
 
 export default fillTheme(theme);

packages/web/src/themes/ThemeHelmet.js

@@ -1,22 +1,13 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import useTheme from '../theme/useTheme';
+import _ from 'lodash';
 
 export default function ThemeHelmet() {
   const theme = useTheme();
   return (
     <Helmet>
       <style>{`
-        .color-red { color: red; }
-        .color-green { color: green; }
-        .color-on-statusbar-green { color: lime; }
-        .color-blue { color: blue; }
-
-        .color-blue-icon { color: #05A; }
-        .color-magenta-icon { color: #808 }
-        .color-yellow-icon { color: #880 }
-        .color-green-icon { color: #0A3; }
-
         body {
           color: ${theme.main_font1};
         }
@@ -58,6 +49,12 @@ export default function ThemeHelmet() {
           color: ${theme.input_font1};
         }
 
+        ${_.flatten(
+          _.keys(theme.main_palettes).map((color) =>
+            theme.main_palettes[color].map((code, index) => `.color-${color}-${index + 1} { color: ${code} }`)
+          )
+        ).join('\n')}
+
         `}</style>
     </Helmet>
   );

packages/web/src/widgets/LoadingInfo.js

@@ -2,6 +2,7 @@ import React from 'react';
 
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Container = styled.div`
   display: flex;
@@ -25,12 +26,13 @@ const LoadingInfoWrapper = styled.div`
   justify-content: space-around;
 `;
 const LoadingInfoBox = styled.div`
-  background-color: #ccc;
+  background-color: ${(props) => props.theme.main_background2};
   padding: 10px;
   border: 1px solid gray;
 `;
 
 export default function LoadingInfo({ message, wrapper = false }) {
+  const theme = useTheme();
   const core = (
     <Container>
       <Spinner>
@@ -42,7 +44,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   if (wrapper) {
     return (
       <LoadingInfoWrapper>
-        <LoadingInfoBox>{core}</LoadingInfoBox>
+        <LoadingInfoBox theme={theme}>{core}</LoadingInfoBox>
       </LoadingInfoWrapper>
     );
   } else {

packages/web/src/widgets/StatusBar.js

@@ -1,13 +1,14 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
 
 const Container = styled.div`
   display: flex;
-  color: white;
+  color: ${(props) => props.theme.statusbar_font1};
   align-items: stretch;
 `;
 
@@ -17,12 +18,25 @@ const Item = styled.div`
   //   flex-grow: 0;
 `;
 
+const ErrorWrapper = styled.span`
+  color: ${(props) =>
+    // @ts-ignore
+    props.theme.statusbar_font_red[5]};
+`;
+
+const InfoWrapper = styled.span`
+  color: ${(props) =>
+    // @ts-ignore
+    props.theme.statusbar_font_green[5]};
+`;
+
 export default function StatusBar() {
   const { name, connection } = useCurrentDatabase() || {};
   const status = useDatabaseStatus(connection ? { conid: connection._id, database: name } : {});
   const { displayName, server, user, engine } = connection || {};
+  const theme = useTheme();
   return (
-    <Container>
+    <Container theme={theme}>
       {name && (
         <Item>
           <FontIcon icon="icon database" /> {name}
@@ -49,12 +63,18 @@ export default function StatusBar() {
           )}
           {status.name == 'ok' && (
             <>
-              <FontIcon icon="img statusbar-ok" /> Connected
+              <InfoWrapper theme={theme}>
+                <FontIcon icon="icon ok" />
+              </InfoWrapper>{' '}
+              Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <FontIcon icon="img red-error" /> Error
+              <ErrorWrapper theme={theme}>
+                <FontIcon icon="icon error" />
+              </ErrorWrapper>{' '}
+              Error
             </>
           )}
         </Item>