connection modal style

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>
   );