theme - modals, react select, tables

packages/web/src/widgets/FormStyledButton.js

@@ -2,40 +2,40 @@
 import React from 'react';
 import styled from 'styled-components';
 import dimensions from '../theme/dimensions';
+import useTheme from '../theme/useTheme';
 
 const ButtonInput = styled.input`
   // height: ${dimensions.toolBar.height - 5}px;
-   border: 1px solid #2e6da4;
+  border: 1px solid ${(props) => props.theme.button_background2};
   padding: 5px;
   margin: 2px;
   width: 100px;
-  //background-color: #777;
-  background-color: #337ab7;
-  // border-color: #2e6da4; 
-  color: white;
+  background-color: ${(props) => props.theme.button_background};
+  color: ${(props) => props.theme.button_font1};
   border-radius: 2px;
 
   ${(props) =>
     !props.disabled &&
     `
   &:hover {
-    background-color: #286090;
+    background-color: ${props.theme.button_background2};
   }
 
   &:active:hover {
-    background-color: #204d74;
+    background-color: ${props.theme.button_background3};
   }
   `}
 
   ${(props) =>
     props.disabled &&
     `
-    background-color: #ccc;
-    color: gray;
+    background-color: ${props.theme.button_background3};
+    color: ${props.theme.button_font3} ;
   `}
-  
 `;
 
+// ${props.theme.button_background_gray[1]};
+
 export default function FormStyledButton({
   onClick = undefined,
   type = 'button',
@@ -43,9 +43,11 @@ export default function FormStyledButton({
   disabled = undefined,
   ...other
 }) {
+  const theme = useTheme();
   return (
     <ButtonInput
       type={type}
+      theme={theme}
       onClick={
         onClick
           ? () => {

packages/web/src/widgets/Splitter.js

@@ -28,11 +28,11 @@ const HorizontalMainContainer = styled(SplitterMainBase)`
 `;
 
 export const VerticalSplitHandle = styled.div`
-background-color: ${(props) => props.theme.border};
-height: ${dimensions.splitter.thickness}px;
+  background-color: ${(props) => props.theme.border};
+  height: ${dimensions.splitter.thickness}px;
   cursor: row-resize;
   &:hover {
-    background-color: #aaa;
+    background-color: ${(props) => props.theme.border_background2};
   }
 `;
 
@@ -41,7 +41,7 @@ export const HorizontalSplitHandle = styled.div`
   width: ${dimensions.splitter.thickness}px;
   cursor: col-resize;
   &:hover {
-    background-color: #aaa;
+    background-color: ${(props) => props.theme.border_background2};
   }
 `;
 

packages/web/src/widgets/Toolbar.js

@@ -108,7 +108,7 @@ export default function ToolBar({ toolbarPortalRef }) {
         Import data
       </ToolbarButton>
       <ToolbarButton onClick={switchTheme} icon="icon theme">
-        Switch theme
+        {currentTheme == 'dark' ? 'Light mode' : 'Dark mode'}
       </ToolbarButton>
 
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>

packages/web/src/widgets/WidgetColumnBar.js

@@ -9,6 +9,7 @@ import {
 } from './WidgetStyles';
 import { VerticalSplitHandle, useSplitterDrag } from './Splitter';
 import useDimensions from '../utility/useDimensions';
+import useTheme from '../theme/useTheme';
 
 export function WidgetColumnBarItem({ title, children, name, height = undefined, collapsed = false }) {
   return <></>;
@@ -16,6 +17,7 @@ export function WidgetColumnBarItem({ title, children, name, height = undefined,
 
 function WidgetContainer({ widget, visible, splitterVisible, parentHeight, initialSize = undefined }) {
   const [size, setSize] = React.useState(null);
+  const theme = useTheme();
 
   const handleResizeDown = useSplitterDrag('clientY', (diff) => setSize((v) => v + diff));
 
@@ -33,7 +35,7 @@ function WidgetContainer({ widget, visible, splitterVisible, parentHeight, initi
       <WidgetsOuterContainer style={splitterVisible ? { height: size } : null}>
         {widget.props.children}
       </WidgetsOuterContainer>
-      {splitterVisible && <VerticalSplitHandle onMouseDown={handleResizeDown} />}
+      {splitterVisible && <VerticalSplitHandle onMouseDown={handleResizeDown} theme={theme} />}
     </>
   );
 }