form buttons styling

packages/web/src/modals/ConfirmSqlModal.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import axios from '../utility/axios';
 import ModalBase from './ModalBase';
-import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { FormRow, FormButtonRow, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import FormStyledButton from '../widgets/FormStyledButton';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 import SqlEditor from '../sqleditor/SqlEditor';
 // import FormikForm from '../utility/FormikForm';
 import styled from 'styled-components';
+import keycodes from '../utility/keycodes';
 
 const SqlWrapper = styled.div`
   position: relative;
@@ -15,24 +17,30 @@ const SqlWrapper = styled.div`
 `;
 
 export default function ConfirmSqlModal({ modalState, sql, engine, onConfirm }) {
+  const handleKeyDown = (data, hash, keyString, keyCode, event) => {
+    if (keyCode == keycodes.enter) {
+      event.preventDefault();
+      modalState.close();
+      onConfirm();
+    }
+  };
   return (
     <ModalBase modalState={modalState}>
       <h2>Save changes</h2>
       <SqlWrapper>
-        <SqlEditor value={sql} engine={engine} readOnly />
+        <SqlEditor value={sql} engine={engine} focusOnCreate onKeyDown={handleKeyDown} readOnly />
       </SqlWrapper>
 
-      <FormRow>
-        <input
-          type="button"
+      <FormButtonRow>
+        <FormStyledButton
           value="OK"
           onClick={() => {
             modalState.close();
             onConfirm();
           }}
         />
-        <input type="button" value="Close" onClick={modalState.close} />
-      </FormRow>
+        <FormStyledButton type="button" value="Close" onClick={modalState.close} />
+      </FormButtonRow>
     </ModalBase>
   );
 }

packages/web/src/modals/ConnectionModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from '../utility/axios';
 import ModalBase from './ModalBase';
-import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 // import FormikForm from '../utility/FormikForm';
@@ -37,10 +37,10 @@ export default function ConnectionModal({ modalState, connection = undefined })
           <FormTextField label="Password" name="password" />
           <FormTextField label="Display name" name="displayName" />
 
-          <FormRow>
+          <FormButtonRow>
             <FormButton text="Test" onClick={handleTest} />
             <FormSubmit text="Save" />
-          </FormRow>
+          </FormButtonRow>
         </Form>
       </Formik>
       <div>Connect result: {sqlConnectResult}</div>

packages/web/src/modals/ModalBase.js

@@ -27,6 +27,7 @@ const StyledModal = styled(Modal)`
   padding: 20px;
 
   width: 50%;
+  max-width: 900px;
   margin: auto;
   margin-top: 15vh;
 `;

packages/web/src/modals/SaveSqlFileModal.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import axios from '../utility/axios';
 import ModalBase from './ModalBase';
-import { FormRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
+import { FormButtonRow, FormButton, FormTextField, FormSelectField, FormSubmit } from '../utility/forms';
 import { TextField } from '../utility/inputs';
 import { Formik, Form } from 'formik';
 import { useSetSavedSqlFiles } from '../utility/globalState';
@@ -28,9 +28,9 @@ export default function SaveSqlFileModal({ storageKey, modalState, name, onSave
         <Form>
           <FormTextField label="File name" name="name" />
 
-          <FormRow>
+          <FormButtonRow>
             <FormSubmit text="Save" />
-          </FormRow>
+          </FormButtonRow>
         </Form>
       </Formik>
     </ModalBase>

packages/web/src/sqleditor/SqlEditor.js

@@ -25,6 +25,7 @@ export default function SqlEditor({
   tabVisible = false,
   onKeyDown = undefined,
   editorRef = undefined,
+  focusOnCreate = false,
 }) {
   const [containerRef, { height, width }] = useDimensions();
   const ownEditorRef = React.useRef(null);
@@ -32,8 +33,9 @@ export default function SqlEditor({
   const currentEditorRef = editorRef || ownEditorRef;
 
   React.useEffect(() => {
-    if (tabVisible && currentEditorRef.current && currentEditorRef.current.editor) currentEditorRef.current.editor.focus();
-  }, [tabVisible]);
+    if ((tabVisible || focusOnCreate) && currentEditorRef.current && currentEditorRef.current.editor)
+      currentEditorRef.current.editor.focus();
+  }, [tabVisible, focusOnCreate]);
 
   React.useEffect(() => {
     if (onKeyDown && currentEditorRef.current) {

packages/web/src/utility/forms.js

@@ -2,12 +2,19 @@ import React from 'react';
 import styled from 'styled-components';
 import { TextField, SelectField } from './inputs';
 import { Field, useFormikContext } from 'formik';
+import FormStyledButton from '../widgets/FormStyledButton';
 
 export const FormRow = styled.div`
   display: flex;
   margin: 10px;
 `;
 
+export const FormButtonRow = styled.div`
+  display: flex;
+  // justify-content: flex-end;
+  margin: 10px;
+`;
+
 export const FormLabel = styled.div`
   width: 10vw;
   font-weight: bold;
@@ -40,10 +47,10 @@ export function FormSelectField({ label, children, ...other }) {
 }
 
 export function FormSubmit({ text }) {
-  return <input type="submit" value={text} />;
+  return <FormStyledButton type="submit" value={text} />;
 }
 
 export function FormButton({ text, onClick, ...other }) {
   const { values } = useFormikContext();
-  return <input type="button" value={text} onClick={() => onClick(values)} {...other} />;
+  return <FormStyledButton type="button" value={text} onClick={() => onClick(values)} {...other} />;
 }

packages/web/src/widgets/FormStyledButton.js

@@ -0,0 +1,61 @@
+// @ts-nocheck
+import React from 'react';
+import styled from 'styled-components';
+import theme from '../theme';
+
+const ButtonInput = styled.input`
+  // height: ${theme.toolBar.height - 5}px;
+   border: 1px solid #2e6da4;
+  padding: 5px;
+  margin: 2px;
+  width: 100px;
+  //background-color: #777;
+  background-color: #337ab7;
+  // border-color: #2e6da4; 
+  color: white;
+  border-radius: 2px;
+
+  ${(props) =>
+    !props.disabled &&
+    `
+  &:hover {
+    background-color: #286090;
+  }
+
+  &:active:hover {
+    background-color: #204d74;
+  }
+  `}
+
+  ${(props) =>
+    props.disabled &&
+    `
+    background-color: #ccc;
+    color: gray;
+  `}
+  
+`;
+
+export default function FormStyledButton({
+  onClick = undefined,
+  type = 'button',
+  value,
+  disabled = undefined,
+  ...other
+}) {
+  return (
+    <ButtonInput
+      type={type}
+      onClick={
+        onClick
+          ? () => {
+              if (!disabled && onClick) onClick();
+            }
+          : undefined
+      }
+      disabled={disabled}
+      value={value}
+      {...other}
+    />
+  );
+}