connection modal style

packages/web/src/modals/ConnectionModal.js

@@ -20,8 +20,9 @@ import { FormProvider, useForm } from '../utility/FormProvider';
 import { TabControl, TabPage } from '../widgets/TabControl';
 import { usePlatformInfo } from '../utility/metadataLoaders';
 import getElectron from '../utility/getElectron';
-import { FormFieldTemplateLarge } from '../utility/formStyle';
+import { FormFieldTemplateLarge, FormRowLarge } from '../utility/formStyle';
 import styled from 'styled-components';
+import { FlexCol3, FlexCol6, FlexCol9 } from '../utility/flexGrid';
 // import FormikForm from '../utility/FormikForm';
 
 const FlexContainer = styled.div`
@@ -79,10 +80,49 @@ function DriverFields({ extensions }) {
           ))}
         </FormSelectField>
       )}
-      <FormTextField label="Server" name="server" disabled={disabledFields.includes('server')} />
-      <FormTextField label="Port" name="port" disabled={disabledFields.includes('port')} />
-      <FormTextField label="User" name="user" disabled={disabledFields.includes('user')} />
-      <FormPasswordField label="Password" name="password" disabled={disabledFields.includes('password')} />
+      <FormRowLarge>
+        <FlexCol9
+          //@ts-ignore
+          marginRight={5}
+        >
+          <FormTextField
+            label="Server"
+            name="server"
+            disabled={disabledFields.includes('server')}
+            templateProps={{ noMargin: true }}
+          />
+        </FlexCol9>
+        <FlexCol3>
+          <FormTextField
+            label="Port"
+            name="port"
+            disabled={disabledFields.includes('port')}
+            templateProps={{ noMargin: true }}
+          />
+        </FlexCol3>
+      </FormRowLarge>
+      <FormRowLarge>
+        <FlexCol6
+          //@ts-ignore
+          marginRight={5}
+        >
+          <FormTextField
+            label="User"
+            name="user"
+            disabled={disabledFields.includes('user')}
+            templateProps={{ noMargin: true }}
+          />
+        </FlexCol6>
+        <FlexCol6>
+          <FormPasswordField
+            label="Password"
+            name="password"
+            disabled={disabledFields.includes('password')}
+            templateProps={{ noMargin: true }}
+          />
+        </FlexCol6>
+      </FormRowLarge>
+
       {!disabledFields.includes('password') && (
         <FormSelectField label="Password mode" name="passwordMode">
           <option value="saveEncrypted">Save and encrypt</option>
@@ -111,8 +151,17 @@ function SshTunnelFields() {
   return (
     <>
       <FormCheckboxField label="Use SSH tunnel" name="useSshTunnel" />
-      <FormTextField label="Host" name="sshHost" disabled={!useSshTunnel} />
-      <FormTextField label="Port" name="sshPort" disabled={!useSshTunnel} />
+      <FormRowLarge>
+        <FlexCol9
+          //@ts-ignore
+          marginRight={5}
+        >
+          <FormTextField label="Host" name="sshHost" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+        </FlexCol9>
+        <FlexCol3>
+          <FormTextField label="Port" name="sshPort" disabled={!useSshTunnel} templateProps={{ noMargin: true }} />
+        </FlexCol3>
+      </FormRowLarge>
       <FormTextField label="Bastion host (Jump host)" name="sshBastionHost" disabled={!useSshTunnel} />
 
       <FormSelectField label="SSH Authentication" name="sshMode" disabled={!useSshTunnel}>
@@ -126,11 +175,27 @@ function SshTunnelFields() {
       {sshMode == 'userPassword' && <FormPasswordField label="Password" name="sshPassword" disabled={!useSshTunnel} />}
 
       {sshMode == 'keyFile' && (
-        <FormElectronFileSelector label="Private key file" name="sshKeyfile" disabled={!useSshTunnel} />
-      )}
-
-      {sshMode == 'keyFile' && (
-        <FormPasswordField label="Key file passphrase" name="sshKeyfilePassword" disabled={!useSshTunnel} />
+        <FormRowLarge>
+          <FlexCol6
+            //@ts-ignore
+            marginRight={5}
+          >
+            <FormElectronFileSelector
+              label="Private key file"
+              name="sshKeyfile"
+              disabled={!useSshTunnel}
+              templateProps={{ noMargin: true }}
+            />
+          </FlexCol6>
+          <FlexCol6>
+            <FormPasswordField
+              label="Key file passphrase"
+              name="sshKeyfilePassword"
+              disabled={!useSshTunnel}
+              templateProps={{ noMargin: true }}
+            />
+          </FlexCol6>
+        </FormRowLarge>
       )}
 
       {useSshTunnel && sshMode == 'agent' && (

packages/web/src/utility/flexGrid.js

@@ -0,0 +1,73 @@
+// @ts-nocheck
+import styled from 'styled-components';
+
+export const FlexCol3 = styled.div`
+  flex-basis: 25%;
+  max-width: 25%;
+  ${props =>
+    !!props.marginRight &&
+    `
+  margin-right: ${props.marginRight}px;
+  `}
+  ${props =>
+    !!props.marginLeft &&
+    `
+  margin-left: ${props.marginLeft}px;
+  `}
+`;
+export const FlexCol4 = styled.div`
+  flex-basis: 33.3333%;
+  max-width: 33.3333%;
+  ${props =>
+    !!props.marginRight &&
+    `
+  margin-right: ${props.marginRight}px;
+  `}
+  ${props =>
+    !!props.marginLeft &&
+    `
+  margin-left: ${props.marginLeft}px;
+  `}
+`;
+export const FlexCol6 = styled.div`
+  flex-basis: 50%;
+  max-width: 50%;
+  ${props =>
+    !!props.marginRight &&
+    `
+  margin-right: ${props.marginRight}px;
+  `}
+  ${props =>
+    !!props.marginLeft &&
+    `
+  margin-left: ${props.marginLeft}px;
+  `}
+`;
+export const FlexCol8 = styled.div`
+  flex-basis: 66.6667%;
+  max-width: 66.6667%;
+  ${props =>
+    !!props.marginRight &&
+    `
+  margin-right: ${props.marginRight}px;
+  `}
+  ${props =>
+    !!props.marginLeft &&
+    `
+  margin-left: ${props.marginLeft}px;
+  `}
+`;
+export const FlexCol9 = styled.div`
+  flex-basis: 75%;
+  max-width: 75%;
+  ${props =>
+    !!props.marginRight &&
+    `
+  margin-right: ${props.marginRight}px;
+  `}
+  ${props =>
+    !!props.marginLeft &&
+    `
+  margin-left: ${props.marginLeft}px;
+  `}
+`;

packages/web/src/utility/formStyle.js

@@ -55,8 +55,18 @@ export function FormFieldTemplateTiny({ label, children, onLabelClick, type }) {
   );
 }
 
+const FormRowLargeTemplate = styled.div`
+  ${props =>
+    // @ts-ignore
+    !props.noMargin &&
+    `
+  margin: 20px;
+  `}
+`;
+
 export const FormRowLarge = styled.div`
   margin: 20px;
