modal styles

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>
-      <SqlWrapper>
-        <SqlEditor value={sql} engine={engine} focusOnCreate onKeyDown={handleKeyDown} readOnly />
-      </SqlWrapper>
+      <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,46 +4,51 @@ 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>
-          <FormSelectField label="Database engine" name="engine">
-            <option value="mssql">Microsoft SQL Server</option>
-            <option value="mysql">MySQL</option>
-            <option value="postgres">Postgre SQL</option>
-          </FormSelectField>
-          <FormTextField label="Server" name="server" />
-          <FormTextField label="Port" name="port" />
-          <FormTextField label="User" name="user" />
-          <FormTextField label="Password" name="password" />
-          <FormTextField label="Display name" name="displayName" />
+          <ModalContent>
+            <FormSelectField label="Database engine" name="engine">
+              <option value="mssql">Microsoft SQL Server</option>
+              <option value="mysql">MySQL</option>
+              <option value="postgres">Postgre SQL</option>
+            </FormSelectField>
+            <FormTextField label="Server" name="server" />
+            <FormTextField label="Port" name="port" />
+            <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>
-      <Wrapper>
-        <IconWrapper>
-          <FontIcon icon="fas fa-times-circle red" />
-        </IconWrapper>
-        {message}
-      </Wrapper>
-      <FormButtonRow>
+      <ModalHeader modalState={modalState}>{title}</ModalHeader>
+      <ModalContent>
+        <Wrapper>
+          <IconWrapper>
+            <FontIcon icon="fas fa-times-circle red" />
+          </IconWrapper>
+          {message}
+        </Wrapper>
+      </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>
-          <FormTextField label="File name" name="name" />
-
-          <FormButtonRow>
+          <ModalContent>
+            <FormTextField label="File name" name="name" />
+          </ModalContent>
+          <ModalFooter>
             <FormSubmit text="Save" />
-          </FormButtonRow>
+          </ModalFooter>
         </Form>
       </Formik>
     </ModalBase>