theme - modals, react select, tables

packages/web/src/modals/ImportExportModal.js

@@ -15,6 +15,7 @@ import axios from '../utility/axios';
 import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
 import SocketMessagesView from '../query/SocketMessagesView';
 import RunnerOutputFiles from '../query/RunnerOuputFiles';
+import useTheme from '../theme/useTheme';
 
 const headerHeight = '60px';
 const footerHeight = '60px';
@@ -72,9 +73,9 @@ const Footer = styled.div`
   left: 0;
   right: 0;
   bottom: 0px;
-  background-color: #eeffff;
+  background-color: ${(props) => props.theme.modalheader_background};
 
-  border-top: 1px solid #ccc;
+  border-top: 1px solid ${(props) => props.theme.border};
   // padding: 15px;
 `;
 
@@ -106,6 +107,7 @@ export default function ImportExportModal({ modalState, initialValues, uploadedF
   const [executeNumber, setExecuteNumber] = React.useState(0);
   const [runnerId, setRunnerId] = React.useState(null);
   const archive = useCurrentArchive();
+  const theme = useTheme();
 
   const handleExecute = async (values) => {
     const script = await createImpExpScript(values);
@@ -153,7 +155,7 @@ export default function ImportExportModal({ modalState, initialValues, uploadedF
               </WidgetColumnBar>
             </WidgetColumnWrapper>
           </Wrapper>
-          <Footer>
+          <Footer theme={theme}>
             <FooterButtons>
               <FormStyledButton type="submit" value="Run" />
               <GenerateSctriptButton modalState={modalState} />

packages/web/src/modals/ModalBase.js

@@ -19,8 +19,8 @@ import useTheme from '../theme/useTheme';
 // `;
 
 const StyledModal = styled(Modal)`
-  border: 1px solid #ccc;
-  background: #fff;
+  border: 1px solid ${(props) => props.theme.border};
+  background: ${(props) => props.theme.modal_background};
   overflow: auto;
   webkitoverflowscrolling: touch;
   outline: none;
@@ -64,6 +64,7 @@ export default function ModalBase({ modalState, children, isFlex = false, fullSc
   const theme = useTheme();
   return (
     <StyledModal
+      theme={theme}
       isOpen={modalState.isOpen}
       onRequestClose={modalState.close}
       overlayClassName="RactModalOverlay"

packages/web/src/modals/ModalFooter.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;
   padding: 15px;
-  background-color: #eeffff;
+  background-color: ${(props) => props.theme.modalheader_background};
 `;
 
 export default function ModalFooter({ children }) {
-  return <Wrapper>{children}</Wrapper>;
+  const theme = useTheme();
+  return <Wrapper theme={theme}>{children}</Wrapper>;
 }

packages/web/src/modals/ModalHeader.js

@@ -1,29 +1,31 @@
 import React from 'react';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
+import useTheme from '../theme/useTheme';
 
 const Wrapper = styled.div`
   font-size: 15pt;
   padding: 15px;
   display: flex;
   justify-content: space-between;
-  background-color: #eeffff;
+  background-color: ${(props) => props.theme.modalheader_background};
 `;
 
 const CloseWrapper = styled.div`
   font-size: 12pt;
   &:hover {
-    background-color: #ccccff;
+    background-color: ${(props) => props.theme.modalheader_background2};
   }
   padding: 5px 10px;
-  border-radius: 10px; 
+  border-radius: 10px;
 `;
 
 export default function ModalHeader({ children, modalState }) {
+  const theme = useTheme();
   return (
-    <Wrapper>
+    <Wrapper theme={theme}>
       <div>{children}</div>
-      <CloseWrapper onClick={modalState.close}>
+      <CloseWrapper onClick={modalState.close} theme={theme}>
         <FontIcon icon="icon close" />
       </CloseWrapper>
     </Wrapper>