+  display: flex;
 `;
 
 export const FormLabelLarge = styled.div`
@@ -66,21 +76,28 @@ export const FormLabelLarge = styled.div`
 
 export const FormValueLarge = styled.div``;
 
-export function FormFieldTemplateLarge({ label, onLabelClick, children, type }) {
+export function FormFieldTemplateLarge({ label, onLabelClick, children, type, noMargin = false }) {
   const theme = useTheme();
   if (type == 'checkbox') {
     return (
-      <FormRowLarge>
+      <FormRowLargeTemplate
+        // @ts-ignore
+        noMargin={noMargin}
+      >
         {children} <span onClick={onLabelClick}>{label}</span>
-      </FormRowLarge>
+      </FormRowLargeTemplate>
     );
   }
   return (
-    <FormRowLarge className="largeFormMarker">
+    <FormRowLargeTemplate
+      className="largeFormMarker"
+      // @ts-ignore
+      noMargin={noMargin}
+    >
       <FormLabelLarge theme={theme} onClick={onLabelClick}>
         {label}
       </FormLabelLarge>
       <FormValueLarge>{children}</FormValueLarge>
-    </FormRowLarge>
+    </FormRowLargeTemplate>
   );
 }

packages/web/src/utility/forms.js

@@ -83,19 +83,19 @@ export function FormPasswordFieldRaw({ name, focused = false, ...other }) {
   );
 }
 
-export function FormTextField({ name, label, focused = false, ...other }) {
+export function FormTextField({ name, label, focused = false, templateProps = undefined, ...other }) {
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="text">
+    <FieldTemplate label={label} type="text" {...templateProps}>
       <FormTextFieldRaw name={name} focused={focused} {...other} />
     </FieldTemplate>
   );
 }
 
-export function FormPasswordField({ name, label, focused = false, ...other }) {
+export function FormPasswordField({ name, label, focused = false, templateProps = undefined, ...other }) {
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="text">
+    <FieldTemplate label={label} type="text" {...templateProps}>
       <FormPasswordFieldRaw name={name} focused={focused} {...other} />
     </FieldTemplate>
   );
@@ -112,11 +112,16 @@ export function FormCheckboxFieldRaw({ name = undefined, defaultValue = undefine
   // return <Field {...other} as={CheckboxField} />;
 }
 
-export function FormCheckboxField({ label, ...other }) {
+export function FormCheckboxField({ label, templateProps = undefined, ...other }) {
   const { values, setFieldValue } = useForm();
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="checkbox" onLabelClick={() => setFieldValue(other.name, !values[other.name])}>
+    <FieldTemplate
+      label={label}
+      type="checkbox"
+      onLabelClick={() => setFieldValue(other.name, !values[other.name])}
+      {...templateProps}
+    >
       <FormCheckboxFieldRaw {...other} />
     </FieldTemplate>
   );
@@ -134,10 +139,10 @@ export function FormSelectFieldRaw({ children, name, ...other }) {
   );
 }
 
-export function FormSelectField({ label, name, children = null, ...other }) {
+export function FormSelectField({ label, name, children = null, templateProps = undefined, ...other }) {
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="select">
+    <FieldTemplate label={label} type="select" {...templateProps}>
       <FormSelectFieldRaw name={name} {...other}>
         {children}
       </FormSelectFieldRaw>
@@ -353,10 +358,10 @@ export function FormElectronFileSelectorRaw({ name, ...other }) {
   );
 }
 
-export function FormElectronFileSelector({ label, name, ...other }) {
+export function FormElectronFileSelector({ label, name, templateProps = undefined, ...other }) {
   const FieldTemplate = useFormFieldTemplate();
   return (
-    <FieldTemplate label={label} type="select">
+    <FieldTemplate label={label} type="select" {...templateProps}>
       <FormElectronFileSelectorRaw name={name} {...other} />
     </FieldTemplate>
   );