modal styles

packages/web/src/index.css

@@ -1,5 +1,6 @@
 body {
-  font-family: -apple-system,BlinkMacSystemFont,Segoe WPC,Segoe UI,HelveticaNeue-Light,Ubuntu,Droid Sans,sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, Segoe WPC, Segoe UI, HelveticaNeue-Light, Ubuntu, Droid Sans,
+    sans-serif;
   font-size: 14px;
   /* font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,6 +11,14 @@ body {
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+.RactModalOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #00000080;
 }

packages/web/src/modals/ConfirmModal.js

@@ -1,19 +1,15 @@
 import React from 'react';
 import ModalBase from './ModalBase';
-import { FormButtonRow } from '../utility/forms';
 import FormStyledButton from '../widgets/FormStyledButton';
-import styled from 'styled-components';
-
-const MessageWrapper = styled.div`
-  margin: 20px;
-`;
+import ModalFooter from './ModalFooter';
+import ModalContent from './ModalContent';
 
 export default function ConfirmModal({ message, modalState, onConfirm }) {
   return (
     <ModalBase modalState={modalState}>
-      <MessageWrapper>{message}</MessageWrapper>
+      <ModalContent>{message}</ModalContent>
 
-      <FormButtonRow>
+      <ModalFooter>
         <FormStyledButton
           value="OK"
           onClick={() => {
@@ -22,7 +18,7 @@ export default function ConfirmModal({ message, modalState, onConfirm }) {
           }}
         />
         <FormStyledButton type="button" value="Close" onClick={modalState.close} />
-      </FormButtonRow>
+      </ModalFooter>
     </ModalBase>
   );
 }

packages/web/src/modals/ConfirmSqlModal.js

@@ -5,6 +5,9 @@ import FormStyledButton from '../widgets/FormStyledButton';
 import SqlEditor from '../sqleditor/SqlEditor';
 import styled from 'styled-components';
 import keycodes from '../utility/keycodes';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
 
 const SqlWrapper = styled.div`
   position: relative;
@@ -22,12 +25,14 @@ export default function ConfirmSqlModal({ modalState, sql, engine, onConfirm })
   };
   return (
     <ModalBase modalState={modalState}>
-      <h2>Save changes</h2>
+      <ModalHeader modalState={modalState}>Save changes</ModalHeader>
+      <ModalContent>
         <SqlWrapper>
           <SqlEditor value={sql} engine={engine} focusOnCreate onKeyDown={handleKeyDown} readOnly />
         </SqlWrapper>
+      </ModalContent>
 
-      <FormButtonRow>
+      <ModalFooter>
         <FormStyledButton
           value="OK"
           onClick={() => {
@@ -36,7 +41,7 @@ export default function ConfirmSqlModal({ modalState, sql, engine, onConfirm })
           }}
         />
         <FormStyledButton type="button" value="Close" onClick={modalState.close} />
-      </FormButtonRow>
+      </ModalFooter>
     </ModalBase>
   );
 }

packages/web/src/modals/ConnectionModal.js

@@ -4,28 +4,32 @@ import ModalBase from './ModalBase';
 import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
+import ModalHeader from './ModalHeader';
+import ModalFooter from './ModalFooter';
+import ModalContent from './ModalContent';
 // import FormikForm from '../utility/FormikForm';
 
 export default function ConnectionModal({ modalState, connection = undefined }) {
   const [sqlConnectResult, setSqlConnectResult] = React.useState('Not connected');
 
-  const handleTest = async values => {
+  const handleTest = async (values) => {
     const resp = await axios.post('connections/test', values);
     const { error, version } = resp.data;
 
     setSqlConnectResult(error || version);
   };
 
-  const handleSubmit = async values => {
+  const handleSubmit = async (values) => {
     const resp = await axios.post('connections/save', values);
 
     modalState.close();
   };
   return (
     <ModalBase modalState={modalState}>
-      <h2>{connection ? 'Edit connection' : 'Add connection'}</h2>
+      <ModalHeader modalState={modalState}>{connection ? 'Edit connection' : 'Add connection'}</ModalHeader>
       <Formik onSubmit={handleSubmit} initialValues={connection || { server: 'localhost', engine: 'mssql' }}>
         <Form>
+          <ModalContent>
             <FormSelectField label="Database engine" name="engine">
               <option value="mssql">Microsoft SQL Server</option>
               <option value="mysql">MySQL</option>
@@ -36,14 +40,15 @@ export default function ConnectionModal({ modalState, connection = undefined })
             <FormTextField label="User" name="user" />
             <FormTextField label="Password" name="password" />
             <FormTextField label="Display name" name="displayName" />
+            <div>Connect result: {sqlConnectResult}</div>
+          </ModalContent>
 
-          <FormButtonRow>
+          <ModalFooter>
             <FormButton text="Test" onClick={handleTest} />
             <FormSubmit text="Save" />
-          </FormButtonRow>
+          </ModalFooter>
         </Form>
       </Formik>
-      <div>Connect result: {sqlConnectResult}</div>
     </ModalBase>
   );
 }

packages/web/src/modals/ErrorMessageModal.js

@@ -4,6 +4,9 @@ import FormStyledButton from '../widgets/FormStyledButton';
 import styled from 'styled-components';
 import { FontIcon } from '../icons';
 import { FormButtonRow } from '../utility/forms';
+import ModalHeader from './ModalHeader';
+import ModalFooter from './ModalFooter';
+import ModalContent from './ModalContent';
 
 const Wrapper = styled.div`
 display:flex
@@ -18,16 +21,18 @@ const IconWrapper = styled.div`
 export default function ErrorMessageModal({ modalState, title = 'Error', message }) {
   return (
     <ModalBase modalState={modalState}>
-      <h2>{title}</h2>
+      <ModalHeader modalState={modalState}>{title}</ModalHeader>
+      <ModalContent>
         <Wrapper>
           <IconWrapper>
             <FontIcon icon="fas fa-times-circle red" />
           </IconWrapper>
           {message}
         </Wrapper>
-      <FormButtonRow>
+      </ModalContent>
+      <ModalFooter>
         <FormStyledButton type="button" value="Close" onClick={modalState.close} />
-      </FormButtonRow>
+      </ModalFooter>
     </ModalBase>
   );
 }

packages/web/src/modals/ModalBase.js

@@ -24,17 +24,34 @@ const StyledModal = styled(Modal)`
   webkitoverflowscrolling: touch;
   borderradius: 4px;
   outline: none;
-  padding: 20px;
 
   width: 50%;
   max-width: 900px;
   margin: auto;
   margin-top: 15vh;
+
+  // z-index:1200;
+`;
+
+const ModalContent = styled.div`
+  padding: 20px;
 `;
 
 export default function ModalBase({ modalState, children }) {
   return (
-    <StyledModal isOpen={modalState.isOpen} onRequestClose={modalState.close}>
+    <StyledModal
+      isOpen={modalState.isOpen}
+      onRequestClose={modalState.close}
+      overlayClassName="RactModalOverlay"
+      // style={{
+      //   overlay: {
+      //     backgroundColor: '#000',
+      //     opacity: 0.5,
+      //     zIndex: 1000,
+      //   },
+      //   zIndex: 1200,
+      // }}
+    >
       {children}
     </StyledModal>
   );

packages/web/src/modals/ModalContent.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  padding: 15px;
+`;
+
+export default function ModalContent({ children }) {
+  return <Wrapper>{children}</Wrapper>;
+}

packages/web/src/modals/ModalFooter.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  border-bottom: 1px solid #ccc;
+  padding: 15px;
+`;
+
+export default function ModalFooter({ children }) {
+  return <Wrapper>{children}</Wrapper>;
+}

packages/web/src/modals/ModalHeader.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  font-size: 15pt;
+  padding: 15px;
+  display: flex;
+  justify-content: space-between;
+`;
+
+const CloseWrapper = styled.div`
+  font-size: 12pt;
+  &:hover {
+    background-color: #blue;
+  }
+`;
+
+export default function ModalHeader({ children, modalState }) {
+  return (
+    <Wrapper>
+      <div>{children}</div>
+      <CloseWrapper onClick={modalState.close}>
+        <i className="fas fa-times" />
+      </CloseWrapper>
+    </Wrapper>
+  );
+}

packages/web/src/modals/SaveSqlFileModal.js

@@ -5,6 +5,9 @@ import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit }
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 import { useSetSavedSqlFiles } from '../utility/globalState';
+import ModalHeader from './ModalHeader';
+import ModalContent from './ModalContent';
+import ModalFooter from './ModalFooter';
 // import FormikForm from '../utility/FormikForm';
 
 export default function SaveSqlFileModal({ storageKey, modalState, name, onSave = undefined }) {
@@ -23,14 +26,15 @@ export default function SaveSqlFileModal({ storageKey, modalState, name, onSave
   };
   return (
     <ModalBase modalState={modalState}>
-      <h2>Save SQL file</h2>
+      <ModalHeader modalState={modalState}>Save SQL file</ModalHeader>
       <Formik onSubmit={handleSubmit} initialValues={{ name }}>
         <Form>
+          <ModalContent>
             <FormTextField label="File name" name="name" />
-
-          <FormButtonRow>
+          </ModalContent>
+          <ModalFooter>
             <FormSubmit text="Save" />
-          </FormButtonRow>
+          </ModalFooter>
         </Form>
       </Formik>
     </ModalBase>